[Predvaja glasba] 

Doug LLOYD: Torej, vzemimo eno več video govoriti o eni več jeziku. Tokrat bomo govorili o CSS. Torej, CSS, kar je okrajšava za Cascading Style Sheets, drug jezik, ki jih uporabljamo pri gradnji spletne strani. Razmislite o tem, kot je ta. Če HTML je tisto, kar bomo uporabili za organizacijo Vsebnost želimo postaviti na naši spletni strani, CSS je orodje, ki smo na splošno uporabo prilagodite, kako naše spletne strani, poglej, in kako je uporabniška izkušnja zares je v stiku z naše spletne strani. 

Podobno kot HTML, CSS ni programski jezik. To nima logike. Nima spremenljivk. To nima nikakršne da tok povezane stvari, C počne. To je styling jezik. In njegova sintaksa je precej enostavne in samo opisuje kako elementi naše Stran ima nekatere HTML elemente je treba spremeniti. V ta namen, če tega še niste še gledal naš video o HTML, ali so seznanjeni z HTML splošno, vas morda želeli, da pogledam prvič, ker ta razprava CSS bo odvisna od nekaj znanja HTML. 

Torej, tukaj je res preprosta CSS stylesheet. Tudi če ste nikoli programirana s CSS prej, Prepričan sem, da lahko ugotovimo, kaj točno to slogovno počne. Kaj to naredi? No, uporabiti na telesu našega spleta stran, vse med body na naši HTML in ga nastavi Barva ozadja te strani v modro. No, to je zelo preprost slogovne. To je pravzaprav zelo človeški prijazen jezik, CSS. Torej, tudi če ste ga nikoli ne uporablja pred, lahko bi verjetno lahko uganiti, kaj je storil. V bistvu, če smo naložili stran, kjer Ta slogovna bil vključen nekako, barva ozadja naše strani bi modra, in ne kot standardna bela. 

Torej, kako bomo graditi slogovne? No najprej moramo identifikacijo izbirnik. V zadnjem primeru, da selektor je telo. Potem imamo odprt kodrasti brace, in smo dogaja, da začnete opredeljujejo Slogovna za to selektorja. Med zavitimi oklepaji smo samo še seznam ključnih parov vrednosti. Prejšnji par vrednost je bila barva ozadja modra podpičje, vendar pa lahko naredimo več in več od njih. Lahko bi imeli več stvari uporabe na to oznako, to izbirno telesu. Vsak od njih je ločeno s podpičje in pravimo vsak od njih izjavo, izjavo CSS. Ko bomo končali z vsemi styling smo želite uporabiti za to posebno oznako, imamo samo zapiralni Curly naramnicami končati slogovne, in smo storili opredelitvi slogovne za to določeno selektorja. 

Katere so nekatere skupne CSS lastnosti? No, morda želite, da bi meja okrog nečesa. Torej lahko rečemo, border, da bi bil vaš ključ, in potem bi vaše vrednote biti, kaj slog, barvo in širina hočeš, da bo. Tako bi slog biti trdna linijo, črtkana črta, prekinjene linije, greben linijo, kar bi bilo valovita črta. Morda boste želeli, da ga ima modra ali črna ali zelena. Morda boste želeli, da bi bilo 1 ali 2 ali 10 slikovnih pik. Določite lahko vse te stvari. Morda želite nastaviti ozadje Barva vaše strani na določen način. Smo že videli, da določanju ozadje organu, ki je modre barve. 

Potem lahko uporabite ključno besedo, tako CSS ima določene barve ki so vgrajene vanj, modra, zelena, črna, zelo preproste barve vemo. Lahko pa tudi določite koli barva čarovnica, ki bi radi. Spomnimo se, da je mogoče ugotoviti barve niz treh hex številk od 0 do 255, RG in B, v rdeče, zelene in modre komponente. In tako smo lahko določite vse barve želimo s, namesto z modro ali zeleno ali črno, uporabo funt in nato šest številk čarovnica, in da nam bi dal šest mestna barva. Tako da je barva ozadja. 

Imamo tudi novo znanje, Barva, ki je običajno bo besedilo vaši strani. In bi lahko prav to, da s ključno besedo in ali šestmestno čarovnica. Torej, lahko določite katero koli barvo, ki jo želijo za besedilo strani pred posebno barva ozadja, tam zgoraj. Prav tako lahko spremenite in se ukvarjajo s pisavo in način besedilu je prikazana na strani. 

