>> [MUSIC PLAYING]
ALLISON Buchholtz-AU: Belə ki, Biz əsasən yalnız olacaq
bir rundown vermək CSS, biz bilirik, çünki
Bu əhatə deyil ki, bütün bölmələr.
Və biz, həqiqətən əmin etmək istəyirəm uşaqlar, sizin ixtiyarınızdadır bu alət
Bu etmək imkanı var, çünki Web çox gözəlləşir baxmaq.
>> Və sonra, bir web bina edirsinizsə Siz yəqin ki, bu, olduqca etmək istəyirəm.
Mən demək, siz yoxdur, amma mən təklif edirik. [Gülür]
Istifadəçilər istifadə etmək istəyirsinizsə, bilər bir az [işitilemez] etmək istəyirik.
Beləliklə, biz cəhd və yalnız vermək olacaq bəzi əsas alətləri və anlaşma,
ki, çıxmaq və zaman CSS haqqında hər şeyi tədqiq,
Bu gibberish tam deyil, CSS kimi bəzən olmaq.
>> TOMAS Reimers: Bəli.
Allison olduqca yaxşı bildirib.
Belə ki, ilk şey biz tapmaq CSS nədir ilə başlamaq lazımdır?
Belə ki, CSS zəhmli deyil.
CSS--
>> ALLISON Buchholtz-AU: var Bizim Seminarın adı.
>> TOMAS Reimers: Bəli.
Bu həqiqətən vacibdir Əgər ki, başa düşürük.
Siz yalnız bir üz alsaq zəhmli əgər bir şey, bu CSS var.
İki CSS dayanır ki, Cascading Style Sheets.
Belə ki, onun əsas da, CSS yəni bir stil,
bu bir web page stil üçün imkan verir.
Və sonra o deməkdir ki, nə bu bir yol saytlarda stil əlavə etmək üçün.
Belə ki, stil, biz hər şey demək ki, structural-- deyil
belə ki, rəng kimi şeylər, background images, sərhədləri kimi, padding,
qaydalarından.
Biz haqqında danışmaq lazımdır nə bütün bir az deməkdir.
>> Beləliklə, biz yalnız irəli getdi etdik və gedit o qədər də açdı.
Belə ki, bu index.html edir.
Bu main.css edir.
Belə ki, main.css heç bir şey yoxdur.
ALLISON Buchholtz-AU: bu günə qədər heç bir stil.
TOMAS Reimers: Heç biri.
Siz görəcəksiniz kimi, bu həqiqətən çirkin site.
ALLISON Buchholtz-AU: Bu yalnız düz deyil.
TOMAS Reimers: Bəli.
Bəli, bu, çirkin deyil yalnız minimalist var.
Və sonra biz burada index.html var.
Və belə bir sürətli üçün HTML, Allison recap,
Yalnız səhifə haqqında danışmaq istəyirsiniz?
>> ALLISON Buchholtz-AU: Bəli.
Belə ki, açıq-aydın, biz HTML var tag, yalnız adları HTML fayl.
Biz CSS, burada mövzu var Awesomeness, which-- geri getmək əgər.
Haradadır?
>> TOMAS Reimers: Oh.
Bəli, siz görə bilərsiniz.
ALLISON Buchholtz-AU: Və mövzu qeyd
sağ qədər burada bu nişanı mövzu deyil.
Və sonra "Salam, dünya!" ki, biz yalnız mətn
web tapılanlar geri That səhifə.
Back.
Hansı yalnız bizim bədən deyil düz mətn burada.
Həmçinin, bir şey üçün Burada baxmaq əgər, bildiriş,
Tomas Bu qədər işə Bizim slide iki.
Belə ki, kimi uzun siz bütün kimi Bu üç gözəl istəyirik.
Onlar istədiyiniz hər hansı üçün ola bilər.
Nə çox vacibdir, yalnız ki, bu üç şeyi hər var.
>> TOMAS Reimers: Cool.
A doc növü əlavə?
ALLISON Buchholtz-AU: Bəli.
TOMAS Reimers: Bəli.
Cool.
ALLISON Buchholtz-AU: Görünür, Mənim ÇGKS mənim kimi deyil.
TOMAS Reimers: Oh, yalnız bizə sec vermək Allison onun mikrofon həyata keçir edir.
Belə ki, Bəli.
Belə ki, biz əsas səhifə var.
Bu unstyled növü var.
Biz çox yoxdur.
Biz yalnız əsasən mətn var.
Biz stil var.
Biz adı var.
Belə ki, yalnız-çılpaq sümüklü komponentləri bir web etmək.
>> Belə ki, orada dən edək CSS nə haqqında danışmaq
və bu kimi və bütün görünür.
Belə ki, üçün
ALLISON Buchholtz-AU: Geri slaydlar.
TOMAS Reimers: slaydlar geri.
Və Allison üzərində bilər.
>> ALLISON Buchholtz-AU: Woo.
OK.
Sizin CSS faylı Belə ki, siz olacaq
Bu bir çox şeyi seçiciler çağırıb.
Yalnız olacaq Sizin CSS fayl əsasında.
Bu, sadəcə olacaq çox bu çox.
Belə ki, selector.
Bu yalnız ümumi anatomiya edir.
Biz vasitəsilə getmək olacaq nümunələri, çünki uşaqlar heç vaxt
Mən hiss edirəm, mənim bölmə seyr mücərrəd şeyi kimi
həqiqətən mənası yoxdur.
O, həmişə nümunələri görmək üçün kömək edir.
>> Beləliklə, biz bir selector var.
Ki, bir tanıdan olacaq biz istədiyiniz nə stil müraciət etmək.
Və sonra hər hansı bir ola bilər qaydaları və dəyərləri müəyyən.
Siz görə bilərsiniz seçiciler Belə ki, bədən kimi bir şey ola bilər,
və ya P maddə, və ya header, və ya hər hansı,
hər hansı HTML tags olmaq istəyirəm.
>> Bu halda ki, biz bədən.
Və biz bir qayda var, olan bu uyğundur
nə üçün stil aiddir.
Belə ki, bu halda, biz fon rəngi və font çəki.
Belə ki, bu dəyişikliyə gedir bir şey fon
Bizim HTML fayl hər hansı bir bədən tag daxilində.
Və vermək olacaq Bu mavi dəyəri.
>> Belə ki, etmək olacaq background mavi.
Və sonra bədən ərzində bir şey qalın bir font çəki üçün gedir.
Belə ki, yalnız olacaq Bizim bütün mətni qalın.
Və bu yalnız bir selector edir.
Amma bu çox ola bilər.
Və biz olacaq kimi sonra, bir az daha necə
Orada işlər və daha çox nümunələr etdi.
Əlavə etmək istədiyiniz bir şey?
>> TOMAS Reimers: Xeyr
Allison var.
Biz yalnız bir qədər kəsmək olacaq Burada misal saytda nümunə.
Belə ki, həqiqətən bu götürək.
Bu mükəmməl deyil.
Mən yalnız surəti və yapışdırıb gedirəm Bizim main.css fayla doğru.
Mən bunu saxlamaq üçün gedirəm.
Və sonra biz bunu davam edəcək.
Belə ki, yan qeyd biri Ən sinir bozucu şey
Bir faylı saxlamaq yoxdur, əgər sonra kimi, səhifə yeniden,
və kimi, nə deyil baş dəyişiklik?
Bu olur.
Belə ki, burada biz ki, gördüm bizim bir mavi fon veb
və bir mətn qalın harflerle.
>> Mən də, qeyd etmək lazımdır, əgər uşaqlar bir şey haqqında suallarınız
biz edirik, hiss edin pulsuz dayandıra və bizə xahiş.
Biz tamamilə istediğiniz suallar sahəsində.
>> Aydındır ki, ilə: ALLISON Buchholtz-AU CSS, hər şey öz üzərinə qurur.
Bir şey deyil, əgər Belə ki, indi mənada biz
istəmirəm ki, daha sonra aşağı bataqlıq üçün.
>> TOMAS Reimers: Belə edək növ bu yarmaq.
Belə ki, başlamaq istəyirsiniz burada selector ilə?
>> ALLISON Buchholtz-AU: Bəli.
Mən əvvəl deyirdi ki, bədən Burada yalnız bizim selector edir.
Belə ki, biz index-- ah geri üzərində getmək əgər.
>> TOMAS Reimers: Mən yalnız bağladı.
Mənə bir ikinci verin.
Belə ki, index.html, Açıq Fayl.
ALLISON Buchholtz-AU: Cool.
Belə ki, burada qeyd, biz Sağ, bu bədən tags var?
Belə ki, selector yalnız uyğundur Biz söhbət edirik tags.
Burada bədən Belə ki,.
Belə ki, nə deyirdik edirik hər şey biz geri getmək olar?
Mən yalnız isterdim kimi ekran toxunmaq.
Bu, çox soyuq olarıq.
>> O ərzində Belə ki, bir şey gördük bədən tags,
, yalnız kimi, mətn idi və ümumi bədən
kimi, fon aiddir.
Əgər istəyirsinizsə, fon dəyişdirmək,
ki, bir bədən tag olacaq.
Yalnız onlara müraciət bu qaydaları var.
>> Belə ki, biz getmək idi index.html and-- həqiqətən,
biz bir şey ola bilər bədən xaricində?
Biz olsaydı, kimi, footer və ya bir şey, bu tətbiq deyil.
Amma ərzində bir şey Bu bədən tags gedir
Bu orqan tərəfindən təsir biz etdik selector.
Siz yazın əgər Belə ki, başqa bir şey orada
>> TOMAS Reimers: ki ev idarə edək.
Belə ki, əgər ki, biz div-- idi Siz ola bilər yalnız bir tag.
Mən yaxın gedirəm.
Və ya bu paraqraf edək.
Belə ki, p paraqraf üçün dayanır.
Və paraqraf ərzində.
Və sonra mən "Bu mətn." Deyə
Cool.
Və sonra mən bu qayda tətbiq edib əvəzinə bədən bir paraqraf.
Siz yalnız cari necə görürsünüz yeni yaradılmış maddə, sağ,
deyil, bütün şey.
Ki, hissi edirmi?
>> ALLISON Buchholtz-AU: Belə ki, bu bütün bədən deyil,
lakin indi bizim selector yalnız bəndinə uyğundur.
Belə ki, biz yalnız cəsarətli və mavi var Bu xüsusi paraqraf üçün,
Bu, yalnız bir şey, çünki ki, p tag ərzində əlavə edilir.
>> TOMAS Reimers: sort ki, mənada edirmi necə hər şeyi başqa şeylər içine?
ALLISON Buchholtz-AU: Həmçinin, yalnız kimi, ən yaxşı yollarından biri demək
Həqiqətən CSS rahat almaq üçün bu kimi şeylər etmək,
yalnız cəhd edin.
Bu bir şey yazın çox sadə out, Yenile edib və nə görmək.
Və ən CS ilə kimi, təcrübə tez-tez bilərsiniz
daha yaxşı səbəb intuitiv anlaşma.
Hətta daha bizə yalnız, kimi, sizə səslənirəm.
>> TOMAS Reimers: Absolutely 100% nöqtəsində razıyam.
Biz bu getmək əgər Belə ki, başlanğıc olsun Bu iki nə dəqiq nə dissecting.
Beləliklə, biz bu iki qaydaları var.
Belə ki, ilk bir fon rəng deyil.
Və biz bunu müəyyən etdik ki, görəcəksiniz dəyəri, mavi bərabər.
>> Belə ki, CSS, CSS sort haqqında çox boş
Siz rəng müəyyən etmək üçün icazə edirik.
Belə ki, adı ilə onlara müəyyən edə bilərsiniz.
Siz həmçinin kimi bir şey edə bilər "qırmızı".
Və biz bu geri sonra əgər, Siz fon qırmızı olduğunu görəcəksiniz.
Siz həmçinin Mən sizə hesab edirəm ki, həqiqətən əldə edə bilərsiniz Bu olduqca yaradıcı əldə edə bilərsiniz,
Siz bilməz?
>> ALLISON Buchholtz-AU: I Siz hex istifadə edə bilər.
Siz edə bilərəmmi?
>> TOMAS Reimers: Bəli.
Belə ki, hex istifadə edə bilərsiniz.
Amma adı müdrik düşüncə alıram.
Biz var?
ALLISON Buchholtz-AU: Siz bir neçə edə bilərsiniz.
Ən çox rəng kimi olduqca çox siz kimi konseptual mənada adı bilər, mən qızıl biridir.
>> TOMAS Reimers: Biz çalışırıq cəhd qızıl istəyirik.
ALLISON Buchholtz-AU: I Chartreuse var hesab edirəm.
TOMAS Reimers: Bəli.
Bax?
Belə ki, olduqca yaradıcı əldə edə bilərsiniz.
>> ALLISON Buchholtz-AU: Siz olduqca yaradıcı əldə edə bilər.
Kimi, siz hesab edə bilər, əgər rəng adı, orada yəqin ki, var.
Siz, həqiqətən, gözəl istəyirsinizsə ətraflı, siz hex bilərsiniz.
>> TOMAS Reimers: Bəli.
Belə ki, hexadecimal.
Sizlərin bu geri Xatırlayırsınızsa Köhnə PSET olan, Image bərpa,
Sizlərin məşğul idi Bu hex dəyərləri ilə.
Və sort ki, nə recap üçün hex bu saxlanılır üç dəyərləri var.
Belə ki, iki əlavələr qrup var.
İlk iki qırmızı əhəmiyyət kəsb edir.
İkinci biri Yaşıl dəyər.
Və son bir mavi?
>> Belə ki, FF təmsil olur bir hexadecimal 255.
Belə ki, 255 qırmızı, 255 var mavi, yaşıl, və 0.
Və dəyərlər 0 və 255 arasında dəyişir.
>> Auditoriya: Sağ.
Belə ki, mahiyyətcə, biz axtarış edə bilər Biz istədiyiniz hər hansı bir rəng üçün internet,
və həqiqətən tanınmış müəyyən rəng spektri Combo,
və sonra biz onu qoymaq bilər?
ALLISON Buchholtz-AU: Eynilə elə.
Belə ki, olduqca çox tam nəzarət var rəng üzərində CSS ərzində istədiyiniz.
Biz haqqında danışmaq gedir fon şəkilləri sonra?
Yoxsa biz bunu istəyirsiniz?
>> TOMAS Reimers: Bəli.
Tamamilə.
Belə ki, ilk, yalnız göstərir ki, qırmızı və yaşıl, sarı edir.
Və bəzi ehtiyac varsa Bu tapmaq kömək, siz
Google bir şey edə bilərsiniz "rəng seçici." kimi
ALLISON Buchholtz-AU: Oh, belə yaxşı.
Mən Renk Seçici sevirəm.
>> TOMAS Reimers: colorpicker.com yaxşı nümunəsidir.
Və burada, siz var ki, görəcəksiniz tam Photoshop kimi rəng seçici.
>> ALLISON Buchholtz-AU: Mm-hm.
Həmçinin, sərin şeyi sən rəng sxemləri yarada
yoxdur ki, kimi rəng clashing.
TOMAS Reimers: Və sonra burada hex dəyər var.
Beləliklə, siz həmişə əsasən online tapa bilərsiniz yerlərdə olan hex dəyər almaq üçün.
Bu kimi, yalnız sort deyil biz ədəd dünya rəng görmək.
Biz online getmək ki, daha çox və biz istədiyiniz nə rəng tapmaq
və sonra sayı aşağı edir.
Yalnız həqiqətən asandır, çünki yol CS şeyi istinad.
>> ALLISON Buchholtz-AU: Və sonra also-- var
Mən saytın dəqiq adı unutmayın.
Amma mütləq var Mən , Adobe şey hesab edirəm ki,
ki, sizin üçün rəng sxemləri yaradır ki, həqiqətən, sərin çünki
definitely-- bəzən var anlamaq çətin,
oh, mən bu rəngi istifadə etmək istəyirsinizsə, nə bir faydalı bir ola bilər
mənim saytda başqa yerdə istifadə etmək, kimi, bu gözəl və vahid edir.
>> TOMAS Reimers: Allison bəhs Adobe bir Kuler adlı düşünürəm.
Bu K-U-L-E-R var.
ALLISON Buchholtz-AU: Mən belə düşünürəm.
Hesab edirəm ki, biri olduqca əminəm.
>> TOMAS Reimers: Xoşladığım var həmişə Color Scheme Designer olmuşdur.
>> ALLISON Buchholtz-AU: Ooh.
>> TOMAS Reimers:, İndi deyil
>> ALLISON Buchholtz-AU: Ah, bu gözəl deyil.
>> TOMAS Reimers: Və əsasən kimi, demək olar ki,
Mən bir-birinə yanında üç rəng istəyirəm.
Və sonra gözəl bir şey edək.
Və sonra nümunə əldə edə bilərsiniz kimi baxmaq bilər nə.
Və sonra hər hansı bir artıq hover əgər Onlara bu hex dəyər verir.
>> Belə ki, yalnız yaxşı bir yol kimi başlamaq üçün rəng sxemləri haqqında düşünür
bir web və ya nə rəng birlikdə getmək bilər.
Ki, təəccüblü ola bilər, çünki Sizcə kimi asan deyil seçin.
Və sonra digər sərin şey Mən həmişə bu sayt haqqında gördük
Siz Nümunələr hit varsa, bu lazımdır ki, nə nümunə veb göstərmək
ki, rəng sxemi istifadə kimi baxmaq bilər.
Hər halda.
>> Geri faktiki CSS.
ALLISON Buchholtz-AU Amma təbii ki, biz Bu istinadlar faydalı ola bilər bilirik.
TOMAS Reimers: Xeyr, onlar mütləq faydalı ola bilər.
İkinci qayda Allison So?
>> ALLISON Buchholtz-AU: Bəli.
İkinci qayda yalnız Bizim font uyğun.
Belə ki, font çəki yalnız növ idarənin ixtiyari nümayəndəsinin, belə ki, çəki ki
Siz kimi, yalnız istədiyiniz əgər, normal və ya kimi, nazik fonts,
və ya bu halda kimi, qalın.
I unutmayın.
Siz istəyirdi əgər it-- var nə normal kimi, yalnız bir nazik bir?
TOMAS Reimers: Mən, həqiqətən, yoxdur bir nazik bir var əgər bilmək.
ALLISON Buchholtz-AU: I unutmayın.
Belə ki, font çəki adətən biz yalnız qalın üçün istifadə edin.
Siz daxil həqiqətən almaq istəyirsinizsə Bu, biz sizə göstərmək olacaq.
W3Schools müxtəlif var şey fonts üçün nə edə bilər.
Amma əsasən, heç istəyirsinizsə, font haqqında bir şey dəyişdirmək üçün,
Bu həmişə olacaq kimi font-bir şey.
Siz əgər Belə ki, font-ailə kimi olacaq faktiki növü dəyişdirmək üçün çalışırıq.
Bu halda font-style olacaq cursive kimi etmək istəyirəm,
və ya italik, və ya etajer.
Və ya hətta font rəng, əgər ki, dəyişdirmək istəyirdi.
>> TOMAS Reimers: Yup.
Belə ki, dəyişə bilərsiniz.
Və sort yalnız İndi recap, belə ki, siz
biz burada selector qədər olduğunu görürük.
Biz bu qıvrım aşırma var.
Və sonra biz qaydaları semicolons ayrılmış.
Ki, hissi edirmi?
Evet?
Cool.
Belə ki, good-- əgər
>> ALLISON Buchholtz-AU: Back.
TOMAS Reimers: ən xüsusi danışaq seçiciler hansı haqqında var.
"İndi biz səbəb sort yalnız tags göstərilir.
Amma uşaqlar inandırıcı oldu.
Iki-ci maddələrdə var De bir səhifə və sizə
stil etmək istəyirəm Bir deyil, digər,
Siz özünüzü məhdudlaşdırmaq istəmirəm müxtəlif aktual HTML istifadə etmək
tags onlara müxtəlif üslub vermək.
>> Belə ki, biz əsas üç seçiciler növləri.
ALLISON Buchholtz-AU: Bəli.
Beləliklə, biz nə olan tag var biz indi söhbət etdik.
Belə ki cür bədən və ya p kimi.
Və sonra biz olan sinif Biz CSS faylı müəyyən zaman,
həmişə dot olacaq, nə Sizin sinif adı olmaq istəyirəm.
Bu çox şeyə müraciət edə bilər.
>> Beş-ci maddələrdə var De və onların üç iki
Eyni səpkili etmək lazımdır, Siz onu bir sinif müraciət edirəm.
Bu biz bunu yalnız bir yoldur.
Biz sizə bir misal verim bu, həqiqətən göstərir.
Amma bəlkə bir tag olsa p, bundan sonra, siz yazmaq olardı
sinif nə dərsləri bərabərdir ona müraciət etmək istəyirəm.
Biz istəyirik Belə ki, hər hansı sinif seçiciler Bu xüsusi bəndinə müraciət etmək,
biz yalnız bu kimi yazmaq bilər.
Əlbəttə, mən bir misal hesab edirəm ki, daha konkret edəcək.
>> Biz digər bir id biz işarə edən deyil
bir hash, və ya funt, və ya hashtag ilə.
TOMAS Reimers: octothorpe.
ALLISON Buchholtz-AU: octothorpe.
Bu da işləyir.
Və bu həqiqətən unikal olmalıdır.
Onlar yalnız müraciət etməlidir Sizin səhifə bir şey.
Ki, müəyyən bir maddə olub, belə ki, və ya siyahısı maddə, və ya hər hansı,
bu unikal olmalıdır.
Eyni şəkildə biz yalnız demək kimi, class = "Class1 class2"
Bu yalnız biz nə olursa olsun id ola bilər.
TOMAS Reimers: Bəli.
Belə ki, mütləq danışaq Burada nümunələri haqqında.
Mən yalnız dalış gedirəm düz geri kodu daxil.
Belə ki, bizim HTML baxaq.
Və belə ki, biz indi bir paraqraf var.
Bu mətn.
Mən yalnız dəyişdirmək üçün gedirəm Bu. "Bu mətn 1."
Və sonra biz olacaq bir "Bu mətn 2."
>> ALLISON Buchholtz-AU: İkinci biridir.
TOMAS Reimers: Yup.
Beləliklə, biz indi sağ "Bu mətn 2,"
Və biz yenidən əgər görmək olacaq səhifə, biz tapmaq olacaq
Biz çalışırıq ki, find--
ALLISON Buchholtz-AU: Ooh.
TOMAS Reimers: Bəli.
Biz "Bu tapmaq olacaq Mətn 1 "və" Bu "text 2.
>> ALLISON Buchholtz-AU: Və out sevimli sarı rəng.
>> TOMAS Reimers: Və görürsünüz İndi bizim selector ki,
olan p-nin aiddir, və ya ci maddələrdə, onların hər ikisi təsir,
onların hər ikisi cavab çünki vəziyyəti bir p tag də istəyirik ki,.
Bu ümumi mənada edir.
Belə ki, sual, yaxşı ki, nə biz istəyirdi yalnız bir almaq?
Belə ki, məhz Allison deyirdi kimi, biz bunu digər iki yolu var.
Mən id ilə başlamaq üçün gedirəm.
>> ALLISON Buchholtz-AU: Üzrə id ilə başlamaq edək.
>> TOMAS Reimers: Və həm Bu atributudur.
Belə ki, atributları HTML mövcuddur.
Və nə onlar deyil əlavə bir şey
ki, tag daxilində tag adı ayrıdır.
Belə ki, bir çox əlamətləri ola bilər.
Evet?
>> ALLISON Buchholtz-AU: Mən yalnız gedirdi PSET 7 Sizin Məsələn, demək,
Əgər hər hansı align cəhd mərkəzi şeyi,
istifadə edə bilər "Text = mərkəzi align."
Və yəqin ki, qeyd mərkəzi olmalıdır
mətn və ya naviqasiya bar.
Belə ki, yalnız da bir atributu var ilə tanış ola bilər.
TOMAS Reimers: bir dəstə var Siz görəcəksiniz ki, atributları.
Bəli.
PSET 7 yaxşı istinad kimi.
Biz id var.
Siz həmçinin ola bilər sinif, bu kimi şeylər.
Bir tag çox atributları ola bilər.
Belə ki, id ilə başlayan ən biz iddia edək Bilmirəm idarənin ixtiyari nümayəndəsinin, bir id var istəyirəm.
Biz, xüsusi zəng edəcəyik bu bir, çünki biz istəyirik
qalın etmək üçün gedir, və qeyd, və hər hansı.
ALLISON Buchholtz-AU: Bu mý super xüsusi ola bilər.
TOMAS Reimers: Belə ki, bu bir, biz id xüsusi var.
Yolu seçmək üçün Beləliklə, edir main.css, bir p tag deyil,
OK, #special edirsiniz?
Və seçir id xüsusi ilə bir şey.
Bu hər kəs üçün mənada edirmi?
Auditoriya: Bəli.
TOMAS Reimers: Cool.
Belə ki, indi biz geri getmək əgər, Biz whoops see-- lazımdır.
Bəli.
Biz görəcəksiniz ki, yalnız seçir id xüsusi bir.
Evet?
Sərin səslənir.
Bəli.
>> Auditoriya: Bir şey bir ola bilər həm də sinif və id aid?
>> TOMAS Reimers: Bəli.
Auditoriya: OK.
Əgər vermək və sonra nə olur ki, münaqişə CSS bəzi qaydalar?
TOMAS Reimers: Absolutely.
Biz mütləq olacaq Bu barədə danışacaq.
Belə ki, məhz nə əldə edilmişdir , siz də dərsləri ola bilər.
Belə ki, mən iddia edək üç-ci maddələrdə və mən
İlk stil istədi İki lakin üçüncü deyil.
Bəli, ilk fikir Mən də ola bilər yalnız ikinci biri bir id verə bilər.
Amma siz bilərsiniz, bir id çünki, tam Allison deyirdi kimi,
unikal olmalıdır.
>> Belə ki, əvəzinə bir id, nə istifadə edə bilərsiniz bir sinif istifadə edə bilərsiniz.
Və sinif bu imkan verir əsasən demək nə etmək,
bu bir qrup hissəsi kimi icazə verilmir.
Bu halda, bizim qrup Xüsusi adlanır.
Və biz sonra nə olacaq nə biz deyil, funt daha demək olacaq
biz dot istifadə etmək olacaq.
OK?
Və fark funt və dot yalnız CSS fayl ərzində mövcud,
deyil HTML ərzində.
ALLISON Buchholtz-AU: Bəli.
Mühüm fərq.
>> TOMAS Reimers: Mən qədər mübarizə idi
Mən HTML hash qoymaq çünki sonra yalnız uzun müddət axmaq hiss etdim.
Bu, həm də seçir necə ki, sinif olanları?
Cool.
>> İndi hər şeyi çox dərsləri ola bilər.
Mən ilk etmək istədiyini deyirlər İki sarı bir fon var
və ikinci iki var mavi bir font color.
OK.
Mən istədiyiniz nə mən, həqiqətən bilmirəm Bunu istəyirəm, amma bilərsiniz.
>> ALLISON Buchholtz-AU: not Bilər Sizin veb üçün tövsiyə.
Amma bizim üçün, bunu edəcəyik.
>> TOMAS Reimers: Bu deyil yaxşı bir rəng sxemi.
ALLISON Buchholtz-AU: Bəli, sarı və mavi mənim orta məktəb rənglər.
Mən də bilmirəm.
TOMAS Reimers: Allison yüksək Məktəb böyük rəng sxemi var idi.
[Gülüş]
Beləliklə, biz zəng edə bilərsiniz nə bu bu zəng üzrə qoy biz xüsusi var
və biz Pretty var.
Mən bu, istifadə, gəlir daha təsviri adları.
ALLISON Buchholtz-AU: Bəli, mən Sarı və ya mavi kimi, bu zəng.
>> TOMAS Reimers: Biz deyilik həqiqətən, real web edilməsi
biz bunu deyilik buna görə.
Amma əgər həqiqətən Bir real web idi
ola bilər kimi, maddə header, maddə content, ilk sözü,
imkan verir ki, kimi şeylər, Siz daha çox təsviri olmalıdır.
Bu yalnız dəyişənlərin kimi həqiqətən var.
Onlar bir şəkildə olduğu adına olmalıdır Siz kimi qədərdir Bəli, edə bilərsiniz.
Perfect.
>> Belə ki, fon rəngi.
Və sonra biz belə demək olacaq rəng dəyişdirmək üçün yol yalnız "color" dir.
Və biz bu mavi etmək olacaq.
Bu sərin var.
Belə ki, indi biz İlk iki xüsusi var.
Növbəti bir olacaq "pretty = sinif." var
ALLISON Buchholtz-AU: Və sonra lazımdır orta bir "pretty" əlavə etmək istəyirəm.
TOMAS Reimers: Yup.
Və sonra orta bir, "pretty" nə olur əlavə etmək
Yalnız bir yer var.
Class atributu Belə ki, bir yer ayrılmış siyahısı
bütün dərsləri ki, tag tətbiq edilir.
OK?
Bu bir məxsusdur kimi deyil adlı xüsusi sinif bir növ
"Xüsusi, kosmik, yaraşıqlı."
Bu iki classes-- məxsusdur xüsusi və olduqca.
Bəli?
Cool.
>> Və sonra biz baxsaq nə olar, biz istəyirik
ilk var ki, görəcəksiniz gedir Sarı fon, qara, mətn.
İkinci one--
>> ALLISON Buchholtz-AU: bold --has mavi, mətn sarı fon.
Bizim son bir yalnız var Biz ona həvalə mavi mətn.
>> TOMAS Reimers: Cool?
Seçiciler necə işləyir?
Awesome.
>> ALLISON Buchholtz-AU: biz istəyirsiniz Bundan sonra münaqişə haqqında danışmaq?
>> TOMAS Reimers: Belə ki, Bəli.
Tamamilə.
Belə ki, nə olur sağ, münaqişə var?
Ilk bir iddia edək bir şey müəyyən edir qədərdir
ALLISON Buchholtz-AU: Bəlkə bu bir fon dəyişir?
TOMAS Reimers: Bəli.
Belə ki, biz gedirik "pretty" qızıl üçün fon dəyişir.
ALLISON Buchholtz-AU: Siz yalnız etdiyiniz bütün böyük rəng bu gün Tomas.
TOMAS Reimers: Bəli.
Mən aşkar çünki mən Bir real rəng kimi qızıl istifadə edin.
Beləliklə, biz yalnız nə olacaq.
Mən də Sunset real rəng olduğunu düşünürəm.
Auditoriya: Sunset real rəng var?
ALLISON Buchholtz-AU: Nin cəhd edək.
TOMAS Reimers: Bu demo sonra yalnız halda messes, çünki
Mən ayıklama etmək istəmirəm.
Beləliklə, biz qızıl real rəng olduğunu bilirik.
Belə hər hansı bir guesses nə baş verəcək?
>> ALLISON Buchholtz-AU: hər hansı bir fikir?
>> Auditoriya: [işitilemez].
>> TOMAS Reimers: Bəli.
Belə ki, doğru var.
Əsasən, edir Bu verildi son qayda.
>> ALLISON Buchholtz-AU: Belə ki, bu burada kaskad qüvvəyə minir.
>> TOMAS Reimers: Belə ki, necə yadda biz stillər kaskad var idi?
Ki, Belə ki, biz növ demək biz qaydaları bir dəstə var ki,
bir-birinə üst müraciət və onlar da bir-birinə yalnış bilər.
>> ALLISON Buchholtz-AU: Belə ki, alt nə var
üst var nə yalnış düçar edər.
Siz tamamilə qaydaları ola bilər əvvəlcədən bir şey inkar.
Siz olmaq istəyirəm Ona ​​görə də var Siz dizayn olduğunuzda diqqətli,
belə ki, qaydaları yaratmaq deyilik ki, Yalnız tamamilə əsas edirik.
>> TOMAS Reimers: Və ya bəlkə siz qaydaları yazmaq istəyirəm.
>> ALLISON Buchholtz-AU: Və ya bəlkə siz.
Bəli.
>> TOMAS Reimers: Bir var Pretend çox şey aiddir sinif,
amma dəyişmək istədiyiniz deyək qırmızı və font fon rəngi
ən qalın çəki hər şeyi, lakin bir,
Yalnız fon rəngi istəyirəm qırmızı ola bilər, lakin bütün digər istəyirəm
xassələri, bir şey edə bilər kimi "font-weight = normal"
olan o qalın dəyişiklik geri olacaq.
Evet?
Yenə ən yaxşı yolu, mən hesab edirəm ki, Allison bu, yalnız təcrübə ifadə etdi.
>> ALLISON Buchholtz-AU: Sınaq.
>> TOMAS Reimers: Təcrübə, təcrübə, təcrübə və təcrübə.
Mən hesab edirəm ki, insanların bir çox bilirik CSS tahmin və çek bir çox
Ü günün sonunda Siz bir şey kimi etmək istəyirəm
Bir kobud fikir var, lakin Siz hələ yəqin ki, gerek
əmin etmək üçün cəhd Siz kimi görünür nə bilirik.
>> Auditoriya: Əgər tətbiq edirik dərsləri, bir çox
Eyni maddəyə və ya ikibölməli, yoxdur
nə üçün siz quotes onları yazın?
>> TOMAS Reimers: Xeyr, deyil.
>> ALLISON Buchholtz-AU: Hansı məsələ Sizin CSS stil ərzində sifariş.
Auditoriya: Siz sual təkrar edə bilər?
TOMAS Reimers: Oh.
ALLISON Buchholtz-AU: Within sinif, siz ötürür dərsləri
HTML bir şey yoxdur onlar etdiyiniz hansı üçün önemli?
Bu sifariş etməz.
Hansı məsələ üçün deyil Sizin CSS ərzində sinif seçiciler,
Sizin stil daxilində.
>> TOMAS Reimers: Sound yaxşı?
>> ALLISON Buchholtz-AU: Lovely.
>> TOMAS Reimers: Və sonra Biz to-- davam edirik
ALLISON Buchholtz-AU: Biz növbəti nə var?
I unutmayın.
Oh, biz yalnız nümunələr var.
Amma biz növ o etdik.
Biz Tez nümunələri etdik.
>> TOMAS Reimers: Biz almaq tezliklə seçiciler birləşdirir.
>> ALLISON Buchholtz-AU: Oh, Biz seçiciler birləşdirmək almaq.
TOMAS Reimers: Belə ki, bəzi nümunələr var ki,
# Dog-- funt, və ya hashtag, və ya octothorpe, və ya hər hansı
Siz that-- kəskin səslənmək istəyirəm.
>> ALLISON Buchholtz-AU: Sharp it.
>> TOMAS Reimers: Sonra .pets var.
Something, it bir id var səhifə yalnız bir it var.
Something bir id var cat, yalnız bir pişik var.
Səhifə çox heyvanları ola bilər.
Biz dərsləri ki, verdi görə.
Siz p nümunə var.
Və sonra bir belə son nümunəsi olan
, biz söhbət yoxdur ki, bir şey Əgər siz onları birləşdirmək zaman nə edir.
P.pets Belə ki,.
>> Ki, Belə ki, geri imkan kodu və yeah another-- təqdim edir.
Belə ki, burada geri.
>> ALLISON Buchholtz-AU: I Bu, həqiqətən kimi hiss
kimi yalnız nümunələr vasitəsilə axtarır həqiqətən bu öyrənmək üçün bir yoldur.
Belə ki, biz bunu edirik nə var.
>> TOMAS Reimers: Belə ki, biz iddia edək yalnız sağ mətn 2, seçin istəyirsiniz?
Belə ki, biz mütləq bilməz Bir id ilə bunu.
Bəli, biz bir ilə edə bilər id, lakin bu id yoxdur.
Mən bir əlavə deyil, iddia imkan bilər Mən bir əlavə etmək istəyirəm deyil ki,
və ya artıq başqa bir şey var.
Hesab edirəm ki, bunu edə bilməz.
tag sağ, mütləq unikal deyil?
Və nə sinif edir.
Amma bu şeyi birləşdirə bilər.
Biz bir şey etmək istədiyini deyirlər olan yalnız şeyə aiddir
sinif xüsusi və hansı sinif olduqca var.
>> Belə ki, siz nə edə bilərsiniz, main.css edir Siz ilk bu silmək imkan demək olar.
Bu birləşdirə bilər.
Belə ki, .xüsusi edə bilərsiniz.
No yer.
Just .special.pretty.
Nə o deməkdir ki, bir şey deyil olan xüsusi və olduqca həm də.
Ki, hissi edirmi?
Və biz burada getmək əgər, nə Siz görmək olacaq
Bu qayda yalnız tətbiq edir o həm də ikinci.
Və çox şey üçün bunu edə bilərsiniz.
Siz edək demək bilər Mən yalnız istəyirdi iddia
olduqca sinif şeyə və həmçinin maddə tag olan.
Belə ki, p.pretty.
Mən ki, iddia edək tag bədənin olduqca bir şey.
OK?
Mən bu run və mən edə bilərsiniz yalnız olduğunu görə bilərsiniz
şeylər müraciət etmək niyyətindədir olduqca sinif ci maddələrdə.
Və bu birləşdirə bilər əsasən, istədiyiniz kimi çox.
Belə ki, yalnız onlara birlikdə qoymaq olar.
Ki, hissi edirmi?
ALLISON Buchholtz-AU: Belə ki, Bu cür daha faydalıdır
zaman, Tomas bəlkə, daha əvvəl deyirdi Bir çox mürəkkəb haqqinda,
və artıq bir çox yazılmış bu qaydaları,
və yalnız lazımdır əvvəl iki birləşdirir.
Like əvəzinə bütün yazılı Yeni selector və orada dəyişən
Yalnız birləşdirə bilər Bunları üst-üstə düşür harada.
>> TOMAS Reimers: Və ya bəzən yazaraq tapa bilərsiniz
bir sinif var ki, kimi font rəng mavi edir,
və başqa bir sinif var ki, background mavi edir.
Və yalnız iş deyil.
Belə ki, xüsusi halda yazmaq, harada, Bu, həm də varsa qədərdir, siz nə istəyirik
edəcəyimiz siz olacaq edir bu bir mavi bu kölgə etmək
bu bir mavi digər kölgə.
Sağ?
>> ALLISON Buchholtz-AU: Yaxşı istisnalar bu cür.
TOMAS Reimers: Belə ki, problemlər barədə düşünmək
Əgər siz onları birləşdirmək zaman yarana bilər.
Cool.
Belə ki, geri təqdimat.
ALLISON Buchholtz-AU: Biz demək olar ki, orada edirik.
TOMAS Reimers: Və birləşdirən dayandırdı.
ALLISON Buchholtz-AU: Xeyr, Oh.
ALLISON Buchholtz-AU: yerləşdirilmişdir CS ofis, internet enir.
Oh, istehza.
>> TOMAS Reimers: Belə ki, xoşbəxtlikdən, biz internet olmadan təqdim, mən tapmaq
biz burada bütün slaydlar var.
Belə ki, haqqında danışmaq edək tags əlaqələr.
ALLISON Buchholtz-AU: Sağ.
Davam Belə ki, yalnız cür Tomas nə dedi off,
bu bunu yalnız bir yoldur.
Beləliklə, biz bir valideyn var uşaq selector ilə seçici.
Belə ki, burada bu nümunə, biz bəzi Bir sinif navbar sinif düyməsinə ilə bədən.
Ah.
>> TOMAS Reimers: Oh, sorry.
>> ALLISON Buchholtz-AU: Və əsasən, nə deməkdir
kimi, uşaqlar bütün seçin ki, seçiciler bu cür bütün,
Bu ana selector daxilində.
Və o, yalnız olanlardır Heç müraciət olacaq.
Bilmirəm əgər daha yaxşı bir yol yoxdur idarənin ixtiyari nümayəndəsinin,
TOMAS Reimers: Mən düşünmək yol tapmaq
Bu barədə nə əvvəl xatırlayıram deyil Biz növ onlara birlikdə qoymaq istəyirəm.
Və sonra bir element deməkdir olan bütün bunlar gəlir.
Bu deyib mən deyil hər şey uyğun istəyirəm
Mən istəyirəm some-- ərzində Bir selector tapa bilərsiniz.
Və sonra ərzində, Mən istəyirəm Siz yeni şeylər uyğun.
Sağ?
Belə ki, CSS, bütün haqqında sort var Bu maddələr uyğun edə.
Və uyğun üçün cəhd edə bilərsiniz digər maddələr daxil olan maddələr.
>> Belə nin əslində bir misal nə edək, və biz aydınlaşdırmaq lazımdır düşünürəm.
Belə ki, biz xüsusi var iddia edək, xüsusi yaraşıqlı, nə.
Və sonra biz OK, bir link var?
Belə ki, bir link, xatırlayıram.
Bu yerdə getmək niyyətində deyil.
Və biz bunu vermək olacaq sinif link hərhalda.
Nin verim Mənə bir fikir vermək sinif.
ALLISON Buchholtz-AU: Cool.
TOMAS Reimers: edək Coo-- Bu olduqca sinif gedin.
Niyə də yox?
>> ALLISON Buchholtz-AU: OK.
TOMAS Reimers: Belə ki, İndi olduqca şeyi
fon etmək üçün gedir qızıl mavi, fon rəngi.
Ki, hissi verir.
Və Biz bu əgər
>> ALLISON Buchholtz-AU: Siz mətn əlavə etmək istəyirsiniz
belə ki, hiperlink həqiqətən göstərir?
TOMAS Reimers: Bu yaxşı zəng olardı.
ALLISON Buchholtz-AU: Çünki hüququ İndi biz heç bir şey almaq mý yalnız edirik.
TOMAS Reimers: Belə ki, bu link.
"Bu bir link."
Oh, və bu gedir başqa link olacaq.
Nin sinif verək "sərin".
Siz sağ istəyirik.
Cool.
Belə ki, indi biz bu işğalçı olacaq.
Biz bir atmaq olacaq.
Biz bir var xüsusi tag, həmçinin biz
olduqca tag bir üçün gedir.
Və indi biz olacaq nə nə biz cool-- etmək olacaq ki,
biz bunu istəyirsiniz?
ALLISON Buchholtz-AU: Biz böyük edə bilərsiniz?
TOMAS Reimers: gəlin bir sərhəd verim.
ALLISON Buchholtz-AU: Biz sərhəd bilər.
TOMAS Reimers: Bəli.
Beləliklə, biz bir şey olacaq kimi, sərhəd That və biz
bütün ikinci izah edəcəyik.
, İndi üçün
>> ALLISON Buchholtz-AU: box model üçün.
TOMAS Reimers: Amma indi, biz istəyirik yalnız bir sərhəd verəcəyəm.
Belə ki, nə o deməkdir ki, siz etdiyiniz edir Bu links görmək üçün gedir.
Və onlar ki, görmək olacaq Bu kimi, çirkin qara sərhədləri olan
sərindir.
>> ALLISON Buchholtz-AU: Bizim veb olduqca var.
>> TOMAS Reimers: Bəli.
Bizim veb zəhmli deyil.
Belə ki, bu iki links, onlar görünür.
İndi mən iddia edək yalnız bu etmək istəyirdi
bir şey daxilində deyil, əgər olan qızıl bir fon var idi.
Belə ki, bu bir xatırlayıram , qızıl bir fon var
Bu olduqca sinif çünki.
>> Amma biz yalnız Cools demək istəyirəm ki, sinif sinif, xüsusi olmayan
yaraşıqlı, sərhəd olmalıdır.
Yaxşı, siz nə edə bilərsiniz ki, .cool, .xüsusi, yer demək olar.
Sizcə zaman ki, nə var Bu barədə, əsasən dedi ki,
OK, mənə hər şeyi tapa xüsusi gəlir.
Sonra həmin tags ərzində tapmaq sərin var mənim üçün hər şey.
ALLISON Buchholtz-AU: Belə ki, başqa bir yolu ki, bu barədə düşünmək yaxşı ola bilər
C geri gətirilməsi edir Yalnız çərçivəsində fikir kimi.
Belə ki, bəzi zaman olanlar kimi selector,
Biz bu əvvəl iş etdik ki, bütün web page, HTML bütün
sağ, sizin çərçivəsində edir?
Amma biz bu zaman valideyn-uşaq münasibətləri,
aşağı olduğu daralma etdiyiniz kimi bu Bir xüsusi yer arıyorsanız
kimi, kimi, biz ərzində aradığınız xüsusi funksiyası yerinə
bütün fayl.
Auditoriya: ki, nəzərə Belə ki Biz changed-- idi, əgər mattered
ALLISON Buchholtz-AU: order?
Auditoriya: CSS yükü sinif , yer .cool üçün, .xüsusi?
ALLISON Buchholtz-AU: Bəli, çünki o
daxilində onu deyərdim ki, sərin var, hər şey,
və sonra nə has-- baxmaq Mən bu halda kimi, demək
Mən onu dəyişib düşünmürəm.
>> TOMAS Reimers: biz nə dedi olsaydı?
Üzr istəyirik.
>> ALLISON Buchholtz-AU: biz varsa sonra sərin və əhatə dairəsi
xüsusi həyata şeyi axtarmaq, Bu, həqiqətən, eyni olardı.
>> TOMAS Reimers: Belə ki, olmaz.
>> ALLISON Buchholtz-AU: Bu deyil ki?
Yaxşı oh, oh.
Mən səhv edirəm.
>> TOMAS Reimers: Belə ki, səbəbi Bu different-- ümumi mistake-- var
ki, indi yalnız link sağ, sərin var?
Sizlərin edir Mən sual tapmaq Bu səhifədə nə .cool ilə müqayisə edir?
Iki tags sağ burada var?
Hansı bu və bu biridir.
Hər iki sərin uyğun.
Başqa heç bir şey yoxdur.
Belə ki, bildirib ki, əgər, .cool, kosmik, .xüsusi, siz demək olacaq nə,
Bu tags ərzində, xüsusi olan nədir?
ALLISON Buchholtz-AU: Hm.
Bu nə it-- doğru.
Burada yalnız bir şey kimi idi.
>> TOMAS Reimers: Belə ki, heç bir şey seçir.
>> ALLISON Buchholtz-AU: ilə Halbuki xüsusi, biz burada bu tags ərzində istəyirik.
>> TOMAS Reimers: Bu və bu.
Auditoriya: OK.
Belə ki, irəli həmin tags doğramaq?
>> TOMAS Reimers: Bəli.
Ki, hissi edirmi?
Necə əsasən dairəsini azaltmağa cəhd.
ALLISON Buchholtz-AU: Bəli.
Mən yəqin ki, hesab edirəm en asan yol bu barədə düşünmək.
>> TOMAS Reimers: Beləliklə, biz bu aşkar və bu, həm də xüsusi uyğunlaşdı tapılmadı.
Və sonra biz ərzində xahiş edirik Bu uşaqlar, sərin var?
Və bu, bu bir sərin daxilində.
Bu bir ərzində, heç bir şey sərin var.
Belə ki, bu qalır ki, yalnız tag edir.
>> ALLISON Buchholtz-AU: cool Halbuki orada bu bir tags ərzində.
TOMAS Reimers: Eynilə elə.
Və o çərçivəsində xüsusi var?
Heç bir şey.
İndi demək edəcəyik heç bir yer var idi,
Siz sərin və special-- nə xahiş edirik və ya sağ, yaraşıqlı və xüsusi var?
Siz .special.pretty demək, ki .pretty.special eyni.
>> Yer kaldırarak nə Çünki Siz .xüsusi deyəndə, edir tələb,
Siz, OK, xahiş edirik olanları xüsusi var?
Və sonra, o hansı olanları da olduqca,
olan qrammatik, eyni, xahiş kimi, olduqca nə,
və sonra o, xüsusi də nə var?
Sağ?
Bu fərq nə nə ərzində var.
Auditoriya: OK.
TOMAS Reimers: Bəli.
Awesome.
Then-- nəzərə ki, Belə ki,
>> ALLISON Buchholtz-AU: Mən hesab edirəm ki, son şey (FANCY BRITISH ACCENT IN deyil)
qutusu model.
>> TOMAS Reimers: qutusu [Chuckles] Mən Allison deyir ki, yolu sevirəm.
Qutusu model şey idi.
>> ALLISON Buchholtz-AU: Just var bir qutusu, mən sizin qutusu model olacaq.
TOMAS Reimers: Belə ki, haqqında danışmaq edək.
Belə ki, indi biz bir çox sərf etdik vaxt seçiciler söhbət.
İndi, uşaqlar kimi, yəqin ki, Bildiyiniz selectors-- ustaları,
tam məzmunu seçmək üçün necə Siz ekranda manipulyasiya etmək istəyirəm.
>> Belə ki, indi sual, necə dəqiq siz onu manipulyasiya edə bilər?
Belə ki, ən əsas tapmaq Bu barədə düşünmək yolu
yaxşı, nə deyil CSS bir element var?
Biz çox vaxt sərf etdik söhbət, bir tag nə,
və ya ən əsas nə bir tag təmsil?
>> Düşünmək üçün yaxşı yol ki, qızıl nə forma var?
Kimi, hansı forma fon qızıl rəngli?
>> Auditoriya: Bu bir düzbucaqlı var.
>> TOMAS Reimers: Bu doğru, bir düzbucaqlı var?
>> ALLISON Buchholtz-AU: Bir oyun sual deyildi.
[Gülüş]
>> TOMAS Reimers: çalışır deyil Bu gec uşaqlar bezemek üçün.
Beləliklə, biz bu düzbucaqlı var.
Və tag bir p doğru deyil?
Belə ki, bizə yaxşı verir maddə inancını
, bir düzbucaqlı kimi təmsil olunur browser nəzərə, ən azı hansı
edir.
>> ALLISON Buchholtz-AU: Mən demək brauzerlər adətən düzbucaqlı
belə ki, hissi verir.
>> TOMAS Reimers: fikir burada CSS ərzində tags bütün
bir düzbucaqlı kimi təmsil olunur.
Və hər düzbucaqlı dörd var CSS görə hissələri, OK?
Siz faktiki məzmun var.
Mətn yerləşir harada.
>> ALLISON Buchholtz-AU: Bəlkə şəkil.
>> TOMAS Reimers: Bəli.
Siz ki, padding ağ kosmik yalnız bir növ.
Sonra bir sərhəd var.
Və sonra, margin olan ki, kənarda ağ sahibidir.
Ki, heç bir əhəmiyyət kəsb edir, belə ki, hər kəs üçün, belə ki, biz istəyirik
ikinci bu barədə danışacağıq.
Belə ki, burada, biz nə olacaq nə Biz OK, bəzi divs yaratmaq olacaq mı?
Mənə isə Üzr istisna olmaqla, mən
>> ALLISON Buchholtz-AU: Mən kimi hiss Biz bir cute şəkil qoymaq lazımdır.
>> TOMAS Reimers: Biz mütləq olmalıdır.
>> ALLISON Buchholtz-AU: Mən hər kəs kimi hiss
bir faydalana bilər cute şəkil, edir.
>> TOMAS Reimers: Kompüter biz Ü EA bütün fayda
>> Auditoriya: Bəli, əmin olun.
TOMAS Reimers: OK, sərin.
Beləliklə, biz bir cute qoymalıdır haradasa şəkil.
ALLISON Buchholtz-AU: Mən kimi hiss cute Bunny indi faydalı ola bilər.
TOMAS Reimers: Sure.
ALLISON Buchholtz-AU: həftənin sonu.
Bir şey var adorab--
>> TOMAS Reimers necə bir doğmaq bout?
>> ALLISON Buchholtz-AU: A kitten də işləyir.
>> TOMAS Reimers: Cool, çünki ki, bir site var.
Bu PlaceKitten deyirlər.
ALLISON Buchholtz-AU: Bu harika.
TOMAS Reimers: Bəli.
ALLISON Buchholtz-AU: Just kimi, üçün, Sizin veb tutucu images.
TOMAS Reimers: Mm-hm.
PlacePuppy da var.
Və PlaceBacon var.
>> ALLISON Buchholtz-AU: PlaceBacon?
Həqiqətən, mi?
>> TOMAS Reimers: Oh, biz deyil burada internet girmə imkanı vardır.
>> ALLISON Buchholtz-AU: [GROANS]
Faciəli.
TOMAS Reimers: Əks halda, Mən sizə uşaqlar göstərir ki,
necə web images qoymaq üçün.
Biz bu almaq üçün cəhd olacaq biz getmək əvvəl çalışır.
Amma indi, biz yalnız istəyirik sonra rəng danışmaq olacaq.
Biz kittens-- şəkillər qoymaq istəyirəm
>> ALLISON Buchholtz-AU: Biz etdi.
>> TOMAS Reimers: yükü internet üzrə Bu an üçün aşağı olan.
Beləliklə, biz iki divs var və biz istəyirik Onlara iki kimlikleri verəcəyəm.
Biz zəng olacaq "Ilk" və "ikinci".
Belə ki, id = "ilk".
Biz onlara iki rəng vermək olacaq.
Beləliklə, biz bir şey seçin necə "ilk" bir id ilə?
ALLISON Buchholtz-AU: Dot və ya hash?
Auditoriya: Sharp.
TOMAS Reimers: Keskin, mükəmməl.
Sharp, hash, nə we--
>> ALLISON Buchholtz-AU: Şeyi çox zəng etmək.
>> TOMAS Reimers: OK.
Biz hashtag həll etmək gedir və edirik ki, ilə getmək olacaq nə.
OK?
>> ALLISON Buchholtz-AU: Hashtag.
>> TOMAS Reimers: Belə ki, hashtag ilk.
>> ALLISON Buchholtz-AU: Belə ki, Siz seminar-- tweet bilərsiniz
hashtag CSS, sərin hashtag.
TOMAS Reimers: Hashtag awesomeness.
ALLISON Buchholtz-AU: Hashtag awesomeness, bəli.
TOMAS Reimers: OK.
Beləliklə, biz "ilk" və "ikinci". Var
Belə ki, ilk, biz olacaq qırmızı fon rəngi.
ALLISON Buchholtz-AU: Uh, kolon.
TOMAS Reimers: Yup.
ALLISON Buchholtz-AU: Mən sizin spot-checker olacaq.
TOMAS Reimers: Allison nin mənə var.
Blue-- fonunda rəng
>> TOMAS Reimers: Purple!
>> TOMAS Reimers: Purple.
ALLISON Buchholtz-AU: Bəli.
Purple mənim sevimli rəngi, və hələ istifadə deyil.
>> TOMAS Reimers: Violet.
ALLISON Buchholtz-AU: Violet.
Ki, işləyir.
>> TOMAS Reimers: Biz istəyirik iki divs gedir.
Onlar tamamilə boş olacaq.
Biz yəqin ki, bir mətn olmalıdır.
Belə ki, "ilk" olacaq "HELLO".
Və "ikinci" demək olacaq
>> ALLISON Buchholtz-AU: Goodbye.
>> Auditoriya: - "WORLD".
Vida, Hello.
ALLISON Buchholtz-AU: gördüm Konsertdə onlara həftə.
TOMAS Reimers: Beatles?
ALLISON Buchholtz-AU: reals üçün.
Onlar böyük deyilik.
Mən bunu istəyirəm deyil.
>> TOMAS Reimers: Biz "HELLO" və "Əlvida".
Və yenə, CSS, yalnız zəhmli deyil Bu, bizim rəng tanıyır.
Belə ehtiyac yoxdur onlar mövcud ki, narahat.
Onlar.
>> ALLISON Buchholtz-AU: onlar mövcuddur.
>> TOMAS Reimers: Belə ki, CSS I var 255 sözləri rəng haqqında danışmaq.
Əgər kənarda bir rəng hesab edə bilər, əgər bu 255, kimi, mən heyran olacaq.
ALLISON Buchholtz-AU: Bəli.
Mən sizə uşaqlar ola bilər hesab edirəm ki, yalnız sağ sonra gəlir.
>> TOMAS Reimers: Belə ki, burada, biz iki qutuları var görəcəksiniz
Sağ-birinə, sağ üst?
HELLO və Goodbye.
>> ALLISON Buchholtz-AU: Arasında heç bir yer yoxdur.
Onlar yalnız smooshed edirik Sağ-birinə üst.
>> TOMAS Reimers: Belə ki, ilk şey Hesab edirəm ki, haqqında danışmaq lazımdır tahmin
də Bəli demək qoy edir.
Belə ki, CSS qutuları növ kimi təmsil edir.
Və qutuları kimi, onlar məzmun var.
Və məzmun İndi sort edir HELLO və ya Goodbye və bu.
OK?
>> Ilk şey biri Belə ki, edə bilərsiniz padding əlavə edə bilərsiniz.
Padding nə qədər yer deyir hər tərəfində tərk etməlidir.
Belə ki, mən demək istəyirəm deyək Hər tərəfdə 10 piksel.
Mən ikinci olduğu yarmaq edəcək.
ALLISON Buchholtz-AU: Burada bunlar hamısı
piksel əsasən olacaq Seminarın istirahət üçün.
Siz var ki, görmək olacaq onun ətrafında bir yer, sağ?
Belə ki, burada görmək nə var ki, padding bu görünməz sort
kimi deyir ki, hər tərəfdə, on, OK, siz content-- sizin qutusu
>> ALLISON Buchholtz-AU: Siz istəyirsiniz yalnız yoxlamaq element qoparmaq üçün necə?
>> TOMAS Reimers: Bəli, yaxşı bir fikirdir.
ALLISON Buchholtz-AU: Həmçinin, mən tapmaq yoxlayacaq element yaxşı bir yoldur ki,
Bir şey gedir əgər anlamaq üçün səhv, gözlənilməz bir şey baş,
tags yoxlanılması və görən nə üzerine faydalıdır kimi.
>> TOMAS Reimers: Mən əmin deyiləm Sizlərin bu rəng görə bilərsiniz.
Siz edə bilərəmmi?
Bu padding görəcəksiniz kənar növ.
Və sonra faktiki bax mavi content, sağ?
Belə ki, çox var qutusu model əsasları.
Siz məzmun var.
Sonra padding var.
>> Auditoriya: Niyə yalnız deyil the-- daxilində qutusu istifadə
>> ALLISON Buchholtz-AU: Sağ.
Yalnız seçilməsi, çünki İndi element.
>> TOMAS Reimers: Yup.
Digər şeylər.
Belə ki, bu barədə danışmaq edək ikinci padding komanda.
CSS, ölçmə Belə ki, vahid lazımdır.
Belə ki, ilk siz məbləği var.
Belə ki, bu halda, biz 10 bildirib etdik.
Və sonra növbəti bir bildirib etdik biz piksel, px edir.
Siz ola bilər, digər olanlardır santimetr düym kimi şeylər.
Siz hər şeyi kimi edə bilər, 10 düym nədir?
Və bu gülməli olacaq.
>> ALLISON Buchholtz-AU: Oh, oğlan.
>> Auditoriya: Whoa.
>> TOMAS və ALLISON: Bəli.
TOMAS Reimers: Belə ki, bütün padding var.
Mən piksel geri gedirəm.
>> ALLISON Buchholtz-AU: Pixels standart kimi, olur.
Siz web sites bir çox baxdığımızda, onlar əsasən piksel çalışır.
TOMAS Reimers: Belə ki, görmək olacaq ya görmək digər olanları pixels--
bir em edir ki, em edir font hündürlüyü bərabər
siz hal-hazırda istifadə etdiyiniz.
>> ALLISON Buchholtz-AU: Mm.
TOMAS Reimers: Bu, demək yaxşı bir yoldur kimi, mən yazı qədər yer istəyirəm
qəbul edir.
ALLISON Buchholtz-AU: bilirik ki, yox idi.
Siz yeni bir şey hər gün öyrənmək.
TOMAS Reimers: var bir CS ölçmə var.
Mən sizə onlara baxmaq gəlir.
Bütün hallarda, mən hesab edirəm ki, piksel kifayət qədər olmalıdır.
Və onlar da etdiyiniz nə Siz görmək olacaq
online həyata nümunələri əksəriyyətində.
Beləliklə, biz piksel onu tərk edəcəyik.
>> Siz həmçinin, mən demək bilər padding dəstləri paddings bütün.
Siz həmçinin kimi bir şey edə bilərsiniz Yalnız set-- üçün "padding-top"
ALLISON Buchholtz-AU: Bəlkə biz "HELLO" geri almaq lazımdır.
TOMAS Reimers: yalnız müəyyən --to üst və başqa heç bir şey padding.
Belə ki, dörd əmrləri padding-top var, padding-bottom, padding-sol,
və padding sağ.
>> ALLISON Buchholtz-AU: Just kimi Bir qutu üçün gözləmək olardı.
>> TOMAS Reimers: Bəli.
Heç bir şey yoxdur çox crazy.
Ki, hissi edirmi?
Belə ki, padding edir.
Mən bütün qurmaq üçün gedirəm geri 10 paddings.
Və sonra mən sərhədə hərəkət gedirəm.
>> Belə ki, nə sərhəd deyil sərhəd qəribə komanda var.
Bu dəfə üç şeyi növ edir.
Belə ki, ilk siz necə böyük bir ölçü kimi olmaq istəyirəm.
Yenə yalnız piksel istifadə edirəm.
Və son şey ölçmələr əlavə etməlidir
bir şey olan Bir vahid lazım deyil 0.
Bu, həqiqətən düzgün deyil 0 vahid vermək,
0 0 düym arasında, çünki, piksel, santimetr, nə.
Bu, bütün sağ, 0 deməkdir?
Belə ki, ilk siz ölçü verir.
>> Sonra bu stil verir.
Beləliklə, mən demək gedirəm "möhkəm".
Və biz o deməkdir ki, nə haqqında danışmaq lazımdır.
Və sonra nəhayət, siz bir rəng verir.
Beləliklə, mən demək gedirəm "qara".
Bu biz hər şeyi var İndi stil istisna olmaqla, əvvəl görüldü,
lakin biz bu barədə danışacağıq.
Belə ki, uşaqlar ölçmə gördük, və rəng gördüm.
Və nə olur biz bu almaq onun ətrafında gözəl qara sərhəd, sağ?
Ki, necə uşaqlar görmək?
>> Auditoriya: Bəli.
>> TOMAS Reimers: Cool.
Belə ki, nə?
Belə ki, ilk növbədə, bir pixel var.
Bu doğru, kifayət qədər öz-özünə aydın deyil?
Kimi, bir pixel qalın.
Və ya bir pixel olardı, lakin mən Bu bir az daha çox, belə ki, zoomed
daha.
>> ALLISON Buchholtz-AU: Biz var Bu gülünc qətnamə TV.
>> TOMAS Reimers: Bəli.
Siz böyük edə bilər, kiçik, nə.
Belə ki, burada iki pixel sərhəd var.
Siz qalın iki dəfə var görəcəksiniz.
Siz növbəti şey rəng deyil.
Ki, maraqlı deyil.
Mən danışmaq fikrində deyiləm Həqiqətən, bu barədə.
>> ALLISON Buchholtz-AU Lakin stil bir az maraqlı ola bilər.
>> TOMAS Reimers: Bəli.
Stil Belə ki, bir neçə olanlar var Mən çox istifadə görmək edir.
İlk bir bərk, növbəti bir üzrə dotted, və son bir berbat.
Və burada dotted olunur.
Siz onlar istəyirik ki, görəcəksiniz nöqtələr bir dəstə, sağ?
Sort gözəl sərhəd almaq üçün yaxşı bir yoldur gedir, tire da olduqca populyardır.
>> ALLISON Buchholtz-AU: Və sonra, əlbəttə, mən
Emin digər var Siz əldə edə bilərsiniz üslub.
Və biz böyük bir set var uşaqlar üçün sonunda links
cür diqqətlə oxumaq və daha sərin CSS oldu.
>> TOMAS Reimers: Və sonra son şey, biz istəyirik
haqqında danışmaq gedir qutusu modelləri real sürətli.
Oh, və sonra sərhəd, tam padding kimi,
Siz həmçinin kimi şeylər var sərhəd-sol sərhəd-sağ, sərhəd-top,
sərhəd-alt, sizə imkan verir xüsusi sərhəddə almaq üçün.
Belə ki, burada yalnız sərhəd sol müəyyən edir.
Ki, hissi verir mu?
>> ALLISON Buchholtz-AU: Bu sərin var yol şeyi vurğulamaq və ya əlavə etmək
müxtəlif elementləri arasında xətləri.
TOMAS Reimers: Absolutely.
Belə ki, bizim sərhəd var.
Və son bir margin.
Margin nin kimi padding Bu within-- deyil istisna olmaqla,
ALLISON Buchholtz-AU: Bu Sizin element ətrafında
lakin əslində bütün, ətrafında box biz görən etdik ki,.
>> TOMAS Reimers: Bəli.
Allison mükəmməl bildirib.
Bu sizin daxili kimi deyil, element, bütün qutusu ətrafında var.
Bu kimi şeylər deməkdir background ona tətbiq edilmir.
Və bu, əsasən deyir kimi, mən bir şey istəmirəm
Mənim üçün bu qədər məkanda.
Biz burada kimi Belə ki, 10 piksel margin.
10 piksel Belə ki, heç bir şey yanımda olmalıdır.
Bu cür onun space lakin cür deyil.
Belə ki, çox var qutusu model əsasları.
Ki, hissi edirmi?
Cool, sərin.
ALLISON Buchholtz-AU: Awesome.
Belə ki, indi mən yalnız biz hesab edirəm ki, Bizim sərin resursları
Biz uşaqlar almaq lazımdır ki, çox tez vasitəsilə.
Və biz də, həqiqətən lazımdır, Biz hələ internet var?
>> TOMAS Reimers: edək Mən gündəmə aça bilər görmek
Mənə yalnız görmek imkan I tez internet əldə edə bilərsiniz
Allison bir şey haqqında danışır isə Allison haqqında danışmaq istəyir.
ALLISON Buchholtz-AU: Belə ki, basically-- Mən bunu
Mən bu nöqtədə demək olar nə bilirik.
Lakin bu bəzi həqiqətən yaxşı resursları.
Bu olanlardır ki, Tomas və mən istifadə
və biz, həqiqətən, Bunun üçün hazırlayıcı üçün istifadə olunur.
W3Schools biridir ki, uşaqlar əvvəl görüldü olmalıdır.
Biz üçün tövsiyə CSS ilə şeyi var.
Mən tövsiyə bilirik Mənim bölmə hər zaman.
>> Böyük şeyi biri bu ki, CSS ilə mess cür imkan verir
və dəyişikliklər görmək dərhal bu,
kimi cüt pəncərə sahib olduğunu görmək.
Belə ki, narahat yoxdur Öz web page yaradılması,
və ya vhost qurmaq sizin Yerli cihaz və yerli host,
və bütün stuff iş əldə.
Bu hüququ page yerleştirilmiştir.
>> Və bu az var dərslər bilərsiniz ki,
öyrənmək keçmək seçiciler haqqında daha çox,
və ya manipulyasiya haqqında məlumat sizin font, və ya fon və ya image.
Və bu var ani nəticələr ki,
hər hansı yoxdur digər hazırlayıcı iş.
Beləliklə, mən W3Schools sevirəm.
Bu inanılmaz deyil.
Bu mümkündürmü?
>> TOMAS Reimers: Bəli.
Xeyr, deyil.
Mənə cəhd istəyirsiniz və kompüterinizi yenidən başladın?
Yoxsa biz to-- istəyirik
>> ALLISON Buchholtz-AU: Mən demək Yaxşı, bu da online olacaq.
Bütün slaydlar online olacaq.
Mən yalnız yüksək bu bunu gəlir.
>> Bu kimi böyük bir istifadə etmək hesabatı kimi.
Bu, sadəcə bütün əsas var Siz var ki, əmrləri.
Ilk etdiyiniz zaman Bu böyük Sizin veb başlayır.
Bəlkə çünki bütün daxil almaq istəyirəm
gritty real asıl dizayn ağır stuff.
Siz yalnız bir şəkildə onu format etməlisiniz bu cür hissi və iradəsini edir
hazırda yoxdur.
Və həqiqətən istəyirsinizsə onu almaq üçün bilirəm
bu kimi biridir Tomas sevimli istinadlar.
Biz istifadə edilmişdir hazırlayıcı və bu inanılmaz deyil.
Bu Mozilla olan Developer var.
>> TOMAS Reimers: Yəni Mozilla var Firefox edən insanlar.
Və yalnız öz geliştirici deyil Mən hesab edirəm ki, arayış, zəhmli deyil.
Və bu bir gözəl var resurslarının siyahısı.
Belə ki, biz yaxşıdır
>> ALLISON Buchholtz-AU: Və sonra son qeyd
zaman çalışdığınız , Sizin veb dizayn
şeyi ilham cəlb ki, olduqca edirəm.
Element yoxlanılması, mənbə kodu yoxladıqdan
super faydalı ola bilər şekillendirmek üçün çalışırıq üçün
necə öz web stil.
>> Tez-tez, mən yaxşı kimi hiss yol, təcrübə ilə yanaşı,
Yalnız baxmaq edir olduqca şeylər.
Mən yalnız çətin həqiqətən tapmaq növ öz şeyi dizayn,
xüsusilə əvvəlində.
Belə ki, web baxın Siz baxaraq zövq.
Edir nə anlamaq Onlara müraciət.
Və sonra çekinmeyin cəhd və kopya.
>> TOMAS Reimers: Sağ.
Hətta web kimi Bu kimi, siz görə bilərsiniz
üst bir div mütləq var.
Və sonra başqa bir div var Burada olan CSS awesomeness edir.
Və sonra burada links bir dəstə var.
Siz, həqiqətən, yalnız yoxlamaq əgər elementləri, siz sıralayabilirsiniz
web nə görmək başlamaq kimi baxmaq və necə Mən
Mən istəyirdim ki, əgər yeniden.
Ki, hissi edirmi?
Beləliklə, biz yalnız sol üç dəqiqə var.
Sual Belə ki?
Onların hər hansı?
Bəli.
>> Auditoriya: rəng üçün düzbucaqlı, necə ki
istədiyiniz olmasaydı yaxşıdır bütün səhifə boyunca bilər gedir
Siz yalnız arasında getmək etdik yarım səhifə və ya yalnız mətn?
>> TOMAS Reimers: Bəli, tamamilə.
Mənə həqiqətən görmək bildirin.
Mən iki fikir var.
Bütün Belə ki, ilk, siz də faiz istifadə edə bilərsiniz.
>> Auditoriya: Həqiqətən, mi?
>> ALLISON Buchholtz-AU: Belə bir şey axtarmaq üçün nisbi yerləşdirilməsi edir.
Bu bir şey var ki, biz almaq üçün vaxt yoxdur,
lakin mən mütləq bir şey var Siz uşaqlar həyata yoxlanılması gəlir.
>> TOMAS Reimers: Belə ki, faiz.
Biz bunu necə görmək eni 50%?
ALLISON Buchholtz-AU: Əgər həqiqətən piksel sayı bilmək,
ki, yol daha dəqiq ola bilər.
Siz ətrafında fiddle bilərsiniz.
Lakin 50%.
Biz brauzer ölçüsünü olsaydı, Bu kiçik edəcək.
>> TOMAS Reimers: Bəli, bu əsasən 50% indi, mən hesab edirəm.
O margin 50%, və ki, əlavə edilmişdir.
CSS quirks bir çox var.
Belə ki, indi bu Səhifə eni 50%.
Amma 10 var unutmayın ki, piksel hər tərəfdən hücuma qalxdı.
Belə ki, əgər qarşı hərəkət idi brauzerinizin sol kənarında,
o, 50% kimi görünür.
Dediyim kimi Yenə, CSS bilər tahmin və çek bir çox olacaq.
Kimi, bir şey hesab edirəm bir yol hərəkət olacaq,
lakin tamamilə fərqli bir şəkildə davranır.
>> ALLISON Buchholtz-AU: Və yalnız asan almaq
və yalnız daha yaxşı almaq Bunun üçün intuisiya siz boyunca hərəkət kimi.
>> TOMAS Reimers: Və pis və pis olur.
Belə ki, həqiqətən, yalnız bir yarış var.
>> ALLISON Buchholtz-AU: Bu super təşviq edir.
Biz onlara CSS kimi istəyirəm.
>> TOMAS Reimers: CSS zəhmli deyil.
Ki, unutmayın.
Digər suallar?
>> ALLISON Buchholtz-AU: bir şey.
Başqa bir şey?
Cool.
>> TOMAS Reimers: Awesome.
>> ALLISON Buchholtz-AU: Bəli, əgər uşaqlar, sonra hər hansı bir sualınız
biz həmişə adi kimi mövcud istəyirik.
Siz yəqin ki, bəzi görəcəksiniz son layihələr üçün bizə olunması
və mütləq Hackathon edir.
>> TOMAS Reimers: Absolutely.
Və sərgidə.
>> ALLISON Buchholtz-AU: Və sərgidə.
Oh.
>> TOMAS Reimers: gözləyirik Sizin awesome-- bütün görən
>> ALLISON Buchholtz-AU: Baxarıq zəhmli web sites bütün
ki, gözəl olacaq.
TOMAS Reimers: Siz həmişə bilərsiniz kimi, web bax
kim, sonra kimi, yaxşı CSS var idi CSS etmək üçün cəhd etməyən bu kimi.
ALLISON Buchholtz-AU: Həmçinin, digər şey baxmaq bir şey
Bootstrapping edir.
Belə ki, Bootstrap böyükdür.
>> TOMAS Reimers: Google ki, əgər Səninlə
>> ALLISON Buchholtz-AU: Google.
Bu inanılmaz deyil.
Siz onu sevmək lazımdır.
İndi bir var ki, CSS əsas anlayışı,
Bu bir çox mənada etmək lazımdır.
Awesome.
Thanks, uşaqlar.
>> TOMAS Reimers: çox təşəkkür edirik.