>> [Muzikos grojimo]
>> Doug LLOYD: Taigi galime imtis dar vieną vaizdo kalbėti apie dar vieną kalbą.
Šį kartą mes kalbame apie CSS.
Taigi CSS, kuris yra trumpas Kaskadiniai stiliai,
yra kita kalba, mes naudojame statant svetainėse.
Pagalvokite apie tai, kaip šis.
Jeigu HTML yra tai, ką mes naudojame organizuoti turinys norime įdėti mūsų puslapyje,
CSS yra priemonė, kuri mes paprastai naudoti tinkinti, kaip mūsų svetainės išvaizda,
ir kaip vartotojas patirtis tikrai yra, bendrauja su mūsų svetainėje.
>> Panašus į HTML, CSS nėra programavimo kalba.
Ji neturi logikos.
Ji neturi kintamuosius.
Ji neturi jokio tokio pobūdžio srautai, susiję dalykų, C Ar.
Tai stilius, kalba.
Ir jos sintaksė yra gana paprastas, ir tik aprašo
kaip jų elementų mūsų puslapis turi tam tikrų HTML
elementai turi būti iš dalies pakeistas.
Siekiant šio tikslo, jei turite ne dar stebėjo mūsų vaizdo HTML,
ar yra susipažinę su HTML Apskritai, jūs
gali norėti imtis Tuo išvaizdą Pirma, dėl to šis CSS diskusija
ketina priklausyti nuo kai HTML žinių.
>> Taigi čia tikrai paprastas CSS stilių.
Net jei jūs niekada prieš užprogramuotas su CSS,
Aš esu gana įsitikinęs, galite išsiaiškinti, ką tai stilių daro.
Ką tai daro?
Na, kreipėsi į mūsų interneto kūno puslapis, viskas tarp kūno žymės
Mūsų HTML, ir jame nustato fono spalva tame puslapyje į mėlyną.
Na, tai labai paprasta stilių.
Tai tikrai labai žmogiškas suprantama kalba, CSS.
Taigi, net jei jūs niekada naudojo jį anksčiau, tikriausiai galėjo atspėti, kas tai padarė.
Iš tiesų, jei mes pakrautas puslapyje, kur Ši stilių buvo įdėta kažkaip,
fono spalva mūsų puslapyje būtų būti mėlynos, ir ne standartinis baltas.
>> Taigi, kaip mes sukurti stilių?
Na pirma, mes turime nustatyti rankenėlę.
Pastarąjį Pavyzdžiui, kad selektorius buvo kūnas.
Tada mes turime atvirą garbanotas petnešomis, ir mes
ketina pradėti apibrėždama Stilių tos selektorių.
Tarp garbanotas petnešos, mes Tiesiog pagrindinių verčių porų sąrašą.
Ankstesnis vertė pora buvo fono spalva mėlyna kabliataškis,
bet mes galime padaryti daugiau ir daugiau iš jų.
Jūs galite turėti kelis dalykus taikant tai tegus, tuo selektoriaus kūno.
Kiekvienas, vienas iš jų atskiriami panaudojant kabliataškis, ir mes vadiname kiekvienas iš jų
deklaraciją, CSS deklaracija.
Kai baigsime su visais stiliaus mes noriu kreiptis į tos konkrečios žymeles,
mes tiesiog uždarymo garbanotas petnešomis baigti stilių,
ir mes padaryta apibrėžiant stilių kad ypač selektorių.
>> Kokie yra keletas bendrų CSS savybės?
Na, gal jūs norite įdėti aplink kažką siena.
Taigi galima sakyti, sienų, kad būtų jūsų raktas,
ir tada jūsų vertybės turėtų būti kokio stiliaus, spalvos ir pločio
norite, kad ji būtų.
Taigi stilius gali būti kietas linija, punktyrinė linija, punktyrinė linija,
vagos linija, kuri būtų banguota linija.
Gal norite, kad jis būtų būti mėlynos arba juodos arba žalios spalvos.
Gal norite, kad ji būtų 1 arba 2 arba 10 pikselių pločio.
Galite nurodyti visų šių dalykų.
Gal norite nustatyti foną spalva jūsų puslapyje tam tikru būdu.
Mes jau matėme, kad nustatydama fonas kūne yra mėlyna.
>> Tada galite naudoti pagrindinį žodį, taip CSS turi tam tikrų spalvų
kad yra pastatytas į jį, mėlyna, žalia, juoda, labai paprastas spalvos žinome.
Bet taip pat galite nurodyti, kokios Hex spalvų, kad jūs norite.
Prisiminkite, kad spalvos gali būti identifikuotas iki trejų HEX skaičių rinkinys
nuo 0 iki 255, RG ir B į raudona, žalia ir mėlyna komponentas.
Ir taip mes galime nurodyti bet kokios spalvos norime BY,
o ne naudojant mėlyna arba žalia ar juoda, naudojant svaro ir tada šeši skaitmenys hex,
ir kad duos mums šešių skaitmenų spalva.
Taigi, kad fono spalva.
>> Mes taip pat turime įgytas žinias spalva, kuri paprastai
bus jūsų puslapyje tekstas.
Ir jūs taip pat galėtų padaryti, kad su raktinį žodį ir ar šešių skaitmenų hex.
Taigi, galite nurodyti, kokios spalvos jums nori už savo puslapio tekste
prieš ypač fono spalva, iki viršaus.
Jūs taip pat galite pakeisti ir kovoti su šriftu, ir kaip tekstą
atvaizduojant puslapyje.
>> Taigi jūs galite pakeisti šrifto dydį.
Jūs galite naudoti raktinius žodžius, pavyzdžiui, papildomų, Papildomas mažas, arba xx mažas, ar vidutinis,
didelis, ir taip toliau.
Galite naudoti fiksuotų taškų, 10 punkto, 12 punkto, ir taip toliau.
Galite naudoti procentus, 80%, 20%, kur 100% yra Numatytasis šrifto
dydis, kuris paprastai vyksta būti kažkas panašaus į 11 ar 12 taškų.
Arba galite net grįsti jį išjungti naujausio šrifto dydžio.
Jei tiesiog parašė kažką ir jūs žinote, ką norite, kad jis būtų mažesnis,
bet jūs tiksliai nežinote, kokio dydžio jums noriu, kad ji būtų gerai, galite tiesiog pasakyti,
šrifto dydis mažesnis.
Ir tai bus grįsti off, tik iki viršaus, tai šrifto dydį.
Ir jūs galite gauti mažesnis arba didesnis.
Taigi ten yra kitoks daug būdų, kaip nurodyti šrifto dydį.
>> Jūs taip pat galite nurodyti, ką šrifto šeima norite.
Jei turite ypač vardas, ten yra būdas CSS--
mes neketiname kalbėti apie tai here-- apibrėžti labai konkrečią šriftą
ir įdėti jį į savo puslapį.
Taip pat galite naudoti bendrinius pavadinimus.
Yra interneto saugaus šriftų daug , kurie yra iš anksto apibrėžta CSS.
Ir jei esate "Microsoft vartotojas Biuro per pastaruosius 20 metų,
jūs tikriausiai susipažinęs su iš šių interneto saugių šriftų daug
jau Times New Roman, Arial, Courier New, Gruzija, Tahoma, Verdana,
ir taip toliau.
Tie, kurie visi laikomi interneto saugios šriftai.
Ir iš tiesų, dalis Todėl jie atėjo būti
turėjo būti naudojamos siekiant padaryti web-- kiekvieną puslapį turėjo galimybę susipažinti su šio Numatyta rinkinys šriftų
su įvairiais serifs, ir visa tai šrifto dalykų mes ne gauti į,
bet paprastai jie yra prieinama jūsų CSS,
net jei jūs neturite kitaip apibrėžti šriftus.
Galiausiai, jūs galite išlygiuoti tekstą, vietoj jis yra, pagal nutylėjimą, suderinta
į kairę, galima suderinti jį į dešinę,
ar galima jį suderinti centre arba pateisinama, kad jis nukentėjo abi paraštes.
Taigi tie, kurie visi duomenys, kuriuos galite naudoti pakeisti tai, ką jūsų tekstas atrodo,
ir kaip jis rodomas jūsų puslapyje.
>> Jūsų selektoriai ne turi būti tik žymes.
Mes anksčiau pamačiau kūno žymą selektorių ir tegus selektorių
ar atrodo kaip kad.
Jūs vadinate žymą, ir tada jūs apibrėžti šios žymės stilių.
Bet jūs taip pat galite padaryti ką nors vadinamas ID selektorių.
ID selektorių atrodo gana panašūs.
Tačiau pastebėti, kad dabar aš ne naudoti HTML tegus, aš naudoju, šiuo atveju,
#unique arba maišos unikalus.
Jei prisimenate iš mūsų Vaizdo HTML, mes kalbėjome
apie tai, kaip žymės gali turėti atributus.
>> Ir vienas atributas, kuri taikoma kad beveik visi HTML žymes
bet mes ne apie tai kalbėti, yra kažkas vadinamas ID tegus.
Taigi tai ypač CPT taikoma tik HTML tegus, kad turi
labai specifinė ID, kad jūs pavadinimu.
Taigi, jei turite kažkur Jūsų kodas, kažkur
Jūsų HTML failą, žymos ir jums nurodyti, kaip į šią žymę atributas,
ID lygus unikalus, tai ypač stilių
čia bus taikomos tik tarp kad tegus su unikalus ID.
>> Jūs taip pat galite padaryti ką nors vadinamas klasės selektorių.
Taigi, be turintys ID atributus, taip pat galite
pridėti klasės atributą HTML žymes.
Ir, kai jūs naudojate klasės atributą, jis gali būti taikomas kelis žodžius.
Taigi, jei turite keletą dalykų, kad yra panašūs, gal norite pasakyti,
atvira žyma bla, bla, bla, bla, klasės lygi studentams.
Ir tai ypač Stilių būtų taikoma
kiekvienam žyma, kurio klasė yra studentai.
Šiuo atveju, mes reikia nustatyti fono spalva geltona,
ir mes norime nustatyti neskaidrumo, kuris yra žyma mes ne kalbėti apie,
bet tik susijusi su kaip skaidrus kažkas yra, iki 70%, ir šiuo atveju.
>> Yra du variantai Rašymo Stiliai.
Jūs galite juos rašyti tiesiai į HTML
pateikdamas stilių tarp stiliaus žymes.
Ir tie stiliaus žymės eiti viduje galvos žymės jūsų tinklalapį.
Bene daugiau pageidaujamą būdas tai padaryti tai parašyti atskirą CSS failą,
ir tada susieti jį į savo dokumentuoti naudojant nuorodą žymes.
Link žodžius, vėlgi, yra skiriasi nuo hipersaitus,
Jei prisimenate iš mūsų vaizdo HTML.
Ir susieti žymės yra tai, kaip mes traukti į atskirus failus.
Tai tarsi kaip lygiaverčių už interneto programavimo #include.
>> Taigi leiskite pažvelgti table.HTML išvaizdą.
Jei prisimenate iš mūsų HTML Vaizdo, aš parodžiau
AN labai pavyzdys paprasta daugyba
stalo, kad atrodė gana negraži, o gal ten
būdas padaryti tai geriau su CSS, kad ji iš tikrųjų atrodo
daugiau kaip daugybos lentelė, ar kažkas
kad yra ne tik suklijuoti be faktinio skyriaus
tarp eilučių ir stulpelių.
Taigi leiskite per galvą CS50 IDE, ir pažvelgti
tuo, kaip CSS gali, rūšiuoti, įgnybti ką mes prieš prasidėjo,
ir padaryti jį kažkas daug geriau.
>> Taigi mes į CS50 IDE dabar, ir, jei nepažįstamas,
mes atsigriebti tai stalas, HTML puslapis.
Table.HTML esmės tik apibrėžia turinį
Kurių multiple-- ji turėjo būti keturių iki keturių daugybos lentelė.
Tai gana paprasta.
Ir mes manome, kad tai būtų atrodo gana gerai organizuotas.
Bet iš tikrųjų, kai mes peržiūrėti šį puslapį, matome, kad tai tipo negraži, tiesa?
Aišku, mes turime eilutes ir stulpelius čia.
Yra keletas atskyrimo rūšiuoti.
Bet tai nėra prasmingas atskyrimas.
Mes ne faktiškai gauti per daug informacijos čia.
Ir nėra atskyrimas eilutės ir stulpeliai sąlygas
Horizontaliųjų arba vertikaliųjų taisyklių.
Mes turbūt galėtų padaryti šį atrodo šiek tiek geriau.
Taigi pabandykime.
Taigi, aš ruošiuosi uždaryti šį skirtuką čia.
Ir aš ruošiuosi uždaryti savo table.HTML, ir aš turiu kitą versiją čia
vadinamas table2.HTML.
Mes atidaryti, kad iki.
"Puslapio, kūnas yra beveik tas pats,
bet aš pasikeitė šiek tiek viršuje.
Ir aš slinkite aukštyn čia.
Atkreipkite dėmesį, kad šį kartą, aš naudojant įterptųjų stiliaus žymes.
Aš atidarė stiliaus tag, ir aš dabar apibrėžti CSS stilių tik viduje
jo.
Turiu stilių, kuris sako, stalą.
Štai mano tegus selektorių.
Nesu naudojant taškas arba maišos, kurios aš norėčiau daryti, jei aš
buvo naudojant ID arba A klasės jungiklį.
Turiu žymą pasirinkimo here-- lentelę.
Šis stilius ketina taikomi kiekvieno stalo žyma.
Matyt aš noriu įdėti vieną pixel pločio, kietas mėlynos sienos,
viduje mano stalo.
Tai skamba kaip ji tikriausiai padėti situaciją, tiesa?
Mes ketiname turėti viskas atrodo daug geriau.
Taigi tai yra gerai.
Stilistiškai, aš tiesiog integruotas mano stilių čia.
Tai neabejotinai priimtinas būdas tai padaryti.
Pažiūrėkime, ką tai atrodo.
Taigi, aš eisiu atgal čia, ir Aš bus peržiūrėti savo table2.HTML.
Na, tai ne visai tai, ką aš norėjau, bet tai yra būtent tai, ką mes paprašė.
Mes sakė, kad šis stilius yra ketina kreiptis į mūsų stalo.
Mūsų stalo dabar turi vieną pikselį pločio, kietas mėlynos sienos aplink jį.
Mes ne faktiškai gauti Prie stalo ląsteles.
Užtenka tik gauti prie stalo.
Taigi CSS dirbo.
Jis taikomas Stilių mūsų stalo.
Bet ne visai tai ką mes norėjome tai daryti.
Kaip mes gauname tai padaryti tai, ką mes norime, kad ji daryti?
>> Na, tegul pažvelgti dar vienas versija tai table3.HTML.
Taigi, aš tik ketina uždaryti šiuos skirtukus.
Aš ruošiuosi eiti atgal per čia mano byla medį, ir atverti table3.HTML.
Vėlgi, tai vyksta atrodyti gana panašus čia pradžioje.
Tačiau pastebėkite, šį kartą, o ne naudojant stilių, integruotas į dešinę ten,
Aš ruošiuosi grandis Stilių naudojant link tag.
Taigi, aš, matyt, susiejimas A Stilių vadinamas tables.CSS,
ir tai gerai lygus Stilių tik means-- gerai,
kas tai yra byla, palyginti su tai, ką Aš doing-- yra stilių, kad aš
naudojant mano puslapyje.
Taigi, jei aš tikrai noriu pamatyti, kas Darau su CSS čia
Man reikia eiti atvira, kad table.CSS byla taip pat.
Taigi mes grįžti per čia vėl mūsų failų medį.
Yra table.CSS.
Mes pop jį atidaryti.
Dabar mes matome šiek tiek CSS.
Matyt, turiu pora dalykų vyksta čia.
Aš, matyt, norite įdėti penkių pixel pločio, kietas raudonas kraštelis,
aplink mano stalo.
Mes jau žinome, kad vyksta tiesiog eiti perimetrą.
Mes matėme, kad table2.HTML.
Su kiekvienu iš eilės, aš matyt norite nurodyti
kad eilutė aukštis yra 50 pikselių aukščio.
Taigi kiekvienoje eilutėje, nepamirškite kad tai, ką TR žyma nėra,
Aš todėl 50 pikselių aukščio.
>> Galiausiai, turiu šį komentarą.
Ir tai, kaip mes darome komentarus CSS.
Tai labai panašus į areštuoti blokas komentarai sintaksė velniop žvaigždė.
Visi įrašai norite.
Nėra velniop velniop nors CSS.
Dėl trumpų inline komentarus, mes turime Čia naudoti šį konkretų formatą.
Atrodo, Darau daug dalykų mano TD žymes.
Įsiminti TD žymeles, ar stalo duomenys, kurie iš tikrųjų yra tik
viduje stulpelių Mūsų eilutės, ir, matyt,
kiekvieno duomenų gabalas mano stalo, noriu
nustatyti fono spalvą juoda, spalva turi būti balta,
spalva yra įgyta spalva.
Taigi tai bus mano puslapyje tekstas.
Noriu didelis šriftą, 22 atkreipti šriftą, ir aš noriu
kad ji būtų iš šriftų, Gruzija.
Taigi, aš nesiruošia turi numatytąjį šriftą.
Aš ruošiuosi nurodyti Gruziją, kuri yra viena iš tų interneto saugių šriftų
kad mes matėme anksčiau.
Aš noriu, kad mano tekstas būtų suderintas centralizuotai, viduryje akių,
Aš nenoriu, kad ji turi būti palikta suderinta arba į dešinę suderinti.
Ir aš noriu, kad mano stulpelio plotį būti 50 pikselių pločio, taip pat.
Paimkime pažvelgti ką tai atrodo,
ir pamatyti, jei tai gal pagerėjimas.
Taigi, aš ruošiuosi eiti į table3.HTML, kuris Prisiminkite, apima table.CSS kaip nuoroda,
ir mes jį peržiūrėti.
Tai daug geriau, tiesa?
Tai iš tikrųjų pradeda atrodyti Daug daugiau kaip daugybos lentelę.
Turiu tą raudoną sieną aplink mano stalo, bet dabar
Aš taip pat nurodyta, kad Kiekvienoje eilutėje yra 50 pikselių pločio,
ar tai 50 taškų tall-- pasiteisinimas me-- kiekviename stulpelyje yra 50 pikselių pločio.
Kiekvienos skilties duomenys, ir tik duomenys, turi juodą foną.
Štai kodėl tie baltos linijos yra ten.
Kadangi kosmose tarp visų tų ląstelių,
tai ne į sieną ir pati, tai tik
Aš tik pildant į ląstelės, kurios iš tikrųjų
daro lentelės sienas, kurios matyt, egzistuoja visi kartu, tai
buvo tik plonos baltos linijos.
Dabar jie matomi.
Dabar jie nusibaigti ekrane.
Ir todėl tai yra labai paprastas Stilių, kad aš taikomas,
ir dabar mano stalo atrodo daug labiau patinka keturių iki keturių daugybos lentelė,
vietoj tiesiog Pogmatwany netvarka, kur viskas yra aiškiai eilutes ir stulpelius,
bet ne super gerai organizuota.
Mes tikrai tik įbrėžimas paviršiaus ką jūs galite padaryti su CSS čia.
Laimei CSS dokumentacija yra gana paprasta.
Galite naudoti keletą jos atributus, gana dažnai.
Tie, mes kalbėjome apie anksčiau šiame video.
Yra keletas, kurie jums tikriausiai nebus panaudoti visi.
Ir tai gerai, per daug.
Bet tiesiog žinau, kad yra daug dokumentacijos ten.
Taigi, net jei mes ne apima viską, jūs tikrai ne į kairę nuo jūsų pačių.
Bet CSS yra tikrai įdomus eksperimentuoti su.
Ir aš norėčiau primygtinai rekomenduojame jums žaisti aplink su savo tinklalapius,
ir pamatyti, kaip jūs galite padaryti juos atrodyti ir jaustis pagerinti vartotoją
patirtis Lankymūsi savo puslapį.
Aš Doug Lloyd.
Tai CS50.