[Muusika mängib] 

DOUG LLOYD: Võtame veel ühe video rääkida veel ühte keelt. Seekord räägime CSS. Nii CSS, mis on lühike Cascading Style Sheets, on teine ​​keel mida me kasutame ehitamisel veebilehtedele. Mõtle seda niimoodi. Kui HTML on see, mida me kasutame, et korraldada sisu tahame panna meie lehel, CSS on vahend, mida me tavaliselt kasutada kohandada, kuidas meie veebilehed välja, ja kuidas kasutaja kogemus tõesti on, suheldes meie veebilehel. 

Sarnaselt HTML, CSS on ei programmeerimiskeelt. See ei ole loogiline. See ei pea muutujaid. See ei ole mingit et voolu seotud asju, C teeb. See on stiil keeles. Ja tema süntaks on päris Lihtne ja lihtsalt kirjeldab kuidas elemendid meie leheküljel on teatud HTML elemente tuleks muuta. Selleks, kui sa ei ole veel vaatasin meie video HTML, või tuttavad HTML üldiselt, siis võiksite heita pilk selle Esiteks sellepärast, et see arutelu CSS läheb sõltub mõningaid teadmisi HTML. 

Nii et siin on tõesti lihtne CSS-stiil. Isegi kui sa pole kunagi programmeeritud CSS enne, Ma olen päris kindel, et saate aru saada täpselt, mida see laaditabeli teeb. Mida ta teeb? Noh, kehale kantud meie veebis leht on kõik vahel keha sildid meie HTML, ja see seab taustavärvi, et leht sinine. Noh, see on väga lihtne laaditabeli. See on tegelikult väga inimlik sõbralik keel, CSS. Nii et isegi kui sa ei ole kunagi kasutanud seda varem, siis ilmselt arvas, mida see tegi. Tegelikult, kui me koormatud lehele, kus Selle laaditabeli oli põimitud kuidagi, taustavärvi meie lehel oleks sinine, ja mitte standard valge. 

Niisiis, kuidas me ehitada stylesheets? Noh esiteks, me peame tuvastada valija. Viimase näiteks et valija oli keha. Siis on meil avatud lokkis traksidega, ja me oleme alustame määratlemisel stiili tabeli valija. Vahel looksulg, me lihtsalt nimekirja põhiväärtus paari. Eelmise väärtus paar oli taustavärvi sinine semikooloniga kuid me võiksime teha rohkem ja rohkem. Sa võid olla mitu asja kohaldamisel Selle tag, et valija keha. Igaühel neist on eraldatud semikooloniga ning me kutsume iga üks neist deklaratsiooni, CSS deklaratsiooni. Kui me teinud kõik stiil me soovite taotleda vastav silt, meil on lihtsalt sulgeda lokkis traksidega lõpetada Stiil Ja ongi määratlemisel laaditabeli selle konkreetse valija. 

Millised on mõned ühised CSS omadused? Noh, võib-olla sa tahad panna raamiga midagi. Nii saab öelda, piirivalve, mis oleks teie võti, ja siis oma väärtuste oleks, Mis stiili, värvi ja laiusega sa tahad seda. Nii stiil võib olla tahke line, katkendlik joon, katkendjoonega, katuseharja joon, mis oleks laineline joon. Võib-olla sa tahad olla see sinine või must või roheline. Võib-olla sa tahad seda olla 1 või 2 või 10 pikslit lai. Saate määrata kõik need asjad. Võib-olla soovite seada tausta värvi oma lehele teatud viisil. Me juba nägime, et seades taust keha olema sinine. 

Siis saate kasutada võtmesõna, nii CSS on teatud värvid mis on ehitatud see, sinine, roheline, must, väga lihtne värvid teame. Aga sa võid ka täpsustada mis tahes hex värvi, mida soovite. Tuletame meelde, et värve on võimalik kindlaks teha kogum kolm hex numbrid 0-255, rg ja b on punane, roheline ja sinine komponent. Ja nii saame täpsustada mis tahes värvi me tahame poolt, selle asemel sinine või roheline või must, kasutades naela ja siis kuus numbrit hex, ja mis annaks meile Kuue kohaline värvi. Nii et taustavärvi. 

