Pliki CSS

Wstęp

W tej lekcji zajmiemy się tematem, o którym już kilkukrotnie wspominaliśmy w trakcie tego kursu, chodzi oczywiście o CSS.CSSto skrót odCascading Style Sheets, co jest tłumaczone na język polski jakoKaskadowe arkusze stylów. Czym są style miałeś się już okazję przekonać, a jak dokładnie wygląda CSS dowiesz się w tej lekcji.

Po co nam pliki CSS

Być może zastanawiasz się po co nam pliki CSS, skoro style możemy definiować poprzez atrybut style na elementach w kodzie HTML. Rozważmy następującą sytuację: mamy prostą stronę z jednym nagłówkiemh1i dwoma akapitami, następnie chcemy ustawić wielkość tekstu w paragrafach na20px. Oczywiście wiesz już, że można to zrobić w następujący sposób.

1234567 <h1>Nagłówek 1</h1><pstyle="font-size: 20px;"> Akapit 1.</p><pstyle="font-size: 20px;"> Akapit 2.</p>

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body>

&lt;h1&gt;Nagłówek 1&lt;/h1&gt;

&lt;p style="font-size: 20px;"&gt;

  Akapit 1.

&lt;/p&gt;

&lt;p style="font-size: 20px;"&gt;

  Akapit 2.

&lt;/p&gt;

</body>

</html>

Co prawda powyższy kod spełni nasze oczekiwania, jednak ma on kilka dużych wad. Po pierwsze zastanówmy się co w sytuacji, gdy będziemy chcieli dodać kolejne akapity, przecież nie będziemy tworzyć strony, która zawiera tylko dwa. W takim przypadku będziemy musieli tworzyć kolejne elementyp, a do każdego z nich kolejny raz dodawać takie same style. Zgodzisz się na pewno z tym, że jest to po prostu uciążliwe. Drugi problem polega na tym, że gdybyśmy w przyszłości chcieli zmienić wielkość tekstu, to wiązałoby się to ze zmianą stylów wszystkich elementówp, a może być ich bardzo wiele. Wynika z tego, że na takie zadanie musielibyśmy poświęcić wiele czasu, a ponadto istnieje duża szansa, że moglibyśmy się w jakimś miejscu pomylić podczas tak mozolnej pracy i nasza strona by po prostu nie wyglądałaby tak jak powinna.

Do tej pory wszystkie style definiowaliśmy lokalnie dla każdego z elementów, pora to zmienić. Opisanych powyżej problemów możemy unikną poprzez umieszczenie stylów w sekcjihead. Aby to zrobić musimy użyć tagustyle. Wygląda to następująco.

1 2 3 4 5 6 7 8 9101112131415161718192021 <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><style>p{font-size:20px;}</style></head><body><h1>Nagłówek 1</h1><p> Akapit 1.</p><p> Akapit 2.</p></body></html>

<!DOCTYPE html><html> <head> <title>Moja fajna strona</title> <meta charset="UTF-8"> <style> p { font-size: 20px; } </style> </head> <body> <h1>Nagłówek 1</h1> <p> Akapit 1. </p> <p> Akapit 2. </p> </body></html>

Sama zawartość tagu style wygląda następująco:

123 p{font-size:20px;}

Jak widzisz na początek wpisujemy nazwę elementu którego mają dotyczyć style. Jest to tak zwany selektor CSS. Nazwa elementu jest tylko jednym z przykładów selektora CSS, już niedługo poznasz kolejne. Po selektorze otwieramy nawiasy klamrowe{}i umieszczamy w nich dokładnie takie style jakie wcześniej pokazywaliśmy do atrybutu style elementu HTML. Aby kod wyglądał czytelnie, przyjęło się umieszczać każdą kolejną właściwość w nowej linii.

Rezultat powyższego przykładu jest taki sam jak poprzednio, a udało nam się uniknąć opisywanych wad. Teraz podczas dodawania kolejnego elementup, nie trzeba określać jego stylów. Otrzyma on je automatycznie, takie jakie sprecyzowaliśmy w tagustyle. Nie ma również problemu ze zmianą stylów, nawet jeśli będziesz miał wiele paragrafów na stronie, to aby zmienić wielkość ich tekstu, wystarczy to zrobić tylko w jednym miejscu.

Zwróć również uwagę na fakt, iż elementypnie posiadają już atrybutustyle, definiujemy je w tagustylew sekcjihead.

Co prawda użycie tagustylejest o wiele lepszym pomysłem niż osobne tworzenie stylów dla każdego z elementów przez atrybutstyle, jednak to rozwiązanie ma jeszcze wady. Jak wiesz, znaczna większość stron internetowych nie składa się z jednego pliku HTML. Najczęściej jest to wiele plików, które tworzą kolejne podstrony. Już nawet w tym kursie, w lekcji dotyczącej linków, zakładaliśmy, że strona składała się z dwóch plików.

Jeśli chcemy, aby wszystkie nasze podstrony były spójne, powinniśmy zastosować te same style. Oczywiście każda ze stron może mieć swoje własne dodatkowe style, ale dobrze gdy na przykład standardowy tekst na każdej z podstron ma tą samą wielkość.

Gdy umieszczamy style w elemencie style w sekcjihead, musimy to robić dla każdej z podstron, należy też zadbać o to, aby style każdej z nich były ze sobą wspólne. Dochodzimy więc do tych samych problemów, co poprzednio jednak tym razem nie dotyczą one pojedynczych elementów, a całych podstron.

Jak się być może domyślasz, rozwiązaniem tego problemu są pliki CSS zawierające style, które następnie importujemy w sekcjiheadkażdej z podstron. Takie działanie jest pokazane w poniższym przykładzie.

Zawartość plikumain.css:

123 p{font-size:20px;}

Plikindex.html:

1 2 3 4 5 6 7 8 91011121314151617 <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><h1>Nagłówek 1</h1><p> Akapit 1.</p><p> Akapit 2.</p></body></html>

<!DOCTYPE html>

<html>

<head>

&lt;title&gt;Moja fajna strona&lt;/title&gt;

&lt;meta charset="UTF-8"&gt;

&lt;link rel="stylesheet" href="main.css"&gt;

</head>

<body>

&lt;h1&gt;Nagłówek 1&lt;/h1&gt;

&lt;p&gt;

  Akapit 1.

&lt;/p&gt;

&lt;p&gt;

  Akapit 2.

&lt;/p&gt;

</body>

</html>

Efekt powyższego przykładu jest ponownie taki sam jak poprzednio, jednak uniknęliśmy opisywanych wad. Oczywiście plik CSS może posiadać inną nazwę, ważne jednak, aby posiadał odpowiednie rozszerzenie pliku, czyli.cssna końcu nazwy.

Zadanie 1

Korzystając z plików CSS, dodaj styl dzięki któremu nagłówekh3będzie wyświetlany kursywą.

<!-- Plik index.html bez zmian. Zawartość pliku main.css:

h3 {

font-style: italic;

}

-->

Atrybut class

Zastanówmy się jeszcze nad następującą sytuacją. Mamy na naszej stronie wiele paragrafów, część z nich jest ważniejsza i chcemy, aby były one wyświetlane przy użyciu większej czcionki, natomiast pozostałe powinny zostać wyświetlone standardowo.

W powyżej opisanej sytuacji doskonale sprawdzi się atrybutclass, który pozwala nam nadać klasy na pewne elementy strony HTML. Nazwy tych klas mogą być w zasadzie dowolne, powinny jednak określać to, co dana klasa oznacza.

W poniższym pliku pierwszy akapit posiada klasębigger-font, to właśnie jego chcemy wyświetlić przy użyciu większej czcionki. Oczywiście na prawdziwej stronie akapitów będzie znacznie więcej.

123456 <pclass="bigger-font"> Akapit 1.</p><p> Akapit 2.</p>

Do tej pory poznałeś selektor CSS, który był nazwą elementu HTML, co ciekawe selektorem może być również nazwa klasy. W takim przypadku najpierw piszemy kropkę, a następnie nazwę klasy.

Kod CSS który spowoduje zwiększenie czcionki tylko elementów, które posiadają klasębigger-fontwygląda następująco:

123 .bigger-font{font-size:150%;}
123456 <pclass="bigger-font"> Akapit 1.</p><p> Akapit 2.</p>

<!DOCTYPE html>

<html>

<head>

&lt;title&gt;Moja fajna strona&lt;/title&gt;

&lt;meta charset="UTF-8"&gt;

&lt;link rel="stylesheet" href="main.css"&gt;

</head>

<body>

&lt;p class="bigger-font"&gt;

  Akapit 1.

&lt;/p&gt;

&lt;p&gt;

  Akapit 2.

&lt;/p&gt;

&lt;p class="bigger-font"&gt;

  Akapit 3.

&lt;/p&gt;

&lt;p&gt;

  Akapit 4.

&lt;/p&gt;

</body>

</html>

Przy pomocy atrybutu class możemy przypisać wiele klas do jednego elementu, wystarczy je po prostu oddzielić spacją.

123 <pclass="c1 c2 c3"> Akapit 1.</p>

Zadanie 2

Dodaj klasy do elementów, tak aby pierwszy i ostatni akapit zostały wyświetlone większą czcionką. Styl drugiego akapitu nie powinien ulec zmianie.

Nie dodawaj stylów ani nie modyfikuj pliku CSS.

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body>

&lt;p class="lead"&gt;

  Akapit 1.

&lt;/p&gt;

&lt;p&gt;

  Akapit 2.

&lt;/p&gt;

&lt;p class="lead"&gt;

  Akapit 3.

&lt;/p&gt;

</body>

</html>

Ponowne spotkanie z atrybutem id

Z atrybutemidmieliśmy się okazję już spotkać w tym kursie. Miało to miejsce w lekcji dotyczącej linków, a dokładniej linków do aktualnej strony, których kliknięcie powodowało przeniesienie do odpowiedniego elementu na stronie.

Przypomnijmy jeszcze kod HTML pokazujący to zagadnienie.

123456789 <ahref="#links-description">Linki HTML</a><p> Pozostała, długa treść strony.</p><pid="links-description"> Opis linków HTML.</p>

Jak widzisz wartością atrybutuhrefjest#links-description, które wskazuje na elementpzidrównymlinks-description. Przypominamy to wszystko, ponieważ wartościidmogą być również używane jako selektory CSS. Selektor taki wygląda dokładnie tak jak zawartość atrybutuhrefw powyższym przykładzie, czyli#nazwa-id.

Aby dodać style do paragrafu z opisem linków HTML z powyższego przykładu, możemy użyć następującego kodu CSS.

123 #links-description{font-weight:bold;}
123 <pid="links-description"> Opis linków HTML.</p>

<!DOCTYPE html><html> <head> <title>Moja fajna strona</title> <meta charset="UTF-8"> <link rel="stylesheet" href="main.css"> </head> <body> <p> Pozostała, długa treść strony. </p> <p id="links-description"> Opis linków HTML. </p> </body></html>

Porównanie pokazanych selektorów

W tej lekcji miałeś okazję poznać trzy typy selektorów:

  • nazwa elementu, np.p;

  • nazwa klasy nadana na element poprzez atrybutclass, np..klasa;

  • nazwa id, np.#identyfikator.