Torej si lahko spremenite velikost pisave. Lahko uporabite ključne besede, kot so ekstra, tretja majhna, ali xx majhna, ali medij, velika, in tako naprej. Lahko uporabite fiksnih točk, 10 točka, 12 točko, in tako naprej. Lahko uporabite odstotke, 80%, 20%, kjer je 100% privzeta pisava velikost, ki je običajno tekoč nekaj takega 11 ali 12 točk. Ali pa celo opreti off zadnjega velikosti pisave. Če ste pravkar napisal nekaj in veš kar si želim je, da bi bilo manjše, vendar ne veste točno, kaj velikost te želim, da bi bilo dobro, lahko samo rečem, velikost pisave manjši. In bo temeljila off, samo tam zgoraj, da je velikost pisave. In lahko dobite manjše ali večje. Torej, tam je veliko drugačna načinov, da določite velikost pisave. 

Lahko tudi določite, kaj font družina hočeš. Če imate posebno Ime, tam je pot v CSS-- ne bomo govorili o tem here-- opredeliti zelo specifično pisavo in ga vgradili v vašo stran. Lahko uporabite tudi generična imena. Obstaja veliko spletnih varnih pisave ki so vnaprej določene v CSS. In če ste uporabnik Microsoft Pisarna je v zadnjih 20 letih, ste verjetno seznanjeni z Veliko teh spletnih varnih pisave že, Times New Roman, Arial, Courier New, Gruzija, Tahoma, Verdana, in tako naprej. Tisti, ki se štejejo za web varne pisave. In v resnici, ki je del Razlog so prišli, da bi je treba uporabiti, da bi web-- vsako stran je dostop do te privzetega pisav z različnimi serifs, in vse to font stvari ne bomo dobili v, vendar so običajno dostopna v vašem CSS, tudi če ne drugače opredeliti pisave. Končno, lahko poravnate svoje besedilo, namesto da bi bilo privzeto, usklajena na levo, lahko jo uskladiti na desno, ali bi lahko poravnate centriran, ali utemeljiti tako, da je zadela oba marže. Torej, to so vse možnosti, ki jih lahko uporabite spremeniti, kaj je tvoj tekst izgleda, in kako je to prikazano na vaši strani. 

Vaše selektorji ne morajo biti le oznake. Smo že videli telesne oznako selektor, in da je izbirnik tag ne videti tako, kot da je. Ti je ime oznako, nato pa vam določite slogovno za to oznako. Vendar pa lahko naredite tudi nekaj imenovano selektor ID. Izbirnik ID izgleda precej podobno. Ampak obvestilo, da zdaj ne bom s pomočjo HTML tag, jaz sem z uporabo, v tem primeru, #unique ali hash edinstven. Če se spomnite iz naše video na HTML, smo se pogovarjali o tem, kako lahko imajo oznake atribute. 

In še ena lastnost, ki se uporablja za zal veliko vse oznake HTML, vendar nismo govorili o tem, je nekaj, kar se imenuje ID tag. Torej je to predvsem CSS bi veljajo samo za HTML tag, ki ima zelo specifičen ID, ki ste jih poimenovali. Torej, če imate nekje v kodi, nekje v vašem HTML datoteko, trakec in vami opredeliti kot atribut na to oznako, ID enak edinstven v tem zlasti slogovne tukaj se bo uporabljal samo med da tag z ID edinstven. 

Lahko naredite tudi nekaj imenuje selektor razred. Torej poleg ob ID atributov, lahko tudi dodajte razred atribut HTML. In ko boste uporabili razred atribut, ga je mogoče uporabiti na več oznak. Torej, če imate več stvari, ki so podobni, morda hočeš povedati, odprti tag bla, bla, bla, bla, razred enak študentov. In potem je to predvsem bi veljalo slogovne za vsako oznako, katerega razred je študentov. V tem primeru, bi vam zastavila barva ozadja na rumeno, in sva nastavite motnosti, ki je oznaka nismo govorili o, ampak se ukvarja s tem, kako pregledna je nekaj, do 70%, v tem primeru. 

