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