Pomiędzy tymi selektorami są pewne różnice. Na początek warto wspomnieć o tym, że selektory korzystające z nazwy elementu lub jego klasy mogą odwoływać się do wielu elementów na stronie, nic nie stoi na przeszkodzie, aby przypisać kilku elementom taką samą klasę. W przypadkuidsprawa wygląda inaczej. Wartość ta powinna być unikalna w obrębie strony HTML, czyli tylko jeden element strony powinien posiadać określoną wartośćid. Jeśli przypiszesz to samoidkilku elementom, to strona nie będzie działać poprawnie. To w czym będą objawiać się problemy zależy już od konkretnej przeglądarki internetowej.

Druga różnica związana jest z nadpisywaniem stylów. Zastanów się jakie tło będzie posiadał paragraf w poniższym przykładzie.

1 2 3 4 5 6 7 8 9101112 #my-id{background-color:red;}.my-class{background-color:blue;}p{background-color:green;font-weight:bold;}
123 <pid="my-id"class="my-class"> Przykładowy paragraf.</p>

<!DOCTYPE html><html> <head> <title>Moja fajna strona</title> <meta charset="UTF-8"> <link rel="stylesheet" href="main.css"> </head> <body> <p id="my-id" class="my-class"> Przykładowy paragraf. </p> </body></html>

Jak widzisz używamy 3 selektorów, każdy z nich odwołuje się do tego samego elementu i każdy określa inną wartość koloru tła. W takich sytuacjach przeglądarka zastosuje ten styl, którego selektor jest najdokładniejszy, czyli można powiedzieć, że odwołuje się do najmniejszej grupy. Jest to właściwie dość uproszczona definicja, jednak w większości przypadków w zupełności wystarcza.

W naszym przykładzie zostaną ustawione style ustawione przez selektor korzystający zid. Gdyby go nie było, to styl ustawiony przez selektor korzystający z klasy, natomiast najmniejszy priorytet mają style ustawione przez selektory korzystające z nazwy tagu.

W przypadku gdy oba selektory mają ten sam priorytet i oba ustawiają ten sam styl, ale z inną wartością, to zostaną użyte style załadowane najpóźniej, czyli znajdujące się na dole pliku.

Właściwośćfont-weightustawiona przy pomocy selektora o najniższym priorytecie nie została nadpisana, więc jest ona używana podczas wyświetlania elementu.

Zadanie 3

W tym zadaniu nadpiszemy style. Twoim celem jest takie napisanie kodu, aby pierwszy akapit został wyświetlony w kolorze ciemno zielonym (DarkGreen). Nie używaj atrybutustyleoraz nie modyfikuj wyglądu pozostałych akapitów.

<!DOCTYPE html>

<html>

<head>

&lt;meta charset="UTF-8"&gt;

&lt;title&gt;Strona tworzona w trakcie kursu HTML&lt;/title&gt;

</head>

<body>

&lt;p class="dark-green"&gt;

  Akapit 1.

&lt;/p&gt;

&lt;p&gt;

  Akapit 2.

&lt;/p&gt;

&lt;p&gt;

  Akapit 3.

&lt;/p&gt;

</body>

</html>

<!-- Do pliku main.css dodaj:

.dark-green {

color: DarkGreen;

}

-->

Pliki CSS

Wstęp

W tej lekcji zajmiemy się tematem, o którym już kilkukrotnie wspominaliśmy w trakcie tego kursu, chodzi oczywiście o CSS.CSSto skrót odCascading Style Sheets, co jest tłumaczone na język polski jakoKaskadowe arkusze stylów. Czym są style miałeś się już okazję przekonać, a jak dokładnie wygląda CSS dowiesz się w tej lekcji.

Po co nam pliki CSS

Być może zastanawiasz się po co nam pliki CSS, skoro style możemy definiować poprzez atrybut style na elementach w kodzie HTML. Rozważmy następującą sytuację: mamy prostą stronę z jednym nagłówkiemh1i dwoma akapitami, następnie chcemy ustawić wielkość tekstu w paragrafach na20px. Oczywiście wiesz już, że można to zrobić w następujący sposób.

1234567 <h1>Nagłówek 1</h1><pstyle="font-size: 20px;"> Akapit 1.</p><pstyle="font-size: 20px;"> Akapit 2.</p>

