Dodawanie stylów
Rodzaje stylów
W CSS rozróżniamy trzy rodzaje stylów - zewnętrzny (external), wewnętrzny (internal) oraz liniowy (inline).
Zapewne mogłeś się domyślić lub nie, ale style zewnętrzne piszemy i przechowujemy w osobnych plikach z rozszerzeniem o jakże ambitnej nazwiecss. Ten rodzaj stylów stosuje się najczęściej. Dlaczego? Wyobraź sobie że masz własną stronę z 8 podstronami. Aby zastosować jedną zmianę w kodzie CSS trzeba by było to zmieniać w każdym pliku. Załóżmy dodatkowo, że masz jakiś strasznie rozbudowany ten kod, gdzie waży aż 2MB, czyli przy każdym wczytaniu podstrony przesyłane jest dodatkowo te 2MB. Mając zewnętrzny plik, nie dość, że zmieniamy lub poprawiamy kod w jednym miejscu, to ten plik jest przechowywany w pamięci podręcznej przeglądarki, więc nie trzeba go za każdym razem przesyłać, co za tym idzie, wrażenie użytkownika jest takie, że strona działa płynniej.
Kolejny rodzajem stylów są style wewnętrzne, jednak są one rzadziej stosowane. Można ich użyć wtedy gdy chcemy coś zmienić tylko na jednej podstronie lub po prostu robimy witrynę która ma tylko stronę główną, choć i tak dobrym nawykiem jest oddzielenie warstwy HTML od CSS. W “nowoczesnym” programowaniu przyjęło się żeby nie używać styli wewnętrznych w ogóle. Wyjątkiem jest tzw.critical CSS, jednak jest to temat zaawansowany wychodzący poza zakres tego kursu.
Ostatnim rodzajem są style liniowe. Liniowe, dlaczego? Ponieważ pisze się je w linii, w znaczniku, a konkretniej mówiąc w atrybucie style. Najczęściej stosuje je się gdy chcemy wymusić na przeglądarce styl tylko dla danego elementu. Można to również zrobić w stylach wyżej wymienionych, o czym dowiesz się pod koniec lekcji.
Metoda zapisu
Przejdźmy teraz do jednej z ważniejszych kwestii, czyli do sposobu zapisu tych stylów. Jak już wspominałem wcześniej, style zewnętrzne zapisuje się w plikach o rozszerzeniucss, najczęściej stosowaną nazwą pliku CSS jeststyle.csslubmain.css. Osobiście stosuję drugą wersję czylimain.css, gdyż wiem że ten plik definiuje mi główny wygląd strony. Jeśli na przykład chciałbym dodać plik, który definiuje mi wygląd nagłówka to bardziej prawdopodobne jest, że nazwę goheader.cssniżstyle2.css. Myślę że również w tej kwestii przyznasz mi rację. Nazwymainiheaderznacznie lepiej opisują swoje zastosowanie niżstyle1istyle2. W plikach w porównaniu do stylów wewnętrznych nie ma żadnych znaczników, tylko od razu pisze się selektory i zbiory par właściwość-wartość. Style importuje się w sekcjiheadprzy pomocy<link rel="stylesheet" href="main.css">. Użycie tego typu styli miałeś okazję już zobaczyć w poprzedniej lekcji.
Aby użyć stylów wewnętrznych, w sekcjiheadpliku HTML należy dodać znacznikstyle. Następnie pomiędzy jego tagiem otwierającym a zamykającym możemy pisać style w takiej formie, w jakiej występują w plikach CSS.
Ostatnim rodzajem stylów są style liniowe. Jak już wspominałem znajdują się w atrybuciestyle. Aby uzyskać efekt z poprzedniej lekcji można by użyć stylów liniowych w następującej postaci:
| 1 2 3 4 5 6 7 8 91011 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"></head><body><pstyle="color: red;">To jest paragraf</p><h4style="font-size: 30px;">To jest nagłówek h4</h4></body></html> |
|---|---|
Jak można zauważyć taki rodzaj styli zapisujemy pomiędzy cudzysłowami, nie używamy nawiasów klamrowych.
Priorytet stylów
Style mają swój priorytet, również kolejność stylów jest ważna. Jest to temat bardzo rozbudowany. Najogólniej mówiąc najwyższy priorytet ma styl liniowy, potem styl wewnętrzny i najniższy priorytet ma styl zewnętrzny. Priorytet zależy również od tego, czy selektorem jest nazwa elementu HTML, klasa, czy identyfikator. Najwyższy priorytet posiada identyfikator, a najniższy nazwa elementu.
Na tym etapie nauki nie ma sensu za bardzo zagłębiać się w temat priorytetów, na początek wystarczą Ci powyższe informacje. Możesz również zapamiętać taką zasadę, że im dokładniej dany selektor określa grupę elementów, tym ma on wyższy priorytet.
Spójrzmy na następujący przykład.
| 1 2 3 4 5 6 7 8 91011121314 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"><style>p{color:blue;}</style></head><body><pstyle="color: red;">To jest paragraf</p></body></html> |
|---|---|
Posługując się priorytetami stylów ten paragraf będzie miał kolor czerwony, ponieważ styl liniowy ma najwyższy priorytet. Możesz usunąć styl liniowy, w takim wypadku czcionka będzie miała kolor niebieski, ponieważ styl wewnętrzny posiada większy priorytet niż styl zewnętrzny.
Wymuszenie priorytetu
Warto wiedzieć, że istnieje tak zwane wymuszanie priorytetu, tworzone przez słowo kluczowe!important, tak ten wykrzyknik to nie jest błąd.
Uruchom teraz poniższy przykład. Jest on taki sam jak poprzedni, z tą różnicą, że styl zewnętrzny posiada słowo kluczowe!important.
| 1 2 3 4 5 6 7 8 91011121314 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"><style>p{color:blue;}</style></head><body><pstyle="color: red;">To jest paragraf</p></body></html> |
|---|---|
| 123 | p{color:green!important;} |
|---|---|
Pomimo, że styl zewnętrzny ma niższy priorytet niż styl liniowy, to wymusiliśmy aby ta właściwość miała tą konkretną wartość.
Słowa!importantwarto jednak całkowicie unikać lub stosować tylko w wyjątkowych sytuacjach. Jego nadużywanie może doprowadzić do tego, że ciężko będzie znaleźć miejsce w którym jest zdefiniowana dana właściwość. Jeśli będziesz go zbyt często używał, to może się zdarzyć, że dwa style dotyczące tego samego elementu będą miały ustawione!important, a to wprowadza niepotrzebny bałagan w kodzie.
Nadpisywanie stylów
Wracając jeszcze do kolejności stylów. Napiszę teraz coś co po pierwszym przeczytaniu można nie zrozumieć.Późniejsze style o tym samym priorytecie mają większy priorytet. Skomplikowane? Posłużę się przykładem.
Zawartośćmain.css:
| 123 | h4{color:blue;} |
|---|---|
Zawartośćoverride.css:
| 123 | h4{color:green;} |
|---|---|
Plik HTML:
| 1 2 3 4 5 6 7 8 9101112 | <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"><linkrel="stylesheet"href="override.css"></head><body><h4>To jest nagłówek h4</h4></body></html> |
|---|---|
Po uruchomieniu przykładu, zobaczysz, że nagłówekh4ma kolor zielony. Jest to spowodowane tym, iż plikoverride.csszostał dołączony pomain.css, jego style o tym samym priorytecie, jak te w plikumain, nadpisały style zdefiniowane wmain.css.
Zadanie 1
W tym zadaniu Twoim celem jest nadpisanie stylu dlah4ip. Nadaj tym elementomfont-weight: 700orazfont-size: 24px.
Podsumowanie
W tej lekcji miałeś okazję poznać 3 sposoby na dodawanie stylów do strony www, są to style zewnętrzne, wewnętrzne i liniowe. Następnie zajęliśmy się priorytetami stylów, wymuszaniem priorytetu oraz nadpisywaniem styli.