[Powered by Google Translate] [CSS] [Cozef 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 dəqiq nədir? Yaxşı, 2 hissəyə aşağı müddəti CSS qırmaq edək: Kaskad və Style Sheets. Kaskad bir az daha mürəkkəbdir və bu, başqa bir video ilə ə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 page estetik görünür necə dəyişir. Bu səhifədə mətnin font olan məzmun yerləşdirilməsi üçün hər şey deməkdir dairəvi bir qutusu guşələrindən edilməsi və ya mətn kölgələri əlavə kimi digər cool şeyə. Şeyi ekranda canlı etmək kimi Siz hətta crazy şeyi edə bilər. 

Beləliklə, biz HTML CSS necə istifadə edə bilərəm? Mən yazıb bu kasıb görünüşlü site edin. Rob hazırda bu saytda baxmaq olsaydı, o, yəqin ki, bir şey kimi demək istədiyiniz "Wow! Mənim tətbiqi dəhşətli görünür. Cozef, bir dəhşətli dizayner istəyirik." "-U mənim Times font istifadə? Helvetica çox daha yaxşı edir." 

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

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

Biz soyuducu və daha mürəkkəb CSS xüsusiyyətləri bəzilərini izah saxlaya bilərsiniz Başqa bir video üçün. Aklınızda bir şey varsa, yalnız CSS təqib istədiyiniz təsiri googling yəqin ki, olduqca yaxşı nəticələr verəcəkdir. Bu sərin şey, CSS olduqca genişdir ki, Siz istədiyiniz bir şey var əgər bahis var - səbəb ərzində - CSS yəqin ki, bunu edə bilərsiniz. Biz daxili dizayn dizayn bu cür adlandırırlar. Bu element stil başlanğıc etiketi uyğun olaraq, yaxşı edir. 

Həqiqətən təşkil etmək istəyirəm olan insanlar üçün, Bu bütün necə messy da peeved bir az almaq başlamaq bilər. Sayfada hər bir element üçün bunu etmək olsaydı, Təsəvvür edin plus artıq HTML və CSS bütün intermixed və darmadağın edilir. Ümumi, sağ? Bunu düzeltmek üçün, insanlar nəticədə onların HTML biçimlendirme ayrılması üçün alıcı başladı CSS selectors deyilən bir şey istifadə edərək CSS dizayn edir. CSS selectors hansı bəyannamələr tətbiq olunur elementləri seçmək üçün istifadə olunur. CSS bəyannamələrinin siyahısı ilə birlikdə bir selector tez-tez CSS qayda olaraq adlanır. Həmin qaydalar, açıq və qapalı HTML stil tags arasında qoymaq olardı tez-tez sənəd rəhbəri. 

Bu nümunə 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ə selectors biri hash simvolu istifadə edərək başlamaq lazımdır onun ID atributu tərəfindən HTML element seçir. Bu halda biz Rob-nin tətbiqi təmsil div seçeceksiniz div şəxsiyyət, Rob sonra hash simvolu yazaraq. İndi bəyanatları. Biz açıq və qapalı aşırma əlavə və Rob-nin div bizim əvvəllər inline bəyannamələrinin keçmək Bu aşırma daxilində, Yenile, 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 daxilində seçmək istəyirdi? Siz "nin bu barədə ID qoymaq və sonra əvvəllər üslub hərəkət edək." Hesab edə bilər Bu çalışır, ancaq CSS siz elementləri seçin bildirdiğiniz digər yolları var biz combinators sadə selectors qarışdırmaq dediyimiz istifadə edərək. Məsələn, ağ xarakteri combinator kimi istifadə edilə bilər başqa selector daxilində yaşayır ki, 1 selector bütün instansiyalarda müəyyən etmək üçün. Yəni əslində çox daha mürəkkəb səslənir. Aşağıda bir örnek. Biz # Rob boşluq əlavə edin və h1 ilə əməl yazın edəcək digər sadə selector elementləri növləri seçir ki, bir etiket selector çağırıb divs və ya ci maddələrdə kimi. Yer bütün CSS bəyannamələrinin tətbiqi, bizim 2 sadə selectors birləşdirir və id = "rob" ilə element daxilində yaşayır ki, H1 tags üçün buruq aşırma. Sadəcə çalışır ki, razı, mən ağ, yenileme, bu font rəngini olacaq və baxmaq, Rob-nin mövzu indi ağ olur. 

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

Bu sənəddə CSS kimi yeni fayl əlavə etmək üçün yalnız HTML keçid tag istifadə edəcəyik. Burada, mən xarici stil hesabatında birləşdirən alıram ki rel atributu onu deyirəm və href atributu ilə fayl yolunu ifadə. İndi mənim 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ə selectors ID selectors daxildir biz yalnız gördüm olanları kimi və tag selectors habelə sinif müəyyən siniflə elementləri seçilməsi üçün seçiciler, növü kimi digər atributları ilə elementləri seçilməsi üçün atributu selectors = "radio" radio düyməsini giriş, və kimi pseudoselectors üçün hover və diqqət qarşılıqlı bir element baş üzərində mousing kimi zaman üslubu ifadə edir. 

Ümumi combinators bütün uşaqlar üçün ağ daxildir və vergülləri selectors 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 qardaş üçün tilde, və element dərhal sonra gəlir ki, 1-qardaş üçün artı işaretini. 

Bu selectors və combinators birleştiren, Siz müəyyən bir web page əldə edə üslubu çeşidini genişləndirmək bilər və daha səmərəli CSS yazın. Siz məni burada yazaraq bax 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 Joseph oldum və bu CS50 edir. 

[CS50.TV] 

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