Uruchom przykład

Co prawda powyższy kod spełni nasze oczekiwania, jednak ma on kilka dużych wad. Po pierwsze zastanówmy się co w sytuacji, gdy będziemy chcieli dodać kolejne akapity, przecież nie będziemy tworzyć strony, która zawiera tylko dwa. W takim przypadku będziemy musieli tworzyć kolejne elementyp, a do każdego z nich kolejny raz dodawać takie same style. Zgodzisz się na pewno z tym, że jest to po prostu uciążliwe. Drugi problem polega na tym, że gdybyśmy w przyszłości chcieli zmienić wielkość tekstu, to wiązałoby się to ze zmianą stylów wszystkich elementówp, a może być ich bardzo wiele. Wynika z tego, że na takie zadanie musielibyśmy poświęcić wiele czasu, a ponadto istnieje duża szansa, że moglibyśmy się w jakimś miejscu pomylić podczas tak mozolnej pracy i nasza strona by po prostu nie wyglądałaby tak jak powinna.

Do tej pory wszystkie style definiowaliśmy lokalnie dla każdego z elementów, pora to zmienić. Opisanych powyżej problemów możemy unikną poprzez umieszczenie stylów w sekcjihead. Aby to zrobić musimy użyć tagustyle. Wygląda to następująco.

1 2 3 4 5 6 7 8 9101112131415161718192021 <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><style>p{font-size:20px;}</style></head><body><h1>Nagłówek 1</h1><p> Akapit 1.</p><p> Akapit 2.</p></body></html>

Uruchom przykład

Sama zawartość tagu style wygląda następująco:

123 p{font-size:20px;}

Jak widzisz na początek wpisujemy nazwę elementu którego mają dotyczyć style. Jest to tak zwany selektor CSS. Nazwa elementu jest tylko jednym z przykładów selektora CSS, już niedługo poznasz kolejne. Po selektorze otwieramy nawiasy klamrowe{}i umieszczamy w nich dokładnie takie style jakie wcześniej pokazywaliśmy do atrybutu style elementu HTML. Aby kod wyglądał czytelnie, przyjęło się umieszczać każdą kolejną właściwość w nowej linii.

Rezultat powyższego przykładu jest taki sam jak poprzednio, a udało nam się uniknąć opisywanych wad. Teraz podczas dodawania kolejnego elementup, nie trzeba określać jego stylów. Otrzyma on je automatycznie, takie jakie sprecyzowaliśmy w tagustyle. Nie ma również problemu ze zmianą stylów, nawet jeśli będziesz miał wiele paragrafów na stronie, to aby zmienić wielkość ich tekstu, wystarczy to zrobić tylko w jednym miejscu.

Zwróć również uwagę na fakt, iż elementypnie posiadają już atrybutustyle, definiujemy je w tagustylew sekcjihead.

Co prawda użycie tagustylejest o wiele lepszym pomysłem niż osobne tworzenie stylów dla każdego z elementów przez atrybutstyle, jednak to rozwiązanie ma jeszcze wady. Jak wiesz, znaczna większość stron internetowych nie składa się z jednego pliku HTML. Najczęściej jest to wiele plików, które tworzą kolejne podstrony. Już nawet w tym kursie, w lekcji dotyczącej linków, zakładaliśmy, że strona składała się z dwóch plików.

Jeśli chcemy, aby wszystkie nasze podstrony były spójne, powinniśmy zastosować te same style. Oczywiście każda ze stron może mieć swoje własne dodatkowe style, ale dobrze gdy na przykład standardowy tekst na każdej z podstron ma tą samą wielkość.

Gdy umieszczamy style w elemencie style w sekcjihead, musimy to robić dla każdej z podstron, należy też zadbać o to, aby style każdej z nich były ze sobą wspólne. Dochodzimy więc do tych samych problemów, co poprzednio jednak tym razem nie dotyczą one pojedynczych elementów, a całych podstron.

