Wprowadzenie do CSS3.
CSS operuje na warstwie prezentacji. W dużym skrócie odpowiada za odpowiednie formatowanie wizualne strony / aplikacji.
Na wstępie musisz wiedzieć o jednej rzeczy. Przedstawiamy i uczymy się pewnych nowoczesnych rozwiązań opartych na języku CSS. Jednak nie wszystkie przedstawiane elementy tego języka są w tym momencie jeszcze wspierane przez wszystkie przeglądarki. Na szczęście istnieje bardzo pomocna witryna http://caniuse.com/ na której z łatwością sprawdzisz które przeglądarki aktualnie obsługują daną właściwość CSS.
Sposoby umieszczania kodu CSS.
Bezpośrednio przy elemencie którego dany styl dotyczy (tzw. styl wpisany). Stosujemy dodatkowy atrybut style.
Umieszczony w sekcji <head> w znaczniku <style>
W pliku zewnętrznym z rozszerzeniem .css
Najoptymalniejszym sposobem jest zastosowanie pliku zewnętrznego. Nie „mieszamy” wtedy warstw w jednym pliku (w tym przypadku warstwy treści tj. HTML z warstwą prezentacji - CSS). Jest to również najwygodniejszy sposób wykonywania późniejszych modyfikacji właściwości CSS (nie musimy w ogóle „dotykać” pliku HTML, jedynie CSS).
Struktura kodu CSS.
Kod CSS zaczynamy pisać od podania selektora, następnie otwieramy klamrę {, wpisujemy właściwości oraz przypisujemy im wartości, a na końcu zamykamy klamrę }
W praktyce może to wyglądać następująco:
p {
color: red;
text-align: center;
}
p – to selektor, więcej o selektorach w dalszej części,
color – to definiowana właściwość CSS
red – to przypisana wartość do właściwości, podawana po znaku :
Kolejne przypisywane właściwości są oddzielane znakiem średnika ;
Komentarze.
Komentarze w CSS oznaczmy za pomocą następujących znaków:
/* kod komentowany */
Komentarz może obejmować wiele wierszy.
Hierarchia - kaskadowość.
Kaskadowość określa kolejność stosowania poszczególnych stylów.
Główna hierarchia (kaskadowość) stylów CSS (od najważniejszych do najmniej ważnych):
Ważne style użytkownika (zmieniane przez użytkownika w przeglądarce wg własnych preferencji np. kolor, wielkość, krój czcionki itd.). Tych ustawień nie jesteśmy w stanie nadpisać.
Ważne style autora (!important).
Style autora (te tworzone przez programistę).
Style użytkownika (użytkownik ma możliwość zaczytania własnych stylów).
Style przeglądarki (default).
Kaskadowość (hierarchia) stylów CSS autora.
Poniżej przedstawiono kolejność od najważniejszych (stosowanych w pierwszej kolejności) do najmniej ważnych:
Style wpisane (umieszczone bezpośrednio przy elemencie którego dotyczą).
Style znajdujące się w sekcji HEAD.
Style z pliku zewnętrznego.
Uwaga !
Powyższą hierarchię można zaburzyć stosując specjalny zapis !important przy stylu, który jest dla nas niezmiernie ważny (np. tym znajdującym się w zewnętrznym pliku). W tym momencie ten styl stanie się stylem priorytetowym. Niemniej jednak jest to sposób wysoce niezalecany ! W ten sposób bowiem burzymy naturalną kaskadowość styli CSS.
Dołączanie zewnętrznych plików CSS.
Jeżeli chcesz zaimportować jakiś inny plik css do już istniejącego pliku użyj następującej dyrektywy:
@import url(‘plik do zaimportowania.css’);
Kod z dołączonego (zaimportowanego) pliku zostanie uznany przez przeglądarkę jakby był integralną częścią tego ostatniego.
Uwaga !
Technicznie wygląda to tak, że przeglądarka fizycznie pobiera ten plik kolejnym zapytaniem / pakietem. Zatem zbyt duża ilość zastosowanych dyrektyw @import może opóźnić zaczytywanie samych styli oraz ogólnie witryny.
W przypadku większych projektów powinniśmy dążyć do sytuacji, że style (te ostatecznie stosowane / pobierane) powinny być umieszczone w jednym pliku. W tej sytuacji po prostu ograniczamy ruch sieciowy do niezbędnego minimum.