Ściąga programisty: CSS - mini kompedium

Wstęp
Kaskadowe arkusze stylów (ang. Cascading Style Sheets, w skrócie CSS) to język służący do opisu formy prezentacji (wyświetlania) stron WWW.

Arkusz stylów CSS to lista dyrektyw (tzw. reguł) ustalających w jaki sposób ma zostać wyświetlana przez przeglądarkę internetową zawartość wybranego elementu (lub elementów) (X)HTML lub XML.
Wymagana jest znajomość HTML lub XM.

Największą zaletą CSS jest umożliwienie rozdzielenia warstwy prezentacji od warstwy danych. Dzięki temu możliwe jest definiowanie wielu stylów dla tych samych danych

CSS został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji. Separacja ta zwiększa zakres dostępności witryny, zmniejsza zawiłość dokumentu, ułatwia wprowadzanie zmian w strukturze dokumentu.

CSS ułatwia także zmiany w renderowaniu strony w zależności od obsługiwanego medium (ekran, palmtop, dokument w druku, czytnik ekranowy). Stosowanie zewnętrznych arkuszy CSS daje możliwość zmiany wyglądu wielu stron naraz bez ingerowania w sam kod (X)HTML, ponieważ arkusze mogą być wspólne dla wielu dokumentów.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Składnia
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Arkusz stylów składa się z reguł określających styl dla wybranych elementów.
Reguła składa się z selektora oraz deklaracji.
Selektor określa grupę elementów (rzadziej pojedynczy element), którego ma dotyczyć deklaracja.
Deklaracja określa formatowanie i składa się z nazwy jednej z właściwości i jej wartości napisanej po dwukropku. Deklaracja musi być otoczona nawiasami klamrowymi.

selektor1, selektor2 { właściwość1: wartość1; właściwość2: wartość2; }

Przykład:
p { color: blue; }

Selektorem jest tutaj p, właściwością color, a wartością blue.

