[Powered by Google Translate] [CSS] [Joseph Ong - Harvard Universiteti] [Bu CS50 edir. - CS50.TV] 

Bu gün biz CSS söhbət və ya Cascading Style Sheets olacaq. 

Belə ki, CSS məhz nədir? Yaxşı, 2 hissəyə aşağı müddəti CSS qırmaq edək: Cascading Style Sheets və. Kaskad bir az daha kompleks və bu, başqa bir video əhatə olacaq bir şey deyil. Amma marşlar üçün, Style Sheets CSS nə də çox göstərişlər. Bu, bir web page HTML üslub əlavə edir web səhifə estetik görünür necə dəyişir. Bu səhifədə mətn font olan məzmun yerləşdirilməsi üçün hər şey deməkdir yumru bir qutusu guşələrindən edilməsi və ya mətn kölgələri əlavə kimi sərin şeylər. Şeyi ekranda canlı etmək kimi Siz hətta dəli şeyi edə bilərsiniz. 

Beləliklə, biz HTML CSS necə istifadə edirsiniz? Mən yazıb bu zəif görünüşlü site alın. Rob hazırda bu saytda baxmaq idi, o, yəqin ki, bir şey kimi demək istədiyiniz "Wow! Mənim tətbiqi dəhşətli görünür. Joseph, bir dəhşətli dizayner istəyirik." "Default Times font istifadə? Helvetica qədər yaxşıdır." 

Belə ki, nə Rob istəyir üslubu tətbiq sadə yol ola bilər? Insanların ən bariz şəkildə çox ilkin CSS yazdı element özü biz stil bəyannamələrinin sağ zəng nə qoymaq idi HTML stil atribut istifadə edərək. A stil bəyanat sadəcə HTML element nin CSS mülkiyyət ibarətdir biz dəyişdirmək istədiyiniz sonunda əmlak və bir nöqtəli vergül yeni dəyər ardınca kolon izlədi. Məsələn, edək Rob onun tətbiqi ətrafında qara sərhəd istəyir deyirlər. Biz ilk burada Rob-nin div üzrə stil atributu qoymaq sonra ikiqat quotes daxilində CSS bəyannamə qoydu: "Border: 1px bərk qara;" 1-pixel sərhəd eni istinad edir, möhkəm, sərhəd stil aiddir və sonunda rəngi sərhəd renk nə müəyyən edir. 

Biz bir element çox üslub istəyirsinizsə, ardıcıllıqla bu bəyannamə yazın. Məsələn, Rob bir mavi fon ilə Helvetica onun başlıq mətni istəyir və mətni ətrafında daha çox yer, bunu edə bilərsiniz: style = "font-family: Helvetica; background-color: blue; padding: 5px;" Son nöqtəli vergül həqiqətən isteğe bağlıdır, ancaq adətən ardıcıllıq xatirinə onu saxlamaq. 

Biz soyuducu və daha mürəkkəb CSS xüsusiyyətləri bəzi izah saxlaya bilərsiniz başqa video üçün. Aklınızda bir şey varsa, yalnız CSS sonra istədiyiniz təsiri Googling Yəqin ki, siz çox yaxşı nəticələr verəcək. Bu sərin şey, CSS olduqca geniş olduğunu Siz istədiyiniz bir şey varsa, belə odds var - səbəb ərzində - CSS yəqin ki, bunu edə bilərsiniz. Biz daxili dizayn üslubu bu cür adlandırırlar. Bu element stil start tag uyğun, yaxşı edir. 

Həqiqətən təşkil sevən insanlar üçün, Bu bütün necə messy da peeved bir az əldə başlamaq bilər. Sayfada hər element üçün bunu olsaydı, Təsəvvür plus İndi HTML və CSS bütün intermixed və cluttered olunur. Ümumi, sağ? Bunu düzeltmek üçün, insanlar nəticədə onların HTML biçimlendirme ayrılması üçün alıcı açılmış CSS seçiciler deyilən bir şey istifadə edərək CSS dizayn edir. CSS seçiciler olan bəyannamələri tətbiq edilir elementləri seçmək üçün istifadə olunur. CSS bəyannamələrinin siyahısı ilə birlikdə A selector tez-tez CSS qayda kimi istinad edilir. Bu qaydalar, açıq və yaxın HTML stil tags arasında qoymaq olardı tez-tez sənəd başçısı. 

