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