Obstaja dve možnosti za pisanje slogovnih. Lahko jih napisali neposredno v HTML z dajanjem slogovne med slog oznake. In tisti slog oznake iti notranjost oznake glave vaše spletne strani. Morda bolj zaželen način storiti je napisati ločeno .css datoteko, nato pa jo povezati v vaš dokumentirali s pomočjo povezovalne oznake. Link oznake, še enkrat, so razlikuje od hiperpovezav če se spomnimo iz naše video HTML. In povezava oznake so, kako smo potegnite v ločenih datotekah. To je nekako kot ekvivalent #include za spletno programiranje. 

Torej, dajmo si oglejte table.HTML. Če se spomnite iz naše HTML video, sem pokazal primer zelo preprosto množenje tabela, ki je izgledal precej grda, in morda obstaja način, da bi bilo bolje CSS, da bi bilo dejansko videti več kot množenje mizo, ali nekaj da se le ne zlepiti skupaj brez dejanske delitve med vrstami in kolon. Torej, kaj je nad glavo, CS50 IDE, in si oglejte kako CSS lahko, nekako, poteg kaj smo začeli prej, in da je nekaj, kar je veliko bolje. 

Tako smo v CS50 IDE Zdaj, in če ne poznajo, bomo dvigni v tem miza HTML stran. Table.HTML bistvu Samo opredeljuje vsebino del A se multiple-- je bilo predvideno, da bo štiri s štirimi množenje miza. To je precej preprosta. In bi menimo, da bi videti precej dobro organizirani. Toda v resnici, ko smo ogledati to stran, vidimo, da je nekako grd, kajne? Jasno moramo vrstice in stolpce tukaj. Obstaja nekakšna ločitve. Ampak to ni smiselna ločitev. Ne bomo dejansko dobili preveč informacij tukaj. In tam je ni ločitev med vrstice in stolpce v smislu horizontalnih ali vertikalnih pravil. Mi bi verjetno bo to poglej malo bolje. Torej poskusimo. Torej bom zapreti ta zavihek tukaj. In bom zaprem table.HTML, in jaz imam še eno različico tukaj imenuje table2.HTML. Bomo odprli, da je gor. Telo strani je precej enako, vendar sem zamenjavi malo na vrhu. In bom pomaknite navzgor tukaj. Obvestilo, da je to čas, sem uporabo vgrajenih slogovne oznake. Sem odprl slog oznako, in sem zdaj opredelitev CSS slogovne samo znotraj nje. Imam slogovne, ki pravi, mizo. To je moj selektor tag. Jaz ne uporabljate piko ali hašiš, ki bi morala delati, če sem je bil z uporabo ID ali selektor razreda. Imam selektorski tag here-- mizo. Ta slog se dogaja, da velja za vsako mizo oznako. Očitno bi rad dal eno Pixel širok, moder meja, v moji mizi. To se sliši, kot da bi verjetno pomaga situacijo, kajne? Bomo imeli stvari videti veliko bolje. Torej, to je v redu. Slogovno sem pravkar vgrajeni moje slogovno tukaj. To je vsekakor sprejemljiv način, da to storite. Poglejmo, kaj to izgleda. Tako da bom šel nazaj dol, in Bom vam bo odprla svoj table2.HTML. No, to ni ravno to, kar sem si želel, ampak to je točno tisto, kar smo zahtevali. Rekli smo, da je ta stil dogaja, da se uporabljajo za našo mizo. Naša miza ima zdaj en piksel širok, moder meja okoli njega. Ne bomo dejansko dobili na celicah tabele. Mi smo ravno pri mizi. Torej CSS delal. To je uporabljen Slogovna k naši mizi. Vendar ni povsem storiti kar smo želeli storiti. Kako pridemo storiti kaj hočemo to storiti? 

