1.CSS3 - kaskadowe arkusze stylów 3
2.Język opisujący wygląd strony
3.CSS3 jest nowy, szybko się rozwija
4.CSS3 daje duże możliwości
5.Nie wszystkie przeglądarki go wspierają
6.Aktualnie używane przeglądarki internetowe: Firefox 11, Chrome 18, Safari 5.1, Opera 11.6, Internet Explorer 9
Tworzenie stylów
Każda reguła tworząca arkusz stylów składa się z trzech częsci:
1.selektora
2.właściwości
3.wartościktórą dana właściwość przyjmuje.
selektor {właściwość: wartość; ...}
Selektor określa do jakiego elementu HTML będzie odnosić się dana reguła stylu. Wszystkie właściwości selektora
umieszczane są wewnątrz nawiasów klamrowych. Właściwość i wartość oddzielone są od siebie dwukropkiem, a
od kolejnych par właściwość: wartość oddzielone są średnikiem.
Właściwości atrubutu oraz ich wartości określa specyfikacja W3C
Wybór elementu
Najczęstszym kryterium wyboru elementów, jakie mają być formatowane jest ich nazwa.
Często stosowanymi sposobami są:
1.wybór elementu na podstawie klasy,jeżeli elementy zostały przydzielone do pewnych klas:
< div class="klasa1">
Do danej klasy może należeć dowolna ilośc elementów.
2.wybór elementu na podstawie identyfikatora,jeżeli zostały określone identyfikatory elementów:
< div id="ident_1">
Każdy atrybut id w dokumencie HTML musi mieć unikalną wartość.
Żadne dwa elementy nie mogą mieć tego samego identyfikatora.
3.wybór elementu na podstawie kontekstu.
W CSS można także wybierać elementy na podstawie ich elementów nadrzędnych:
< div class="klasa1">
< p>
Element nadrzędny to taki, w którym jest umieszczony
interesujący nas element.
< /p>
< div/>
Powyżej zostały opisane podstawowe zagadnienia związane z tworzeniem reguł stylów.
Najlepszym sposobem ich wykorzystania jest łączenie tych reguł w arkusze stylów.
Dzieki temu możliwe jest określanie wyglądu pojedynczych elementów, całych dokumentów, jak również całych witryn WWW.
Czynnośc ta sprowadza się do stworzenia pliku tekstowego o rozszerzesznu *.css i umieszczeniu w nim
dowolnej ilości reguł.
Po stworzeniu zewnętrznego arkusza stylów konieczne jest jego dołączenie lub tez zaimportowanie do
dokumentu.
Zatem aby dołączyc zewnętrzny arkusz stylów do dokumentu HTML, należy w sekcji < head> dokumentu
wpisać następujący kod:
< head>
< link rel="stylesheet" type="text/css" href="style.css" />
< /head>
Gdzie text/css oznacza, że arkusz stylów został stworzony w technologi CSS, a style.css jest nazwą pliku
zawierającego reguły stylów.
Możliwe jest dołączenie kilku arkuszy stylów do jednego dokumentu. Daje to użytkownikowi dokumentu
możliwość wyboru jak używany dokument ma być wyświetlany.
Wewnętrzne arkusze stylów są definiowane na samym początku dokumentu HTML (w sekcji HEAD).
Aby stworzyć wewnętrzny arkusz stylów należy w sekcji HEAD dokumentu wstawić następujący kod:
< head>
< style type="text/css">
W tym miejscu należy zdefiniować dowolną ilość reguł stylów.
< /style>
< /head>
Aby zaimportować zewnętrzny arkusz stylów należy wewnątrz elementu < style>, ale przed jakąkolwiek regułą wpisać następujący kod:
< head>
< style type="text/css">
@import "arkusz_zewnętrzny.css"
< /style>
< /head>
Cień tekstu
Teoria: text-shadow: h-shadow v-shadow blur color;
Praktyka: text-shadow: 2px 2px 5px #666;
Przykład:text-shadow: 0px 0px 0px #fff;
Cień elementu
Teoria: box-shadow: h-shadow v-shadow blur spread color inset;
Praktyka: box-shadow: 2px 2px 5px #ccc;
Przykład:box-shadow: 0px 0px 0px #fff inset;
Zaokrąglone rogi
Teoria: border-radius: topleft topright bottomright bottomleft;
Praktyka: border-radius: 5px;
Przykład:border-radius: 0px;
Własne fonty
Teoria: @font-face { font-family: fontName; src: url(fontUrl); } elem { font-family: fontName; }
Praktyka: @font-face { font-family: myFont; src: url('maven.ttf'); } div { font-family: myFont; }
Przykład:font-family: /*myFont;
Gradienty
Teoria: w zależności od przeglądarki
Praktyka: background-image: linear-gradient(top, red 30%, green 60%, blue 80%);
Przykład:/*background-image: linear-gradient(top, red 30%, green 60%, blue 80%);
Animacje z transition
Teoria: transition: co ile_czasu jaki_efekt;
Praktyka: -moz-transition: color 1s ease-out;
Przykład:transition: color 1s ease-out; /*color: green;
i wiele więcej!
Opacity, multiple backgrounds, word-wrap, box-sizing, text-overflow, colors, media queries, background-image, multiple column layout, border images, 3D transforms, object-fit/object-position.