Selektory zapewniają możliwość opisania docelowej grupy elementów przez:
- nazwę elementu (np. „h1”)
- klasę elementu (np. „.elementy_menu”), także w połączeniu z nazwą elementu (np. „img.wyrownane_do_prawej”)
- id elementu (np. „#menu_lewe”)
- przodków danego elementu (np. „div#menu_lewe a” zostanie zastosowane do linków zawartych w elemencie div o id „menu_lewe”)
- stan linków określany przez pseudoklasy (:visited, :link, :active)
- inne pseudoklasy typograficzne (:first-line, :first-letter)

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Reguły stylów
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Atrybuty formatowania w języku CSS definiuje się za pomocą tzw. reguł stylów.

Reguła CSS składa się z:
- selektora - służy on do wyszukania elementu bądź grupy elementów w danym dokumencie HTML
- nawiasu klamrowego { }, który występuje zaraz po selektorze i w którym należy umieścić właściwości CSS
- właściwości CSS - za pomocą nich możemy określić co chcemy zmienić w wyglądzie danego elementu HTML
- wartości właściwości CSS - występują po właściwości, są podawane po dwukropku i określają w jaki sposób chcemy zmienić daną właściwość wyglądu elementu HTML. Na końcu wartości należy postawić średnik ;

Uwaga
Każda deklaracja składa się przynajmniej z jednego zespołu właściwość (ang. property) - wartość (ang. value), przy czym można podać dowolną liczbę, rozdzielając kolejne znakiem średnika (;). Średnik na końcu deklaracji nie jest konieczny.

Uwaga
Każda grupa elementów (znaczników) ma określony zespół cech CSS, które można jej przypisać, a każda cecha ma ściśle wyszczególnioną listę wartości, które może przyjąć.

Uwaga
Jeżeli dany styl CSS ma zawierać więcej niż jeden selektor, to kolejne selektory należy oddzielić od siebie przecinkiem ,

selektor, selektor {
  właściwość:wartość;
  właściwość:wartość;
  właściwość:wartość;
}

/* Ten tekst zostanie zignorowany przez przeglądarkę,
ale może zawierać informacje cenne dla projektanta arkusza CSS */

--------------------------------------------------------------------------------------------------------------------------------
Dołączania stylów do dokumentu
--------------------------------------------------------------------------------------------------------------------------------
-Styl lokalny
Styl lokalny pozwala na nadanie formatowania konkretnemu pojedynczemu elementowi strony. Dlatego właśnie styl tego rodzaju nazywa się także styl inline (ang. "w linii"), ponieważ jest wstawiany w tej samej linii, w której znajduje się element formatowany.

     <selektor style="właściwość1: wartość; właściwość2: wartość2...">...</selektor>

Przykład:     <p style="color: red">To jest jakiś tekst</p>

- Rozciąganie stylu
Znacznik <span>...</span> pozwala na objęcie pewnego większego fragmentu dokumentu. Pojedynczym znacznikiem <span>...</span> możemy objąć kilka różnych elementów, które są wyświetlane w linii (sam element SPAN tak właśnie jest wyświetlany).

      <span style="właściwość1: wartość; właściwość2: wartość2...">...</span>

Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy uzyskać.

Elementy wyświetlanie w linii (SPAN) nie mogą zawierać elementów blokowych, ale mogą zawierać inne elementy wyświetlane w linii oraz zwykły tekst.

Przykład:
      <span style="color: red">
      <b>To jest pogrubienie (element wyświetlany w linii) w ramach SPAN</b>,
      a to jest zwykły tekst - również wewnątrz span.
     </span>

- Wydzielone bloki
Element blokowy (DIV) może zawierać wewnątrz siebie zwykły tekst, jak również inne elementy blokowe. Został on pomyślany do tworzenia obszerniejszych struktur.

      <div style="właściwość1: wartość; właściwość2: wartość2...">...</div>

Fragment dokumentu wydzielony za pomocą bloku <div>...</div> możemy swobodnie formatować. Element ten tak dobrze nadaje się do osadzania stylów, ponieważ sam w sobie nie ma określonego żadnego formatowania, które mogłoby kolidować z efektem, jaki chcemy uzyskać. Metoda ta jest bardzo podobna do SPAN, lecz obejmuje zwykle większe fragmenty dokumentu (może zawierać w sobie różne znaczniki jak również inne bloki).

Przykład:
     <div style="background-color: yellow">
          <span style="color: red">
               <b>To jest pogrubienie w ramach DIV oraz SPAN i dlatego jest czerwone na żółtym tle</b>,
                a to jest zwykły tekst - również wewnątrz DIV i SPAN.
          </span>
                To jest zwykły tekst, ale tylko wewnątrz DIV - dlatego nie jest czerwony, ale ma żółte tło.
                <p>A to jest akapit (element blokowy) w ramach DIV.</p>
     </div>

- Wewnętrzny arkusz stylów
Wewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>).

      <head>
      (...)
            <style type="text/css">
                  selektor { właściwość1: wartość; cecha2: wartość2... }
                  selektor2 { właściwość2: wartość; cecha2: wartość2... }
                  (...)
            </style>
      (...)
     </head>

UWAGA
Znacznik STYLE może znajdować się tylko i wyłącznie w nagłówku dokumentu.

- Zewnętrzny arkusz stylów
Możliwość wstawiania zewnętrznego arkusza jest chyba jedną z największych zalet stosowania stylów. Pozwala nam to zdefiniować takie samo formatowanie określonych elementów na wielu stronach jednocześnie.

      <head>
          (...)
          <link rel="Stylesheet" type="text/css" href="style.css" />
          (...)
     </head>

W pojedynczym dokumencie (X)HTML można dołączyć dowolną liczbę zewnętrznych arkuszy stylów - każdy jako osobny element <link rel="Stylesheet" />. W przypadku konfliktów, ważniejsze będą deklaracje z arkusza dołączonego później.

Zewnętrzny arkusz stylów jest po prostu zwykłym plikiem tekstowym. Aby go utworzyć, wystarczy zwykły edytor tekstu.

UWAGA
Znacznik LINK może znajdować się tylko i wyłącznie w nagłówku dokumentu.

Należy pamiętać, że plik będący zewnętrznym arkuszem stylów musi mieć rozszerzenie *.css
Wstawienie białych znaków (spacje, tabulacje, znaki nowej linii) w arkuszu CSS nie ma wpływu na jego działanie. Dlatego możesz ułożyć wpisywane reguły CSS w taki sposób, aby były bardziej czytelne.

- Alternatywny arkusz stylów
Alternatywny arkusz stylów pozwala udostępnić użytkownikowi kilka wersji wyglądu strony do wyboru. Projektuje się wtedy kilka zewnętrznych arkuszy CSS, a następnie osadza w specjalny sposób, dzięki czemu w przeglądarce użytkownika pojawi się możliwość wyboru jednego spośród przygotowanych wyglądów.

     <head>
           <link rel="Stylesheet" type="text/css" href="style.css" title="Nazwa domyślna" />
           <link rel="Alternate stylesheet" type="text/css" href="style1.css" title="Nazwa 1" />
           <link rel="Alternate stylesheet" type="text/css" href="style2.css" title="Nazwa 2" />
           <link rel="Alternate stylesheet" type="text/css" href="style3.css" title="Nazwa 3" />
      (...)
     </head>

UWAGA
W przeglądarce Mozilla Firefox wyboru alternatywnego arkusza CSS można dokonać w menu "Widok/Styl strony", a w Operze - "Widok/Styl". Jeśli chcemy, aby niektóre arkusze nie były dostępne do podmiany przez użytkownika, wystarczy osadzić je w tradycyjny sposób, tzn. jako arkusze domyślne bez podania atrybutu title="...". Taki arkusz domyślny, nawet po wyborze przez użytkownika arkusza alternatywnego, nadal będzie wpływał na wygląd strony, a alternatywny zostanie do niego dopisany.

- Import arkusza stylów
Pozwala wczytać zewnętrzny arkusz stylów, przy czym może się on znajdować na tym samym serwerze (wtedy można podać względną ścieżkę dostępu) lub w dowolnym miejscu w obrębie całego Internetu (wtedy podajemy adres internetowy). Po wczytaniu, zostanie on automatycznie dołączony do strony.
Polecenie można wstawić zarówno w wewnętrznym jak i zewnętrznym arkuszu stylów.

     <style type="text/css">
           @import url(adres zewnętrznego arkusza stylów);
     </style>

Import arkusza stylów działa podobnie jak dołączenie zewnętrznego arkusza - w obu przypadkach reguły CSS są zapisane w osobnym pliku *.css.

Importowany arkusz stylów ma taki sam priorytet kaskadowości (ważności), jak arkusz do którego został zaimportowany. Jeśli chcemy, aby określony arkusz CSS był ważniejszy od wszystkich pozostałych zewnętrznych arkuszy, możemy go dołączyć poniżej innych odwołań do arkuszy lub zaimportować w wewnętrznym arkuszu.

Import arkuszy może również być przydatny, jeśli chcemy oszczędzić wstawiania dodatkowych znaczników <link rel="Stylesheet" />. W takim przypadku dołącza się tylko jeden zewnętrzny plik *.css, a w nim importuje pozostałe arkusze.

UWAGA
Wszystkie polecenia importu (może ich być kilka) muszą się znajdować zaraz na początku arkusza stylów, tzn. przed właściwymi regułami CSS, znajdującymi się w arkuszu, do którego następuje import!

--------------------------------------------------------------------------------------------------------------------------------
Kaskadowość stylów
--------------------------------------------------------------------------------------------------------------------------------
Kaskadowość stylów określa pierwszeństwo w oddziaływaniu na te same elementy strony stylów z różnych źródeł.
Jeśli w dokumencie znajduje się kilka źródeł stylów, pierwszeństwo mają te, które znajdują się "bliżej" formatowanego elementu.

Priorytet ważności stylów (pierwszeństwo) wygląda tak:

Styl lokalny (inline)
Rozciąganie stylu (SPAN)
Wydzielone bloki (DIV)
Wewnętrzny arkusz stylów
Import stylów do wewnętrznego arkusza
Zewnętrzny arkusz stylów
Import stylów do zewnętrznego arkusza
(Atrybuty prezentacyjne HTML - np. align="...", bgcolor="...", color="...", height="...", width="..." i inne)

Style o wyższym priorytecie ważności (na początku listy) mają pierwszeństwo w modyfikowaniu elementów dokumentu.
Style niżej w hierarchii mogą zmienić formatowanie jakiegoś elementu, tylko jeśli style o wyższym priorytecie nie dotyczą tego konkretnego elementu.

Jeżeli chodzi o zasady kaskadowości wewnątrz tego samego arkusza CSS, tzn. w przypadku, kiedy znajduje się w nim kilka osobnych reguł CSS o jednakowej szczegółowości (ważności), odnoszących się do tej samej cechy tego samego elementu, to ostateczny wpływ na formatowanie będą miały reguły umieszczone na końcu

Uwaga
Na szczególną uwagę zasługuje również fakt, że style CSS z dowolnego źródła zawsze są ważniejsze niż atrybuty prezentacyjne przypisane elementom bezpośrednio w kodzie HTML.
Polecenie dołączenia zewnętrznego arkusza powinno znajdować się w dokumencie wcześniej niż wewnętrzny arkusz. Odwrotna kolejność złamie zasady kaskadowości!

- Łamanie kaskadowości
Można świadomie zmienić zasady kaskadowości. Służy do tego polecenie !important. Jeżeli pojawi się ono w deklaracji stylu po wartości cechy, spowoduje to, że taka cecha będzie miała pierwszeństwo przed innymi, nawet jeśli ma niższy priorytet.

--------------------------------------------------------------------------------------------------------------------------------
Dziedziczenie stylów
--------------------------------------------------------------------------------------------------------------------------------
Z drzewem dokumentu związana jest własność dziedziczności stylów. Polega ona na tym, że elementy leżące niżej w hierarchii (potomkowie), jeśli nie zaznaczymy inaczej, dziedziczą (przejmują) atrybuty formatowania, które zostały nadane ich przodkom.

Uwaga
Niestety w niektórych przeglądarkach internetowych zdarza się błędna interpretacja dziedziczenia stylów. Dlatego zawsze sprawdzaj w praktyce zastosowanie tej własności.

--------------------------------------------------------------------------------------------------------------------------------
Selectory
--------------------------------------------------------------------------------------------------------------------------------
Reguły CSS nie zadziałają dopóki nie przypiszemy ich do określonych elementów html. Za powiązanie reguł CSS z elementami języka Html odpowiedzialne są tzw. selektory (ang. selector).
Posłużą do tego m.in same elementy html oraz atrybuty id i class.

Specyfikacja przewiduje wykorzystanie następujących rodzajów selektorów:

selektory proste,
selektory uniwersalne,
selektory potomka,
selektory dziecka,
selektory sąsiednie lub rodzeństwa,
selektory atrybutu,
selektory identyfikatora,
selektory klasy,
pseudoklasy,
pseudoelementy.

http://www.w3schools.com/cssref/css_selectors.asp

- Selektory proste

{

color:red;

font-size:14pt;

}

Selektorem jest znacznik języka XHTML/HTML przypisany do elementu, który chcesz w danym momencie formatować. Styl zdefiniowany dla selektora P będzie odnosił się wyłącznie do akapitów zamkniętych w znacznikach <p></p> i nie będzie wpływał na pozostałe elementy strony WWW.

- Selektory uniwersalne

{

background-color:white;

}

Zdarza się, że zachodzi potrzeba zdefiniowania jakiegoś typu formatowania w ten sposób, aby zadziałał on na cały dokument. Bardzo dobrym przykładem takiej sytuacji może być tło, które zazwyczaj powinno być identyczne dla całego dokumentu.
Warto zwrócić uwagę na to, że selektorem jest gwiazdka. Użycie gwiazdki zwalnia z wypisywania nazw poszczególnych selektorów.

- Selektory "potomka"
Jeżeli chcemy, aby jakiś fragment nagłówka był sformatowany według innych zasad, to należy arkusz uzupełnić o następującą konstrukcję:

H1 SPAN
{
    font-size:10pt;
}

Kod XHTML/HTML potrafiący skorzystać z selektora „potomka” będzie wyglądał następująco:

<h1>Nagłówek stopnia pierwszego</h1>
<h1>Nagłówek stopnia pierwszego <span>w którym zastosowałem selektor potomka</span></h1>

- Selektory "dziecka"
Selektory dziecka są wynikiem zależności panujących pomiędzy poszczególnymi znacznikami języka HTML.

P > SPAN
{
    font-style:italic;
    text-decoration:underline;
    color:green;
}

Dany styl zadziała w przypadku, gdy wewnątrz bloku tekstu zostanie umieszczony znacznik <span></span>.

<p>Dowolny tekst, w którym widać efekt działania <span>selektora dziecka</span>.</p>

W tym przypadku <span></ span > jest „dzieckiem” <p></p> i tylko w takiej sytuacji zostanie odpowiednio sformatowany.
Formatowaniu zostanie poddany tylko tekst znajdujący się wewnątrz znacznika <span></span>, który z kolei ograniczony jest przez <p></p>, natomiast inne elementy, które nie są „dziećmi” <p></p>, pomimo że również zamknięte są w <span></span>, pozostaną bez zmian.

- Selektory "rodzeństwa"
Opieramy się na zależnościach obowiązujących w języku XHTML/HTML.
Na podstawie tego rodzaju selektora możemy przypisać styl elementowi bezpośrednio sąsiadującemu z innymi.
By warunek został spełniony, oba selektory muszą mieć wspólnego „rodzica”.

P + SPAN
{
    font-style:italic;
    text-decoration:underline;
    color:green;
}

Zgodnie z tym, co napisałem powyżej, znaczniki <p> oraz <span> muszą ze sobą sąsiadować.

<p>To jest tekst akapitu.</p> <span>A tutaj działa selektor rodzeństwa.</span>

<span>Natomiast ten tekst, pomimo że jest zamknięty w span, już nie jest formatowany, bo nie sąsiaduje bezpośrednio z akapitem.</span>

W powyższym kodzie wyraźnie widać, iż blok tekstu sąsiaduje ze znacznikiem <span>, natomiast drugi znacznik <span> bezpośrednio nie sąsiaduje z <p>.

- Selektor atrybutu
Tworzymy za pomocą nazwy atrybutu.
Selektor odwołuje się do każdego elementu, który zawiera w sobie podany typ atrybutu.

     [atrybut] {właściwość:wartość;}

Przykład:
     [title] {color:red;}

     <div title="to jest atrybut title">
          tekst w tym elemencie jest koloru czerwonego, ponieważ ten element posiada atrybut "title"
    </div>

     <p id="atrybut_id">
          tekst w tym elemencie nie jest koloru czerwonego, ponieważ ten element nie posiada atrybutu "title"
     </p>

Możemy tak skonstruować selektor, aby odnosił się on do konkretnego znacznika i jego atrybutu.

     H1[title]
     {
          color:red;
     }

Przykład kodu:
     <h1 title="czarny">Pierwszy nagłówek z atrybutem</h1>
     <h1 title="czerwony">Drugi nagłówek z atrybutem</h1>
     <h1>Trzeci nagłówek bez atrybutów</h1>

Efektem będzie wyświetlenie wszystkich nagłówków stopnia pierwszego z atrybutem title za pomocą koloru czerwonego.
Natomiast nagłówki bez atrybutu zachowają domyślne formatowanie.

-- Selektor atrybutu o danej wartości
Można jeszcze dokładniej przypisać formatowanie i uzależnić je od wartości, jaką przybiera wybrany atrybut.
Selektor odwołuje się do każdego elementu, który zawiera w sobie podany typ atrybutu o dokładnie danej wartości.

     [atrybut="wartość"] { właściwość:wartość; }

Przykład:

     H1[title=czerwony] { color:red; }

Przykład kodu:

     <h1 title="czarny">Pierwszy nagłówek z atrybutem</h1>
     <h1 title="czerwony">Drugi nagłówek z atrybutem</h1>
     <h1>Trzeci nagłówek bez atrybutów</h1>

-- Selektor atrybutu o danym wyrazie
Tworzymy za pomocą nazwy atrybutu, który ma zawierać się w wartości danego atrybutu.
Selektor odwołuje się do każdego elementu, który zawiera w sobie podany typ atrybutu, którego wartość zawiera w sobie podany wyraz.

     [atrybut~="wyraz"] { właściwość:wartość; }

Uwaga
Podany wyraz (musi być on oddzielony spacją od pozostałych ciągów znaków).

Przykład:

     [title~="opis"] { color:red; }

    <div title="element z opisem">
          tekst w tym elemencie nie jest koloru czerwonego, ponieważ wartość atrybutu "title" w tym elemencie nie zawiera w sobie wyrazu "opis"
    </div>

    <p title="to-jest-opis">
           tekst w tym elemencie nie jest koloru czerwonego, ponieważ wartość atrybutu "title" w tym elemencie nie zawiera w sobie wyrazu "opis"
    </p>

    <div title="to jest opis">
           tekst w tym elemencie jest koloru czerwonego, ponieważ wartość atrybutu "title" w tym elemencie zawiera w sobie wyraz "opis"
    </div>

-- Selektor atrybutu o danym wyrazie z myślnikiem
Tworzymy za pomocą nazwy atrybutu, który ma znajdować się na początku wartości danego atrybutu wraz z myślnikiem.
Selektor odwołuje się do każdego elementu, który zawiera w sobie podany typ atrybutu, którego wartość zawiera w sobie (na samym początku) podany wyraz wraz z myślnikiem.

     [atrybut|="wyraz"] { właściwość:wartość; }

Przykład:

     [title~="opis"] { color:red; }

    <div title="opis-elementu-div">
            tekst w tym elemencie jest koloru czerwonego, ponieważ wartość atrybutu "title" w tym elemencie zawiera w sobie, na samym początku, wyraz "opis" wraz z myślnikiem
    </div>

    <p title="ten-element-div-zawiera-opis">
            tekst w tym elemencie nie jest koloru czerwonego, ponieważ wartość atrybutu "title" w tym elemencie nie zawiera w sobie, na samym początku, wyrazu "opis" wraz z myślnikiem
    </p>

    <div title="opis-elementu div">
            tekst w tym elemencie jest koloru czerwonego, ponieważ wartość atrybutu "title" w tym elemencie zawiera w sobie, na samym początku, wyraz "opis" wraz z myślnikiem
    </div>

-- Selektor atrybutu o danym ciągu znaków
Tworzymy za pomocą nazwy atrybutu, który ma zawierać się w wartości podanego atrybutu.
Selektor odwołuje się do każdego elementu, który zawiera w sobie podany typ atrybutu o podanym ciągu znaków zawierającym się w wartości danego atrybutu.

      [atrybut*="ciąg"] { właściwość:wartość; }

Przykład:

     [title*="opis"] { color:red; }

    <div title="element z opisem">
           tekst w tym elemencie jest koloru czerwonego, ponieważ wartość atrybutu "title" w tym elemencie zawiera w sobie ciąg znaków "opis"
    </div>

    <p title="to jest title">
           tekst w tym elemencie nie jest koloru czerwonego, ponieważ wartość atrybutu "title" w tym elemencie nie zawiera w sobie ciągu znaków "opis"
    </p>

    <div title="to jest opis">
           tekst w tym elemencie jest koloru czerwonego, ponieważ wartość atrybutu "title" w tym elemencie zawiera w sobie ciąg znaków "opis"
    </div>

-- Selektor atrybutu o danym początkowym ciągu
Tworzymy za pomocą nazwy atrybutu, który ma znajdować się na początku wartości danego atrybutu.
Selektor odwołuje się do każdego elementu, który zawiera w sobie podany typ atrybutu o podanym ciągu znaków znajdującym się na początku wartości danego atrybutu.

     [atrybut^="ciąg"] { właściwość:wartość; }

Przykład:

     [title^="opis"] { color:red; }

    <div title="opis elementu">
           tekst w tym elemencie jest koloru czerwonego, ponieważ atrybut "title" w tym elemencie zawiera w sobie, na samym początku, ciąg znaków "opis"
    </div>

    <p title="opisany">
          tekst w tym elemencie jest koloru czerwonego, ponieważ atrybut "title" w tym elemencie zawiera w sobie, na samym początku, ciąg znaków "opis"
    </p>

    <div title="element z opisem">
           tekst w tym elemencie nie jest koloru czerwonego, ponieważ atrybut "title" w tym elemencie nie zawiera w sobie, na samym początku, ciągu znaków "opis"
    </div>

-- Selektor atrybutu o danym początkowym ciągu
Tworzymy za pomocą nazwy atrybutu, który ma znajdować się na końcu wartości danego atrybutu.
Selektor odwołuje się do każdego elementu, który zawiera w sobie podany typ atrybutu o podanym ciągu znaków znajdującym się na końcu wartości danego atrybutu.

     [atrybut$="ciąg"] { właściwość:wartość; }

Przykład:

     [title$="opis"] { color:red; }

     <div title="to jest opis">
           tekst w tym elemencie jest koloru czerwonego, ponieważ atrybut "title" w tym elemencie zawiera w sobie, na samym końcu, ciąg znaków "opis"
     </div>

     <p title="toJESTopis">
                tekst w tym elemencie jest koloru czerwonego, ponieważ atrybut "title" w tym elemencie zawiera w sobie, na samym końcu, ciąg znaków "opis"
     </p>

    <div title="to jest opis elementu">
           tekst w tym elemencie nie jest koloru czerwonego, ponieważ atrybut "title" w tym elemencie nie zawiera w sobie, na samym końcu, ciągu znaków "opis"
    </div>

-- Selektor kilku różnych atrybutów
Tworzymy za pomocą różnych selektorów atrybutu. Każdy taki selektor umieszczamy w nawiasie kwadratowym. Takie połączenie selektorów może służyć do bardziej precyzyjnego wyszukania elementu, który posiada dane atrybuty o danych wartościach.

     [selektor][selektor] { właściwość:wartość; }

Przykład:

     [title][lang="pl"] { color:red; }

     <p title="to jest atrybut title">
          tekst w tym elemencie nie jest koloru czerwonego, dlatego że ten element nie posiada atrybutu "lang" o wartości "pl"
     </p>

     <p title="to jest atrybut title" lang="pl">
          tekst w tym elemencie jest koloru czerwonego, ponieważ ten element posiada atrybut "title", jak również atrybut "lang" o wartości "pl"
     </p>

- Selektor identyfikatora
Aby zróżnicować podobne elementy wprowadzono identyfikator — id.

P#pochyly

{

font-style:italic;

font-size:20pt;

}

Odpowiedni wpis składa się z selektora, do którego planujemy przypisać identyfikator, oraz z nazwy poprzedzonej znakiem #.
Wywołanie tak przygotowanego identyfikatora ma następującą postać:

      <p id="pochyly">Blok tekstu o kolorze zielonym i czcionce 20pt</p>

Jeżeli chcemy przygotować identyfikator uniwersalny, którego użycie jest możliwe w dowolnym elemencie strony, to powinien on przybrać następującą postać:

     #czerwony
     {
         color:red;
     }

Wywołanie takiego identyfikatora wygląda dokładnie tak samo jak poprzednio, z tą drobną różnicą, że może nastąpić w dowolnym znaczniku.

     <p id=”czerwony”>Treść akapitu</p>
     <h1 id=”czerwony”>Treść nagłówka stopnia pierwszego</h1>
     <td id=”czerwony”>Tekst wewnątrz komórki</td>

- Selektor klasy

     selektor.nazwaklasy
     {
        font-size:12 pt;
        color:green;
     }

Uwaga
Ważny jest fakt występowania kropki po selektorze lub przed nazwą klasy.
Jest to element obowiązkowy i bez tego dalsza praca nie miałaby większego sensu.

Podobnie jak w przypadku identyfikatora, tak zdefiniowana klasa może zostać użyta tylko w tym selektorze, do którego została przypisana, np.:

     p.moja
     {
        color:green;
        font-size:14pt;
     }

Powinna zostać wywołana w znaczniku <p></p> w następujący sposób:

     <p class=”moja”>Treść akapitu</p>

Specyfikacja CSS przewiduje możliwość zdefiniowana takiej klasy, której użycie jest możliwe w różnych znacznikach.

     .moja
     {
      color:red;
       font-size:12pt;
        font-style:italic;
     }

Wywołanie tak określonej klasy również odbywa się za pomocą atrybutu class.

     <p class=”moja”>Przykład akapitu z określoną klasą</p>
     <ol class=”moja”>
     <h1 class=”moja”>Przykład nagłówka z określoną klasą</h1>

Uwaga
Analiza uniwersalnych definicji klas oraz identyfikatorów prowadzi do wniosku, że w działaniu niczym się one nie różnią. Jednak specyfikacja zakłada, że dany identyfikator może wystąpić tylko raz w całym dokumencie, natomiast klasę można powielać do woli.
Najczęściej używane przeglądarki nie są do końca zgodne ze specyfikacją, dlatego identyfikatorów, podobnie jak klas, możemy używać tyle razy, ile razy uznamy to za konieczne. Działanie takie jest błędem, ale nie wpływa na poprawność działania strony.

- Selektor pseudoklasy
Poza klasą nadaną przez autora, element może mieć pseudoklasę nadaną przez przeglądarkę.
Selektory pseudo-klas pozwalają na określanie stylów dla elementów, których nie da się znaleźć w kodzie HTML wprost. Ich "istnienie" wynika z pewnych konkretnych chwilowo zaistniałych warunków - jak choćby wspomniane najechanie na łączę.

Selektor pseudoklasy jest nazwą połączoną z innym selektorem za pomocą dwukropka (nie może być spacji wokół dwukropka)

Wszystkie pseudoklasy można podzielić w następujący sposób:

Pseudoklasy dynamiczne
	Pseudoklasy linków
		:link	Odwołuje się do nieklikniętego (nieodwiedzonego) linku
		:visited	odwołuje się do odwiedzonego linku
	Pseudoklasy akcji użytkownika
		:active	wywołuje się w momencie, kiedy link zostanie kliknięty (np. myszą).
		:hover	uruchamiana w momencie najechania na jakiś element
		:focus	odnosi się do aktywnego elementu (akceptującego zdarzenia z klawiatury lub myszy).
	Pseudoklasa etykiety
		:target	Jest przeznaczony dla tych elementów HTML, które stanowią etykietę. Do takich etykiet można później tworzyć odsyłacze. Za pomocą tego selektora określamy wygląd elementu stanowiącego etykietę, do której przenieśliśmy się po przez kliknięcie w element a prowadzący do danej etykiety.
	Pseudoklasa języka
		:lang()	Odwołuje się do każdego elementu podanego typu, który zawiera w sobie atrybut lang o podanym symbolu języka.
	Pseudoklasy interfejsu użytkownika
		:enabled	Wykorzystywany dla elementów formularza. Selektor określa wygląd aktywnych elementów formularza.
		:disabled	Wykorzystywany dla elementów formularza. Selektor określa wygląd nieaktywnych elementów formularza (tych, które posiadają atrybut disabled o wartości disabled).
		:checked	Wykorzystywany dla elementów formularza typu radio lub checkbox. Selektor określa wygląd elementów, które zaznaczył użytkownik, jak również zaznaczonego domyślnie elementu (tego, który posiada atrybut checked o wartości checked).
Pseudoklasy strukturalne
		:empty	Określa wygląd elementów, które nie posiadają zawartości (są puste).
		:root	Odwołuje się do elementu najwyższego rzędu w dokumencie HTML. Tym elementem jest element html.
	Odwołania do dzieci
		:first-child	Służy do wskazania każdego elementu, który jest pierwszym dzieckiem swojego rodzica.
		:last-child	Służy do wskazania każdego elementu, który jest ostatnim dzieckiem swojego rodzica.
		:only-child	Służy do wskazania każdego elementu, który jest jedynym dzieckiem swojego rodzica (można powiedzieć, że jest jedynakiem).
		:nth-child()	Służy do odszukania elementów (według określonego wzoru) będących dziećmi swojego rodzica. Selektor stworzony z myślą o formatowaniu wyglądu tabeli. Selektor rozpoczyna liczenie dzieci od pierwszego dziecka do ostatniego dziecka.
		:nth-last-child()	Służy do odszukania elementów (według określonego wzoru) będących dziećmi swojego rodzica. Selektor rozpoczyna liczenie dzieci od ostatniego dziecka do pierwszego dziecka.
		:nth-of-type()	Służy do odszukania elementów danego typu (według określonego wzoru) będących dziećmi swojego rodzica. Selektor rozpoczyna liczenie dzieci od pierwszego dziecka do ostatniego dziecka.
		:nth-last-of-type()	Służy do odszukania elementów danego typu (według określonego wzoru) będących dziećmi swojego rodzica. Selektor rozpoczyna liczenie dzieci od ostatniego dziecka do pierwszego dziecka.
		:first-of-type	Wskazuje element danego typu, który występuje pierwszy raz w innym elemencie HTML, czyli selektor odszukuje pierwszy element danego typu, który jest dzieckiem innego elementu.
		:last-of-type	Wskazuje element danego typu, który występuje ostatni raz w innym elemencie HTML, czyli selektor odszukuje ostatni element danego typu, który jest dzieckiem innego elementu.
		:only-of-type	Wskazuje element danego typu, który występuje jedyny raz w innym elemencie HTML, czyli selektor odszukuje element danego typu, który jest jedynym takim dzieckiem innego elementu.
Pseudoklasa negacji
		:not()	W połączeniu z innym selektorem, określa warunek jaki ma on spełnić, żeby element HTML otrzymał dane właściwości CSS.
Inne CSS4
		:indeterminate	Selektor określa wygląd elementów HTML interfejsu użytkownika, które mają status nieokreślonych, ponieważ nie posiadają w sobie wymaganych atrybutów. Takim elementem może być, np. element progress bez atrybutu value.
		:required	Wykorzystywany dla elementów formularza, które są polami wymaganymi. Selektor określa wygląd elementów, które muszą zostać zaznaczone/wypełnione przez użytkownika, czyli takich elementów formularza, które posiadają w sobie atrybut required o wartości required.
		:optional	Wykorzystywany dla elementów formularza, które nie są polami wymaganymi. Selektor określa wygląd elementów, które nie muszą zostać zaznaczone/wypełnione przez użytkownika, czyli takich elementów formularza, które nie posiadają w sobie atrybutu required o wartości required.
		:default	Wykorzystywany dla elementów formularza, które są domyślną opcją.
		:in-range	Wykorzystywany dla elementów formularza, które określają jakiś zakres. Selektor określa wygląd elementów, których wartość wybrana przez użytkownika mieści się w przedziale, określonym przez atrybutu danego elementu HTML.
		:out-of-range	Wykorzystywany dla elementów formularza, które określają jakiś zakres. Selektor określa wygląd elementów, których wartość wybrana przez użytkownika nie mieści się w przedziale, określonym przez atrybutu danego elementu HTML.
		:read-only	wykorzystywany dla elementów formularza, które są polami tylko do odczytu. Selektor określa wygląd elementów, które są przeznaczone tylko do odczytu, czyli takich elementów formularza, które posiadają w sobie atrybut readonly o wartości readonly.
		:read-write	Wykorzystywany dla elementów formularza, które są polami do odczytu, oraz które możemy edytować. Selektor określa wygląd elementów, które są przeznaczone do odczytu, oraz które mogą być edytowane przez użytkownika.

- Selektor pseudoelementy
Pseudoelementy są to fragmenty elementów dokumentu. Składnia tego selektora jest identyczna jak pseudoklas.
Pseudoelement składa się z podwójnego znaku dwukropka (::), po którym następuje nazwa pseudoelementu.

Uwaga
Notacja :: została wybrana ze względu na chęć wyraźnego odróżnienia od siebie pseudoklas i pseudoelementów. Ze względu na kompatybilność wsteczną z już istniejącymi arkuszami stylów, aplikacje klienckie muszą również akceptować wcześniejszą notację pojedynczego dwukropka dla pseudoelementów. Ten kompatybilnościowy zapis jest niedozwolony we wszystkich nowszych pseudoelementach.
Nazwy pseudoelementów są nieczułe na wielkość liter ASCII.

::first-line	Służy do zmiany wyglądu pierwszego wiersza, który znajduje się w każdym podanym typie elementu.
::first-letter	Służy do zmiany wyglądu pierwszej litery tekstu, który znajduje się w każdym podanym typie elementu. Pozwala on na np. rozciągnięcie pierwszej litery na kilka kolejnych wierszy tekstu.
::before	Może być użyty do dodania dodatkowej treści, do każdego typu elementu, który podaliśmy. Treść zostanie dodana na początku zawartości każdego elementu, odszukanego przez selektor.
::after	Może być użyty do dodania dodatkowej treści, do każdego typu elementu, który podaliśmy. Treść zostanie dodana na końcu zawartości każdego elementu, odszukanego przez selektor.

----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Cudzysłowy
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
W języku (X)HTML istnieją specjalne znaczniki, przeznaczone do oznaczania cytatów: <q>...</q> (krótki cytat), <blockquote>...</blockquote> (blok cytowany).
Użyty w dokumencie automatycznie wstawia cudzysłowy na początku i końcu tekstu znajdującego się pomiędzy tagami.
Za pomocą CSS możemy zmienić cudzysłowy na dowolny inny znak lub zrezygnować z ich wyświetlania. Należy użyć do tego pseudoelementów :before oraz :after.

Ustalamy jakie znaki mają być wyświetlone w miejscu automatycznie generowanych cudzysłowów
Pierwsza para odpowiada normalnym cytatom, a druga - cytatom zagnieżdżonym.

     q { quotes: '"' '"' "'" "'" }
     q {quotes: "„" "”" "‚" "’"}

Istnieją dodatkowe wartości, które można przypisać do własności content: open-quote i close-quote - wstawienie znaku cudzysłowów początkowych lub końcowych
no-open-quote i no-close-quote] - nie wstawienie znaku cudzysłowów początkowych lub końcowych

     blockquote p{ quotes: "\201E" "\201D" }
     blockquote p:before { content: open-quote }
     blockquote p:after { content: no-close-quote }
     blockquote p.last:after { content: close-quote }