Meil on ka esiplaani värv, mis on tavaliselt läheb teksti lehel. Ja siis võiks samamoodi teha koos võtmesõna ja või kuuekohaline hex. Nii saad määrata suvalise värvi tahad teksti oma lehele vastu eriti taustavärvi, kuni eespool. Saate muuta ka ja tegeleda font ja tee teksti osutatakse lehel. 

Nii saab muuta fondi suurust. Võite kasutada märksõnu nagu ekstra, Eriti väike või xx väike või keskmise, suur, ja nii edasi. Võite kasutada fikseeritud punktid, 10 punkti, 12 punkti, ja nii edasi. Võite kasutada protsendid, 80%, 20%, kus 100% on vaikefondi suurus, mis on tavaliselt läheb olla midagi 11 või 12 punkti. Või saab ka rajada ära Värskeimate fondi suurust. Kui sa lihtsalt kirjutasin midagi ja sa tead mida sa tahad on seda väiksem, kuid sa ei tea täpselt, milline suurus sulle tahad seda, noh, sa võid öelda, fondi suurus väiksem. Ja ta rajab off, lihtsalt ülevalt, see on kirjas. Ja saad väiksem või suurem. Nii on palju erinevaid kuidas määrata fondi suuruse. 

Samuti saab määrata, mida fondipere soovite. Kui teil on eriti nimi, seal on viis CSS-- me ei kavatse rääkida siin-- määratleda väga konkreetsed fondi ja põimida oma lehele. Võite kasutada ka üldnimetused. Seal on palju web ohutu fonte mis on eelnevalt määratletud CSS. Ja kui sa oled kasutajaks Microsoft Büroo on viimase 20 aasta jooksul, oled ilmselt tuttav palju neid web ohutu fonte Juba Times New Roman, Arial, Courier New, Georgia, Tahoma, Verdana, ja nii edasi. Need on kõik lugeda web ohutu fonte. Ja tegelikult, osa põhjus, miks nad tulid olla kavatseti kasutada teha web-- igal leheküljel oli juurdepääs sellele vaikimisi määratud fonte erinevate serifs, ja kõik see fondi asju me ei hakka, kuid üldjuhul on need kättesaadav oma CSS, isegi kui sa seda ei tee muidu määratleda fonte. Lõpuks saab viia oma teksti, selle asemel et oleks vaikimisi joondatud vasakule, siis võiks viia see õige, või siis võiks viia ta keskendunud, või põhjendatud, nii et see tabas nii marginaalid. Nii et need on kõik võimalused, mida saab kasutada muuta seda, mida oma teksti välja näeb, ja kuidas see kuvatakse teie lehel. 

Sinu valijad ei olema sildid alles. Me varem näinud body valija ja tag valija ei vaata lihtsalt niisama. Sul nimi silt, ja siis määratleda stiili tabeli tag. Aga sa võid ka midagi nimetatakse ID valija. ID-valija tundub päris sarnased. Aga teate, et nüüd ma ei kasuta HTML sildi, ma kasutan, sel juhul, #unique või hash ainulaadne. Kui te mäletate meie Video HTML, me rääkisime kuidas sildid võivad olla atribuudid. 

Ja üks omadus, mis kehtib päris palju kõik HTML sildid, aga me ei räägi sellest, on midagi, mida nimetatakse ID tag. Nii et see eriti CSS oleks kehtivad ainult HTML tag, mis on väga spetsiifilise ID, et olete nimega. Nii et kui teil on kusagil oma koodi, kuskil HTML faili, silt ja sa täpsustada täiendina, et tag, ID võrdub unikaalne, seda Eelkõige laaditabeli Siin kehtib ainult vahel et silt ID ainulaadne. 

Võite teha ka midagi nimetatakse klassi valija. Nii et lisaks võttes ID atribuudid, saate ka lisada klassi atribuut HTML teeke. Ja kui te kasutate klassi atribuut, seda saab rakendada mitmeid märke. Nii et kui teil on mitmeid asju, mis on sarnased, võib-olla sa tahad öelda, avatud tag blah, blah, blah, blah, klassi võrdub õpilastele. Ja siis see eriti laaditabeli kehtiks iga tag kelle klassis on õpilastel. Sel juhul me määrata taustavärvi kollane, ja me tahaks seada läbipaistmatus, mis on tag me ei räägi, aga lihtsalt tegeleb, kuidas läbipaistev midagi on, 70%, käesoleval juhul. 