Jak się być może domyślasz, rozwiązaniem tego problemu są pliki CSS zawierające style, które następnie importujemy w sekcjiheadkażdej z podstron. Takie działanie jest pokazane w poniższym przykładzie.

Zawartość plikumain.css:

123 p{font-size:20px;}

Plikindex.html:

1 2 3 4 5 6 7 8 91011121314151617 <!DOCTYPE html><html><head><title>Moja fajna strona</title><metacharset="UTF-8"><linkrel="stylesheet"href="main.css"></head><body><h1>Nagłówek 1</h1><p> Akapit 1.</p><p> Akapit 2.</p></body></html>

Uruchom przykład

Efekt powyższego przykładu jest ponownie taki sam jak poprzednio, jednak uniknęliśmy opisywanych wad. Oczywiście plik CSS może posiadać inną nazwę, ważne jednak, aby posiadał odpowiednie rozszerzenie pliku, czyli.cssna końcu nazwy.

Zadanie 1

Korzystając z plików CSS, dodaj styl dzięki któremu nagłówekh3będzie wyświetlany kursywą.

Rozwiąż zadanie

Atrybut class

Zastanówmy się jeszcze nad następującą sytuacją. Mamy na naszej stronie wiele paragrafów, część z nich jest ważniejsza i chcemy, aby były one wyświetlane przy użyciu większej czcionki, natomiast pozostałe powinny zostać wyświetlone standardowo.

W powyżej opisanej sytuacji doskonale sprawdzi się atrybutclass, który pozwala nam nadać klasy na pewne elementy strony HTML. Nazwy tych klas mogą być w zasadzie dowolne, powinny jednak określać to, co dana klasa oznacza.

W poniższym pliku pierwszy akapit posiada klasębigger-font, to właśnie jego chcemy wyświetlić przy użyciu większej czcionki. Oczywiście na prawdziwej stronie akapitów będzie znacznie więcej.

123456 <pclass="bigger-font"> Akapit 1.</p><p> Akapit 2.</p>

Do tej pory poznałeś selektor CSS, który był nazwą elementu HTML, co ciekawe selektorem może być również nazwa klasy. W takim przypadku najpierw piszemy kropkę, a następnie nazwę klasy.

Kod CSS który spowoduje zwiększenie czcionki tylko elementów, które posiadają klasębigger-fontwygląda następująco:

123 .bigger-font{font-size:150%;}
123456 <pclass="bigger-font"> Akapit 1.</p><p> Akapit 2.</p>

Uruchom przykład

Przy pomocy atrybutu class możemy przypisać wiele klas do jednego elementu, wystarczy je po prostu oddzielić spacją.

123 <pclass="c1 c2 c3"> Akapit 1.</p>

Zadanie 2

Dodaj klasy do elementów, tak aby pierwszy i ostatni akapit zostały wyświetlone większą czcionką. Styl drugiego akapitu nie powinien ulec zmianie.

Nie dodawaj stylów ani nie modyfikuj pliku CSS.

Rozwiąż zadanie

Ponowne spotkanie z atrybutem id

Z atrybutemidmieliśmy się okazję już spotkać w tym kursie. Miało to miejsce w lekcji dotyczącej linków, a dokładniej linków do aktualnej strony, których kliknięcie powodowało przeniesienie do odpowiedniego elementu na stronie.

Przypomnijmy jeszcze kod HTML pokazujący to zagadnienie.

123456789 <ahref="#links-description">Linki HTML</a><p> Pozostała, długa treść strony.</p><pid="links-description"> Opis linków HTML.</p>

Jak widzisz wartością atrybutuhrefjest#links-description, które wskazuje na elementpzidrównymlinks-description. Przypominamy to wszystko, ponieważ wartościidmogą być również używane jako selektory CSS. Selektor taki wygląda dokładnie tak jak zawartość atrybutuhrefw powyższym przykładzie, czyli#nazwa-id.

