Notepadni yaratish CSS bilan yaratilgan veb-sahifa

01dan 10gacha

CSS uslublar jadvalini yarating

Xuddi shu tarzda HTML uchun alohida matn fayli hosil qildik, siz CSS uchun matn fayli hosil qilasiz. Agar siz ushbu jarayon uchun ingl. Ma'lumotlarga muhtoj bo'lsangiz, iltimos, birinchi qo'llanmani ko'rib chiqing. Notepadda CSS uslublar jadvalini yaratishning qadamlar quyidagilardir:

1. Bo'sh oynani olish uchun Fayl> Yangi eslatma kitobida yangi-ni tanlang
2. Faylni CSS sifatida saqlash
3. Ruxsat etilgan diskda my_website jildiga o'ting
4. "Turli xil Saqlash" ni "Barcha fayllar" ga o'zgartiring
5. Faylingizga "styles.css" (tirnoqlarni o'chirib qo'ying) deb nom bering va Saqlash-ni bosing

02 ning 10

CSS uslublar jadvalini HTML-ga bog'lang

Veb-saytingiz uchun uslublar varag'i bo'lgandan keyin uni veb-sahifaga bog'lashingiz kerak bo'ladi. Buning uchun siz aloqa yorlig'ini foydalanasiz. Sizning pets.htm hujjatingizning teglaridagi har qanday joyga quyidagi bog'lanish yorliqlarini joylashtiring:

03 dan 10gacha

Sahifa chekka joylarini to'g'rilang

Siz turli xil brauzerlar uchun XHTML yozganingizda, siz o'rganadigan narsalardan biri, ular hamma narsalarni qanday aks ettirishlari uchun turli chekka va qoidalarga ega ekanligi ko'rinadi. Saytingizning ko'pchiligida brauzerlarda bir xil ekanligiga ishonch hosil qilishning eng yaxshi usuli cheklovlar kabi brauzer tanlovi uchun odatiy holatlarga yo'l qo'ymaslikdir.

Men sahifalarni yuqori chap burchagiga boshlamoqchiman. Matnni o'rab-chuqur yoki to'ldirishni xohlamayman. Men kontentni to'ldirmoqchi bo'lsam ham, bo'shliqni nolga qo'yaman, shunda men bir xil bo'sh shiftdan boshlayman. Buning uchun styles.css dosyanıza quyidagilarni qo'shing:

HTML, body {
margin: 0px;
to'ldirish: 0px;
border: 0px;
chap: 0px;
tepada: 0px;
}

04/10

Sahifadagi shriftni o'zgartirish

Shrift odatda veb-sahifasida o'zgartirishni xohlagan birinchi narsa. Veb-sahifadagi standart shrift chirishi mumkin va aslida veb-brauzerning o'zi, shriftni aniqlamasangiz, sizning sahifangiz qanday ko'rinishini bilib olmaysiz.

Odatda paragraflarda yoki ba'zida butun hujjatning harfini o'zgartiradi. Ushbu sayt uchun uskuna va paragraf darajasida shriftni aniqlaymiz. Styles.css hujjatiga quyidagilarni qo'shing:

p, li {
shrift: 1em Arial, Helvetica, sans-serif;
}
h1 {
shrifti: 2em Arial, Helvetica, sans-serif;
}
h2 {
shrifti: 1.5em Arial, Helvetica, sans-serif;
}
h3 {
shrift: 1.25em Arial, Helvetica, sans-serif;
}

Men paragraflar va ro'yxat elementlari uchun asosiy o'lcham deb boshladim, keyin esa uni sarlavhalarimning hajmini belgilash uchun ishlatganman. Men h4dan ko'ra sarlavhani chuqurroq ishlatishni kutmayman, lekin agar siz uni rejalashtirmoqchi bo'lsangiz, buni ham xohlaysiz.

10dan 10gacha

Sizning havolalaringizni yanada qiziqarli qilish

Ulanish uchun standart ranglar mos kelmaydigan va tashrif buyurilgan havolalar uchun ko'k va binafsha ranglardir. Bu standart bo'lsa-da, siz sahifalaringizning rang tartibiga mos kelmasligi mumkin, shuning uchun uni o'zgartiraylik. Styles.css faylida quyidagilarni qo'shing:

a: bog'lanish {
harflarning oilasi: Arial, Helvetica, sans-serif;
rang: # FF9900;
matnni bezash: chizilgan;
}
a: tashrif buyurilgan {
rang: # FFCC66;
}
a: hover {
fon: #FFFFCC;
harflarning og'irligi: qalin;
}