Seal on kaks võimalust kirjalikult stylesheets. Võite kirjutada neid otse oma HTML pannes stylesheets vahel stiilis sildid. Ja need stiilis sildid minna sees pea sildid oma veebilehel. Võib-olla rohkem eelistatud viis seda teha see on kirjutada eraldi CSS faili, ja siis siduda see oma dokumenteerida kasutades link sildid. Link sildid, jälle, on erineb hüperlinkide Kui te mäletate meie video HTML. Ja link sildid on, kuidas me tõmba eraldi failides. See omamoodi nagu samaväärne #include veebi programmeerimine. 

Võtame pilk table.HTML. Kui te mäletate meie HTML video, ma näitasin näide väga lihtne korrutamine tabel, mis tundus päris kole, ja võib-olla seal kuidas teha seda paremini CSS, et muuta see tegelikult otsima rohkem nagu korrutamine lauda või midagi mis ei ole lihtsalt kokku kleepunud ilma tegeliku jagunemine reavahed ja veergu. Nii saab pea üle CS50 IDE ja tutvu kuidas CSS saab, omamoodi, näpistama mida alustasime enne, ja muuta see midagi palju paremat. 

Nii et me oleme CS50 IDE nüüd, ja kui võõras, me tõmba selle tabel, mis HTML lehel. Table.HTML põhimõtteliselt lihtsalt määratleb sisu on multiple-- see pidi olema nelja neljaga korrutamine tabelis. See on üsna lihtne. Ja me ei usu, et see oleks vaadata päris hästi korraldatud. Aga tegelikult, kui me eelvaate see leht, näeme, et see on selline kole, eks? Ilmselgelt on meil ridu ja veerge siin. On mingi eraldamine. Aga see ei ole mõttekas eraldamine. Me tegelikult ei saada liiga palju infot. Ja pole mingit eristamist ridade ja veergude poolest horisontaalne või vertikaalne reegleid. Me võiks ilmselt teha seda vaatame natuke parem. Nii proovime. Nii et ma lähen sulgeda sakk siin. Ja ma sulen table.HTML, ja mul on teine ​​versioon siit nimetatakse table2.HTML. Me avame selle üles. Keha lehel on üsna sama, aga ma olen muutunud natuke tipus. Ja ma keri üles siin. Pange tähele, et sel ajal, ma olen kasutades sisseehitatud stiilis sildid. Olen avatud stiilis tag, ja ma olen nüüd määratledes CSS-stiil just sees sellest. Mul on laaditabeli, mis ütleb, laud. See on minu tag valija. Ma ei kasuta dot või hash, mis ma teeks, kui ma oli kasutades ID või klassi valija. Mul on silt valija siin-- tabelis. See stiil läheb kohaldatakse iga laua tag. Ilmselt ma tahan panna ühe piksli laiuseid, tahke sinine raam, sees minu lauale. See kõlab nagu oleks ilmselt aitab olukorda, eks? Me läheme pea asju otsima palju parem. Nii et see on hea. Stiililiselt, ma olen lihtsalt varjatud minu laaditabeli siin. See on kindlasti vastuvõetav viis seda teha. Vaatame, mis see välja näeb. Nii et ma lähen siia tagasi, ja Ma eelvaate minu table2.HTML. Noh, see ei ole päris see, mida ma tahtsin, aga see on täpselt see, mida me palunud. Me ütlesime, et see stiil on kavatse taotleda meie lauale. Meie tabelis on nüüd üks piksel lai, tahke sinine raam ümber. Me tegelikult ei saada laua rakke. Me lihtsalt saada lauas. Nii CSS töötanud. See on kohaldanud laaditabeli meie lauale. Aga ei ole päris teha mida me tahtsime seda teha. Kuidas me saame seda teha mida me tahame seda teha? 

