CSS3-dəki əsas dəyişiklikləri anlayın
CSS2 və CSS3 arasındakı ən böyük fərq, CSS3-in modul adlanan müxtəlif bölmələrə bölünməsidir. Bu modulların hər biri tövsiyə prosesinin müxtəlif mərhələlərində W3C vasitəsilə yola çıxır. Bu proses müxtəlif CSS3-lərin müxtəlif istehsalçıları tərəfindən brauzerdə qəbul edilməsi və tətbiq edilməsi üçün daha asan olmuşdur.
Bu prosesi CSS2 ilə baş verənlərə müqayisə etsəniz, hər şeyə daxil olan bütün Cascading Style Sheets məlumatları ilə vahid bir sənəd kimi təqdim edildikdə, tövsiyəni daha kiçik, fərdi parçalara ayırmanın üstünlüklərini görürsən. Modulların hər biri fərdi şəkildə işləndiyindən, CSS3 modulları üçün daha geniş bir brauzer dəstəyi var.
Hər hansı bir yeni və dəyişən spesifikasiya ilə olduğu kimi, CSS3 səhifələrinizi mümkün qədər çox brauzer və əməliyyat sistemi ilə sınayın. Hedefi, hər brauzerdə tam olaraq eyni görünən veb səhifələr yaratmaq deyil, lakin CSS3 üslubları da daxil olmaqla istifadə etdiyiniz üslublarınızı dəstəkləyən brauzerlərdə böyük görünən və daha öncə yaşlı brauzerlər üçün qüsursuz bir şəkildə geri qaldığından əmin olun. yoxdur.
Yeni CSS3 Seçiciləri
CSS3 yeni CSS seçiciləri ilə birlikdə CSS qaydaları yaza biləcəyiniz bir sıra yeni yollar, eləcə də yeni kombinator və bəzi yeni yalançı elementləri təklif edir.
Üç yeni xüsusiyyət seçicisi:
- Atribut başlanğıcı tam elementə uyğun [foo ^ = "bar"] Elementdə "bar" ilə başlayan foo adlı bir xüsusiyyət var
- Atribut tam elementə uyğun gəlir [foo $ = "bar"] Elementdə "bar" ilə bitən foo adlı bir xüsusiyyət var
- Öznitelik matç elementini ehtiva edir [foo * = "bar"] Element "bar" düsturunu ehtiva edən foo adlı bir xüsusiyyətə malikdir
16 yeni söz-sinif:
- kök
- Sənədin kök elementi. HTML-də həmişə.
- : nth-child (n)
- Bu, dəqiq uşaq elementlərinə uyğun olmaq üçün istifadə edin və ya alternativ matçlar almaq üçün dəyişənləri istifadə edin.
- : nth-son-uşaq (n)
- Sonuncu hesablanan dəqiq uşaq elementləri ilə uyğunlaşın.
- : nth-of-tipi (n)
- Sənəd ağacından əvvəl eyni adı olan qardoğan elementləri ilə qarşılaşın.
- : n-son tipi (n)
- Eyni adla dibindən hesablanan qardaş ünsürləri müqayisə edin.
- Son uşaq
- Ana uşağın son uşaq elementini uyğunlaşdırın.
- İlk növbədə
- Bu növün ilk kardeş elementini uyğunlaşdırın.
- son tipi
- Bu cür sonuncu qardaş elementi ilə uyğunlaşın.
- :yalnız uşaq
- Onun valideyninin yeganə uşağı olan elementi uyğunlaşdırın.
- yalnız tipi
- Onun növündən bir olan elementi uyğunlaşdırın.
- boş
- Heç bir uşaq olmayan elementi (mətn qovşaqları daxil olmaqla) uyğunlaşdırın.
- : hədəf
- Başvuran URI'nin hədəfi olan bir elementə uyğunluq.
- : effektiv
- Element aktiv olduqda uyğunlaşdırın.
- : əlil
- Elementi söndürüldükdə uyğunlaşdırın.
- yoxlanılır
- Element yoxlanıldıqda (radyo düyməsini və ya onay qutusunu) eşleyin.
- : not (s)
- Element basit selector s ilə uyğun gəlmədikdə uyğunlaşın.
Bir yeni kombinator:
- elementA ~ elementB
- ElementB, elementA'dan sonra bir yerə gəldikdə, mütləq dərhal olmur.
Yeni xüsusiyyətlər
CSS3 də bir sıra yeni CSS xüsusiyyətləri təqdim etdi. Bu xüsusiyyətlərdən bir çoxu Photoshop kimi bir qrafik proqramı ilə daha çox əlaqə quracaq vizual üslub yaratmaq idi. Bunlardan bəziləri, sərhəd radiusu və ya qutu kölgəsi kimi, CSS3-in təqdimatından bu yana ətrafında olmuşdur. Digərlər, məsələn, flexbox və hətta CSS Grid hələ də tez-tez CSS3 əlavələri hesab olunur ki, yeni üslublardır.
CSS3-də qutu modeli dəyişməyib. Amma qutularınızın arka planları və sərhədlərini tərtib etməyə kömək edə biləcək bir sıra yeni üslub xüsusiyyətləri var.
Birdən çox Arxa kölgə salıram
Arka plan görüntüsünü, fon-mövqeyi və arka plan təkrarlanan üslublardan istifadə edərək qutuda bir-birinin üstünə qatlanmış birdən çox arka plan şəkilləri göstərə bilərsiniz. İlk görüntü, istifadəçiyə ən yaxın olan qat, aşağıdakıları isə boyanmışdır. Arka plan rengi varsa, bütün görüntü qatlarının altındadır.
Yeni Arxa Planı Xüsusiyyətləri
CSS3-də bəzi yeni fon xüsusiyyətləri də var.
- fon-klip
- Bu xüsusiyyət, fon şəklinin necə kəsildiyini müəyyən edir. Varsayılan sərhəd qutusu, ancaq padding qutusuna və ya məzmun qutusuna dəyişdirilə bilər.
- fon mənşəli
- Bu xüsusiyyət arxa planın padding qutusuna, sərhəd qutusuna və ya məzmun qutusuna yerləşdirilməsini müəyyənləşdirir.
- fon ölçüsü
- Bu xüsusiyyət, fon şəklinin ölçüsünü göstərməyə imkan verir. Bu səhifəyə uyğun daha kiçik şəkilləri uzatmağa imkan verir.
Mövcud Background Style xüsusiyyətlərinə dəyişikliklər
Mövcud fon stilinin xüsusiyyətlərinə də bir neçə dəyişiklik var:
- fon-təkrarlama
- Bu əmlak üçün iki yeni dəyər var: yer və dəyirmi. Space kvadrat şəklində kvadrat şəkilləndirilmədən kvadratın içərisində düzdür. Dəyirək arxa planda görünüşü düzəldərək, qutuda bir neçə dəfə kafel olacaqdır.
- arxa planda
- Yeni bir dəyər "yerli" əlavə olunur ki, element elə elementə keçin ki, element elə bir kaydırma çubuğuna malikdir.
- fon
- Arxa stenoqrafiya əmlakı ölçüsü və mənşəyi xüsusiyyətlərinə əlavə olunur.
CSS3 Sərhəd xassələri
CSS3 sərhədlərində biz istifadə etdiyimiz üslublar (qatı, ikiqat, kəsik və s.) Ola bilər və ya bir şəkil ola bilər. Üstəlik, CSS3 yuvarlaq küncləri yaratmaq qabiliyyətini gətirir. Sərhəd görünüşləri maraqlıdır, çünki bütün dörd sərhədlərin bir görünüşünü yaratdıqdan sonra CSS-yə bu təsvirin sərhədlərinizə necə tətbiq ediləcəyini söyləyə bilərsiniz.
Yeni sərhəd stilinin xüsusiyyətləri
CSS3-də bəzi yeni sərhəd xassələri var:
- sərhəd radiusu
- sərhəd-yuxarı-sağ radius , sərhəd-sağ alt radius , sərhəd-alt-sol radius , sərhəd-yuxarı-sol radius
- Bu xüsusiyyətlər sərhədlərinizdə yuvarlaq künclər yaratmağa imkan verir.
- Sərhəd-görüntü-mənbə
- Artıq müəyyən edilmiş sərhəd üslublarının yerinə istifadə ediləcək görüntü mənbəyi faylını bildirir.
- sərhəd-image-dilim
- Sərhəd kənarındakı kənarların kənar kənarlarını təmsil edir
- sərhəd-şəkil genişliyi
- Sərhəd surətiniz üçün eni dəyərini müəyyənləşdirir.
- border-image-başlanğıc
- Sərhəd zonasının sərhəd qutusundan kənara çıxdığı məbləği müəyyənləşdirir.
- sərhəd-image-uzanır
- Sərhəd təsvirinin tərəflərinin və orta hissələrinin necə döşəməli və ya ölçülü olduğunu müəyyənləşdirir.
- sərhəd təsviri
- Bütün sərhəd görünüş xüsusiyyətləri üçün stenoqrafiya mülkiyyəti.
Sərhədləri və arka planları ilə bağlı əlavə CSS3 xüsusiyyətləri
Bir qutu, bir səhifə fasiyəsində bir sınıq pozulduğunda, satırdakı break üçün sütun arağı (satır içi elementlər üçün) qutu dekorasiya-qırılma xüsusiyyəti yeni qutuların sərhəd və paddinglə necə sarıldığını müəyyən edir. Arxa bu əmlakı istifadə edərək çoxlu qırıq qutular arasında bölünmüş ola bilər.
Qutu elementlərinə kölgə əlavə etmək üçün istifadə edilə bilən bir qutu kölgəsi var.
CSS3 ilə asanlıqla masa və ya mürəkkəb div etiket strukturları olmadan bir neçə sütunlu bir veb səhifə qura bilərsiniz. Brauzerə bədən elementinin nə qədər sütunun olması və nə qədər geniş olması lazım olduğunu bildirirsiniz. Artıq sütunun hündürlüyünü əhatə edən sərhədləri (qaydaları), fon rənglərini əlavə edə bilərsiniz və mətn bütün sütunların üzərindən avtomatik olaraq axacaq.
CSS3 Sütunları - Sütunların Sayını və Genişliyini Təsvir
Sütunların sayını və genişliyini təyin etməyə imkan verən üç yeni xüsusiyyət var:
- sütun genişliyi
- Sütunların genişliyini müəyyən edir. Brauzer daha sonra genişliyi sütunlarla doldurmaq üçün mətni axır.
- sütun sayımı
- Sayfada sütunların sayını müəyyən edir. Brauzer daha sonra yerə sığmaq üçün kifayət qədər geniş sütunlar yaratdıqda, ancaq göstərdiyiniz nömrəni seçin.
- sütunlar
- Kənar və ya genişliyini və ya nömrəsini təyin edə biləcəyiniz əmlak (və ya hər ikisi, lakin nadir hallarda mənasını verir).
CSS3 Sütun boşluqları və qaydaları
Boşluqlar və qaydalar eyni multikolon ssenarisində sütunlar arasında yerləşdirilir. Boşluqlar sütunları bir-birindən ayırır, amma qaydalar heç bir yer tutmur. Bir sütun qayda boşluqdan daha geniş olduqda, bitişik sütunlar üst-üstə düşəcəkdir. sütun qaydaları və boşluqlar üçün beş yeni xüsusiyyət var:
- sütun boşluğu
- Sütunlar arasındakı boşluqların genişliyini müəyyən edir.
- sütun-qayda-rəng
- Qaydanın rəngini təyin edir.
- sütun-qayda tərzi
- Qaydanın tərzini müəyyənləşdirir (bərk, nöqtəli, ikiqat və s.).
- sütun-qayda-eni
- Qaydanın genişliyini təyin edir.
- sütun-qayda
- Bütün üç sütun qayda xüsusiyyətlərini bir anda müəyyən edən stenar əmlak.
CSS3 Sütunu Sıxır, Spanning Sütunlar və Doldurma Sütunları
Sütun fasilələri , paged məzmunda fasilələri müəyyən etmək üçün istifadə edilən CSS2 variantlarından istifadə edir, lakin üç yeni xüsusiyyətləri ilə: əvvəlcədən pozulma, fasilə vermə və ara vermə .
Masalarla olduğu kimi, sütun span mülkiyyəti ilə sütunları span etmək üçün elementləri təyin edə bilərsiniz. Bu bir çox sütunları bir qəzet kimi daha çox əhatə edən başlıqları yaratmağa imkan verir.
Doldurma sütunları hər bir sütunda nə qədər içerik olacağına qərar verir. Balanslaşdırılmış sütunlar avtomatik sütun dolana qədər məzmunu axır və növbəti birinə gedir, eyni sütunda eyni miqdarda məzmun qoymağa çalışır.
CSS2-də daha çox funksiya, CSS2-də daxil edilmişdir
CSS2-də mövcud olmayan CSS3-də bir çox əlavə xüsusiyyət var:
- CSS şablonu layout modulu və CSS3 Grid yerləşdirmə modulu : CSS ilə ızgaraları yaratmaq.
- CSS3 Mətn modulu : Çıxış mətni və hətta CSS ilə açılan kölgələr yaradır.
- CSS3 Rəng modulu : İndi qeyri-şəffaflıqla.
- Kutu modelinə dəyişikliklər : IE etiketi kimi davranan bir marquee əmlakı daxildir.
- CSS3 İstifadəçi İnterfeysi modulu : Yeni kursorları, tədbirlər üçün cavablar, lazım olan sahələr və hətta ölçüləndirici elementlər vermək.
- Media Sorguları : Media sorguları, bir stilin nasıl kullanılacağını belirlerken daha çox esnekliği təmin edir. Məsələn, yalnız 20em-dən daha böyük bir görünüş sahəsinə malik olan əl cihazları üçün bir stil təyin edə bilərsiniz.
- CSS3 Ruby modulu : sənədləri əlavə etmək üçün mətnli ruby istifadə edən dillərə dəstək verir.
- CSS3 Paged Media modulu : Paged media (kağız, şəffaflıq və s.) Üçün daha çox dəstək üçün.
- Yaratılmış məzmun : L başlıqları və altbilgiləri, dipnotları və proqramlaşdırılmış şəkildə yaradılmış digər məzmunları, xüsusilə diskli media üçün.
- CSS3 Konuşma modulu : Aural CSS-də dəyişikliklər.