Men uchta bog'lanadigan uslublarni o'rnatdim: a: ​​sukut bo'yicha havola, a: tashrif buyurilgani uchun tashrif buyurganimda, rangi o'zgartiraman va a: hover. A bilan: hover Men bilan bog'laning fon rangini olish va uni bosish uchun havola borligini ta'kidlash uchun qalin borish.

06 dan 10gacha

Navigatsiya bo'limini shakllantirish

Biz navigatsiyani (id = "nav") birinchi qismini HTML formatida joylashtirganimizdan oldin, uni avvalgidek ko'rib chiqamiz. Biz qanchalik keng bo'lishi kerakligini va o'ng tomonga kengroq marginni qo'yishimiz kerak, shuning uchun asosiy matn unga qarshi chiqmaydi. Men atrofimdagi chegara qo'ydim.

Styles.css hujjatingizga quyidagi CSS qo'shing:

#nav {
kengligi: 225px;
margin-right: 15px;
chegara: o'rta qattiq # 000000;
}
#nav li {
list-style: none;
}
.footer {
shrift o'lchami: .75em;
aniq: ikkalasi ham;
kengligi: 100%;
matnni aylantirish: markaz;
}

Ro'yxat uslubi xususiyati navigatsiya bo'limining ichida hech qanday o'q yoki raqam bo'lmasligi uchun ro'yxatni belgilaydi, va .footer mualliflik huquqi bo'limini kichikroq va bo'lim ichida joylashganligi ko'rinadi.

07 dan 10gacha

Asosiy bo'limni joylashtirish

Asosiy bo'limingizni mutlaq joylashishni aniqlash bilan joylashtirishingiz mumkin, bu sizning veb-sahifangizda qolishni xohlagan joyingizda qolishiga amin bo'lishingiz mumkin. Men 800px kengligida kengroq monitorlarni o'rnatish uchun tayyorladim, lekin agar sizda kichikroq monitor bo'lsa, uni yanada kengroq qilishni xohlashingiz mumkin.

Styles.css hujjatiga qo'ying:

#main {
kengligi: 800px;
tepada: 0px;
Lavozim: mutlaq;
chap: 250px;
}

08 dan 10gacha

Paragraflaringizni shakllantirish

Men yuqorida xat shriftini o'rnatganimdan beri, men har bir xatboshini yanada yaxshiroq ko'rsatish uchun biroz qo'shimcha "tekme" berishni istadim. Men buni xatni faqat tasvirdan ko'ra ko'proq ta'kidlagan ustki qismga qo'yish orqali qildim.

Styles.css hujjatiga qo'ying:

.topline {
chegara yuqori: qalin qattiq # FFCC00;
}

Men barcha xatlarni shu tarzda belgilash o'rniga, "topline" deb nomlangan bir sinf sifatida qaror qildim. Shunday qilib, qaror qabul qilsam, sariq qator bo'lmasa, paragrafga ega bo'lishni istasam, xatboshidagi taglik = "topline" ni qoldirib, yuqori chegaraga ega bo'lmaydi.

09 dan 10 ga

Tasvirlarni shakllantirish

Tasvirlar odatda atrofida chegaraga ega, bu rasm havola qilinmaguncha har doim ham ko'rinmaydi, biroq men CSS uslublar jadvalim ichidagi chegarani avtomatik tarzda o'chiradigan sinfga ega bo'lishni yaxshi ko'raman. Ushbu uslublar uchun men "noborder" sinfini yaratdim va hujjatdagi aksariyat tasvirlar bu sinfning bir qismidir.

Ushbu tasvirlarning boshqa maxsus qismi sahifadagi joylashuvidir. Ularni jadvalda ishlatishdan oldin paragrafning bir qismi bo'lishini xohlardim. Buning eng oddiy usuli float CSS xususiyatini ishlatishdir.

Styles.css hujjatiga qo'ying:

#main img {
float: chap;
margin-right: 5px;
margin-bottom: 15px;
}
.noborder {
border: 0px yo'q;
}

Ko'rib turganingizdek, paragraflarda yonma-yon yozilgan matnga qarshi chizilmasligi uchun tasvirlarda marginal xususiyatlar mavjud.

10 dan 10 gacha

Endi tugagan sahifangizga qarang

CSS-ni saqlaganingizdan so'ng siz veb-brauzeringizda pets.htm sahifasini qayta yuklashingiz mumkin. Sizning sahifangiz ushbu rasmda ko'rsatilgandek ko'rinishi kerak, vahiylar mos keladigan va navigatsiya sahifaning chap tomoniga to'g'ri joylashtirilgan bo'lishi kerak.

Ushbu sayt uchun barcha ichki sahifalar uchun xuddi shu ishlarni bajaring. Navigatsiyangizdagi har bir sahifaga bitta sahifa kerak.