Wypróbuj

Nozbe - get things done

i zwiększ swoją produktywność

Struktura arkusza stylów CSS za pomocą selektorów

3

W związku z tym, że jest to ostatni wpis z serii przygotowawczej do egzaminu MCSD 70-480 oraz z uwagi na fakt, że o selektorach sporo napisałem już w poprzednim poście, dziś raczej krótko, zwięźle i na temat. Zapoznamy się dziś w takim razie ze sposobami odnoszenia się do elementów w arkuszach CSS, dowiemy się jak implementować dziedziczenie styli oraz jak je nadpisywać, przyjrzymy się też sposobom na wykorzystanie pseudo-klas i pseudo-elementów. Dzięki temu dowiemy się jak powinna wyglądać struktura arkusza stylów CSS. Zapraszam do lektury!

Odwołania do elementów za pomocą selektorów CSS

Tutaj mała powtórka z poprzedniego wpisu. Tak jak się dowiedzieliśmy już, do elementów w CSS możemy odnosić się generalnie poprzez ich nazwę, identyfikator lub klasę. Poniżej przykład:

div { height: 50px; }
.header { text-decoration: underline; }
#paragraph { color: green; }

Dodatkowo możemy być bardziej precyzyjni, oprócz nazwy klasy lub identyfikatora podając nazwę elementu:

h1.header { text-decoration: underline; }

Możemy też nadawać jeden styl wielu elementom, wymieniając je po przecinku:

h1,h2,h3,h4 { text-decoration: underline; }

Powyższa zasada ma też oczywiście zastosowanie do klas.

Z poprzedniego wpisu, wiemy też, że w jQuery możemy wyszukiwać elementy na podstawie wartości wybranego przez nas atrybutu elementu. Tutaj również mamy tę możliwość:

[id='paragraph'] { color: red; }

Przykład może nie najlepszy bo do referencji po identyfikatorze mamy opisany wcześniej selektor z „#” ale to pokazuje, że podany sposób również odnosi się do arkuszy styli CSS.

Implementacja dziedziczenia

We wczorajszym wpisie wspomniałem o selektorach, które nazwałem „zależnymi”. Te właśnie selektory służą w arkuszach styli CSS do implementacji dziedziczenia. Spójrzmy na taki przypadek:

div { color: red; }
div p { text-decoration: underline; }

W tym przypadku, mając element <div> oraz w jego wnętrzu element <p>, w momencie kiedy elementowi <div>, przypisaliśmy czerwony kolor tekstu, element <p> dziedziczy go. Spójrzmy jednak na taki przypadek (na początek kod HTML):

&lt;div&gt;
    &lt;p&gt;test1&lt;/p&gt;
    &lt;p id=&quot;paragraph&quot;&gt;test2&lt;/p&gt;
&lt;/div&gt;

Rozważmy teraz następujące style CSS:

div { color: red; }
div #paragraph { color: blue }
div p { text-decoration: underline; }

Efekt tego będzie taki, że „test1” wyświetlony zostanie na czerwono, a „test2” na niebiesko – elementy <p> nadal dziedziczą kolor z elementu <div> ale nadpisujemy kolor elementu o identyfikatorze „paragraph”. Jeśli teraz chcielibyśmy spowodować, że dziedziczenie koloru jest ważniejsze niż wszelkie nadpisania, style wyglądałyby na przykład tak:

div { color: red; }
div #paragraph { color: blue }
div p {
    color: inherit !important;
    text-decoration: underline;
}

Spójrzmy na linię czwartą – do właściwości ‚color’ przypisujemy wartość ‚inherit’ czyli z angielska „odziedzicz”. Wszystko pięknie, tyle że ta wartość jest domyślnie przypisana każdej nieokreślonej w arkuszu właściwości. Aby wymusić użycie tego koloru we wszystkich elementach <p> dziedziczących z <div>, odrzucając wszelkie próby nadpisania, użyte zostało wyrażenie „!important”.

Wyrażenia „!important” powinno się używać z rozwagą i najlepiej go nie nadużywać, ponieważ może to powodować nieoczekiwane zachowanie styli (czytaj: „dlaczego zmieniam kolor tego elementu i nic się nie dzieje??!!”).

Co do selektorów dziedziczenia, dodam tylko na koniec, że można w arkuszach CSS używać również pozostałych „zależnych” selektorów, a więc:

  • rodzic > potomek – przykład: „div > p”; pozwala określić styl dla wszystkich bezpośrednich potomków rodzica
  • rodzic potomek – przykład: „div p”; określamy styl dla każdego potomka podanego typu, nie ważne, w którym pokoleniu
  • element + następnik – przykład „div + p”; czyli styl dla każdego elementu <p> znajdujący się obok elementu <div>
  • element ~ rodzeństwo – przykład „div ~ p”; styl dla elementów podanego typu (w przykładzie <p>), które są rodzeństwem elementu (w przykładzie <div>; a więc takie, które mają wspólnego rodzica)

Pseudo-klasy i pseudo-elementy raz jeszcze

O tym też już wspominałem w poprzednim wpisie. Gwoli przypomnienia: pseudo-klasy to „modyfikatory” selektorów określające stan wskazywanego elementu. Pseudo-elementy natomiast, dotyczą samej treści elementu, na który wskazują.

Zarówno pseudo-klasy jak i pseudo-elementy stosujemy wraz z podstawowym selektorem (element, klasa, identyfikator itp.), doklejając go do selektora za pomocą dwukropka.

Poniżej lista pseudo-klas wraz z opisem:

  • :link – pseudo-klasa elementu <a>; pozwala nadać styl nie odwiedzonemu jeszcze linkowi
  • :visited – pseudo-klasa elementu <a>; pozwala nadać styl odwiedzonemu już linkowi
  • :active – pseudo-klasa elementu <a>; nadawanie styli aktywnym linkom
  • :hover – możliwość nadania stylu elementowi, na który najechał kursor myszy
  • :focus – ostylowanie elementu, na którym znajduje się aktualnie „focus”
  • :first-child – pozwala nadać styl pierwszemu potomkowi elementu wskazanego przez selektor
  • :lang(język) – nadawanie stylu elementom, które atrybut „lang” ustawiony mają na podany język

A teraz lista pseudo-elementów, jest ich tylko cztery:

  • :after oraz :before – używa się ich w korelacji z właściwością ‚content’ – pozwalają na dodanie treści przed lub za treścią zawartą we wskazanym przez selektor elemencie; ‚content’ przyjmuje wartości takie jak: ‚open-quote’, ‚close-quote’, ‚no-open-quote’, ‚no-close-quote’ – czyli cudzysłowie lub ich brak, można też podać wartość w postaci ciągu znaków lub funkcji „url()”
  • :first-line oraz :first-letter – pozwalają nadać styl odpowiednio pierwszej linii oraz pierwszej literze treści elementu wskazywanego przez selektor

Struktura arkusza stylów CSS – podsumowanie

Tak jak wspomniałem na początku, wpis być bardzo krótki. Mam nadzieję, że udało mi się zademonstrować jaka powinna być struktura arkusza stylów CSS. Egzamin już za dwa dni, także teraz powtórki 😉 Wiele osób poleca też obejrzenie Developing in HTML5 with JavaScript and CSS3 Jump Start, co niniejszym mam zamiar uczynić.

Mam nadzieję, że ten cykl komuś się przydał (są głosy, że tak…), no i oczywiście, że pomoże zdać ten egzamin również mi 😉 Tak czy owak, życzę wszystkim powodzenia!!

CHCESZ DARMOWEGO E-BOOKA?

Jeśli chcesz otrzymać mojego e-booka: Rozmowa Kwalifikacyjna - pytania z podstaw JavaScript zostaw mi swój e-mail:

Oprócz tego co poniedziałek dostaniesz maila z listą moich wpisów z poprzedniego tygodnia!