CSS (Cascading Style Sheets, Kaskadowe arkusze stylów) - jest językiem do opisu i zmiany wyglądu elementów. HTML służy do definiowania struktury i semantyki treści dokumentu, a CSS jest używany do tworzenia wyglądu naszej strony i jej pozycjonowania.
Blok kodu CSS nazywany jest regułą, która składa się z selektora i bloku deklaracji w nawiasach klamrowych.
Selektor informuje przeglądarkę, do których elementów zastosować style z tej reguły. Każda deklaracja składa się z pary właściwość: wartość;, gdzie właściwość i jej wartość są oddzielone dwukropkiem ze spacją i koniecznie kończą się średnikiem. One opisują, co dokładnie należy zrobić ze stylami elementu.
selektor {
właściwość: wartość;
właściwość: wartość;
właściwość: wartość;
}
Istnieją trzy sposoby dodawania stylów do dokumentu HTML: style wbudowane (inline styles), wbudowany arkusz stylów (embedded stylesheet) i zewnętrzny arkusz stylów (external stylesheet). Każdy sposób ma swoje zalety, wady, ograniczenia i zakres użycia.
Style wbudowane (inline) są ustawiane dla znacznika bezpośrednio w atrybucie style. Nie można ich skalować, są trudne do zastąpienia i ponownego użycia, więc są rzadko używane. Używane głównie w przypadku stylów które nadajemy za pomocą Javascript dynamicznie.
<p style="color:blue; font-size:24px;">Ten tekst będzie niebieski.</p>
Ten tekst będzie niebieski.
Przy takim podejściu reguły CSS dodają się wewnątrz znacznika <style> w nagłówku dokumentu. Nie można ich ponownie wykorzystać na innych stronach i są trudne do skalowania i konserwacji.
<head>
<style type="text/css">
p {
color: blue;
font-size: 24px;
}
</style>
</head>
Interesująco: Czasami takie podejście jest stosowane w celu optymalizacji szybkości renderowania strony przez dodanie najważniejszych stylów bezpośrednio do dokumentu HTML. Ta zaawansowana technika nazywa się Critical CSS.
Zewnętrzny kod CSS jest łatwy do skalowania, utrzymania i ponownego wykorzystania na innych stronach, więc jest to standard łączenia stylów. Projekt tworzy oddzielny plik arkusza stylów z rozszerzeniem .css i podłącza się do dokumentu HTML.
<head>
<link rel="stylesheet" href="./css/styles.css" />
</head>
Pomocne: Możesz dołączyć dowolną liczbę plików CSS, dodając do każdego znacznik <link>.
Korzystając z różnych selektorów, można wybrać jeden lub grupę elementów. Selektorów jest dość dużo, dlatego rozpatrzymy te główne, które można stosować każdego dnia
Opisuje do jakich elementów html będzie stosowana reguła CSS. Selektor elementu nie jest wystarczająco specyficzny, aby nadać styl poszczególnym elementom, dlatego jest najczęściej używany do stylizacji wszystkich znaczników tego samego typu na stronie. Na przykład, jeśli trzeba usunąć podkreślenie ze wszystkich linków w dokumencie.
/* Zastosowane do wszystkich akapitów na stronie */
p {
font-size: 24px;
}
/* Zastosowane do wszystkich linków na stronie */
a {
text-decoration: none;
}
Najczęściej używany selektor. Używany w połączeniu z atrybutem globalnym class. Nazwę klasy ustawia się tylko w języku angielskim i jest to koniecznie używany, w połączeniu z atrybutem globalnym class, rzeczownik opisujący, jakiego rodzaju jest ten element.
<h1 class="title">Cześć, jestem Mango.</h1>
<p class="text">
Witam na mojej osobistej stronie. Tutaj możesz zobaczyć
<a class="link" href="">projekty</a>.
</p>
Selektora klasy używamy do nadania stylu jednemu lub większej liczbie elementów o tej samej wartości atrybutu class (nazwa klasy). W selektorze przed nazwą klasy umieszczana jest kropka .
/* Będzie dotyczyć wszystkich znaczników z klasą title */
.title {
font-weight: 500;
}
/* Będzie dotyczyć wszystkich znaczników z klasą text */
.text {
color: brown;
font-size: 18px;
}
/* Będzie dotyczyć wszystkich znaczników z klasą link */
.link {
text-decoration: none;
}
Uwaga: Nazwa klasy zawiera tylko małe litery i myślnik. Na przykład, list, list-item, logo-image itp. Podkreślenia list_item, duże litery ListItem lub liczby listitem27 są uznawane za niewłaściwą formę.
Element może mieć kilka klas, wtedy są one oddzielone spacją.
<element class="value1 value2 value3"></element>
Można to wykorzystać do łączenia i ponownego wykorzystywania stylów. Utwórzmy znaczniki i style dla komponentu alertów.
<p class="alert success">Zakończono doładowanie konta</p>
<p class="alert warning">Uwaga, taryfy ulegną zmianie</p>
<p class="alert error">Błąd transakcji</p>
W stylach opisujemy kilka reguł, które są wspólne dla wszystkich alertów i specyficzne dla każdego typu.
/* Wspólne style dla wszystkich typów alertów */
.alert {
font-size: 24px;
font-weight: 500;
}
/* Specyficzne style dla każdego typu */
.success {
color: green;
}
.warning {
color: orange;
}
.error {
color: red;
}
Oto działający przykład.
Zakończono doładowanie konta
Uwaga, taryfy ulegną zmianie
Błąd transakcji
Podobnie jak w przypadku klasy, znaczniki mogą mieć globalny atrybut id. Różnica polega na tym, że wartość id musi być unikalna na stronie, to znaczy nie mogą istnieć dwa elementy o tej samej wartości identyfikatora.
<p id="title">Nagłówek strony</p>
W selektorze CSS przed nazwą identyfikatora umieszczany jest symbol krzyżyka #.
#title {
font-weight: 500;
color: orange;
}
Przykład:
Nagłówek strony
Pomocne: Nie używaj identyfikatorów do stylowania za pomocą CSS. Brak możliwości nadawania elementom tego samo ID uniemożliwia ponowne użycie stylów. Identyfikatory dotyczą "kotwic".
Selektor potomka lub selektor kontekstowy stosuje style do elementów podrzędnych i potomnych elementu na dowolnej głębokości zagnieżdżenia.
<a href="">Czytaj nasz blog!</a>
<ul class="social-links">
<li>
<a href="">Twitter</a>
</li>
<li>
<a href="">Instagram</a>
</li>
<li>
<a href="">Facebook</a>
</li>
</ul>
Na przykład, zamiast ustawiać style wszystkim linkom, wystarczy zmienić style tylko tych, które znajdują się na liście z klasą social-links.
/* ❌ Będzie zastosowane do wszystkich linków w dokumencie */
a {
color: blue;
text-decoration: none;
}
/* ✅ Będzie zastosowane tylko do linków, które znajdują się wewnątrz znacznika z klasą social-links */
.social-links a {
color: blue;
text-decoration: none;
}
Przykład:
Czytaj nasz blog!Kolejny popularny selektor, który pozwala wybrać tylko bezpośrednie dziecko w elemencie nadrzędnym. Używamy znaczników dla wielopoziomowego menu sklepu, w którym trzeba nadać styl znacznikom <li> na liście z klasą menu, ale nie submenu.
<ul class="menu">
<li>
Komputery i akcesoria
<ul class="submenu">
<li>Procesory</li>
<li>Monitory</li>
<li>Karty graficzne</li>
</ul>
</li>
<li>
Artykuły gospodarstwa domowego
<ul class="submenu">
<li>Lodówki</li>
<li>Telewizory</li>
<li>Pralki</li>
</ul>
</li>
<li>
Sprzęty gospodarstwa domowego
<ul class="submenu">
<li>Fotele</li>
<li>Materace</li>
<li>Kominki elektryczne</li>
</ul>
</li>
</ul>
Jeśli używać selektora potomka (kontekstowego), reguła CSS będzie zastosowana do wszystkich znaczników <li>, a każdy z nich będzie miał czerwoną obwódkę.
/* ❌ Nie rozwiązuje problemu */
.menu li {
border: 1px solid tomato;
}
Selektor dziecka pomaga rozwiązać ten problem, wybierając tylko te <li>, które są dziećmi (pierwszym zagnieżdżeniem) listy ul.menu.
/* ✅ Dokładnie to, czego potrzeba */
.menu > li {
border: 1px solid tomato;
}
Przykład:
Umożliwia stosowanie stylów do elementów o określonym atrybucie lub jego wartości.
Zastosuje style do wszystkich elementów, które mają określony atrybut.
<a href="https://htmlreference.io" title="Przewodnik po tagach">htmlreference.io</a>
<a href="https://cssreference.io" title="Przewodnik po tagach">cssreference.io</a>
<a href="https://www.youtube.com">YouTube </a>
Wybiera wszystkie linki z atrybutem title.
a[title] {
color: yellowgreen;
}
Przykład:
htmlreference.io cssreference.io YouTubeZastosuje style do wszystkich elementów, które mają atrybut o określonej wartości.
<a href="https://htmlreference.io" title="Przewodnik po tagach">htmlreference.io</a>
<a href="https://cssreference.io" title="Przewodnik po tagach">cssreference.io</a>
<a href="https://www.youtube.com">YouTube </a>
Wybiera wszystkie linki z atrybutem href i odpowiednią wartością.
/* Nietypowe formatowanie nawiasów klamrowych jest w porządku */
a[href="https://htmlreference.io"]
{
color: teal;
}
a[href="https://cssreference.io"]
{
color: orange;
}
a[href="https://www.youtube.com"]
{
color: tomato;
}
Przykład:
htmlreference.io cssreference.io YouTubeSelektory stanowe służą do użycia stylów dla elementów interaktywnych na określone zdarzenie, takie jak najechanie kursorem na link lub fokus z klawiatury.
Pseudoklasa definiuje określony stan elementu i jest dołączona do selektora znacznika, klasy itp. Pomiędzy selektorem a pseudoklasą nie ma spacji wskazującej, że są one ze sobą powiązane. Jeśli dodać spację, to pseudoklasa będzie dotyczyć wszystkich elementów w dokumencie.
selektor:pseudoklasa {
/* Właściwości */
}
Zostaje uruchamiana, gdy kursor myszy znajduje się w granicach elementu, na przykład gdy wskaźnik myszy znajduje się nad linkiem lub innym elementem.
<p>
Znaleźć doskonałą ściągawkę do tagów można
<a class="link" href="https://htmlreference.io">kliknąc w link</a>.
</p>
Dodamy do linku styl bazowy oraz styl po najechaniu kursorem.
.link {
color: teal;
}
.link:hover {
color: tomato;
}
Przykład:
Znaleźć doskonałą ściągawkę do tagów można kliknąc w link.
Pseudoklasy można zastosować do dowolnego selektora, w tym do selektorów kontekstowych.
<ul class="social-links">
<li><a class="link" href="https://twitter.com">Twitter</a></li>
<li><a class="link" href="https://www.instagram.com">Instagram</a></li>
<li><a class="link" href="https://www.facebook.com">Facebook</a></li>
</ul>
Dodamy styl podstawowy oraz styl po najechaniu kursorem do linku wewnątrz listy.
.social-links .link {
color: blue;
}
.social-links .link:hover {
color: blueviolet;
}
Przykład:
Pomocne: Powyższy zapis możemy przeczytać w taki sposób: „Gdy najedziesz kursorem na elementy z klasą link, które znajdują się wewnątrz elementu z klasą social-links". Selektory są czytane od prawej strony do lewej.
Jest aktywowana, gdy element interaktywny (link, przycisk, pole formularza) otrzymuje fokus podczas nawigacji po stronie za pomocą klawiatury (klawisz Tab).
<ul class="social-links">
<li><a class="link" href="https://twitter.com">Twitter</a></li>
<li><a class="link" href="https://www.instagram.com">Instagram</a></li>
<li><a class="link" href="https://www.facebook.com">Facebook</a></li>
</ul>
Dodamy podstawowy styl i styl fokusu do linku wewnątrz listy.
.social-links .link {
color: orange;
}
.social-links .link:focus {
color: orangered;
}
Aby wziąć pod uwagę najechanie kursorem i fokus, warto od razu stylizować oba stany.
.social-links .link {
color: orange;
}
/* Dwa i więcej selektorów są oddzielone przecinkami */
.social-links .link:hover,
.social-links .link:focus {
color: orangered;
}
Przykład:
Występuje, gdy element jest aktywowany. Na przykład link staje się aktywny, jeśli najechać na niego kursorem i kliknąć myszą. Pomimo faktu, że prawie każdy element może stać się aktywny, pseudoklasa :active jest używana głównie dla linków i przycisków.
<ul class="social-links">
<li><a class="link" href="https://twitter.com">Twitter</a></li>
<li><a class="link" href="https://www.instagram.com">Instagram</a></li>
<li><a class="link" href="https://www.facebook.com">Facebook</a></li>
</ul>
.social-links .link {
color: teal;
}
.social-links .link:hover,
.social-links .link:focus {
color: orange;
}
.social-links .link:active {
color: red;
}
Przykład:
Ta pseudoklasa jest aktywowana na linkach, które zostały już odwiedzone. Domyślnie linki są wyświetlane na niebiesko, a po odwiedzeniu zmieniają kolor na fioletowy.
<ul class="social-links">
<li><a href="https://twitter.com" class="link">Twitter</a></li>
<li><a href="https://www.instagram.com" class="link">Instagram</a></li>
<li><a href="https://www.facebook.com" class="link">Facebook</a></li>
</ul>
.social-links .link {
color: aqua;
}
.social-links .link:hover,
.social-links .link:focus {
color: aquamarine;
}
.social-links .link:active {
color: azure;
}
.social-links .link:visited {
color: burlywood;
}
Przykład:
Ustawia typ wskaźnika myszy, gdy znajduje się w granicach elementu. Typ kursora zależy od systemu operacyjnego i jego ustawień. Zmieniać typ kursora bez powodu to zły pomysł, to tylko wprowadzi w błąd użytkownika, gdy zamiast zwykłej dłoni lub szkła powiększającego zobaczy coś innego. W większości przypadków najlepiej zostawić go tak, jak jest. Najczęściej używamy właściwości cursor przy stylowaniu przycisków.
Najedź myszą na tekst (wartości właściwości), a kursor zmieni swój wygląd.
Używając właściwości color można zmienić kolor tekstu elementu. Nowoczesne przeglądarki obsługują kilka podstawowych sposobów opisywania kolorów: słowa kluczowe, rgb i hex.
<p class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
.text {
color: blanchedalmond;
}
Pomocne: Na serwisie htmlcolorcodes.com możesz zobaczyć wartości kolorów w różnych formatach.
Przykład:
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi, veritatis nihil alias iste odit similique sit eius optio veniam, impedit cumque fuga facere labore quo id necessitatibus quaerat rerum.
Właściwość background-color umożliwia zmianę koloru tła elementu.
<p class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
.text {
color: beige;
background-color: chocolate;
}
Przykład:
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi, veritatis nihil alias iste odit similique sit eius optio veniam, impedit cumque fuga facere labore quo id necessitatibus quaerat rerum.
Aby opisać kolor w stylach, można użyć zestawów zarezerwowanych słów . We współczesnym tworzeniu stron internetowych nie są już używane, ale są przydatne, jeśli trzeba szybko ustawić określony kolor.
p {
color: tomato;
}
Istnieją trzy podstawowe kolory: czerwony, zielony i niebieski. Mieszając je w różnych proporcjach, możesz uzyskać dowolny inny kolor.
Ten format używa funkcji rgb() do ustawienia wartości, która określa proporcje każdego z trzech kolorów podstawowych, po czym są one mieszane i uzyskuje się żądany kolor.
rgb(czerwony, zielony, niebieski)
Zakres wartości można określić jako liczby od 0 (brak koloru) do 255 (maksymalny udział). To jest główny sposób ustawiania koloru RGB.
/* Czysta czerwień: 255 czerwonego, 0 zielonego, 0 niebieskiego */
p {
color: rgb(255, 0, 0);
}
Lub procenty od0% do 100%.
/* Czysta czerwień: 100% czerwonego, 0% zielonego, 0% niebieskiego */
p {
color: rgb(100%, 0%, 0%);
}
Ten opis koloru jest oparty na liczbie szesnastkowej. Udział każdego z trzech kolorów podstawowych jest opisany dwoma liczbami.
Jako cyfry tego systemu liczbowego używany jest zestaw cyfr od 0 do 9 oraz łacińskie litery od A do F małymi lub dużymi literami.
/* Czysta czerwień: ff (100%) czerwonego, 00 (0%) zielonego, 00 (0%) niebieskiego */
p {
color: #ff0000;
}
/* Czysty zielony kolor: 00 (0%) czerwonego, ff (100%) zielonego, 00 (0%) niebieskiego */
p {
color: #00ff00;
}
/* Czysty niebieski kolor: 00 (0%) czerwonego, 00 (0%) zielonego, ff (100%) niebieskiego */
p {
color: #0000ff;
}
Głównym sposobem dodania przezroczystości do koloru jest użycie funkcji rgba(). W przeciwieństwie do rgb() dodaje się także przezroczystość (kanał alfa).
rgba(czerwony, zielony, niebieski, alfa)
Najczęściej przezroczystość jest określana liczbą od 0 (przezroczysty) do 1 (nieprzezroczysty).
/* Czysty czerwony kolor z przezroczystością 30% */
p {
background-color: rgba(255, 0, 0, 0.3);
}
Ale jest to również możliwe z wartościami procentowymi od 0% (przezroczysty) do 100% (nieprzezroczysty).
/* Czysty czerwony kolor z przezroczystością 30% */
p {
background-color: rgba(100%, 0%, 0%, 30%);
}
Interesująco Można również ustawić przezroczystość kolorów w formacie Hex, ale ze względu względu na złożoność takiego zapisu częściej używa się rgba().
Kaskadowość - to mechanizm, który zarządza końcowymi wartościami właściwości elementu, gdy stosuje się do niego wiele reguł CSS.
/* Jakiego koloru będzie tekst akapitów? */
p {
color: blue;
background-color: orange;
}
p {
color: teal;
}
Aby zebrać ostateczne style elementu i rozwiązać konflikty wartości właściwości, przeglądarka wykorzystuje dwa mechanizmy: specyficzność i dziedziczenie.
Dla każdej reguły CSS przeglądarka oblicza specyficzność (wagę) selektora. Jeśli właściwości z różnych reguł muszą być zastosowane do elementu i istnieją sprzeczne (identyczne) właściwości, używa się wartości właściwości z reguły z największą specyficznością selektora.
Wartość specyficzności składa się z czterech rang, których znaczenie rośnie od prawej strony do lewej.
Każdy selektor elementu i pseudoelementu dodaje jednostkę do czwartej rangi.
<article>
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
<a href="">Czytaj więcej...</a>
</article>
Kolor tekstu akapitu będzie pomarańczowy, ponieważ specyficzność drugiej reguły jest większa.
/* Specyficzność - 0 0 0 1 */
p {
color: green;
}
/* ✅ Specyficzność - 0 0 0 2 */
article > p {
color: orange;
}
Każdy selektor klasy, atrybutu i pseudoklasy dodaje jednostkę do trzeciej rangi.
<article class="post">
<h1 class="post-title">Lorem ipsum dolor sit amet</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
<a href="" class="post-link">Czytaj więcej...</a>
</article>
Tekst nagłowka będzie miał kolor pomarańczowy, ponieważ specyficzność trzeciej reguły jest większa.
/* Specyficzność - 0 0 1 0 */
.post-title {
color: green;
}
/* Specyficzność - 0 0 1 1 */
.post > h1 {
color: red;
}
/* ✅ Specyficzność - 0 0 2 0 */
.post > .post-title {
color: orange;
}
Kolor tekstu linku będzie brązowy, ponieważ specyficzność piątej reguły jest większa.
/* Specyficzność - 0 0 0 1 */
a {
color: green;
}
/* Specyficzność - 0 0 1 0 */
.post-link {
color: orange;
}
/* Specyficzność - 0 0 1 1 */
a.post-link {
color: blue;
}
/* Specyficzność - 0 0 2 0 */
.post > .post-link {
color: red;
}
/* ✅ Specyficzność - 0 0 2 1 */
.post > a.post-link {
color: brown;
}
Każdy selektor identyfikatora dodaje jednostkę do drugiej rangi.
<article class="post">
<h1 class="post-title" id="title">Lorem ipsum dolor sit amet</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
<a href="" class="post-link">Czytaj więcej...</a>
</article>
Tekst nagłówka będzie miał kolor pomarańczowy, ponieważ specyficzność drugiej reguły jest większa.
/* Specyficzność - 0 0 1 0 */
.post-title {
color: green;
}
/* ✅ Specyficzność - 0 1 0 0 */
#title {
color: orange;
}
Style wbudowane dodają jednostkę do pierwszej rangi, mają największą specyficzność i nie można ich zastąpić za pomocą CSS.
<p style="color: green;">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
Jeśli specyficzność jest taka sama, wygrywa reguła, która znajduje się niżej w kodzie.
/* Trzy selektory elementów o tej samej specyficzności */
a {
color: teal;
}
a {
color: brown;
}
/* Ponieważ ta reguła jest niżej, do wszystkich linków zostanie zastosowany pomarańczowy kolor tekstu */
a {
color: orange;
}
eśli selektor wygląda jak A > B > C + X Y, warto przemyśleć czy nie da rady go uprościć. Im prostszy selektor, tym mniej problemów ze specyficznością. Dobrą zasadą jest używanie selektorów klasy. Atrybut class nie tylko pomaga uniknąć problemów ze specyficznością, ale także poprawia czytelność znaczników HTML.
Pierwszym podejściem jest przypisanie klasy do wspólnego bloku rodzica i użycie selektorów dziecka i potomka.
<article class="post">
<h1>Lorem ipsum dolor sit amet</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
<a href="">Czytaj więcej...</a>
</article>
Taki CSS działa dobrze, gdy znaczniki są proste. Jednak wraz ze wzrostem złożoności znaczników blokowych wygodne stylizowanie za pomocą selektorów znacznika staje się niemożliwe. Na przykład, jeśli post zawiera 5 linków, a nie jeden, punktowo wybrać jakiś link nie uda się lub selektor będzie zbyt złożony.
.post {
/* Style artykułu */
}
.post > h1 {
/* Style nagłówka */
}
.post > p {
/* Style tekstu */
}
.post > a {
/* Style linku */
}
.post > a:hover {
/* Style linku po najechaniu kursorem */
}
Drugie podejście polega na dodaniu klas opisowych do bloku rodzica i znajdujących się w nim znaczników.
<article class="post">
<h1 class="title">Lorem ipsum dolor sit amet</h1>
<p class="text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
<a class="link" href="">Czytaj więcej...</a>
</article>
Ten CSS dobrze się skaluje i jest dobrze obsługiwany. To jest punkt wyjścia do napisania dobrego CSS. Jednak wraz ze wzrostem złożoności znaczników mogą wystąpić drobne problemy ze specyficznością.
.post {
/* Style artykułu */
}
.post > .title {
/* Style nagłówka */
}
.post > .text {
/* Style tekstu */
}
.post > .link {
/* Style linku */
}
.post > .link:hover {
/* Style linku po najechaniu kursorem */
}
Trzecie podejście polega na przypisaniu bardzo konkretnych klas do bloku rodzica i do każdego znacznika w nim na zasadzie nazwa_rodzica-nazwa_dziecka.
<article class="post">
<h1 class="post-title">Lorem ipsum dolor sit amet</h1>
<p class="post-text">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
<a href="" class="post-link">Czytaj więcej....</a>
</article>
To podejście wykorzystuje proste selektory klas, nie trzeba myśleć o specyficzności. Taki CSS jest dobrze skalowalny i dobrze obsługiwany. Współczesny programista wykorzystuje różne odmiany tego podejścia podczas pisania stylów.
.post {
/* Style artykułu */
}
.post-title {
/* Style nagłówka */
}
.post-text {
/* Style tekstu */
}
.post-link {
/* Style linku */
}
.post-link:hover {
/* Style linku po najechaniu kursorem */
}
Pomocne: Nie ograniczaj się do jednego podejścia. Wszystkie trzy metody nazywania klas znaczników i stylów pisania mogą być używane razem, w zależności od sytuacji.
Specyficzność reguły można zwiększyć za pomocą słowa kluczowego !important, dodając go po wartości właściwości.
<p class="text" id="text-id">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
Wartość tej właściwości ma pierwszeństwo przed wszystkimi innymi, a tekst akapitu będzie miał kolor pomarańczowy.
p {
color: orange !important;
}
p#text-id.text {
color: blue;
}
Uwaga: Bardzo odradza się używanie !important we współczesnym programowaniu. Jedynym dopuszczalnym przypadkiem jest zastępowanie wartości właściwości, jeśli nie ma bezpośredniego dostępu do pliku ze stylami, na przykład styl z biblioteki.
Dziedziczenie genetyczne jest zwyczajowo widoczne w życiu. Na przykład wysocy rodzice często mają wysokie dzieci, kolor włosów jest często przenoszony i tak dalej. Coś w tym stylu jest również w CSS. Jeśli ustawić kolor tekstu rodzica na zielony, to jeśli jakakolwiek reguła nie zastąpi tej wartości, kolor tekstu wszystkich jej elementów potomków również będzie zielony.
Dziedziczenie to mechanizm, za pomocą którego wartości pewnych właściwości są przekazywane od przodka do jego potomków. Głównie dziedziczone są właściwości dekoracji tekstu, takie jak kolor. Jest to wygodne, ponieważ nie trzeba ustawiać stylów dla każdego potomka oddzielnie.
<article class="post">
<h1>Popularne w tym miesiącu</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
<a href="">Czytaj więcej...</a>
</article>
Zmienimy cały tekst postu na zielony.
.post {
color: green;
}
W narzędziach programistycznych, na karcie Styles na samym dole zobaczymy dziedziczenie dla akapitu i nagłówka.
W życiu nie wszystkie atrybuty rodziców są przekazywane dzieciom. Tak samo jest w CSS, nie każda właściwość jest dziedziczona domyślnie przez potomków. W rzeczywistości, gdyby wszystkie właściwości były dziedziczone, efekt byłby podobny do braku dziedziczenia, a wiele CSS musiałoby zostać napisanych, aby zresetować odziedziczone style i zastąpić to zachowanie.
Nie wszystkie elementy dziedziczą wartości właściwości od swoich przodków. Na przykład link nie dziedziczy koloru tekstu.
<article class="post">
<h1>Popularne w tym miesiącu</h1>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati commodi,
veritatis nihil alias iste odit similique sit eius optio veniam, impedit
cumque fuga facere labore quo id necessitatibus quaerat rerum.
</p>
<a href="" class="post-link">Czytaj więcej...</a>
</article>
Jeśli chcesz, aby post miał taki sam kolor jak reszta tekstu, można użyć specjalnej wartości inherit dla właściwości color, aby nie duplikować koloru w dwóch miejscach.
.post {
color: green;
}
.post-link {
color: inherit;
}
Pomocne: Wartość inherit mówi przeglądarce, że ma dziedziczyć wartość właściwości po przodku. W przypadku koloru preferowaną wartością jest currentColor (bieżący kolor).
Aby ustawić podstawowy (dominujący) kolor tekstu całego dokumentu, utwórz regułę dla znacznika <body> i dodaj właściwość color. Ten kolor będzie dziedziczony przez całą zawartość tekstową z wyjątkiem linków.
body {
color: #2a2a2a;
}
Właściwości użytkownika (CSS Custom Properties), znane również jako zmienne CSS, to kontenery dla wartości, określone w dokumencie CSS w celu powtórnego wykorzystania. Zmienne CSS ułatwiają używanie i zmienianie powtarzających się wartości w pliku stylów. Wspierane są natywnie przez przeglądarkę i nie potrzebują żadnych dodatkowych narzędzi.
index.html
<section class="section">
<h1 class="section-title">Section title</h1>
</section>
styles.css
.section {
/* Inne style */
border: 2px solid #3f51b5;
}
.section-title {
/* Inne style */
color: #3f51b5;
}
.section-title::before {
/* Inne style */
background-color: #3f51b5;
}
W podanym przykładzie wartość #3f51b5 występuje trzykrotnie. Przyjmijmy, że to główny kolor marki, który jest cały czas wykorzystywany na różnych podstronach strony internetowej. Jeżeli zmieni się kolor marki, będziemy musieli wszędzie zmienić tę wartość w dużym projekcie mogą to być setki miejsc. Najlepsze, co możemy zrobić, to używać opcji znajdź i zamień.
Z pomocą przychodzą zmienne CSS. Nazwa zmiennej jest czuła na wielkość liter i może zawiera litery łacińskie, cyfry, podkreślniki i pauzy. Utworzymy zmienną --brand-color do przechowywania koloru marki (#3f51b5) i będziemy z niej korzystać.
styles.css
:root {
--brand-color: #3f51b5;
}
Zmienne globalne, dostępne w innej dowolnej zasadzie, określane są w selektorze :root - bardziej specyficznym selektorze elementu <html>. Zadeklarowanie zmiennej zaczyna się od podwójnego łącznika --, za którym pojawia się jej nazwa w dowolnej notacji. Na przykład brand-color lub brandColor - to poprawne nazwy zmiennej. Najważniejsze, aby wszystkie zmienne w projekcie były w jednakowej notacji. Nazwa i wartość rozdzielane są dwukropkiem, a na końcu deklaracji wstawia się średnik.
Ciekawostka Deklaracja zmiennej to utworzenie nowej właściwości CSS, która jest dziedziczona, dlatego występuje wszędzie, ponieważ dowolny element staje się potomkiem elementu <html>.
W celu otrzymania dostępu do zmiennej przyjmowana jest wbudowana funkcja var(), której jako pierwszy argument przekazuje się nazwę zmiennej.
styles.css
:root {
--brand-color: #3f51b5;
}
.section {
/* Inne style */
border: 2px solid var(--brand-color);
}
.section-title {
/* Inne style */
color: var(--brand-color);
}
.section-title::before {
/* Inne style */
background-color: var(--brand-color);
}
Zrobiło się trochę więcej kodu, ale jest on bardziej elastyczny i czytelny a co najważniejsze łatwiejszy w utrzymaniu. Jeśli trzeba będzie zmienić kolor marki, wystarczy podmienić wartość zmiennej -brand-color i kolor zmieni się wszędzie, gdzie jest ona wykorzystywana.
Wskazówka: Zmienne CSS wykorzystuje się nie tylko do zapisywania palety kolorów projektu, można w nich przechowywać dowolne informacje, na przykład standardowe wielkości czcionek, promień obramowania, odstępny i pola, szerokości kontenerów, punkty zwrotne dla układu adaptacyjnego i tak dalej, to znaczy dowolne wartości, które wykorzystuje się ponownie w różnych zasadach CSS.
Funkcja var(nazwa_zmiennej, fallback) może przyjmować dwie wartości. Drugi argument to fallback - wartość, która będzie wykorzystywana, jeżeli zmienna, przekazana przez pierwszy argument, nie jest określona.
styles.css
.section {
border: 2px solid var(--brand-color, orange);
}
.section-title {
color: var(--brand-color, black);
}
.section-title::before {
background-color: var(--brand-color, tomato);
}
Wskazówka: Możliwość przekazania wartości domyślnej to po pierwsze możliwość, a nie obowiązkowe wymaganie przy wykorzystaniu zmiennych CSS. Nie ma potrzeby pokazywania wszędzie fallbacku.
Zmienna --brand-color jest globalna, dlatego że została określona w :root, to znaczy jest dostępna wszędzie w naszym pliku css. Jeżeli wartość będzie wykorzystywana tylko w określonej części strony, można tworzyć zmienne o lokalnym zasięgu widoczności. Będą dostępne tylko dla tego elementu i jego potomków, w którym były zadeklarowane.
<div class="alert">
<p class="alert-text">Alert text</p>
<svg class="alert-icon"></svg>
</div>
styles.css
.alert {
--alert-text-color: black;
--alert-accent-color: tomato;
}
.alert-text {
color: var(--alert-text-color);
border: 1px solid var(--alert-accent-color);
}
.alert-icon {
background-color: var(--alert-accent-color);
}
Zmienne można przedefiniowywać lokalnie przy pomocy innych wartości. W tym celu należy zadeklarować zmienną o takiej samej nazwie, co w przodku i wprowadzić do niej wymagane wartości.
<div class="alert">Default</div>
<div class="alert success">Success</div>
<div class="alert warning">Warning</div>
<div class="alert error">Error</div>
.alert {
--alert-text-color: black;
color: var(--alert-text-color);
}
.alert.success {
--alert-text-color: green;
}
.alert.warning {
--alert-text-color: orange;
}
.alert.error {
--alert-text-color: red;
}