[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.