No, pa si oglejte v enem več različica tega v table3.HTML. Tako da sem le, da bo zaprtje teh kartic. Bom šel nazaj, sem na moj datoteko drevo in odpirajo table3.HTML. Spet se dogaja, da lepa Podobno tukaj na začetku. Ampak obvestilo, ta čas, namesto da bi uporabili slogovno vgrajeni prav tam, Grem na povezavo v Slogovna pomočjo link tag. Torej sem očitno povezovanja v Slogovna imenuje tables.CSS, in to tudi enak Slogovna samo means-- dobro, kaj je to datoteka v primerjavi s tisto, Sem doing-- je slogovno da sem uporabi za mojo stran. Torej, če si res želim, da vidim, kaj Delam z CSS tukaj, Moram iti odprta, da table.CSS datoteko kot dobro. Torej bomo šli nazaj tukaj spet na naše datoteke drevo. Tam je table.CSS. Ga bomo pop odprta. Zdaj smo videli malo CSS. Očitno imam par stvari se dogaja tukaj. Jaz očitno želijo postaviti pet Pixel široka, trdna rdeča meja, po moji mizi. Mi že vemo, da to se dogaja da pojdi na obodu. Videli smo, da je v table2.HTML. Z vsako vrstico I očitno želite določiti da znaša višina vrstica 50 pikslov visoka. Torej, za vsako vrstico, se spomnite da je tisto, kar tr tag počne, Delam pa 50 točk visoka. 

Končno, imam ta komentar. In to je, kako naredimo pripombe v CSS. To je zelo podoben izkoristiti blok Komentarji sintaksa slash zvezda. Vse besedilo, ki ga želite. Ni slash slash čeprav v CSS. Za kratke inline pripomb, imamo uporabiti to posebno obliko tukaj. Izgleda, da delam Veliko stvari v mojih td oznake. Zapomni TD oznake ali mizo Podatki, ki so res samo stebri v notranjosti od naše vrste, in očitno za vsak podatek V moji mizi, želim da nastavite barvo ozadja za črna, barva, da je bela, barva Barva ospredja. Torej, to se bo besedilo moji strani. Hočem veliko pisavo, 22 točka pisavo, in želim, da bi bilo družine pisave, Gruzija. Torej, jaz ne bom imajo privzeto pisavo. Grem, da določite Gruzijo, ki je je eden od tistih spletnih varnih pisave da smo videli prej. Hočem moje besedilo uskladiti centralno, v sredini prostora, Ne želim, da bo zapustil usklajena ali desno poravnano. In hočem svoj širino stolpca na 50 slikovnih pik, kot tudi. Oglejmo si na kaj to izgleda, in videli, če je to mogoče izboljšanje. Tako da sem šel na table3.HTML, ki odpoklic, vključuje table.CSS kot povezavo, in bomo predogled. To je veliko bolje, kajne? To se pravzaprav začenja videti Veliko bolj kot poštevanke. Imam to rdečo obrobo po moji mizi, ampak zdaj Sem tudi določeno, da vsaka vrstica je 50 slikovnih pik, ali je to 50 pik tall-- opravičila me-- vsak stolpec je 50 slikovnih pik. Podatki v vsakega stolpca, in le podatki, ima črno ozadje. Torej, to je, zakaj tisti, bele črte so tam. Ker je prostor med vsemi temi celicami to ni meja v in sama po sebi, to je samo Jaz sem za polnjenje le v celice, ki dejansko naredi meje tabele, ki očitno pa obstajajo vse skupaj, da je bil samo tanke bele črte. Zdaj oni vidni. Zdaj so pop off na zaslonu. In zato je to zelo preprost Slogovna, ki sem jih uporabila, in zdaj je moja miza izgleda veliko bolj kot štiri s štirimi množenje miza, namesto samo zmedenega nered, kjer vse je jasno vrstice in stolpce, vendar ni zelo dobro organizirana. Mi smo res samo praskanje površine o tem, kaj lahko storite s CSS tukaj. Na srečo dokumentacija CSS je precej preprosta. Boste uporabljali več njenih atribute, dokaj pogosto. Tiste, smo se pogovarjali o prej v tem videu. Obstaja nekaj, ki vas verjetno ne bo uporabil vse. In to je v redu, preveč. Ampak samo vem, da obstaja Veliko dokumentacije tam. Torej, tudi če nismo zajema vse, ste zagotovo ni pustil na svoje. Ampak CSS je res zabavno eksperimentirati z. In jaz bi močno vas spodbujajo igral z vaše spletne strani, in videli, kako lahko jih videz in občutek za izboljšanje uporabnika izkušnje na obisku vaše strani. Sem Doug Lloyd. To je CS50.