Noh, võtame pilk veel üks versioon sellest table3.HTML. Nii et ma olen lihtsalt kavatse sulgeda sakke. Ma lähen tagasi siia minu failisüsteemi ja avada table3.HTML. Jällegi, see läheb vaadata päris sarnane siin alguses. Aga teate, seekord kasutamise asemel laaditabeli varjatud õigus seal, Ma lähen linki laaditabeli kasutades linki tag. Nii et ma olen ilmselt siduda oma laaditabeli nimetatakse tables.CSS, ja seda ka võrdne laaditabeli lihtsalt means-- hästi, Mis on selle faili suhtes, mida Ma olen doing-- on laaditabeli, et ma olen kasutades minu lehele. Nii et kui ma tõesti tahan näha, mida Ma teen koos CSS siin Ma pean minema avatud, et table.CSS esitada ka. Nii et me läheme tagasi siia jälle meie failisüsteemi. Seal table.CSS. Me pop avatud. Nüüd me näeme veidi CSS. Ilmselt mul on paar asju siin toimub. Ma ilmselt tahan panna viie piksli laiuseid, soliidset punast piiri, ümber minu laua. Me juba teame, et see läheb minge ümbermõõt. Me nägime, et table2.HTML. Iga rida, ma ilmselt tahavad täpsustada et järjest kõrgus on 50 pikslit kõrge. Nii iga rida, mäletan see on, mida tr tag teeb, Ma teen seda 50 pikslit kõrge. 

Lõpuks mul see kommentaar. Ja see, kuidas me oma kommentaarid CSS. See on väga sarnane ära blokeerida kommentaarid süntaks kaldkriipsuga star. Kõik tekst, mida soovite. Pole kaldkriipsuga kaldkriipsuga kuigi CSS. Lühikese inline kommentaarid, meil kasutada seda kindlas vormingus siin. Tundub nagu ma teen palju asju minu td sildid. Mäleta td sildid või lauda andmed, mis on tõesti ainult veerud sees Meie ridades ja ilmselt iga tükk andmed minu laua, ma tahan seada taustavärvi must, värvi olema valge, värv on esiplaani värv. Nii et see saab olema teksti minu lehele. Ma tahan suur font, 22 punkti kirja, ja ma tahan seda fonti pere, Georgia. Nii et ma ei kavatse on vaikimisi fonti. Ma lähen täpsustada Georgia, mis on üks neist web ohutu fonte et me oleme näinud. Ma tahan, et mu tekst joondatud tsentraalselt, keset kasti, Ma ei taha, et see tuleb jätta joondatud paremale joondatud. Ja ma tahan, et mu Veerulaiuse olla 50 pikslit lai samuti. Võtame pilk mida see välja näeb, ja vaata, kas see on äkki paranemist. Nii et ma lähen minema table3.HTML, mis Meenuta, sisaldab table.CSS lingina, ja me vaata see. See on palju parem, eks? See on tegelikult hakanud vaatama Palju rohkem nagu korrutustabel. Mul on see punane ääris ümber minu laua, kuid nüüd Mul on ka märgitud, et iga rida on 50 pikslit lai, või see 50 pikslit tall-- vabandus mind-- igas veerus on 50 pikslit lai. Andmed igas veerus ja ainult andmeid, on mustal taustal. Nii et miks need valged jooned on olemas. Kuna ruumi kõikide nende rakkude, see ei ole piiri Iseenesest on see lihtsalt Ma olen ainult täites rakud, mis tegelikult teeb tabeli raamid, mis ilmselt ei eksisteeri kogu aeg, see oli lihtsalt õhuke valged jooned. Nüüd on nad nähtavaks. Nüüd nad pop välja ekraanile. Ja nii on see väga lihtne laaditabeli, et ma olen rakendatud, ja nüüd on mu laua ootab palju nagu nelja neljaga korrutamine tabelis, asemel lihtsalt segamini jama, kus kõik on selge ridu ja veerge, kuid mitte super hästi korraldatud. Me oleme alles kriimustamata mida saate teha CSS siin. Õnneks CSS dokumentatsioon on üsna lihtne. Saate kasutada mitmed selle atribuudid, üsna sageli. Need, me rääkisime varem seda videot. On mitmeid, et teil ilmselt ei kasuta üldse. Ja see on hea, liiga. Aga tean, et seal on palju dokumentatsiooni seal. Nii et isegi kui me ei hõlma kõike, sa oled kindlasti ei jää oma. Aga CSS on tõesti lõbus eksperimenteerida. Ja Julgustan teid mängida oma veebilehekülgedele, ja saad teada, kuidas teha neid ilme ja parandada kasutaja kogemus külastavad lehel. Ma olen Doug Lloyd. See on CS50.