Różnica między CSS2 a CSS3
Zrozumienie głównych zmian w CSS3
Spis treściZwiększać- Wprowadzono nowe selektory CSS3
- Nowe właściwości CSS w CSS3
- Wiele obrazów tła
- Nowe właściwości stylu tła
- Zmiany w istniejących właściwościach stylu tła
- CSS3 Nowe właściwości i style obramowania
- Nowe właściwości stylu obramowania
- Więcej właściwości obramowania i tła
- Nowe właściwości definiowania numeru i szerokości kolumny
- Odstępy i reguły w kolumnach CSS3
- CSS3 Nowe opcje dzielenia kolumn
- Więcej nowych funkcji w CSS3
Największa różnica między CSS2 a CSS3 jest to, że CSS3 został podzielony na różne sekcje, zwane moduły . Każdy z tych modułów przechodzi przez W3C na różnych etapach procesu rekomendacji. Proces ten znacznie ułatwił akceptację i implementację różnych fragmentów CSS3 w przeglądarce przez różnych producentów.
Jeśli porównasz ten proces z tym, co wydarzyło się w CSS2, wszystko zostało przesłane jako jeden dokument ze wszystkimi Kaskadowe arkusze stylów informacji w nim zawartych, zaczynasz dostrzegać zalety dzielenia rekomendacji na mniejsze, pojedyncze części. Ponieważ każdy z modułów jest opracowywany indywidualnie, programiści mogą cieszyć się znacznie szerszym zakresem obsługi modułów CSS3 przez przeglądarki.
Nowe selektory CSS3
CSS3 oferuje kilka nowych sposobów pisania reguł CSS za pomocą nowych selektorów CSS, a także nowy kombinator i kilka nowych pseudoelementów.
Istnieją trzy nowe selektory atrybutów:
- Główny element dokumentu.
- Użyj tego, aby dokładnie dopasować elementy podrzędne lub użyj zmiennych, aby uzyskać dopasowania naprzemienne.
- Dopasuj dokładnie elementy podrzędne, licząc od ostatniego.
- Dopasuj elementy rodzeństwa o tej samej nazwie przed nim w drzewie dokumentu.
- Dopasuj elementy rodzeństwa o tej samej nazwie, licząc od dołu.
- Dopasuj ostatni element potomny rodzica.
- Dopasuj pierwszy element rodzeństwa tego typu.
- Dopasuj ostatni element rodzeństwa tego typu.
- Dopasuj element, który jest jedynym dzieckiem jego rodzica.
- Dopasuj element, który jest jedynym tego typu.
- Dopasuj element, który nie ma dzieci (w tym węzłów tekstowych).
- Dopasuj element, który jest celem odsyłającego URI.
- Dopasuj element, gdy jest włączony.
- Dopasuj element, gdy jest wyłączony.
- Dopasuj element, gdy jest zaznaczony (przycisk radiowy lub pole wyboru).
- Dopasuj, gdy element nie pasuje do prostego selektory .
- Dopasuj, gdy elementB następuje gdzieś po elemencieA, niekoniecznie natychmiast.
- Ta właściwość definiuje sposób przycinania obrazu tła. Domyślnie jest to pole obramowania, ale można je zmienić na pole dopełnienia lub pole zawartości.
- Ta właściwość określa, czy tło powinno być umieszczone w polu dopełnienia, polu obramowania czy polu treści.
- Ta właściwość wskazuje, że rozmiar obrazu tła . Pozwala to rozciągnij mniejsze obrazy, aby dopasować je do strony .
- Istnieją dwie nowe wartości tej właściwości — przestrzeń oraz okrągły . Spacja równomiernie rozmieszcza sąsiadujący obraz w polu bez przycinania. Round przeskalowuje obraz tła, tak że będzie on układał się w polu całą liczbę razy.
- Dodawana jest nowa wartość „local”, aby tło przewijało się wraz z zawartością elementu, gdy ten element ma pasek przewijania.
- Skrócona właściwość background dodaje właściwości size i origin.
- obramowanie-prawy-górny-promień , obramowanie-dolny-prawy-promień , obramowanie-dolny-lewy-promień , obramowanie-górny-lewy-promień
- Te właściwości umożliwiają tworzenie zaokrąglonych rogów na granicach.
- Określa plik źródłowy obrazu, który ma być używany zamiast już zdefiniowanych stylów obramowania.
- Reprezentuje wewnętrzne przesunięcia od krawędzi obrazu obramowania.
- Definiuje wartość szerokości obrazu obramowania.
- Określa wielkość, o jaką obszar obramowania obrazu wykracza poza obramowanie.
- Określa, w jaki sposób boki i środkowe części obrazu obramowania powinny być kafelkowane lub skalowane.
- Skrócona właściwość wszystkich właściwości border-image.
- Definiuje szerokość Twoich kolumn. Przeglądarka prześle następnie tekst, aby wypełnić przestrzeń tak szerokimi kolumnami.
- Definiuje liczbę kolumn na stronie. Przeglądarka utworzy wtedy kolumny wystarczająco szerokie, aby zmieściły się w przestrzeni, ale tylko podaną przez Ciebie liczbę.
- Właściwość skrócona, w której można zdefiniować szerokość lub liczbę (lub obie, ale rzadko ma to sens).
- Definiuje szerokość przerw między kolumnami.
- Definiuje kolor reguły.
- Definiuje styl reguły (pełny, kropkowany, podwójny itp.).
- Definiuje szerokość reguły.
- Skrócona właściwość definiująca wszystkie trzy właściwości reguł kolumn jednocześnie.
Wprowadzono 16 nowych pseudoklas:
Jest jeden nowy kombinator:
Nowe właściwości
CSS3 wprowadził również kilka nowych właściwości CSS. Wiele z tych właściwości tworzy style wizualne, które prawdopodobnie bardziej kojarzą się z programem graficznym, takim jak Photoshop . Niektóre z nich, jak border-radius czy box-shadow, istnieją od czasu wprowadzenia CSS3. Inne, takie jak flexbox, a nawet CSS Grid to nowsze style, które wciąż są często uważane za dodatki CSS3.
W CSS3 model pudełkowy nie uległ zmianie. Istnieje jednak wiele nowych właściwości stylu, które mogą pomóc w stylizacji tła i obramowania pudełek.
Wiele obrazów tła
Używając stylów background-image, background-position i background-repeat, możesz określić wiele obrazów tła, które mają być ułożone jeden na drugim w polu. Pierwszy obraz to warstwa najbliższa użytkownikowi, a kolejne są namalowane za nim. Jeśli istnieje kolor tła, jest on malowany pod wszystkimi warstwami obrazu.
Nowe właściwości stylu tła
Istnieje również kilka nowych właściwości tła w CSS3:
Zmiany w istniejących właściwościach stylu tła
Wprowadzono również kilka zmian w istniejących właściwościach stylu tła:
Właściwości obramowania CSS3
W CSS3 obramowania mogą być stylami, do których jesteśmy przyzwyczajeni (jednolity, podwójny, przerywany itp.) lub mogą być obrazem. Dodatkowo CSS3 obsługuje zaokrąglone rogi. Obrazy obramowania są interesujące, ponieważ tworzysz obraz wszystkich czterech obramowań, a następnie mówisz CSS, jak zastosować ten obraz do obramowań.
Nowe właściwości stylu obramowania
W CSS3 jest kilka nowych właściwości obramowania:
Dodatkowe właściwości CSS3 związane z obramowaniem i tłem
Gdy ramka jest łamana w miejscu podziału strony, kolumny lub wiersza (w przypadku elementów śródliniowych), Przerwa-dekoracyjna-pudełkowa właściwość określa, w jaki sposób nowe pudełka są owijane obramowaniem i dopełnieniem. Tła dzielą się na kilka rozbitych pudełek za pomocą tej właściwości.
Nowy cień pudełka Właściwość dodaje cienie do elementów pudełka.
Dzięki CSS3 możesz teraz łatwo skonfigurować stronę internetową z kilkoma kolumnami bez tabel lub skomplikowanych div struktury znaczników. Po prostu mówisz przeglądarce, ile kolumn powinien mieć element body i jak szerokie powinny być. Dodatkowo możesz dodać obramowania (reguły) i kolory tła, które obejmują wysokość kolumny, a tekst automatycznie przejdzie przez wszystkie kolumny.
Określ liczbę i szerokość kolumn
Są trzy nowe nieruchomości które pozwalają określić liczbę i szerokość Twoich kolumn:
Odstępy i reguły w kolumnach CSS3
Luki i reguły są umieszczane między kolumnami w tym samym scenariuszu z wieloma kolumnami. Luki rozsuną kolumny, ale reguły nie zajmują miejsca. Jeśli reguła kolumny jest szersza niż odstęp, nałoży się na sąsiednie kolumny. Dostępnych jest pięć nowych właściwości reguł kolumn i przerw:
Podziały kolumn CSS3, kolumny łączące i kolumny wypełniające
Kolumna przerwy używają tych samych opcji CSS2, które są używane do definiowania przerw w treści stronicowanej, ale z trzema nowymi właściwościami: przerwa przed , przerwa po , oraz włamać się do środka .
Podobnie jak w przypadku tabel, możesz ustawić elementy, aby obejmowały kolumny za pomocą właściwości column-span. Pozwala to tworzyć nagłówki, które obejmują wiele kolumn, bardziej jak gazeta.
Wypełnianie kolumn decyduje o ilości treści w każdej kolumnie. Zrównoważone kolumny próbują umieścić tę samą ilość treści w każdej kolumnie, podczas gdy auto po prostu wlewa zawartość, aż kolumna się zapełni, a następnie przechodzi do następnej.
Więcej funkcji w CSS3, których nie ma w CSS2
Istnieje wiele dodatkowych funkcji w CSS3, które nie istniały w CSS2, w tym: