Moduły CSS3

26 lat Internetu

Streszczenie

"Moduły CSS3" są częścią Plansz interaktywnych, zawierającą porównanie dokumentacji CSS 2.1, która jest rekomendacją W3C i modułów CSS3 (oficjalna lista modułów i zmian: http://www.w3.org/Style/CSS/current-work).

Strony zawierają wykaz styli, wartości i ich interpretacji z opisem i/lub tłumaczeniem, przykłady interaktywne i wykaz źródeł.

Indeksem ^CSS3 oznaczono nowe elementy języka.

Status dokumentu

Struktura opracowania jest zgodna z podziałem CSS3 na moduły a kolejność zgodznie ze standardem CSS 2.1.

Nowe elementy języka (Moduły), których nie było w dokumentacji CSS 2.1 wymieniono na końcu spisu i oznaczono gwiazdką.

Spis treści

• Wstęp do CSS3preludium.html
• Atrybut stylecss-style-attr/
• Wartości i jednostki w CSS3 css3-values/
• Kolor w CSS3 css3-color/
• Selektory w CSS3 css3-selectors/
• Kaskadowość i dziedziczenie w CSS3 css3-cascade/
• Typy mediów w CSS3 css3-mediaqueries/
• Box model w CSS3 css3-box/
• Tło i obramowanie w CSS3 css3-background/
• Pozycjonowanie CSS3 css3-positioning/
• Listy w CSS3 css3-lists/
• Generowanie treści w CSS3 css3-content/
• Drukowanie w CSS3 css3-page/
• Fonty w CSS3 css3-fonts/
• Tekst w CSS3 css3-text/
• Efekty tekstu w CSS3 css-text-decor-3/
• Line model w CSS3 css3-linebox/
• Tryby pisma css-writing-modes-3/
• Tabele w CSS3 css3-tables/
• Interfejs użytkownika w CSS3 css3-ui/

Spis treści

• Układ kolumnowy w CSS3* css3-multicol/
• Model flexbox w CSS3* css3-flexbox/
• Trasformacje w CSS3* css3-transforms/
• Przejścia animowane w CSS3* css3-transitions/
• Obraz i gradienty w CSS3* css3-image/
• Animacje w CSS3* css3-animations/
• Reguły warunkowe w CSS3* css3-conditional/
• Efekty filtrów w CSS3* filter-effects/

Załączniki/Dodatki

• Wykaz źródełcss3/bibliografia.html
• Tabele własności CSScss3/tabele.html
• Arkusz domyślny CSScss3/sample.html
• Indeks CSScss3/indeks.html

W przygotowaniu

• Przestrzenie nazw CSScss-namespace/
• Zmienne w CSScss-variables/
• Compositing and Blendingcompositing/
• CSS Speech Modulecss3-speech/
• CSS Masking Module Level 1css-masking-1/
• CSS Counter Styles Level 3css-counter-styles-3/
• CSS Shapes Module Level 1css-shapes-1/
• CSS Syntax Module Level 3css3-syntax/
• CSS Regions Module Level 1css-regions/
• CSS Snapshot 2015css-2015/

Konwencje

Plansze Interaktywne

Oznaczenia w tabelach wartościowań:

• x: - własność stylu (lub lista własności x1:, x2:, ...),
• y; - wartość (lub lista y1; y2; ... ),
• y - typ wartości (lub lista typów y1 y2 ... ),
• Operatory: wartość opcjonalna ?, jedno lub więcej wystąpień +, zero lub więcej wystąpień *.
• Inne: s { } - selektor (@s { } - selektor reguły warunkowej); f() - funkcja.

Własność, typ, lista własności

x: lub lista
y; lub y
przykład x: y;

| (alternatywa)

x:
y1;	y1;
x: y1;	x: y2;

|| (przynajniej jedna)

x:
y1; || y2;
x: y1;	x: y2;
x: y1 y2;

&& (obowiązkowo wszystkie)

x:
y1; && y2;
x: y1 y2:

y; {n,k} (występuje przynajmniej n razy i maksymalnie k razy)

x:
y; {n,k}
x: y1 y2 ... yn;
x: y1 y2 ... yn yn+1;
...
x: y1 y2 ... yn ... yk;

Własności dwuargumentowe

x:	y1	y2
z1	x: y1 z1;	x: y2 z1;
z2	x: y1 z1;	x: y2 z2;

Przykłady interaktywne:

Kod w polach tekstowych, jest edytowalny i interpretowany przez ramkę. Mogą wystąpić różnice w zależności od wersji przeglądarki.

Rekomendacje W3C

Elementy i atrybuty języka dokumentu

• Nazwy własności, pseudoklas i wartości CSS zostały ujęte w pojedyncze cudzysłowy.
• Nazwy atrybutów języka dokumentu zostały napisane małymi literami i ujęte w podwójne cudzysłowy.

Definicje własności CSS

Definicja każdej właściwości CSS rozpoczyna się od krótkiego przedstawienia najważniejszych informacji, które definiowane sa następująco:

'nazwa-własności'

Wartość:	dozwolone wartości i składnia
Wartość domyślna:	wartość domyślna (początkowa)
Zastosowanie:	elementy, do których odnosi się dana własność
Dziedziczenie:	informacja czy dana własność jest dziedziczona
Wartości procentowe:	sposób interpretacji wartości procentowych
Media:	informacja, dla których grup mediów dana własność jest przeznaczona
Wartość obliczana:	sposób wyznaczania wartości obliczanej

Wyliczenia wartości mogą mieć następującą postać:

• Zestaw słów oznacza, że wszystkie te słowa muszą zostać użyte w podanej kolejności.
• Pionowa kreska (|) oddziela wartości alternatywne: musi zostać użyta dokładnie jedna z nich.
• Dwie pionowe kreski (||) oddzielają wartości opcjonalne: musi wystąpić przynajmniej jedna z nich w dowolnej kolejności.
• Dwa znaki && oddzielają wartości, które muszą zostać użyte w dowolnej kolejności.
• Nawiasy kwadratowe ([ ]) służą do grupowania.

Po każdym typie, słowie kluczowym lub grupie w nawiasach kwadratowych może wystąpić jeden z poniższych modyfikatorów:

• Gwiazdka (*) oznacza, że znajdujący się przed nią typ, słowo lub grupa może wystąpić zero lub więcej razy.
• Znak plus (+) oznacza, że znajdujący się przed nim typ, słowo lub grupa może wystąpić jeden lub więcej razy.
• Znak zapytania (?) oznacza, że użycie znajdującego się przed nim typu, słowa lub grupy jest opcjonalne.
• Para liczb w nawiasach klamrowych ({A,B}) oznacza, że znajdujący się przed nią typ, słowo lub grupa występuje przynajmniej A razy i maksymalnie B razy.

W CSS3 występuje dodatkowo:

• Znak hash (#) oznacza, że znajdujący się przed nim typ, słowo lub grupa może wystąpić więcej razy.

Wybrane wyróżnienia:

• Definicja
   
• Nota, uwaga
• Przykład (autonumerowany)
• Problem (autonumerowany)