Jak nauczyć się CSS? Poznaj style stron www krok po kroku
CSS to skrót od Cascading Style Sheets (Kaskadowe arkusze stylów). Jest to sposób na opisanie prezentacji stron internetowych w oddzielnym dokumencie niż sama treść.
Idea polega na tym, że można napisać jeden zestaw reguł (CSS), aby kontrolować wygląd wszystkich elementów na stronie, a następnie użyć arkusza stylów do zmiany wyglądu wszystkich tych elementów.
Może być używany do stylizacji dokumentów HTML, XHTML, XML i SVG. CSS opisuje, jak elementy HTML powinny być wyświetlane na ekranie, na papierze, w mowie lub na innych nośnikach.
Jeśli jeszcze nie poznałeś podstaw HTML to zajrzyj do podlinkowanego artykułu.
Podstawy CSS – czym jest selektor i jego właściwość
Selektor to element, który umieszczany jest na początku reguły CSS. Może to być znacznik HTML np: “h1”, klasa np.: .naglowek czy identyfikator elementu HTML np.: #content.
Właściwość to sposób w jaki chcemy ostylować dany element np.: możemy zmienić tło danego elementu czy kolor czcionki.
Wartość właściwości pozwala określić jak zmieni się styl w przypadku koloru tła lub czcionki jest to oznaczenie konkretnego koloru z palety RGB, RGBA czy też kod HEX.
Zmiana koloru tła lub tekstu w CSS
Za zmianę koloru tła odpowiada właściwość background-color. Należy pamiętać, że pokrywa ona cały kontener wraz z jego marginesem wewnętrznym padding.
Za zmianę koloru tekstu odpowiada właściwość color.
.tlo {
background-color: blue;
}
#tekst {
color:red;
}
Zmiana czcionki i rozmiaru tekstu w CSS
Za ustawienie czcionki w CSS odpowiada właściwość font-family. Możemy wybrać jedną z czcionek lub zestaw kilku, które wczytają się jeśli, pierwsza nie będzie w stanie.
Za zmianę rozmiaru tekstu odpowiada właściwość font-size. Możemy nadać wartość w pikselach, punktach, procentach czy jednostkach responsywnych np.: rem.
html {
font-family: Montserrat;
}
.paragraf {
font-size:22px;
}
Jak oddalić od siebie elementy HTML za pomocą CSS? Marginesy wewnętrzne i zewnętrzne
Za oddalenie elementów HTML od siebie może odpowiadać właściwość margin, jeśli chcemy zastosować margines zewnętrzny lub padding, jeśli chcemy zastosować marginesy wewnętrzne.
Margines zewnętrzny odsuwa cały element od innego elementu, natomiast wewnętrzny pozwala na odsunięcie wewnętrznych tagów od granic tego zewnętrznego i jego obramowania.
Zarówno padding jak i margin mogą przyjmować wartości w takich samych jednostkach jak wcześniej omawiany font-size tzn: pixelach, punktach, procentach czy innych jednostkach responsywnych.
Dodatkowo możemy nadać kilka wartości jeśli chcemy, by w zależności od strony (góra, prawo, dół, lewo) margines był inny. W przypadku nadania jednej wartości otrzymamy efekt równomiernego marginesu z każdej ze stron.
#elementzew {
margin: 30% 0% 0% 25%;
}
#elementwew {
padding: 15px;
}
Jak nadać obramowanie elementowi w CSS?
Do nadawania obramowania elementom HTML służy właściwość border. Przyjmuje ona kilka wartości: rozmiar, styl i kolor, które oddzielamy spacjami.
Dodatkowo możemy zaokrąglić obramowanie czy określić z której strony ma być widoczne. Do zaokrąglania obramowania służy właściwość border-radius, która przyjmuje wartość rozmiaru w procentach, pikselach lub innych.
Zaokrąglenie możemy również wybrać dla konkretnej ze stron: góra, prawo, dół, lewo.
.obramowanie{
border: 1px solid red;
}
.zaokraglenie{
border-radius: 12px;
}
.obramowaniegora{
border-top: 1px solid red;
}
Jak stworzyć cień za pomocą CSS?
Odpowiednie zastosowanie cieni na stronie pozwala nadać jej nowocześniejszy wygląd, ale także uwypuklić najważniejsze treści w sposób wizualny. Służy do tego właściwość box-shadow.
Przyjmuje ona wartości tak jak obramowanie czyli: rozmiar np.: w pikselach oraz kolory w formacie RGB czy HEX.
Shadow należy poprzedzać prefiksami odpowiednimi dla różnych przeglądarek, tak aby strona wyglądała identycznie na każdej przeglądarce.
.cien{
-webkit-box-shadow: 5px;
-moz-box-shadow: 5px;
-o-box-shadow: 5px;
box-shadow: 5px;
}
Jak stworzyć gradient za pomocą CSS?
Gradienty doskonale sprawdzają się jako tło przycisków czy w obramowaniu lub jako wyróżnienie tekstu. Do stworzenia gradientu wykorzystujemy właściwość background z wartością linear-gradient().
Linear-gradient() to tak na prawdę funkcja, która jest odpowiedzialna za stworzenie gradientu według wyznaczonych przez nas parametrów.
.gradient{
background: linear-gradient(45deg, red, blue);
}
mathfunctions
Jak zmieniać kształt elementów HTML w CSS?
Za zmianę kształtu elementów HTML odpowiada właściwość transform z różnymi wartościami.
- translate() – przesunięcie wzdłuż osi x, y i/lub z.
- rotate() – obrót względem środka, osi x, y a nawet z.
- scale() – zmiana szerokości i wysokości (również możliwa w trzech wymiarach).
- skew() – pochylenie
- perspective() – perspektywa
Warto wspomnieć, że różne przeglądarki mogą inaczej rozumieć działanie tych funkcji dlatego stosuje się prefixy dla konkretnych przeglądarek.
selektor {
-webkit-transform: wartość;
-moz-transform: wartość;
-o-transform: wartość;
transform: wartość;
}
Animacje i efekty przejścia w CSS
W CSS możemy robić proste jak i bardziej zaawansowane animacje elementów HTML, na przykład poprzez zmianę koloru elementu po najechaniu na niego. Służy temu właściwość transition.
Przyjmuje ona właściwość, która się zmienia w trakcie, ale także czas trwania przejścia i funkcję zmiany czasu trwania przejścia oraz opóźnienie.
- transition-property – właściwość, która ulega zmianie.
- transition-duration – czas trwania przejścia.
- transtion-delat – opóźnienie przejścia.
.box {
width: 50px;
height: 50px;
background-color: blue;
transition: width 3s, height 3s, background-color 3s, transform 3s;
}
.box:hover {
background-color: red;
width: 200px;
height: 200px;
transform: rotate(180deg);
}
Do bardziej zaawansowanych animacji wykorzystywany jest mechanizm keyframes. Za jego pomocą stworzymy wieloetapową animację. Poniżej prosty przykład animacji przesunięcia elementu.
@keyframes slajd {
from {
transform: translateX(0%);
}
to {
transform: translateX(100%);
}
}
Pozycja w CSS – jak działa właściwość position?
Za pomocą CSS możemy również określić, to jak jest pozycjonowany konkretny element na stronie. Służy do tego właściwość position, która domyślnie przyjmuje wartość static czyli statyczna.
Dostępne są również wartości relative, absolute oraz fixed, które współdziałają z właściwościami pozycjonującymi top, bottom, left, right, które jako wartość przyjmują wartości w procentach, pikselach i innych jednostkach.
position: relative;
Za pomocą pozycji relatywnej – relative, miejsce na stronie staje się punktem odniesienia dla danego elementu i za pomocą właściwości pozycjonujących możemy go przesunąć. W miejscu po elemencie pozostaje pusta przestrzeń.
position: absolute;
Pozycja absolutna w porównaniu do poprzedniej nie pozostawia pustej przestrzeni. Punktem odniesienia zawsze jest lewy górny róg strony (chyba, że element pozycjonowany absolutnie został umieszczony wewnątrz kontenera pozycjonowanego za pomocą postion: relative).
Nowe położenie aplikujemy za pomocą właściwości pozycjonujących.
position: fixed;
Ostatnią wartością jest fixed, działa podobnie jak absolute, lecz wartości właściwości pozycjonujących oznaczają pozycję elementu nawet przy przewijaniu. (Jest to dość popularny zabieg jeśli chcemy, aby część strony wędrowała za użytkownikiem np.: menu.
Kolejność warstw na stronie www
W przypadku pozycjonowania elementów strony, warto wspomnieć również o tym, że za pomocą właściwości z-index, możemy określić kolejność wyświetlania elementów strony, które na siebie nachodzą.
To znaczy: jeśli kilka elementów z pozycją absolutną nachodzi na siebie to “na wierzchu” zawsze będzie ten, który ma najwyższy z-index. Domyślna wartość tej właściwości to auto.
Nauka CSS – czym są pseudoklasy?
Pseudoklasy powstały by pozwolić na “dynamiczne” nadawanie styli poprzez interakcje użytkownika np.: podświetlanie linków gdy najedziesz na niego kursorem.
Wyróżniamy wiele różnych typów pseudoklas:
- dynamiczne dla linków: :link (nieodwiedzony), :visited (odwiedzony)
- dynamiczne dla akcji użytkownika: :active (gdy link został aktywowany – trzymamy na nim kliknięty lewy przycisk), :hover (element znajduje się pod kursorem), :focus (określa skupienie na danym elemencie, na przykład polu formularza czy linku – sprawdzisz to dzięki przechodzeniu po stronie za pomocą przycisku tab)
- dla interfejsu użytkownika: :enabled, :disabled, :checked
- strukturalne:
- :root
- :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type() – wybranie konkretnego elementu podrzędnego lub typu
- :first-child – wybranie pierwszego elementu podrzędnego
- :last-child – wybranie ostatniego elementu podrzędnego
- :only-child – wybranie tylko elementów podrzędnych
- :fist-of-type, :last-of-type, :only-of-type
- :empty
- negacji: :not() – do wykluczania elementów z reguły
Jednak do najbardziej popularnych pseudoklas należą :before i :after, które pozwalają na wstrzyknięcie dodatkowej treści do kodu naszej strony.
Tak dodawane elementy nie pojawiają się w kodzie HTML, nie są zaznaczalne czy edytowalne przez inspekcje HTML (lecz tylko przez CSS).
By dodać dodatkowy tekst do paragrafu za pomocą pseudoklas :before lub :after musimy wykorzystać właściwość content.
p:after {
content: "...to jest treść dodana dynamicznie przez CSS...";
}
Najważniejszy styl na stronie www
Domyślnie style CSS elementów wykonywane są według ich ważności i miejsca ich zdefiniowania. To znaczy, że style mogą być nadpisywane.
Style i znaczniki HTML są czytane przez przeglądarkę od góry do dołu i od lewej do prawej. Dlatego jeśli nagłówkowi h1 w lini nr 1. zmieniamy kolor na żółty, a później w linii 50 na czerwony, to ostatecznie nagłówek będzie miał kolor czerwony, bo styl został nadpisany.
Niemalże najważniejsze są style inline, czyli style przypisywane elementom poprzez atrybut HTML – style=””.
Jedynie ważniejsze są style, które zawierają na końcu linii dopisek !important.
Dlatego jeśli zdefiniujemy takie style:
h1 {
color: yellow !important;
}
h1 {
color: red;
}
To ostatecznie nagłówek h1 będzie miał kolor czerwony. Taki styl może zostać nadpisany przez style zapisane w atrybucie HTML ale tylko jeśli będzie zawierać dopisek !important.
Sposób wyświetlania w CSS – display
Za sposób wyświetlania elementów HTML odpowiada właściwość display, która przyjmuje takie wartości jak: none, flex, inline, block, inherit, inline-block, list-item, compact, run-in i inne…
Za najciekawsze i najbardziej potrzebne uważam pierwsze cztery…
- none – pozwala nam na ukrycie elementu i jego przestrzeni.
- inline – powoduje, że element wyświetlany jest liniowo jak np.: span
- flex – powoduje, że wewnętrzne elementy, mają razem, maksymalnie szerokość rodzica.
- block – powoduje, że element wyświetlany jest blokowo jak np.: h1
Bardziej zaawansowanym tematem i rozwinięciem display jest flexbox. Służy on tworzeniu layoutu strony od podstaw, jak dla mnie jest to jedyny słuszny sposób na tworzenie layoutu.
Innym sposobem na tworzenie responsywnych layoutów jest grid, jednakże by go zrozumieć warto znać podstawy CSS omówione wcześniej…
Nauka CSS – podstawy responsywności – mediaqueries
Podstawą responsywnej strony internetowej są mediaqueries, które pozwalają na stosowanie konkretnych reguł na podstawie zmieniającej się szerokości ekranu.
Możemy stworzyć zasięg w jakim działają dane reguły za pomocą definiowania wartości min-width oraz max-width.
.tlo {
background-color: white;
}
@media (min-width: 700px) and (max-width: 1100px) {
.tlo {
background-color: purple;
}
}
W powyższym przykładzie domyślnie klasa .tlo nadaje kolor biały tłu, natomiast w zakresie szerokości ekranu 700px-1100px jest to kolor fioletowy.
Zmienne i wartości w CSS
Jeśli uczyłeś się kiedykolwiek programowania to prawdopodobnie wiesz czym jest zmienna. Jeśli nie to poznasz zmienne w CSS.
Są to zdefiniowane jednostki, które zawierają specyficzne wartość, które są powielane w wielu elementach danego dokumentu.
Szczególnie przydatne jest to, gdy tworzysz cały design system i na jego podstawie powstaje arkusz styli CSS.
Możesz go użyć do zapamiętania głównego koloru marki i zamiast powielania koloru, powielasz nazwę zmiennej.
Jeśli będziesz chciał zmienić ten kolor na ciut jaśniejszy, wystarczy, że zmienisz kolor w zmiennej.
Zmienną w CSS deklarujemy za pomocą poprzedzenia nazwy zmiennej dwoma myślnikami.
Natomiast, by użyć zmiennej musimy posłużyć się zapisem: var(–zmienna).
div.box {
font-size: 45px;
--size: 6em;
width: var(--size);
height: var(--size);
}
* {
--box-shadow: initial;
-webkit-box-shadow: var(--box-shadow);
-moz-box-shadow: var(--box-shadow);
box-shadow: var(--box-shadow);
}
Nauka pracy ze stylami CSS – preprocesory
Preprocesory to narzędzia, które pozwalają na szybsze i łatwiejsze generowanie kodu CSS. Do preprocesorów zaliczamy LESS oraz SASS, a także kilka innych.
Przykładowa różnica w zapisie kodu:
/*CSS*/
a {
-webkit-transition: all 0.6s linear;
-moz-transition: all 0.6s linear;
-o-transition: all 0.6s linear;
-ms-transition: all 0.6s linear;
transition: all 0.6s linear;
}
/*Preprocesor*/
a {
@include transition;
}
Nauka CSS – frameworki
Kolejnym z etapów nauki powinno być zapoznanie się z popularnymi frameworkami, które tak samo jak preprocesory pozwolą Ci przyśpieszyć tworzenie laytoutów. W jaki sposób?
Frameworki zawierają gotowe reguły CSS i zbiory klas, które wystarczy, że wykorzystasz w swoim projekcie HTML.
Do najpopularniejszych frameworków CSS należą:
Podsumowanie
Pamiętaj, że by nauczyć się tych wszystkich rzeczy musisz zacząć tworzyć pierwsze strony www. Mogą być one tylko na Twoim komputerze, umieszczane na pulpicie, ale zacznij od tego!
Dzięki praktycznemu sprawdzeniu przykładów podanych powyżej zrozumiesz działanie CSS, jego właściwości i różnych reguł.
CSS wciąż się rozwija, pozostań na bieżąco!
Źródła: