[MUSIC PLAYING] 

DOUG LLOYD: Belə ki, bir daha götürək video daha bir dil haqqında danışmaq. Biz CSS haqqında danışmaq lazımdır Bu dəfə. Üçün qısa, belə ki, CSS, Cascading Style Sheets, Biz istifadə bir dili web inşa zaman. Bu kimi düşünün. HTML təşkil etmək üçün istifadə nə varsa Biz səhifədə qoymaq istəyirəm content, CSS biz ümumiyyətlə istifadə alətdir Bizim saytları baxmaq necə özelleştirmek üçün, və necə istifadəçi təcrübəsi həqiqətən bizim web ilə əlaqə edir. 

HTML kimi, CSS deyil bir proqramlaşdırma dili. Bu məntiq yoxdur. Bu dəyişənlərin yoxdur. Bu hər hansı yoxdur C yoxdur bağlı şeyi axır. Bu dizayn dil var. Və onun sintaksis olduqca sadə və yalnız təsvir necə elementləri bizim səhifə müəyyən HTML var elementləri redaktə etmək lazımdır. Bu məqsədlə, siz varsa hələ HTML bizim video seyr və ya tanımadığı HTML ümumiyyətlə, sizə ki, nəzər edə bilərsiniz CSS ilk, çünki bu müzakirə asılı gedir HTML bəzi bilik. 

Belə ki, burada həqiqətən var sadə CSS stil. Siz heç belə əvvəl CSS ilə proqramlaşdırılmış, Siz anlamaq mən olduqca əminəm Bu stil dəqiq nə. O nə edir? Bəli, bizim web orqanına müraciət bədən tags arasında, səhifə hər şey Bizim HTML və bu müəyyən blue ki, səhifənin fon rəngi. Bəli, bu çox sadə stil var. Bu, həqiqətən çox insan var dostluq dil, CSS. Belə ki, əvvəl istifadə heç etdik, hətta Siz yəqin ki, nə tahmin edə bilər. Əslində, əgər biz bir səhifə, yüklənən Bu stil, elə əlaqədar edildi Bizim səhifənin background color olardı mavi, və standart ağ deyil. 

Belə ki, necə biz stil qurmaq edirsiniz? Bəli ilk biz var bir selector müəyyən edir. Son misal olaraq, ki selector orqan idi. Sonra biz bir açıq buruq brace və biz istəyirik müəyyən başlamaq niyyətindədir ki selector üçün stil. Qıvrım aşırma arasında, biz yalnız əsas dəyər cüt bir siyahısı var. Əvvəlki dəyər cüt idi background color blue nöqtəli vergül, lakin biz bu daha çox ola bilər. Siz çox şey tətbiq ola bilər tag ki, selector bədən. Onların hər biri bir ilə ayrılır nöqtəli vergül və biz onların hər biri zəng bəyannamə, CSS bəyannamə. Biz bütün üslubu biz ilə bittiğinde xüsusi tag müraciət etmək istəyirəm, biz yalnız bir yekun buruq var stil son burğu, və biz stil müəyyən tamamlayın xüsusi selector üçün. 

Bəzi ümumi CSS xüsusiyyətləri hansılardır? Bəli, bəlkə qoymaq istəyirəm bir şey ətrafında bir sərhəd. Siz demək olar ki, sərhəd, ki, əsas olacaq, və sonra dəyərlər olardı, nə stil, rəng, eni Siz olmaq istəyirəm. Belə ki, stil möhkəm ola bilər line, bir dotted line, bir berbat xətti, dalğalı xətt olacaq silsiləsi line. Bəlkə var istəyirəm mavi və ya qara və ya yaşıl ola bilər. Bəlkə olmaq istəyirəm 1 və ya 2 və ya 10 piksel geniş. Siz bu şeyi bütün belirtebilirsiniz. Bəlkə fon qurmaq istəyirəm xüsusi şəkildə səhifənin rəng. Biz artıq qəbulu, gördüm ki, bədən fon mavi olmalıdır. 

Sonra bir açar sözü istifadə edə bilərsiniz, belə CSS müəyyən rəng var ki, onu yaşıl, mavi inşa edilir qara, bilirik ki, çox sadə rəng. Amma siz də hər hansı bir daxil edə bilərsiniz Istədiyiniz hex rəng. Rəng müəyyən edilə bilər Recall üç hex ədəd bir dəsti ilə 0-dan 255, rg və b üçün qırmızı, yaşıl və mavi komponenti. Və belə ki, biz müəyyən edə bilərsiniz biz istədiyiniz hər hansı bir rəng, əvəzinə mavi və ya yaşıl və ya qara istifadə edərək, funt istifadə və hex sonra altı rəqəm, və bizə verəcək altı rəqəmli rəng. Belə ki, fon rəngi var. 

Biz də ön planda var adətən rəng, Sizin səhifə mətni olacaq. Və eyni bunu edə bilər əsas söz və ya altı rəqəmli hex ilə. Belə ki, hər hansı bir rəng belirtebilirsiniz siz Sizin səhifə mətn üçün istəyirəm xüsusi qarşı fon rəngi, yuxarıda. Siz həmçinin dəyişdirmək və məşğul ola bilər font və yol mətn səhifə göstərilir. 

Belə ki, sizin font ölçüsünü dəyişə bilərsiniz. Siz belə əlavə kimi açar sözlər, istifadə edə bilərsiniz əlavə kiçik və ya kiçik xx, və ya orta, böyük, və s. Siz sabit xal istifadə edə bilərsiniz 10 point, 12 point, və s. Siz faiz, 80%, 20% istifadə edə bilərsiniz burada 100% default font edir adətən gedir ölçüsü, 11 və ya 12 xal kimi bir şey ola bilər. Və ya hətta off bazası bilər Ən son font ölçüsü. Siz yalnız bir şey yazıb və bilirsinizsə Bu kiçik olmaq üçün istədiyiniz nə, var lakin siz bilmirəm dəqiq nə ölçüsü bu, yaxşı, yalnız demək olar istəyirəm, font ölçüsü kiçik. Və bu, off əsası olacaq yalnız yuxarıda, bu font ölçüsü var. Və kiçik və ya böyük əldə edə bilərsiniz. Belə ki, müxtəlif bir çox var yolları font ölçüsü müəyyən etmək. 

Siz həmçinin hansı daxil edə bilərsiniz Istədiyiniz font ailə. Müəyyən bir varsa adı, bir yol var CSS Biz bu barədə danışmaq fikrində deyilik burada çox xüsusi bir font müəyyən etmək və səhifə onu embed. Siz həmçinin ümumi adları istifadə edə bilərsiniz. Web təhlükəsiz fonts bir çox var ki, CSS əvvəlcədən müəyyən edilir. Və Microsoft bir istifadəçi əgər Son 20 ildə Office, Siz yəqin ki, ilə tanış edirik bu web təhlükəsiz fonts bir çox artıq, Times New Roman, Arial, , New, Gürcüstan, Tahoma, Verdana Courier və s. O bütün web təhlükəsiz fonts hesab edilir. Və həqiqətən, part səbəb onlar gəldi hər səhifə web-- etmək üçün istifadə edilə idi Bu default giriş fonts qurmuşdu müxtəlif serifs, və bütün bu ilə biz daxil deyil font stuff, lakin bu adətən Sizin CSS əlçatan, siz deyil, hətta başqa fonts müəyyən edir. Nəhayət, sizin mətn align bilər, Bu olan əvəzinə, ismarıcları aligned edir sol, siz ola bilər sağ üçün align, və ya onu mərkəzi align, və ya edə bilər Bu, həm də qaydalarından edib ki, haqlı. O Belə ki, istifadə edə bilərsiniz bütün variantları mətn kimi görünür nə dəyişdirmək üçün, və sizin səhifə necə nümayiş. 

Sizin seçiciler deyil tags yalnız olmalıdır. Biz əvvəllər bir bədən tag gördüm selector, və tag selector yalnız kimi baxmaq deyil. Siz sonra bir tag adı və ki tag üçün bir stil müəyyən edir. Amma siz də bir şey edə bilərsiniz şəxsiyyət selector çağırıb. An ID selector olduqca oxşar görünür. Amma indi istifadə deyiləm ki, qeyd HTML tag, mən bu halda, istifadə edirəm #unique, və ya unikal hash. Siz geri əgər bizim HTML video, danışdıq tags atributları ola bilər necə haqqında. 

Və bir atributu ki tətbiq olduqca çox bütün HTML tags, lakin biz bu barədə danışmaq deyil, şəxsiyyət tag deyilən bir şey var. Belə ki, bu CSS ki yalnız var HTML tag müraciət çox xüsusi bir ID, adlı etdik ki. Əgər haradasa varsa Sizin kodu, haradasa HTML fayl, tag və siz ki, tag bir atributu kimi müəyyən, ID, bu unikal bərabərdir xüsusi stil Burada yalnız arasında müraciət edəcək unikal ID ilə tag. 

Siz həmçinin bir şey edə bilərsiniz bir sinif selector çağırıb. Olan əlavə So ID siz də edə bilərsiniz, atributları HTML tags bir sinif atributu əlavə edin. Və bir sinif atributu istifadə edərkən, birdən çox tags tətbiq oluna bilər. Belə ki, bir neçə şey var ki, əgər , bəlkə demək oxşar istəyirəm, açıq tag blah, blah, blah, blah, sinif şagirdləri bərabərdir. Və sonra bu stil müraciət edirəm Onun sinif hər tag tələbələr edir. Bu halda, biz müəyyən ediyorum sarı fon rəngi, və biz qeyri-şəffaflıq müəyyən istədiyiniz biz haqqında danışmaq deyil ki, bir tag edir lakin necə şəffaf ilə məşğul bir şey bu halda, 70% edir. 

Üçün iki variant var yazı stil. Siz onları yaza bilərsiniz birbaşa HTML stil yerləşdirilməsi stil tags arasında. Və bu stil tags daxilində getmək web page rəhbəri tags. bəlkə daha çox üstünlük yol etmək Bu ayrı-ayrı .css fayl yazmaq üçün, və sonra daxil link link tags istifadə sənəd. Link tags, yenə var hiperlink fərqli, Siz bizim video bir HTML geri əgər. Və link tags necə biz ayrı-ayrı faylları çəkin. Bu növ bərabər kimi web proqramlaşdırma üçün # daxildir. 

Belə ki, table.HTML bir nəzər salaq. Siz geri əgər bizim HTML video, mən göstərdi çox nümunəsi sadə vurma olduqca baxdı masa çirkin və bəlkə var bir yol ilə daha yaxşı etmək üçün CSS, bu, həqiqətən baxmaq üçün bir vurma kimi daha masa, və ya bir şey yalnız birlikdə stuck deyil heç bir faktiki bölgüsü ilə satır ve sütun arasında. Belə ki, üzərində rəhbərlik edək CS50 IDE və nəzər CSS, sort, çimdik bilər necə biz əvvəl ilə başladı, və bir çox daha yaxşı bir şey etmək. 

Beləliklə, biz CS50 IDE istəyirik indi və tanımadığı halda, biz bu qoparmaq lazımdır masa HTML səhifə ki. Table.HTML əsasən yalnız məzmunu müəyyən bir multiple-- o olmaq idi Dörd dörd vurma masa. Bu olduqca sadə. Və biz bu olardı ki, hesab edirəm ki, olduqca yaxşı təşkil baxmaq. Əslində, biz bu səhifə önizleme zaman, Biz bu cür çirkin, doğru ki, görəcəksiniz? Aydındır ki, biz burada satır ve sütun var. Orada ayrılması bir növ. Amma bir mənalı ayrılıq deyil. Biz, həqiqətən, əldə deyilik Burada çox məlumat. Arasında heç bir ayrılıq yoxdur baxımından satır ve sütun üfüqi və ya şaquli qaydaları. Biz yəqin ki, bu edə bilər daha yaxşı bir az baxmaq. Belə ki, cəhd edək. Belə ki, mən burada bu nişanı yaxın gedirəm. Və Mən table.HTML yaxın gedirəm və mən burada başqa bir versiyası var table2.HTML çağırıb. Biz bu açmaq lazımdır. Səhifənin orqanıdır olduqca çox eyni, amma dəyişib etdik üst az. Mən burada diyirləyin lazımdır. Mən ki, bu dəfə edək əlaqədar stil tags istifadə. Mən bir stil tag açıldı etdik və mən artıq Ben yalnız daxilində CSS stil müəyyən Bunun. Mən masa deyir ki, bir stil var. Bu mənim tag selector var. Mən nöqtə və ya hash istifadə deyiləm, Mən I əgər bunu olunacaq ID və ya bir sinif selector istifadə etdi. Mən bir tag selector burada masa var. Bu stil gedir hər masa tag tətbiq edilir. Görünür Mən bir qoymaq istəyirəm geniş pixel, bərk mavi sərhəd, Mənim masa daxilində. Bu kimi yəqin ki, səslənir sağ, vəziyyət kömək? Biz olacaq hər şeyi çox yaxşı baxmaq. Belə ki, bu yaxşıdır. Stylistically, Mən yalnız var burada mənim stil əlaqədar. Bu, əlbəttə, bir var bunu məqbul yoldur. Bu kimi görünür nə edək. Beləliklə, mən aşağı burada geri getmək və lazımdır Mən table2.HTML önizleme edəcəyik. Yaxşı, ki, mən nə istədiyini çox deyil lakin biz xahiş dəqiq nə. Biz bu stil bildirib ki, Bizim masa müraciət etmək niyyətindədir. Bizim masa indi bir pixel var onun ətrafında geniş, möhkəm mavi sərhəd. Biz, həqiqətən, əldə deyilik masa hüceyrələri. Biz yalnız masada əldə edirik. Belə ki, CSS çalışmışdır. Bu tətbiq bir Bizim masa stil. Lakin kifayət qədər etmədi nə biz bunu istəyirdim. Biz nə almaq necə nə biz bunu istəyirsiniz? 

Yaxşı, bir daha nəzər salaq table3.HTML bu versiyası. Beləliklə, mən yalnız bu Nişanlar yaxın gedirəm. Mən burada geri üzərində getmək üçün gedirəm mənim ağac fayl və table3.HTML açmaq. Yenə, bu, olduqca baxmaq olacaq burada başında bənzər. Ancaq xəbərdarlıq, bu dəfə yerinə istifadə orada əlaqədar bir stil, Mən bir keçid gedirəm link tag istifadə stil. Beləliklə, mən yəqin birləşdirən alıram tables.CSS adlı stil, və bu yaxşı bərabərdir stil yalnız, yaxşı means-- Bu fayl nisbi nə etdiklərini və nə Mən deyiləm bir stil var əməlindəndir deyiləm Mənim səhifə üçün istifadə. Mən, həqiqətən, nə görmək istəyirsinizsə Belə ki, Mən burada CSS edirəm Hesab edirəm ki, açıq getmək lazımdır table.CSS həmçinin fayl. Beləliklə, biz burada artıq geri getmək lazımdır daha fayl ağac. Table.CSS var. Biz bunu açıq pop lazımdır. İndi biz CSS bir az gördükdə. Görünür, mən bir neçə var şeyi burada davam. Mən yəqin beş qoymaq istəyirəm geniş pixel, bərk qırmızı sərhəd, Mənim masa ətrafında. Biz artıq olacaq bilirik ki, yalnız perimetri getmək üçün. Biz table2.HTML ki, gördüm. Hər bir sıra, mən yəqin ifadə etmək istəyirəm ki, cərgə boyu 50 piksel yüksək. Belə ki, hər cərgə üçün, xatırlayıram ki, tr tag nə var Mən 50 piksel yüksək edilməsi alıram. 

