[Powered by Google Translate] [CSS] [Joseph Ong - Harvard University] [See on CS50. - CS50.TV] 

Täna me räägime CSS või kaskaadlaadistik. 

Mis täpselt on CSS? Noh, olgem murda mõiste CSS jaguneb 2 osad: CSS ja Style Sheets. Kaskoodlülitus on natuke keerulisem, ja see on midagi, mida me katta teise video. Aga starterid, Style Sheets väga palju vihjeid, mida CSS teeb. Ta lisab stiili HTML veebilehe muutumas, kuidas veebileht esteetiliselt paistab. 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 teha asju animeerida ekraanil. 

Niisiis, kuidas me kasutame CSS HTML? Võtke see vaene ilmega saidi Ma kirjutasin. Kui Rob oli vaadata selle saidi just nüüd, ta tahaks ilmselt öelda midagi sellist, "Wow! Minu sissejuhatus tundub kohutav. Joseph, sa oled kohutav disainer." "Kasutades vaikimisi Times? Helvetica on nii palju parem." 

Niisiis, milline võiks olla lihtsam kohaldada stiil Rob tahab? Kõige ilmsem viis palju inimesi algselt kirjutas CSS oli panna, mida me nimetame stiili deklaratsioonid õige 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 style atribuut Rob div siin siis sees jutumärgid panna CSS deklaratsioon: "Border: 1px solid black;" 1 piksel tähistab laiuse piiri, tahke viitab stiilis piiri ja värv on lõpuks määrab, mida 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 teksti ümber, me saame seda teha: style = "font-family: Helvetica; background-color: blue, polster: 5px;" Viimane semikoolon on tegelikult kohustuslik, kuid inimesed tavaliselt hoida seda järjepidevuse huvides. 

Hoiame selgitades mõned jahedam ja keerulisem CSS omadused teise video. Kui teil on midagi meeles, just Google'i abil soovitud efekti järgneb CSS Tõenäoliselt annab teile päris häid tulemusi. Lahe asi on see, et CSS on üsna lai, nii koefitsiendid on, kas on midagi mida sa teha tahad - mõistlikkuse piires - CSS saab ilmselt teha. Me nimetame seda liiki stiil inline stiili. Element stiil on hästi, mis on kooskõlas sildi algust. 

Sest inimesed, kes tõesti korraldatakse, võite alustada saada natuke pahane, kuidas räpane see kõik välja. Kujutage ette, kui sa pidid seda tegema iga element lehel pluss nüüd oma HTML ja CSS on kõik segunenud ja kirjuks. Gross, eks? Selle parandamiseks, inimesed lõpuks hakkas kandepinda eraldab oma HTML Markup oma CSS stiili kasutades midagi, mida nimetatakse CSS valijad. CSS valijad on harjunud valima elementide deklaratsioonide sätteid. Valijat koos nimekirja CSS deklaratsioonid on sageli viidatud kui CSS reegel. Need reeglid pannakse vahel avada ja sulgeda HTML stiilis sildid, sageli peas dokumendi. 

See on palju lihtsam näha, kus näiteks Alustame luues lihtne CSS reegel. Esiteks paneme stiil silte pea osa meie HTML. Järgmiseks valijat. Me alustad kasutades üks lihtsamaid valijad, hash sümbol, mis valib HTML element oma ID atribuut. Sel juhul me valida div mis tähistab Rob kasutuselevõttu kirjutades hash sümbol järgneb div ID, Rob. Nüüd deklaratsioonid. Lisame avada ja sulgeda traksid ja suunata meie varem inline deklaratsioonid Rob div sees need traksid, värskenda, ja lahe, Rob intro on veel must raamiga miinus räpane inline inetus. 

Nüüd, aga kui me tahame, et valida h1 sees Rob intro? Te võite mõelda, "Paneme ID peal ja seejärel liikuda meie varasema stiili." See toimib, kuid CSS on muid võimalusi lastes teil valida elemente abil, mida me nimetame combinators segada lihtne valijad. Näiteks tühik võib kasutada combinator täpsustada kõik juhtumid 1 valijat, kes elavad sees teise asendisse. See kõlab palju keerulisemaks kui see tegelikult on. Siin on näide. Me kirjutada # röövida, lisage tühik ja selle järel h1, teine ​​lihtne valija kutsus tag valijat, mis valib liiki tegureid nagu divs või punktid. Ruumi ühendab meie 2 lihtne valijad, rakendades kõik CSS deklaratsioonid ja lokkis traksid h1 sildid, mis elada kodus elemendi id = "röövida". Lihtsalt, et veenda teid, et see toimib, ma muuta fondi värvi valge, refresh, ja vaata, Rob päises on nüüd valge. 

Kõik see töö näitab, et kasutades eeskirjade asemel inline stiile saame palju puhtama koodi. 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 link tag. Siin ma ütlen seda, et ma olen ühendamiseks välise laadilehe, rel atribuut, ja täpsustatakse tee fail 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. 

Juhul kui te ei tea, lihtne lülitid sisaldama ID lülitid ja tag valijad nagu need, mida me just nägin samuti klassi selektorid valimise elemente teatud klassi atribuut selektorid valimise elementide muid atribuute nagu type = "radio" jaoks nupp sisendite ja pseudoselectors nagu hõljuma ja keskenduma täpsustades stiil kui koostoimeid meeldib üht hiirega üle element tekkida. 

Ühine combinators hulka tühik kõikidele lastele ja komad eristada valijad. Teised võivad sind noolt otsene ainult lastele, tilde kõigi õdede-vendade, mis toimuvad pärast element, ja pluss märk 1 vend, et tuleb kohe pärast element. 

Kombineerides need valijad ja combinators, saate laiendada valikut styling võite saavutada on antud lehele ja kirjutada CSS tõhusamalt. Vaid paar rida CSS näed mind kirjutama siia Võin kiiresti teha midagi sellist nägema midagi sellist. 

Ma olen Joosep, ja see on CS50. 

[CS50.TV] 

Uh, kui ma alustan? Lubage mul teha ilma - [naerab] Okei. Lisa - las ma muudan seda sõnastust. Ooh. Vabandust.