Bu, misal ilə görmək çox asandır belə bir sadə CSS qayda yaradılması ilə başlamaq edək. Birincisi, bizim HTML rəhbəri bölməsində stil tags qoymaq bildirin. Sonra, selector. Biz sadə seçiciler biri hash simvolu istifadə edərək başlamaq lazımdır öz ID atributu tərəfindən HTML element seçir. Bu halda biz Rob-nin tətbiqi təmsil div seçmək lazımdır div şəxsiyyət, rob sonra hash simvolu yazaraq. İndi bəyannamə. Biz açıq və qapalı aşırma əlavə və Rob-nin div üzrə əvvəllər inline bəyannamələrinin keçmək Bu aşırma daxilində, yenileme, və, sərin, Rob-nin intro hələ ətrafında qara sərhəd mənfi messy inline çirkinlik var. 

İndi biz Rob-nin intro və h1 içərisində seçin istəyirdi? Siz "-nin bu barədə bir ID qoymaq və sonra əvvəllər üslub hərəkət edək." Hesab bilər Bu işləyir, lakin CSS siz elementləri seçin bildirdiğiniz digər yolları var biz combinators sadə seçiciler qarışdırmaq zəng nə istifadə edərək. Məsələn, ağ xarakterli bir combinator kimi istifadə edilə bilər başqa selector daxilində yaşayır ki, 1 selector bütün hallarda müəyyən etmək üçün. Bu əslində çox daha mürəkkəb səslənir. Burada bir misal var. Biz #, qarət boşluq əlavə və h1 ilə əməl yazın edəcək digər sadə selector elementləri növləri seçir bir tag selector adlı divs və ya ci maddələrdə kimi. Yer bütün CSS bəyannamələrinin tətbiqi, bizim 2 sadə seçiciler birləşdirir və id = "rob" ilə element daxilində yaşayır h1 tags üçün buruq aşırma. Just çalışır ki, razı, mən ağ, yenileme, bu font rəngini olacaq və baxmaq, Rob-nin header indi ağ. 

Bu işin bütün qaydaları yerinə inline üslub istifadə edərək, göstərir ki, gedir biz çox təmiz kodu əldə edə bilərsiniz. Bu stil blok başlayır əgər Əslində, bir az böyük əldə Mən hətta tamamilə fərqli bir fayl bu üslub çıxarmaq olar. 

Bu sənəd CSS bu yeni fayl əlavə etmək üçün yalnız HTML-nin link tag istifadə edəcəyik. Burada, bir xarici stil hesabatında birləşdirən edirəm ki rel atributu o deyirəm və href atributu ilə fayl yolunu ifadə. İndi HTML biçimlendirme və CSS, tamamilə ayrı-ayrı faylları gözəl təşkil olunur olan demək olar ki, həmişə dizaynerlər HTML və CSS ilə iş üstünlük yoldur. 

Siz merak etdiyiniz halda, sadə seçiciler ID seçiciler daxildir biz yalnız gördüm olanları kimi tag seçiciler habelə sinif müəyyən bir sinif ilə elementlərin seçilməsi üçün seçiciler, növü kimi digər atributları ilə elementlərin seçilməsi üçün atributu seçiciler = "radio" radio düyməsini giriş, və kimi pseudoselectors üçün hover və diqqət qarşılıqlı bir element meydana üzərində mousing kimi zaman üslubu ifadə edir. 

Ümumi combinators bütün uşaqlar üçün ağ daxildir və vergülləri seçiciler ayırmaq. Karşılaşacağınız Digərləri, yalnız birbaşa uşaqlar üçün arrow daxildir element sonra baş verən bütün bacı üçün tilde, və element dərhal sonra gəlir ki, 1-qardaş üçün plus sign. 

Bu seçiciler və combinators birleştiren, Əgər bir web page nail üslubu spektrini genişləndirmək bilər və daha səmərəli CSS yazın. Siz məni burada yazaraq görmək CSS xətləri bir neçə ilə, Mən tez bu kimi bir şey kimi bu baxmaq kimi bir şey edə bilərsiniz. 

Mən Yusif oldum və bu CS50 edir. 

[CS50.TV] 

Ah, mən burada başlar? [Gülür] Okay - məni olmadan bunu edək. Bir əlavə et - mənə mətni dəyişdirmək edək. Ooh. Bağışlayın.