Znak	Kod	Nazwa
"	"\0022"	Cudzysłów (podwójny znak cudzysłowu ASCII)
'	"\0027"	Apostrof (pojedynczy znak cudzysłowu ASCII)
‹	"\2039"	Pojedynczy lewy cudzysłów ostrokątny
›	"\203A"	Pojedynczy prawy cudzysłów ostrokątny
«	"\00AB"	Podwójny lewy cudzysłów ostrokątny
»	"\00BB"	Podwójny prawy cudzysłów ostrokątny
‘	"\2018"	Lewy pojedynczy cudzysłów (górne "6")
’	"\2019"	Prawy pojedynczy cudzysłów (górne "9")
“	"\201C"	Lewy podwójny cudzysłów (górne "66")
”	"\201D"	Prawy podwójny cudzysłów (górne "99")
„	"\201E"	Podwójny dolny cudzysłów (dolne "99")
‚	"\201A"	Pojedynczy dolny cudzysłów (dolne "9")

----------------------------------------------------------------------------------------

Kombinatory
http://kurs.browsehappy.pl/CSS/Selektory

Selektory specjalne
http://asz.nazwa.pl/cdgim/Kurshtml/css/specjalne.html

http://www.kurshtml.edu.pl/css/
http://webkod.pl/
http://webmaster.helion.pl/index.php/kurs-css
http://pl.html.net/tutorials/css/
http://miroslawzelent.pl/kurs-css/
http://how2html.pl/css-podstawy/
http://kurs.browsehappy.pl/CSS/CSS
http://www.yarpo.pl/2013/05/28/pseudo-klasy-i-pseudo-elementy-w-css/
http://michalbiniek.blogspot.com/2011/04/pseudoklasy-css3.html
http://webkod.pl/kurs-css/selektory/pseudoklasy/selektor-nieodwiedzonego-linku
http://www.crimsteam.site90.net/crimsteam/css/css_selektory_pseudoelementy.html
http://zasoby.open.agh.edu.pl/~09sdczerner/strona/page/Selektory_kombinatory.html
http://code.tutsplus.com/pl/tutorials/the-30-css-selectors-you-must-memorize--net-16048

http://www.poradnik-webmastera.com/artykuly/html/znaki_specjalne_html.php

https://www.w3schools.com/w3css/default.asp

https://www.cssbasics.com/
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS
https://www.toptal.com/css/css-layout-primer-from-classic-approaches-to-the-latest-techniques
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction
http://learnlayout.com/
http://patrickbrosset.com/lab/2018-01-10-css-alignment-cheatsheet/

https://speckyboy.com/css-cheatsheets-resources-guides/
https://1stwebdesigner.com/essential-cheatsheets-web-design-developer/
http://www.elizabethcastro.com/html/extras/cssref.html

Ściąga programisty

Strony

czwartek, 25 lutego 2016

CSS - mini kompedium

3 komentarze: