Faktlar bu ipuçları ilə alın
Bütün veb brauzerlər "defaulyar üslub" kimi bilir. Hər hansı digər stil məlumatları olmadıqda HTML elementlərinin görünüşünü və hisslərini diktə edən üslublar. Məsələn, demək olar ki, hər bir brauzerdə hiperlinklərin default görünüşü bir altlıq ilə parlaq mavi rəngdir. Fərqli bir şəkildə nümayiş etdirdiyiniz üçün bu əlaqələrin necə göründüyü.
Standart brauzer üslubları faydalı ola bilər, lakin bir çox hallarda veb-dizaynerlər bu üslubları aradan qaldırmaq istəyirlər ki, onlar üslublarla təzə başlaya bilərlər ki, onlar nəzarətdə 100% -dir. Bu, "master stylesheet" kimi tanınanlardan istifadə edilir.
Bir master üslub bütün sənədlərinizdə zəng etdiyiniz ilk stil şəklində olmalıdır. Qarşılıqlı tarayıcı Web dizaynında problemlərə səbəb ola biləcək default brauzer parametrlərini təmizləmək üçün bir master üslub istifadə edin. Üslubları master üslubu ilə təmizlədikdən sonra dizaynınız bütün brauzerlərdə eyni yerdən başlayır - şəkil üçün təmiz bir kətan kimi.
Qlobal Varsayışlar
Usta üslubunuz səhifənin margin, boşluq və səhifənin sərhədlərini sıfıra endirməklə başlamalıdır. Bəzi veb brauzerlər sənədin orqanını brauzer paneli kənarlarından çıxarılan 1 və ya 2 piksel səviyyəsinə çatdırır. Bu, onların hamısı eyni görünməsini təmin edir:
html, body {margin: 0px; padding: 0px; sərhəd: 0px; }Yazı tipini ardıcıl olaraq etmək istəyirsən. Sayfanızın erişilebilir olması üçün, yazı tipi boyutunu% 100 və ya 1em olaraq ayarlamanıza əmin olun, lakin ölçüsü hələ də uyğun deyil. Çətinlik hündürlüsünü də daxil edin.
body {font: 1em / 1.25 Arial, Helvetica, sans-serif; }Başlıq Formatlaması
Başlıq və ya başlıq etiketləri (H1, H2, H3, və s.) Adətən böyük boşluqlar və ya onların ətrafında dolğunluqları olan qalın mətni köçürə. Kilonun, marjinlərin və paddinglərin təmizlənməsi ilə, bu etiketlərin əlavə üslublar olmadan ətrafdakı mətndən daha böyük (və ya daha kiçik) qalmasını təmin edirsiniz:
h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-çəki: normal; font-family: Arial, Helvetica, sans-serif; }Başlıq etiketlerinize xüsusi ölçüləri, məktub aralığı və paddingləri təyin etməyi düşünmək istəyə bilərsiniz, lakin həqiqətən dizayn etdiyiniz saytın üslubundan asılıdır və master stillərindən kənarda qalmalıdır. Xüsusi dizaynınız üçün bu başlıqlar üçün daha çox üslub əlavə edə bilərsiniz.
Plain Text Formatting
Başlıqların kənarında, təmizləmək üçün əmin olmalısınız ki, digər mətn yazıları var. İnsanlar tez-tez unutduqları bir set masa hüceyrə etiketləri (TH və TD) və forma etiketləri (SELECT, TEXTAREA və INPUT). Bədəninizi və paraqraf mətni ilə eyni ölçüyə qoymursanız, brauzerlərin onları necə göstərdiyinə xoşagəlməz bir təəccüb doğurursunuz.
p, th, td, li, dd, dt, ul, ol, blockquote, q, abbreviatura, abbr, a, input, select, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; }Diqqətinizi (BLOCKQUOTE və Q), acronyms və kısaltmalara bir az əlavə stil vermək də gözəldir, buna görə bir az daha fərqlənirlər:
blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } kısaltması, abbr {kursor: kömək; sərhəd altlığı: 1px dashed; }Linklər və şəkillər
Linklər idarə etmək və yuxarıda qeyd olunan parlaq mavi altı çizilmiş mətndən dəyişmək asandır. Mən həmişə əlaqələrimə sadəcə olaraq vurğulamaq üstünlüyünü üstün tuturam, ancaq bu seçimləri ayrı bir şəkildə seçsəniz, bu variantları ayrıca olaraq təyin edə bilərsiniz. Mən də master stillərindəki rəngləri daxil etmirəm, çünki bu dizayndan asılıdır.
a, a: link, a: ziyarət, a: aktiv, a: hover {text-decoration: underline; }Şəkillərlə sərhədləri söndürmək vacibdir. Çox brauzerlər düz şəkil ətrafında bir sərhəd göstərməsə də, şəkil bağlı olduqda, brauzerlər sərhədi açır. Bunu düzəltmək üçün:
img {border: none; }Masalar
Cədvəllər layout məqsədi üçün artıq istifadə edilmədikcə, siteniz hələ də faktiki tabuar məlumatları üçün istifadə edə bilər. Bu HTML masalarından gözəl istifadə. Biz artıq zəmanətli mətn ölçüsünün masa üstü hüceyrələriniz üçün eyni olduğuna əmin oldunuz, ancaq masalarınızın eyni qalması üçün bir neçə başqa üslub var:
table {margin: 0; padding: 0; sərhəd: none; }Formalar
Digər elementlərlə olduğu kimi, forma ətrafınızdakı boşluqları və boşluqları da təmizləyin. Başqa bir şey etmək istəyirəm ki, forma etiketini " inline " kimi yazmalısınız ki, kodda etiket qoyduğunuzda əlavə yer əlavə etmir. Digər mətn elementləri ilə olduğu kimi, seçdiyiniz, textarea və yuxarıdan gələn yazı tipi məlumatlarını müəyyən edirəm ki, mətnimin qalan hissəsi ilə eynidır.
formu {margin: 0; padding: 0; ekran: inline; }İmleci etiketiniz üçün dəyişdirmək yaxşı bir fikirdir. Bu insanlar etiketin tıklandığında bir şey edəcəyini görmək üçün kömək edir.
etiket {kursor: göstərici; }Ümumi siniflər
Master üslubunun bu hissəsi üçün, sizə məlum olan dərsləri müəyyənləşdirməlisiniz. Bunlar ən tez-tez istifadə etdiyim bəzi dərslərdir. Onların hər hansı bir elementə təyin olunmadığını nəzərə alsaq, onları sizə lazım olan hər şeyi təyin edə bilərsiniz:
.clear {clear: hər ikisi; } .floatLeft {float: sol; } .floatRight {float: sağ; } .textLeft {text-align: sol; } .textRight {text-align: sağ; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * genişliyi təyin etməyi unutmayın * /. bold {font-weight: thick; } .italic {font-style: italic; } .müəllif {text-decoration: underline; } .müvafiq {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .padding {doldurulması: 0; } .nobullet {list-style: none; list-style-image: none; }Unutmayın ki, bu dərslər hər hansı digər üslublardan əvvəl yazılmışdır və onlar yalnız siniflərdir, daha sonra isə şablonda baş verən daha konkret stil xüsusiyyətləri ilə əvəz etmək asandır. Bir element üzərində ümumi bir sinif qurduğunuzu və təsir etmədiyini görürsəniz, eyni elementə təsir edən son üslubların birində başqa bir stil olmadığından əmin olmaq lazımdır.
Bütün Master Stylesheet
/ * Qlobal Varsayılanlar * / html, body {margin: 0px; padding: 0px; sərhəd: 0px; } body {font: 1em / 1.25 Arial, Helvetica, sans-serif; } / * Başlıqları * / h1, h2, h3, h4, h5, h6 {margin: 0; padding: 0; font-çəki: normal; font-family: Arial, Helvetica, sans-serif; } / * Mətn Stilleri * / p, th, td, li, dd, dt, ul, ol, blockquote, q, abbreviatura, abbr, a, input, select, textarea {margin: 0; padding: 0; font: normal normal normal 1em / 1.25 Arial, Helvetica, sans-serif; } blockquote {margin: 1.25em; padding: 1.25em} q {font-style: italic; } kısaltması, abbr {kursor: kömək; sərhəd altlığı: 1px dashed; } kiçik {font-size: .85em; } böyük {font-size: 1.2em; } / * Bağlantılar və şəkillər * / a, a: link, a: ziyarət, a: aktiv, a: hover {text-decoration: underline; } img {border: none; } / * Tablolar * / table {margin: 0; padding: 0; sərhəd: none; } / * Formlar * / form {margin: 0; padding: 0; ekran: inline; } etiket {kursor: pointer; } / * Ümumi siniflər * / .clear {clear: both; } .floatLeft {float: sol; } .floatRight {float: sağ; } .textLeft {text-align: sol; } .textRight {text-align: sağ; } .textCenter {text-align: center; } .textJustify {text-align: justify; } .blockCenter {display: block; margin-left: auto; margin-right: auto; } / * genişliyi təyin etməyi unutmayın * /. bold {font-weight: thick; } .italic {font-style: italic; } .müəllif {text-decoration: underline; } .müvafiq {margin-left: 0; padding-left: 0; } .nomargin {margin: 0; } .padding {doldurulması: 0; } .nobullet {list-style: none; list-style-image: none; }Jennifer Krynin tərəfindən hazırlanan əsər. Jeremy Girard tərəfindən 10/6/17 tarixində redaktə edildi