Bir veb-saytın vizual üslubu və düzeni CSS və ya Cascading Style Sheets tərəfindən diktə edilir. Bunlar veb-səhifənin HTML formatlaşdırma şəklini təşkil edən sənədlərdir və veb-brauzerləri bu formatlaşdırma nəticəsində yaranan səhifələrin necə göstərilməsinə dair təlimatlar verir. CSS bir səhifə düzeni, eləcə də rəng, fon şəkilləri, mətbəə və daha çox işləyir.
Bir CSS faylına baxarsanız, hər hansı bir biçimlendirme və ya kodlama dili kimi görürsünüz, bu fayllar onlara xüsusi bir sözdizimi var. Hər stil hesabatı bir sıra CSS qaydalarından ibarətdir. Bu qaydalar, tam olaraq qəbul edilərkən, saytın hansı üslubudur.
CSS qaydasının hissələri
CSS qayda iki fərqli hissədən ibarətdir - seçici və bildiriş. Selektor bir səhifədə səpilən nəyi müəyyənləşdirir və bəyannamə necə səpkili olmalıdır. Misal üçün:
p {
rəng: # 000;
}
Bu CSS qaydasıdır. Seçici hissəsi "p", "bəndlər" üçün element seçicisidir. Buna görə bir saytda bütün paraqrafları seçin və onlara bu üslub (CSS sənədinizdə başqa yerlərdə daha xüsusi üslublarla hədəflənən paraqraflar olmadığı halda) verə bilər.
"Rəng: # 000;" deyən qayanın bir hissəsi; bəyanat olaraq bilinən şeydir. Bu bəyanat iki hissədən ibarətdir - əmlak və dəyər.
Mülkiyyət bu bəyannamənin "rəngli" parçasıdır. Seçicinin hansı aspektini görsel olaraq dəyişdirəcəyini diktə edir.
Qiymət seçilən CSS xüsusiyyətinin dəyişdirilməsidir. Məsələn, biz "qara" üçün CSS stenoqrafiyası olan # 000 hex dəyərini istifadə edirik.
Beləliklə, bu CSS qaydasını istifadə edərək, səhifəmiz qara rəngli bir rəngli rəngli paraqraflar olacaqdı.
CSS Əmlak əsasları
CSS xüsusiyyətlərini yazdığınızda, uyğun gördüyünüz kimi onları düzəldə bilməzsiniz. Məsələn, "rəng" faktiki CSS xüsusiyyətidir, belə ki, onu istifadə edə bilərsiniz. Bu xüsusiyyət elementin mətn rəngini müəyyən edir. CSS xüsusiyyətləri kimi "text-color" və ya "font-color" funksiyalarını istifadə etməyə çalışarsanız, bunlar CSS dilinin faktiki hissələri olmadığı üçün uğursuz olur.
Başqa bir nümunə "background-image" mülkiyyətidir. Bu xüsusiyyət, belə bir fon üçün istifadə edilə bilən bir şəkil qurur:
.logo {
background-image: url (/images/company-logo.png);
}
Bir xüsusiyyət olaraq "background-picture" və ya "background-graphic" istifadə etməyə çalışdığınız zaman, bir daha, bu faktiki CSS xüsusiyyətləri deyil, çünki uğursuz olardı.
Bəzi CSS xüsusiyyətləri
Bir siteyi tərtib etmək üçün istifadə edə biləcəyiniz bir sıra CSS xüsusiyyətləri var. Bəzi nümunələr:
- Sərhəd (sərhədsiz, sərhəd rəngli və sərhəd eni daxil olmaqla)
- Padding (padding-top, padding-sağ, padding-bottom və padding-sol daxil olmaqla)
- Margin (margin-top, margin-right, margin-bottom və margin-left daxil olmaqla)
- Font ailəsi
- Font ölçüsü
- Fon rəngi
- Genişlik
- Hündürlük
Bu CSS xüsusiyyətləri nümunə kimi istifadə etmək üçün böyük olanlardır, çünki onlar hamısı çox sadədir və CSS-ni bilmirsinizsə də, ehtimal ki, adları əsasında nə etdiklərini təxmin edə bilərsiniz.
Bir-birinizlə qarşılaşacağınız digər CSS xüsusiyyətləri də vardır ki, bu da onların adları əsasında necə işlədiyini aydın şəkildə göstərə bilməz:
- Sal
- Aydındır
- Daşqın
- Text-transform
- Z-indeksi
Web dizaynına dərinləşdiyinizdə bütün bu xüsusiyyətləri və daha çox qarşılaşacaqsınız (və istifadəniz)!
Properties xüsusiyyətlərə ehtiyac duyur
Bir əmlakdan istifadə etdiyiniz zaman hər hansı bir dəyəri vermək lazımdır və müəyyən xüsusiyyətlər yalnız müəyyən dəyərləri qəbul edə bilər.
"Rəng" mülkümüzün ilk nümunəsində bir rəng dəyərindən istifadə etməmiz lazımdır. Bu hex dəyəri , RGBA dəyəri və hətta rəngli açar sözlər ola bilər. Ancaq bu dəyərlərdən hər hansı birinin işi olardı, amma bu əmlakla "qorxunc" sözünü istifadə etsəniz, heç bir şey etməyəcək, çünki bu sözün təsviri kimi CSS-də tanınmış bir dəyər deyil.
"Background-image" nin ikinci nümunəsi sitenizin fayllarından faktiki bir şəkil çəkmək üçün bir şəkil yolunu istifadə etməyi tələb edir. Lazım olan dəyər / sintaksis.
Bütün CSS xüsusiyyətləri gözlədikləri dəyərlərə malikdir. Misal üçün:
- Sərhəd rəng bir rəng dəyərini gözləyir
- Sərhəd ölçüsü piksel və ya faiz kimi bir ölçülü dəyəri gözləyir
- Sərhəd üslubları bu əmlak üçün istifadə edilən qorunan üslublardan birini gözləyir, "bərk"
CSS xüsusiyyətləri siyahısından keçərsəniz, hər birinin onlar üçün nəzərdə tutulmuş üslubları yaratmaq üçün istifadə edəcək xüsusi dəyərlərə malik olduğunu aşkar edəcəyik.
Jeremy Girard tərəfindən düzəldildi