01 ilə 10
CSS Style Sheet yaradın
HTML üçün ayrıca mətn faylı yaratdığımız şəkildə, CSS üçün mətn faylı yaradacaqsınız. Bu proses üçün vizual ehtiyac varsa, ilk təlimçiyə baxın. Not Defteri'nde CSS stilinizi yaratmaq üçün aşağıdakı adımlar:
- Boş bir pəncərə almaq üçün Fayl> Yeni Notepad-də seçin
- Dosyayı
- Sabit diskinizdeki my_website qovluğuna gedin
- "Saxla Növü": "Bütün Dosyalara"
- Faylınızı "styles.css" adlandırın (tırnaklarınızı tərk edin) və Saxla düyməsini basın
02/10
HTML CSS Stil Formasını bağlayın
Web siteniz üçün bir stil var, onu Web səhifəsinin özü ilə əlaqələndirməlisiniz. Bunun üçün keçid etiketini istifadə edin. Aşağıdakı keçid etiketini pets.htm sənədinizin
etiketləri daxilində hər hansı bir yerdə yerləşdirin:03/10
Səhifənin marjlarını düzəlt
XHTML'yi müxtəlif brauzerlər üçün yazarkən, bir şey öyrənəcəksiniz ki, hər şeyin necə göründüyü üçün müxtəlif marjlar və qaydalar var. Sitenizin ən çox brauzerlərdə göründüyünə əmin olmaq üçün ən yaxşı yolu marjin kimi şeylərə brauzer seçiminə görə qadağa qoymamalıdır.
Mən səhifəni yuxarı sol küncdə başlamağı üstün tutur və heç bir əlavə padding və mətni əhatə etməz. Məzmunu yığışdırmaq üçün gedirəmsə belə, boşluqları sıfıra qoyuram ki, eyni boş şiferlə başlayıram. Bunu etmək üçün styles.css dökümanınıza aşağıdakıları əlavə edin:
html, body {
margin: 0px;
padding: 0px;
sərhəd: 0px;
sol: 0px;
üst: 0px;
}
04/10
Səhifədə Yazıların dəyişdirilməsi
Yazı tipi tez-tez bir Web səhifəsində dəyişmək istədiyiniz ilk şeydir. Bir Web səhifəsində olan yazı tipi çirkin ola bilər və əslində veb-brauzerin özüdür, buna görə də yazı tipini təyin etməsəniz, səhifənizin nə ilə görünəcəyini bilməyəcəksiniz.
Tipik olaraq, yazı tipini paraqraflarda və ya bəzən bütün sənədin özündə dəyişə bilərsiniz. Bu sayt üçün başlığı və paraqraf səviyyəsində yazı tipini təyin edəcəyik. Styles.css dökümanınıza aşağıdakıları əlavə edin:
p, li {
font: 1em Arial, Helvetica, sans-serif;
}
h1 {
font: 2em Arial, Helvetica, sans-serif;
}
h2 {
font: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
font: 1.25em Arial, Helvetica, sans-serif;
}
Paraqraflar və siyahı elementləri üçün mənim əsas ölçüsü olaraq 1em ilə başladım və sonra mənim başlıqların ölçüsünü təyin etmək üçün istifadə etdilər. Mən h4-dən daha dərin bir mövzu istifadə etməyi düşünmürəm, amma planladığınız təqdirdə onu da üslubu istəyə bilərsiniz.
05/10
Bağlantılarınızı daha maraqlı edir
Bağlantılar üçün standart renkler sırasıyla ziyaret edilmemiş ve ziyaret edilen bağlantılar üçün mavi ve mordur. Bu standart olsa da, sizin səhifələrinizin rəng sxeminə uyğun gəlmir, buna görə dəyişək. Styles.css dosyanızda aşağıdakıları əlavə edin:
a: link {
font-family: Arial, Helvetica, sans-serif;
rəng: # FF9900;
mətn-bəzək: vurğulayır;
}
a: ziyarət {
rəng: # FFCC66;
}
a: hover {
fon: #FFFFCC;
font-çəki: qalın;
}
Mən üç link üslubunu qurdum: a: default kimi default, a: ziyarət edildiyi üçün ziyarət, rəng dəyişdirmək və bir: hover. A ilə: hover Mən bir fon rəngi almaq və tıklamaq üçün bir keçid vurğulamaq üçün qalın var.
06-dan 10-a
Naviqasiya Bölməsini Stil etdirmək
İlk olaraq naviqasiyanı (id = "nav") bölməni HTML-də qoyduğumuzdan ilk növbədə onu tərtib edək. Bizə nə qədər geniş olması lazım olduğunu göstərmək və sağ mətnin ona qarşı çıxmaması üçün daha geniş bir margin qoyulması lazımdır. Ətrafımdakı bir sərhəd də qoydu.
Styles.css sənədinizə aşağıdakı CSS əlavə edin:
#nav {
genişlik: 225px;
margin-right: 15px;
sərhəd: orta sütun # 000000;
}
#nav li {
siyahısı tərzi: none;
}
.footer {
font-ölçüsü: .75em;
aydındır: hər ikisi;
genişlik: 100%;
text-align: mərkəzi;
}
Siyahı tərzi mülkiyyəti, güllə və ya nömrələr olmadığı üçün naviqasiya bölməsinin içərisində siyahı qurur və .footer, müəlliflik bölməsini daha kiçik və bölmədə mərkəzləşdirir.
07/10
Əsas bölmənin yerləşdirilməsi
Əsas bölümünüzü mütləq yerləşdirmə ilə yerləşdirərək, Web səhifəmizdə qalmasını istədiyiniz yerdə tam olaraq qalacaqlarına əmin ola bilərsiniz. Daha geniş monitörlərin yerləşdirilməsi üçün mənim 800px genişlənmişdim, ancaq kiçik bir monitörünüz varsa, onu daha da daraltmaq isteyebilirsiniz.
Styles.css sənədinizə aşağıdakıları yerləşdirin:
#main {
eni: 800px;
üst: 0px;
mövqe: mütləq;
sol: 250px;
}
08/10
Paraqraflarınızı tərtib et
Artıq yuxarıda paraqrafın yazı tipini təyin etdiyimiz üçün, hər bir bəndin daha yaxşı dayanması üçün bir az əlavə "vuruş" vermək istərdim. Mən bunu yalnız imicdən daha çox vurğulayan bir üst sərhəd qoyaraq etdim.
Styles.css sənədinizə aşağıdakıları yerləşdirin:
.üst sətir {
sərhədsiz: qalın bərk # FFCC00;
}
Mən bunu bütün qaydalarımızı bu şəkildə müəyyən etməkdən başqa, "topline" adlı bir sinif olaraq etməyə qərar verdim. Bu yolla, mən qərar verərəm üst sarı xətt olmadan bir paraqraf var istəyirəm, mən yalnız tag tag tag = "topline" off tərk edə bilər və üst sərhəd olacaq.
09/10
Şəkillərə baxmaq
Şəkillər, adətən, ətrafında bir sərhəd var, bu şəkil bir link olmadıqda həmişə görünmür, ancaq sərhədləri avtomatik olaraq söndürən CSS stil səhifəmdə bir sinif var. Bu üslub üçün mən "noborder" sinfi yaratdım və sənəddəki görüntülərin əksəriyyəti bu sinifin bir hissəsidir.
Bu şəkillərin digər xüsusi hissəsi səhifədəki yeri. Onları birləşdirmək üçün masalardan istifadə etməmişlər. Bunu etmək üçün ən sadə yolu float CSS xüsusiyyətindən istifadə etməkdir.
Styles.css sənədinizə aşağıdakıları yerləşdirin:
#main img {
float: sol;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
sərhəd: 0px none;
}
Gördüyünüz kimi, bəndlərdə olan yanaşan mətnə qarşı çarpan olmadığına əmin olmaq üçün şəkillərdə margin xüsusiyyətləri də var.
10-dan 10-a
İndi tamamladığınız səhifəyə baxın
CSS-ni saxladıqdan sonra veb brauzerinizdə pets.htm səhifəsini yenidən yükləyə bilərsiniz. Sayfanız, resimdeki hizalanmış ve navigasyonun sayfanın sol tarafına doğru yerleştirilmiş olan bu resimde gösterilene benzer görünmelidir.
Bu sayt üçün bütün daxili səhifələriniz üçün eyni adımları izləyin. Naviqasiyanızdakı hər bir səhifə üçün bir səhifə var.