Aby dodać style do paragrafu z opisem linków HTML z powyższego przykładu, możemy użyć następującego kodu CSS.

123 #links-description{font-weight:bold;}
123 <pid="links-description"> Opis linków HTML.</p>

Uruchom przykład

Porównanie pokazanych selektorów

W tej lekcji miałeś okazję poznać trzy typy selektorów:

  • nazwa elementu, np.p;

  • nazwa klasy nadana na element poprzez atrybutclass, np..klasa;

  • nazwa id, np.#identyfikator.

Pomiędzy tymi selektorami są pewne różnice. Na początek warto wspomnieć o tym, że selektory korzystające z nazwy elementu lub jego klasy mogą odwoływać się do wielu elementów na stronie, nic nie stoi na przeszkodzie, aby przypisać kilku elementom taką samą klasę. W przypadkuidsprawa wygląda inaczej. Wartość ta powinna być unikalna w obrębie strony HTML, czyli tylko jeden element strony powinien posiadać określoną wartośćid. Jeśli przypiszesz to samoidkilku elementom, to strona nie będzie działać poprawnie. To w czym będą objawiać się problemy zależy już od konkretnej przeglądarki internetowej.

Druga różnica związana jest z nadpisywaniem stylów. Zastanów się jakie tło będzie posiadał paragraf w poniższym przykładzie.

1 2 3 4 5 6 7 8 9101112 #my-id{background-color:red;}.my-class{background-color:blue;}p{background-color:green;font-weight:bold;}
123 <pid="my-id"class="my-class"> Przykładowy paragraf.</p>

Uruchom przykład

Jak widzisz używamy 3 selektorów, każdy z nich odwołuje się do tego samego elementu i każdy określa inną wartość koloru tła. W takich sytuacjach przeglądarka zastosuje ten styl, którego selektor jest najdokładniejszy, czyli można powiedzieć, że odwołuje się do najmniejszej grupy. Jest to właściwie dość uproszczona definicja, jednak w większości przypadków w zupełności wystarcza.

W naszym przykładzie zostaną ustawione style ustawione przez selektor korzystający zid. Gdyby go nie było, to styl ustawiony przez selektor korzystający z klasy, natomiast najmniejszy priorytet mają style ustawione przez selektory korzystające z nazwy tagu.

W przypadku gdy oba selektory mają ten sam priorytet i oba ustawiają ten sam styl, ale z inną wartością, to zostaną użyte style załadowane najpóźniej, czyli znajdujące się na dole pliku.

Właściwośćfont-weightustawiona przy pomocy selektora o najniższym priorytecie nie została nadpisana, więc jest ona używana podczas wyświetlania elementu.

Zadanie 3

W tym zadaniu nadpiszemy style. Twoim celem jest takie napisanie kodu, aby pierwszy akapit został wyświetlony w kolorze ciemno zielonym (DarkGreen). Nie używaj atrybutustyleoraz nie modyfikuj wyglądu pozostałych akapitów.

Rozwiąż zadanie

Podsumowanie

W tej lekcji zajęliśmy się bardzo szerokim zagadnieniem jakim bez wątpienia jest CSS. Na początek dowiedziałeś się jakie są wady stosowania stylów bezpośrednio na elementach HTML i jak rozwiązać te problemy przy pomocy stylów umieszczonych w plikach CSS. Następnie zajęliśmy się selektorami korzystającymi z atrybutówclassorazid, a na koniec porównaliśmy 3 typy poznanych selektorów.

Tak jak już wspominaliśmy, CSS jest bardzo szerokim zagadnieniem i w tym kursie poruszamy tylko jego najważniejsze podstawy. Gdy już opanujesz dobrze materiał omawiany w kursie, możesz dokładniej zgłębić się w ten temat. Na początku przygody z HTML zbyt dokładne omawianie CSS, jest według nas bezcelowe.

results matching ""

    No results matching ""