W poprzednim rozdziale poznaliśmy podstawy HTML i CSS. Był to jednak dopiero początek. Style CSS posiadają wiele więcej zaawansowanych funkcji, z których część poznamy w niniejszym rozdziale. Spora część pracy front-end developera polega właśnie na tworzeniu odpowiednich stylów, aby zapewnić użytkownikom optymalne korzystanie ze strony internetowej. Z tego powodu dzięki poniższemu materiałowi poznasz bliżej CSS.
CSS – wersja 3
CSS aktualizował się wraz z rozwojem technologii mobilnych i internetu. Najnowsza wersja to CSS3. Oferuje ona nowe funkcjonalności będące w dużej mierze odpowiedzią na te wydarzenia.
W odróżnieniu od swojego poprzednika, CSS3 nie ma jednolitej, jasnej specyfikacji. Został bowiem podzielony na moduły, z których każdy ma nieco inny status. W3C, czyli Word Wide Web Consortium odpowiedzialne za specyfikacje technologii może wydać pozytywna opinie w zależności od stopnia dojrzałości danego rozwiązania. Finalnie pokazuje to, że dana technologia jest stabilna i sprawdzona.
Następnym krokiem jest zaprogramowanie (zaimplementowanie) obsługi takiej nowej właściwości CSS przez twórców przeglądarek internetowych, np. Google Chrome czy Mozilla Firefox do najnowszej wersji produktu. Od tego momentu, wszyscy front-endowcy mogą używać nowej właściwości bez wątpliwości o to, że nie zadziała ona u użytkownika strony.
Specyfikacja CSS dostępna jest na stronie W3C.
Pożądane praktyki
Podczas pracy nad coraz bardziej skomplikowanymi projektami, wymagającymi więcej linijek kodu, coraz większego znaczenia ma porządek w kodzie, aby czytelność została zachowana. Od samego początku warto sobie wyrobić nawyk pisania czystego kodu, niezależnie od tego, ile liczy sobie linijek.
Sporą trudnością przysparza praca w zespole nad jednym projektem. Kod, który dla nas jest jasny, drugiej osobie nie musi taki być. W środowisku front-end developerów (i w ogóle programistów) utarły się pewne praktyki, które mają na celu ułatwienie pracy i uniknięcie problemów z czytaniem kodu. Odbiorcami naszego kodu są nie tylko osoby przeglądający strony, ale również osoby czytające go, między innymi programiści.
Komentarze
Dodawanie komentarzy do kodu jest praktyką naturalną. Zazwyczaj są jedynie po to by oddzielić jedną sekcje kodu CSS od drugiej, dotyczącej innych elementów. W projektach o pokaźnych rozmiarach, żeby uniknąć ładowania zbędnych stylów do widoków, na których nie są wykorzystane, tworzy się osobne pliki ze stylami i podpina je do widoków, na których są wykorzystywane.
Komentarze CSS dodaję się w następujący sposób:
/* mój komentarz */
A komentarz w HTML-u dodajemy tak:
Wewnątrz komentarza mamy możliwość dodawania dowolnego tekstu. Nie będzie on mieć wpływu na wygląd zachowanie strony. Sugerowaną praktyką jest dodawanie komentarzy objaśniających za co odpowiedzialna jest dana grupa reguł CSS, np.
/*
## Nagłówek ##
*/
Umieszczając taki komentarz jak wyżej nad kilkoma stylami w pliku CSS dotyczącymi nagłówka, oszczędzamy sobie i innym czas który byśmy musieli przeznaczyć na ustalenie do czego służy dana grupa stylów (reguł CSS).
Aby wyłączyć część kodu bez usuwania go, możemy użyć komentarza. Sprawdza się w sytuacji, gdy nasza strona nie działa tak jak powinna i chcemy, czasowo wyłączyć niektóre fragmenty kodu. W taki sposób sprawdzimy który z nich powoduje niepoprawne działanie danego elementu.
Formatowanie kodu
Niepoprawnie sformatowany kod staje się nieprzejrzysty dla osób czytających nasz efekt pracy. Warto zadbać o czytelność kodu w całym pliku CSS.
Różne formatowanie kodu często nie powoduje błędnego wyświetlania strony. Jednak warto stosować pewne ogólnie przyjęte konwencje. Reguła w CSS najczęściej sformatowana jest tak, jak poniżej:
.container {
width: 100px;
height: 80px;
}
Wszystkie selektory i właściwości są dodawane od nowej linijki. Kolejno po spacji, w tej samej linii dajemy znak { (otwierający nawias klamrowy) otwierający definicję naszej reguły CSS. Każda właściwość CSS zaczyna się od nowej linii, dla wartości po dwukropku też często daje się spację. Kończy się średnikiem – jego brak może powodować błąd na stronie. Każda właściwość powinna być “wcięta” w prawo za pomocą tabulatora. Nawiasem zamykającym zbiór właściwości powinien być od nowej linii bez wcięcia. Takie formatowanie sprawi, że kod stanie się bardzie czytelny.
Nazewnictwo kodu
Nazewnictwo głównie dotyczy klas, które są najczęściej stosowane w selektorach reguł CSS. Po pierwsze, należy używać anglojęzyczne nazewnictwo klas. Podczas pracy nad dużymi projektami, zdarzy się że trafisz do międzynarodowego zespołu. Nazewnictwo klas powinno być związane z ich funkcjami, umiejscowieniem, typem stylowanego elementu lub kontekstem. Prawidłowe nazewnictwo klas sprawi, że kod będzie bardziej zrozumiały dla programisty, co pozwoli na szybsze nawigowanie lub wdrożenie się w dany kod. Przykładowo nazwa klasymain-header jest dość czytelnym nadaniem nazewnictwa niż np. m-h.
Niezależnie od umiejętności programisty, rekruterzy IT analizują w pierwszej kolejności kod pod katem formatowania, opisania wartościowymi komentarzami. W tym momencie widzimy czy kod jest pisany przez juniora czy seniora.Elementy liniowe i blokowe
Każdy element HTML jest domyślnie liniowy, czyli dopuszcza po bokach inne elementy lub blokowy, czyli zajmuje 100% szerokości kontenera, w którym się znajduje, np. akapit. Odpowiada za to właściwośćdisplay, którą możemy definiować jak na poniższym przykładzie:
.container {
display: block;
}
Właściwość ta wpływa na najbliższe otoczenie elementu w HTML. Podstawowe wartości dla display to:
- block – element blokowy. Tego rodzaju element zaczyna się zawsze od nowej linijki i zajmuje całą dostępną szerokość. Elementom które domyślnie są blokowe nie trzeba nadawać właściwości
width: 100%, ponieważ domyslnie zajmują 100% dostępnej przestrzeni. Elementy domyślnie blokowe to między innymi:div, h1-h6, p, section, footer, form. - inline – element liniowy. Zaczyna się od tej samej linijki i zajmuje tyle miejsca, ile jest potrzebne. Przykładowe elementy domyślne wyświetlane jako inline to
span, a, img. - inline-block – element liniowo-blokowy. Podobnie jak element liniowy wyświetlany jest w jednej linii. Różnorodność jest następująca – takiemu elementowi mozna nadać określoną wysokość i szerokość – czyli
widthorazheight. Zastosowanie ma często w pasku nawigacji strony, gdzie poszczególne odsyłacze do podstron wyświetlane są w jednej linii i mają określone wymiary. - none – taki element nie zostanie wyświetlony. Miejsce w którym się znajduje może być zajęte przez inne elementy. Taka wartość przydaje się, gdy chcemy wyświetlić jakiś element np. dopiero w momencie, gdy użytkownik najedzie kursorem na ikonę.
p, h1, div są elementami blokowymi. Z drugiej strony span jest elementem liniowym. W trakcie tworzenia kodu możemy dowolnie zmieniać wyświetlanie interesujących nas elementów w pliku CSS.
Poniżej pokazuje, w jaki sposób poszczególne elementy pojawiają się na stronie. Ustawiłem poszczególnym divom różne właściwości display, zmieniając ich wymiary oraz pozycje na stronie.display staje się kluczową nie tylko przy budowaniu elementów strony, ale również przy planowaniu całej strony.Align i floaty
Podczas przeglądania dowolnej gazety, z pewnością dostrzeżemy wiele fotografii, które są otoczone “pływającym” tekstem. Przeniesienie takiego rozwiązania do stron internetowych wymaga właściwości float. W praktyce float używany jest do rozmieszczenia treści na stronie. Z pomocą tej właściwości możemy zbudować złożony układ strony www.
Spójrzmy na poniższą grafikę. Zobrazowałem graficzne rozmieszczenie elementów na stronie przy zastosowanie omawianej właściwości. Przy float: left; obrazek został przesunięty do lewej strony, a tekst opływa go z prawej.
Korzystanie z floatów sprawia różne wyświetlenia elementów. Jeżeli np. nadamy float: left; elementowi span, który domyślnie wyświetlany jest jako inline, wówczas zmieni to też jego miejsce w przepływie dokumentu i spowoduje, że stanie się on elementem z właściwościami blokowymi. Skutkuje to tym, że będzie mu można nadać również właściwości width oraz height.
W lepszym zrozumieniu działania float, warto poznać też właściwość text-align (wartości: left – domyślna, right, center, justify). Służy ona do wyrównywania tekstu najczęściej w elemencie blokowym. Wynikiem zastosowania text-align w omawianej przestrzeni wyrównywania używając tej właściwości nie ma już miejsca na coś, co to opływa. W przypadku używania float, nasz element może się wcisnąć miedzy inne.
Poniżej dodałem przykład z zastosowaniem float – text-align. Śmiało możesz poćwiczyć różne warianty.
Właściwość – Clear
Elementy z właściwością float zachowują się w sposób nieprzewidywalny. To po części działa po prostu błędnie.
Aby wyleczyć niektóre aspekty, zaczęto prace nad flex-boxem (omówię o nim w dalszych modułach).
Minusem float jet to, że elementy z taką właściwością czasami przemieszczają się poza swój kontener. Mamy div-a z jakimś tłem, a w nim tekst i zdjęcie, które ma być po prawej stronie tego tekstu, więc img będzie mieć float: right;. Gdy zdjęcie jest wyższe niż tekst po lewej stronie, to “wyjdzie” ono na dole poza granice diva. Aby temu przeciwdziałać, korzystamy z właściwości clear, a w zasadzie z pewnej gotowej reguły CSS z użyciem tej właściwości.
Spójrz na poniższy przykład z zastosowaniem powyższej właściwości:
W powyższym przykładzie, błędne działanie floata zobaczysz, gdy usuniesz lub za komentujesz w edytorze z linku ostatnią regułę w CSS. Następnie ją przywróć. Omawiana reguła naprawia działanie floata. Nie będziemy tłumaczyć tej konstrukcji. Programiście po prostu kopiują ją z projektu do projektu. Wykorzystywana jest ona do wspierania kontenerów, które zawierają elementy “przemieszczające się”.
Floaty często używa się też do budowy layoutu. Widać jednak, że przysparza to pewnych problemów. Właściwość miała jedynie służyć do wyżej wymienionego otaczania ilustracji tekstem. Wykorzystanie floata do rozmieszczenia elementów na stronie (layout) jest pewnego rodzaju trikiem, nie do końca zgodnym z zamierzeniami twórców.
Pozycje elementów
Podczas pisania kodu, przychodzi czas na precyzyjne określenie miejsca dla elementu HTML na stronie. Umieszczenie elementu na stronie oraz wpływ na przepływ treści pozostałej części dokumentu określany jest za pomocą właściwościposition. Prościej – ta właściwość określa sposób pozycjonowania w CSS. Popularnie stosowany jest z podaniem pozycji elementu za pomocą podania offsetu – czyli przesunięcia w poszczególnych kierunkach – top, bottom, left, right. Metode pozycjonowania określamy w CSS właściwością position. Spójrz na poniższe wartości, które może przyjmować właściwość position:- static – domyslną wartością dla tej właściwości jest
static. Oznacza to, że element będzie umieszczony w normalnym przepływie układu strony – czyli od lewej strony, a deklaracje offsetu będą ignorowane. - relative – wartość przesunie go względem pierwotnego położenia. Taka reguła przesunie wszystkie elementy z klasą
exampleo10pxw lewo względem ich pierwotnej pozycji – spójrz na poniższy przykład:
.example {
position: relative;
left: 10px;
}
- absolute – w przypadku pozycjonowania absolutnego, element zostaje usunięty z przepływu treści dokumentu. Jego położenie nie będzie mieć wpływu na pozostałą treść. Jego pozycja będzie określona względem nabliższego rodzica tego elementu o pozycji innej niż
static. Kontener (rodzic) to element, wewnątrz którego zagnieżdżona jest interesująca nas treść. Poniżej dodaje kod, w którym znajduję się przykład rozwiązania korzystającego z pozycjonowania absolutnego. Element div z klasąparentma pozycjęrelative, jednak bez podania offsetu nie wpływa to w żaden sposób na jego położenie. Dziecko, czyli element oznaczony klasąexample, ma przypisaną pozycje absolutną, przesunięcie o 60px w górę oraz 35px w lewo. Ciekawostą jest to, że właściwości odpowiadające za przesuwanie elementów mogą przyjmować wartości ujemne.
- fixed – wartość, przy której element będzie pozycjonowany względem okna przeglądarki, tzn. że pozostanie w jednym miejscu, gdy będziemy przewijać stronę. Popularnym sposobem użycia tej wartości jest nadaniej jej paskom nawigacji przyklejonym do góry. Zasady przemieszczania go są identyczne jak w przypadku
absolute. Gdy chcemy stworzyć belkę przyklejoną do góry przeglądarki, to musimy nadać elementowiposition: fixed;oraz odległość od górnej krawędzi okna przeglądarki. Spójrz na poniższy przykład:
Na chwilę obecną na razie tyle o pozycjonowaniu. Później dodam więcej materiału o nieco bardziej zaawansowane techniki CSS, które pozwalają na precyzyjne określanie wyglądu strony.
Zagnieżdżanie selektorów
Wcześniej pokazałem selektory dla tagów, klas i identyfikatorów. Załóżmy, że chcemy zmienić wygląd linków, ale tylko tych, które znajdują się w nagłówku? Technicznie znamy już na to sposób – możemy stworzyć dla nich odpowiednią klasę. Każdorazowo dodawanie klasy do linku będącego w nagłówku to jednak duży nakład pracy oraz spora ilość kodu.
W celu osiągnięcia interesującego nas efektu, należy skorzystać z zagnieżdżania selektorów. Może to wyglądać jak poniżej:
header a {
/* Style linków wewnątrz nagłówka */
}
W taki sposób możemy określić wygląd linków, które znajdują się wewnątrz elementu header. Również możemy korzystać z większej liczby selektorów:
header .navigation a {
/* Style linków wewnątrz .navigation wewnątrz nagłówka */
}
>.
.example > div {
/* Właściwości elementów div, które są bezpośrednio wewnątrz */
}
> wybierzemy tylko te elementy div, które są bezpośrednim potomkiem (zagnieżdżone) elementu HTML o klasie example. Elementy położone o dalsze poziomy niżej w drzewie dokumentu HTML nie będą objęte działaniem tego stylu.Grupowanie elementów
Pomocnym sposobem przy pracy z CSS jest grupowanie selektorów. Taki sposób przydaje się, gdy chcemy ten sam kod przypisać wielu klasom lub elementom. Nie musimy wpisywać go każdorazowo do wielu elementów. Możemy zebrać powtarzające się właściwości i przypisać je do grupy selektorów. Tworzymy to wymieniając je po prostu po przecinku:
h1, h2, h3, h4 {
text-align: right;
font-weight: bold;
}
W powyższy sposób przypisany został za pomocą jednej reguły ten sam styl do czterech typów nagłówków.
Wybór elementów-rodzeństwa
Podczas tworzenia reguły mamy możliwość wyboru z pomocą selektorów CSS elementy będące rodzeństwem danej klasy bądź elementu. Do tego posłużą nam selektory + oraz ~.
Gdy chcemy wybrać element występujący jako następny możemy skorzystać z konstruktora +. Dzięki konstruktorowi możemy łączyć selektory. Poniżej dodaję przykład w którym została stworzona reguła tylko dla jednego elementu – będzie to p będące bezpośrednio po elemencie z klasą example.
.example + p {
/* sąsiedni selektor rodzeństwa */
}
example, to będziemy musieli użyć selektora ~, tak jak w poniższym przykładzie:
.example ~ p {
/* ogólny selektor rodzeństwa */
}
Poniżej dodaję kod, w którym możesz sprawdzić zagnieżdżanie i grupowanie selektorów oraz wskazywanie rodzeństwa:
Pseudoklasy
Pseudoklasy umożliwiają nam manipulowanie na wygląd elementów dokumentu, podczas gdy on jest w pewnym stanie. Przez zmianę stylów określonych za pomocą selektora pseudoklasy możemy sprawić, że jej wygląd będzie się zmieniał pod wpływem interakcji z użytkownikiem. Częstym zastosowaniem pseudoklas jest zmiana wyglądu odnośników (linków), gdy użytkownik najedzie kursorem na niego. Efekt taki możemy osiągnąć za pomocą pseudoklasy:hover. W przypadku pseudoklas korzystamy tylko z jednego dwukropka, jak w przykładzie poniżej:
a:hover {
color: blue;
}
a, po najechaniu na link, zmieni kolor na niebieski. Kolejną popularną pseudoklasą typową dla odnośników jest :visited, dzięki której można określić wygląd odnośnika, który został już odwiedzony.
a:visited {
color: green;
}
:active
a:active {
color: yellow;
}
Pseudoklasa :hover dostępna jest również dla innych elementów niż odnośnik. Poniżej dodałem przykład jak zmienić tło dla pozycji na liście wewnątrz nagłówka po najechaniu na niego kursorem:
header li:hover {
background-color: green;
}
a:hover występuje po a:link i a:visited w kolejności definiowania stylów w CSS. Tak samo a:active nadajemy po a:hover. N-ty potomek
Kolejnym interesującym rodzajem pseudoklas są takie które umożliwiają nam wybranie elementów będących n-tym w kolejności potomkiem swojego elementu rodzica. W taki sposób możemy np. zdefiniować oryginalny wygląd dla pierwszego paragrafu danej sekcji lub wybrać tylko interesującą nas pozycję na liście. Do tego możemy wykorzystać następujące pseudoklasy:
p:first-child {
/* pierwszy akapit nadrzędnego div */
}
li:last-child {
/* ostatnia pozycja na liście ul lub ol */
}
p:nth-child(3) {
/* akapit, będący n-tym dzieckiem rodzica */
}
Na chwile obecną wystarczy już teorii o CSS. W kolejnych materiałach zajmiemy się budowaniem komponentów CSS.
Wszystkie pytania proszę kierować na mojego Messengera, lub bezpośrednio na emaila: danielminschinski@gmail.com
Zapraszam do subskrypcji i polubienia mojego blogowo/usługowego fb oraz kanału na YouTube.
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA