[Powered by Google Translate] [CSS]
[Joseph Ong - Harvardi Ülikool]
[See on CS50. - CS50.TV]
>> Täna me räägime CSS või kaskaadlaadistik.
>> Mis täpselt on CSS?
Noh, olgem murda sõna CSS alla 2 osaks:
Cascading ja Style Sheets.
Kaskoodlülitus on natuke keerulisem, ja see on midagi, me katta teise video.
Aga starterid, Style Sheets väga palju näpunäiteid, mida CSS teeb.
Ta lisab stiili HTML veebilehe
muutumas, kuidas veebileht esteetiliselt välja.
See tähendab kõike kirjas teksti paigutus lehe sisu
teiste lahedaid asju nagu teeb nurkades kasti ümarad või lisada varje, et tekst.
Võite isegi hulle asju nagu asjad animeerida ekraanil.
>> Niisiis, kuidas me kasutame CSS HTML?
Võtke see vaene ilmega saidi ma lihtsalt kirjutasin.
Kui Rob oli vaadata seda saidi just nüüd, ta tahaks ilmselt öelda midagi,
"Wow! Minu sissejuhatus tundub kohutav. Joseph, sa oled kohutav disainer."
"Kasutades vaikimisi kiri Times? Helvetica on nii palju parem."
>> Nii et milline võiks olla lihtsaim viis kohaldada stiil Rob tahab?
Kõige ilmsem nii palju inimesi algselt kirjutas CSS
oli panna mida me kutsume stiili deklaratsioonid otse element ise
kasutades HTML style atribuut.
Stiili avaldus lihtsalt koosneb HTML elemendi CSS vara tahame muuta
järgneb koolon järgneb uus vara väärtus ja semikoolon lõpus.
Näiteks oletame, et Rob tahab musta raami ümber oma sissejuhatuses.
Me esimest korda stiili atribuudi Rob div siin
siis sees jutumärgid panna CSS deklaratsioon:
"Border: 1px solid must;"
1 piksel tähistab Äärise laius, tahke viitab stiil piiri,
ja värv lõpus määrab, millised piiri värv on.
>> Kui me tahame, mitu stiile element, kirjutage need deklaratsioonid järjekorras.
Näiteks, kui Rob tahab oma päise teksti Helvetica sinisel taustal
ja rohkem ruumi ümber teksti, me saame seda teha:
style = "font-family: Helvetica; background-color: blue; polster: 5px;"
Viimase semikoolon on tegelikult kohustuslik, kuid inimesed tavaliselt hoida seda ühtluse huvides.
>> Me päästame selgitades mõned jahedam ja keerulisem CSS omadused
teise video.
Kui teil on midagi meeles, lihtsalt Google'i abil soovitud efekti järgneb CSS
ilmselt teile päris häid tulemusi.
Lahe asi on see, et CSS on päris lai,
nii koefitsiendid on, kas on midagi mida sa teha tahad - mõistlikkuse piirides -
CSS saab ilmselt teha.
Me nimetame seda liiki stiil inline stiili.
Element stiil on hästi kooskõlas sildi algust.
>> Sest inimesed, kes tõesti korraldatakse,
võite alustada saada veidi pahane, kuidas räpane see kõik tundub.
Kujutage ette, kui teil oleks seda teha iga element lehel
pluss nüüd oma HTML ja CSS on kõik intermixed ja täis.
Gross, eks?
Selle parandamiseks inimesed lõpuks hakkasid jõuavad edasi eraldades oma HTML Markup
oma CSS stiili kasutades midagi, mida nimetatakse CSS lülitid.
CSS lülitid kasutatakse valida elemente, mis deklaratsioonide kohaldamise.
Valijat koos nimekirja CSS deklaratsioonid on sageli nimetatud CSS reegel.
Need reeglid pannakse vahel avada ja sulgeda HTML stiilis sildid,
sageli peas dokument.
>> See on palju lihtsam näha, näiteks
nii alustame luues lihtsa CSS reegel.
Esiteks paneme stiilis sildid peas osa meie HTML.
Järgmiseks valijat.
Me alustad kasutades üks lihtsamaid selektorid, räsi sümbol,
mis valib HTML element oma ID atribuut.
Sel juhul me valida div mis tähistab Rob kasutuselevõttu
kirjutades räsi sümbol järgneb div ID, Rob.
Nüüd deklaratsioonid.
Lisame avada ja sulgeda traksid ja suunata meie varasem inline deklaratsioonid Rob div
sees need traksid, värskenda,
ja lahe, Rob intro ikka on musta raami ümber miinus räpane inline inetus.
>> Nüüd, aga kui me tahtsime valida h1 sees Rob intro?
Te võite mõelda, "Paneme ID see ja seejärel liikuda meie varasem stiile."
See toimib, kuid CSS on muid viise, kuidas lastes teil valida elemente
abil, mida me nimetame combinators segada lihtne selektorid.
Näiteks tühimärk saab kasutada combinator
täpsustada kõigil juhtudel 1 valijat, kes elavad sees teise valiku.
See kõlab palju keerulisem kui see tegelikult on.
Siin on näide.
Me kirjuta # röövida, tühiku ja järgige seda h1,
Teine lihtne valija nimega silt valijat, mis valib liiki tegureid
nagu divs või punktid.
Ruumi ühendab meie 2 lihtne selektorid, rakendatakse kõiki CSS deklaratsioonid
ja lokkis traksid h1 sildid, mis elada sees elemendi id = "Rob".
Lihtsalt veenda, et see toimib, ma muuta fondi värvi valge, värskenda,
ja, vaata, Rob päises on nüüd valge.
>> Kõik see töö näitab, et kasutades eeskirjade asemel inline stiile
saame palju puhtam kood.
Tegelikult, kui seda stiili blokeerida hakkab üha natuke suur,
Võin isegi tõmba need stiilid viidud erinevate faili kokku.
>> Et lisada see uus fail CSS selles dokumendis ma lihtsalt kasutada HTML on link tag.
Siin ma ütlen seda, et ma ühendamiseks välise laadilehe, rel atribuut,
ja täpsustatakse tee failini minu href atribuut.
Nüüd minu HTML Markup ja CSS on korraldatud kenasti täiesti eraldi failidena,
mis on peaaegu alati nii disainerid eelistavad koostööd HTML ja CSS.
>> Kui sa ei tea, lihtne selektorid hulka ID selektorid
ja tag selektorid nagu need, mida me just nägime
samuti klassi selektorid valimise elemente teatud klassi,
atribuut selektorid valimise elemendid muid atribuute nagu type = "radio"
jaoks nupp sisendite ja pseudoselectors nagu hõljuma ja suunata
täpsustamiseks stiil kui koostoimeid meeldib üht hiirega üle osa tekkida.
>> Ühine combinators hulka tühik kõikidele lastele
ja komad eristada selektorid.
Teised võivad ilmneda hulka nool otse lastele ainult,
tilde kõikide õdede-vendade, mis ilmnevad pärast element,
ja plussmärki aasta 1. vend, et tuleb kohe pärast element.
>> Kombineerides need valijad ja combinators,
saate laiendada nende hulka stiil võite saavutada edasi antud lehele
ja kirjutada CSS tõhusamalt.
Vaid paar rida CSS näed mind kirjutama siin,
Võin kiiresti teha midagi sellist välja nägema midagi sellist.
>> Ma olen Joosep, ja see on CS50.
>> [CS50.TV]
>> Uh, kui ma alustan?
Lubage mul teha ilma - [naerab] Okei.
Lisa - Lubage mul seda muuta sõnastust.
Ooh. Vabandust.