Nəhayət, mən bu şərh yoxdur. Və bu CSS şərh etmək necə. Bu blok tutmaq üçün çox oxşar şərh syntax çizgi star. Istədiyiniz bütün mətn. Heç bir çizgi çizgi CSS olsa var. Qısa inline şərh, biz Burada bu format istifadə etmək. Mən edirəm kimi görünür Mənim td tags şeyi var. Td tags, və ya masa saxla həqiqətən, yalnız var data, daxilində sütun Bizim satırlar, və yəqin məlumatların hər parça üçün Mənim masa, mən istəyirəm fon rəngi təyin etmək üçün qara, rəng, ağ olmaq rəng ön rəng deyil. Belə ki, bu olacaq mənim səhifə mətn. Mən böyük font 22 istəyirəm font qeyd və mən istəyirəm Bu, font ailə Georgia olmalıdır. Beləliklə, mən fikrində deyiləm default font var. Mən Gürcüstan, müəyyən etmək üçün gedirəm olan bu web təhlükəsiz şriftləri biridir biz əvvəl gördüm ki. Mən mətn aligned etmək istəyirəm Mərkəzləşdirilmiş qutusu ortasında, Mən tərk etmək istəmirəm aligned və ya sağ aligned edir. Mən sütun genişliyi istəyirəm geniş eləcə də 50 piksel olmalıdır. Nin bir nəzər salaq bu kimi görünür nə, Bu bəlkə bir inkişaf əgər baxın. Beləliklə, mən table3.HTML, getmək üçün gedirəm olan geri, bir keçid kimi table.CSS daxildir və biz önizleme bilərsiniz. Bu doğru, bir çox daha yaxşıdır? Bu, həqiqətən bir baxmaq başlayır daha vurma masa kimi çox. Hesab edirəm ki, qırmızı sərhəd var Mənim masa ətrafında amma indi Mən də ki, belirttiğiniz hər bir satır, 50 piksel geniş və ya tall-- bəhanə 50 piksel var me-- hər sütun 50 piksel genişdir. Hər sütun data, yalnız və yalnız data, qara fon var. Belə ki, niyə o var ağ xətləri var. Space Çünki o hüceyrələri bütün arasında, bu bir sərhəd deyil və özü, yalnız var Mən yalnız doldurulması alıram hüceyrələri, həqiqətən olan masa sərhədləri, edir Görünür, bütün birlikdə mövcud idi yalnız nazik ağ xətlər idi. İndi onlar görünən istəyirik. İndi onlar ekranda off pop. Və bu çox sadə Mən müraciət etdik stil, və indi mənim masa daha çox kimi bir çox görünür Dörd dörd tərəfindən vurma masa, əvəzinə yalnız jumbled mess, bu hər şey aydın satır ve sütun var, lakin super yaxşı təşkil. Biz, həqiqətən, yalnız səthi kazıma edirik Burada CSS ilə nə edə. Xoşbəxtlikdən CSS sənədlər olduqca sadə deyil. Siz bir neçə istifadə edəcəyik onun kifayət qədər tez-tez atributları. biz danışdıq olanlar bu video. Siz bir neçə var yəqin ki, bütün istifadə edəcək. Və çox gözəl var. Amma yalnız bir var ki, bilirik Orada sənədlərin çox. Belə ki, biz hər şeyi əhatə etməyib, hətta, Siz əlbəttə ki, öz sol deyilik. Amma CSS həqiqətən fun ilə sınağa. Mən güclü tavsiye ederim Web pages ilə ətrafında oynamaq üçün, və onları edə bilərsiniz necə baxmaq və istifadəçi yaxşılaşdırılması üçün hiss Sizin page ziyaret təcrübəsi. Mən Doug Lloyd edirəm. Bu CS50 edir.