Wykorzystując poniższy kod, Twoim zadaniem jest:

<body>

  <div>to jest element - div</div>
  <p>to jest element - p</p>
  <p>to jest element - p</p>
  <p>to jest element - p</p>
  <div>to jest element - div</div>

</body>

1) dodanie właściwości color:red; do wszystkich elementów p, które znajdują się w elemencie body.

2) dodanie właściwości color:red; do wszystkich elementów p, jak również do wszystkich elementów div, które znajdują się w elemencie body.

Wykorzystując poniższy kod, Twoim zadaniem jest:

<p>To jest akapit, wewnątrz którego znajduje się: <i>pochylenie </i>, 
<tt>dalekopis</tt> oraz <b>pogrubienie </b>... następne <b>pogrubienie </b>. 
A to jest <i><b>pogrubienie </b> wewnąrz pochylenia </i>. 
Tutaj kończy się akapit.</p>

1) dodanie właściwości color:red; dla pogrubienie jeśli wewnątrz znacznika p (akapit), niekoniecznie bezpośrednio, znajdzie się znacznik b (czyli pogrubienie tekstu)

2) dodanie właściwości color:red; dla pogrubienie jeśli bezpośrednio wewnątrz znacznika p (akapit) znajdzie się znacznik b (czyli pogrubienie tekstu)

3) dodanie właściwości color:red; dla pogrubienie jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się po sobie znaczniki i oraz b

4) dodanie właściwości color:red; dla wszystkich pogrubień jeśli wewnątrz tego samego znacznika (rodzica), będą znajdowały się znaczniki i oraz b

Artykuł CSS – combinator selectors pochodzi z serwisu Kama Kaczmarek.

• selektor elementu – element selector
  

to nic innego jak selektor znacznika HTML, selektorem może być np. <p>, <h1>, <div> i każdy inny znajdujący się w specyfikacji tego języka:

h1 {color: blue;}
p {text-align: left;}
div {background-color: grey;}

• selektor uniwersalny – universal selector
  

„*” pozwala ustalić określone cechy dla wszystkich elementów strony niezależnie czy są to <p>, <h1>, <div> czy jakikolwiek inny:

* {
  color: blue;
  text-align: left;
  background-color: black;
}

powyższy zapis oznacza, że wszystkie elementy na stronie mają mieć niebieski tekst wyrównany do lewej oraz czarne tło.

• selektor grupujący – grouping selector

Selektor grupujący organizuje wszystkie elementy z tym samym stylem np.

h1 {
  color: blue;
  text-align: left;
  background-color: black;
}

p {
color: blue;
text-align: left;
background-color: black;
}

span {
color: blue;
text-align: left;
background-color: black;
}

elementy h1, p i span mają w powyższym przykładzie mają takie same style, możemy więc je „scalić”, oddzielając poszczególne elementy przecinkami:

h1, p, span {
  color: blue;
  text-align: left;
  background-color: black;
}

• selektor identyfikatora – id selector

Selektor identyfikatora wykorzystuje atrybut id elementu HTML do wyszczególnienia konkretnego elementu.

Id elementu jest unikalny w obrębie strony, więc selektor id jest używany do wybrania jednego unikalnego elementu!

Aby wybrać element o określonym id, należy wpisać znak skrótu (#), a następnie id elementu.

w pliku css dodajemy zapis:

#niebieski {
  color: blue;
}

w pliku html dodajemy zapis:
<p id="niebieski">ta treść będzie w kolorze niebieskim</p>

Określony przez id styl tyczy się tylko tego elementu, który ma przypisany id=”nazwa”.

Nazwy id nie mogą zawierać polskich znaków i zaczynać się od cyfr.

• selektor klasy – class selector

Selektor klasy wykorzystuje atrybut class elementu HTML do wyszczególnienia konkretnego elementu.

Klasa elementu nie jest unikalna w obrębie strony, więc selektor class może być używany wielokrotnie na stronie do różnych elementów!

Aby wybrać element o określonej klasie, należy wpisać znak skrótu (.), a następnie klasę elementu.

w pliku css dodajemy zapis:

.niebieski {
  color: blue;
}

w pliku html dodajemy zapis:
<p class="niebieski">ta treść będzie w kolorze niebieskim</p>
<h1 class="niebieski">ten element też będzie miał kolor niebieski</h1>

Określony przez class styl tyczy się tylko każdego elementu, który ma przypisany class=”nazwa”.

Nazwy klas nie mogą zawierać polskich znaków i zaczynać się od cyfr.

Ćwiczenie:

W pliku, który rozbudowujesz na lekcjach, zastosuj poznane selektory:

1) za pomocą selektora uniwersalnego zmień tło i kolor czcionki dla strony

2) używając selektora grupującego, ustaw dla znaczników list i definicji kolor czcionki (inny niż dla całości strony)

3) ustaw id zmieniające tło dla znacznika <main>, który zastosuj poniżej <nav> (znacznik <main> ma obejmować treść na stronie poza <header> i <footer>)

4) zastosuj klasę, która zmieni kolor czcionki w nagłówkach występujących na stronie

Artykuł CSS – Simple selectors pochodzi z serwisu Kama Kaczmarek.

Kolory definiujemy na kilka sposobów, najczęstsze z nich to:

• rgb, rgba

/* kolor bez przezroczystości zawiera tylko 3 argumenty RGB*/ 
background-color: rgb(52, 117, 117); 

/* jeżeli chcemy dodać przezroczystość, dodajemy też 4ty argument "A", który określa stopień przezroczystości*/
background-color: rgba(52, 117, 117, 0.8); 

• #, hex

/* kolor bez przezroczystości zawiera tylko 3 lub 6 znaków notacji hexadecymalnej #RRGGBB */ 
background-color: #FFFFFF;
/*lub #RGB*/
background-color: #FFF; 

/* jeżeli chcemy dodać przezroczystość, dodajemy dodatkowe 2 znaki  #RRGGBBAA. Im mniejsza wartość znaków AA (z zakresu 0-9 i A-F) tym większa przezroczystość*/
background-color: #34757580; 

• nazwa koloru po angielsku

background-color: red;

Czasami występuje potrzeba przeliczenia koloru z RGB na HEX i odwrotnie. Jak tego dokonać?

HEX -> RGB

Liczbę w HEX #347575, musimy podzielić na 3 części odpowiedzialne za każdy kolor, czyli #RR | GG | BB

Teraz zamienimy poszczególne zapisy systemu hexadecymalnego na decymalny:

34 -> dziesiątki * 16 + jedności, czyli: 3*16+4=52

75 -> dziesiątki * 16 + jedności, czyli: 7*16+5 = 117

75 -> dziesiątki * 16 + jedności, czyli: 7*16+5 = 117

i otrzymujemy liczbę w rgb(52, 117, 117).

RGB -> HEX

Liczbę w rgb(52, 117, 117), musimy zamienić na każdy kolor w hex, czyli #RR | GG | BB

Teraz zamienimy poszczególne zapisy systemu decymalnego na hexadecymalny:

52 ->

52/16=3,25 -> bierzemy całości z wyniku i mnożymy przez 16

3*16=48

52-48=4

pierwsza para liczb to 34

117 ->

117/16=7,31 -> bierzemy całości z wyniku i mnożymy przez 16

7*16=112

117-112=5

druga i trzecia para liczb to 75

i otrzymujemy liczbę w hex #347575.

Artykuł Kolory pochodzi z serwisu Kama Kaczmarek.

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. Oddziaływanie stylów z arkuszy zewnętrznych może być modyfikowane przez style zdefiniowane w nagłówku dokumentu, to z kolei może być zmieniane przez style zdefiniowane bezpośrednio w ciele dokumentu (inline). Zatem priorytet ważności stylów (pierwszeństwo) wyglądałby tak:

1. Styl lokalny (inline)
2. Rozciąganie stylu (SPAN)
3. Wydzielone bloki (DIV)
4. Wewnętrzny arkusz stylów
5. Import stylów do wewnętrznego arkusza
6. Zewnętrzny arkusz stylów
7. Import stylów do zewnętrznego arkusza
8. (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. 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, mimo iż wydawać by się mogło, że powinna tutaj zachodzić zasada taka jak w przypadku stylu lokalnego.

Kaskadowość stylów pozwala zatem pracować z kilkoma źródłami stylów, bez obawy o wystąpienie konfliktów. Takie rozwiązanie jest bardzo wygodne, ponieważ możemy np. zdefiniować ogólny wygląd naszego serwisu w zewnętrznym arkuszu i dodatkowo zmienić nieco wybrane strony poprzez wewnętrzny arkusz, a jeśli zajdzie konieczność zmodyfikować pojedyncze elementy za pomocą stylu lokalnego.

Ł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. Natomiast inne cechy takiej deklaracji będą interpretowane normalnie, chyba że również przy nich postawimy !important. Nie należy jednak przesadzać ze stosowaniem tej metody, ponieważ jawnie łamie ona zasadę kaskadowości i po jakimś czasie może Ci znacznie utrudnić analizę sposobu formatowania elementów.

Przykład:

Gdyby w arkuszu stylów tej strony została umieszczona następująca reguła:

h6 { color: blue !important; background-color: green }

to pomimo wpisania następującego stylu inline (który ma pierwszeństwo przed arkuszami stylów)

<h6 style="color: red; background-color: yellow"> 
    Ten tytuł nie jest napisany czcionką koloru czerwonego, lecz  
    niebieskiego, mimo wstawienia stylu inline. Natomiast tło 
    pozostaje żółte. 
</h6>

otrzymalibyśmy tytuł koloru niebieskiego (blue) jednak nadal na żółtym (yellow) tle.

Drzewo dokumentu i dziedziczenie

Drzewo elementów umieszczonych w dokumencie źródłowym. Każdy element w takim drzewie ma dokładnie jednego rodzica, oprócz elementu podstawowego, czyli korzenia drzewa (root).

Jeżeli nasza strona ma następującą strukturę:

<html> 
  <head> 
    <title>...</title> 
  </head> 
  <body> 
    <h1>...</h1> 
    <p>...</p> 
    <table> 
      <tr> 
        <td>...</td> 
        <td>...</td> 
      </tr>
      <tr> 
        <td>...</td> 
        <td>...</td> 
      </tr> 
    </table> 
  </body> 
</html>

to jej drzewo wygląda następująco:

gdzie:

• Element TABLE jest dzieckiem elementu BODY.
• Element TABLE jest potomkiem elementu HTML oraz BODY.
• Element TABLE jest rodzicem dwóch elementów TR.
• Element TABLE jest przodkiem czterech elementów TD oraz dwóch TR.
• Element TABLE jest bratem elementów H1 oraz P.
• Elementy H1 oraz P są braćmi poprzedzającymi elementu TABLE.
• Element TABLE jest bratem następującym elementów H1 oraz P.
• Element TABLE jest elementem poprzedzającym elementu TR oraz TD.
• Element TABLE jest elementem następującym elementu BODY oraz HTML.

Elementy leżące niżej w hierarchii drzewa dokumentu, zawierają się wewnątrz znaczników nadrzędnych, np. znaczniki <body> oraz </body> muszą być umiejscowione pomiędzy znacznikami <html> i </html>, które są nadrzędne dla wszystkich innych (root).

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.

Właściwości, które są dziedziczone:

• color
• font-family
• font-size
• font-style
• font-weight
• text-align

Właściwości, które nie są dziedziczone:

• background
• border
• margin
• padding
• width
• height

Artykuł CSS – kaskadowość i dziedziczenie pochodzi z serwisu Kama Kaczmarek.

jest to specjalny język opracowany tylko w jednym celu: stworzenie możliwości bardziej elastycznego zarządzania sposobem formatowania (wyglądem) elementów znajdujących się w dokumentach elektronicznych.

CSS nie istnieje samodzielnie i jest ściśle powiązany z HTML, pozwala na określenie wyglądu poszczególnych elementów na stronie.

Jak budujemy style:

selektor 
{
    deklaracja;
    deklaracja;
    ...
    deklaracja;
}

Teraz kilka słów na temat wstawiania stylów. Możemy to robić lokalnie lub z zewnętrznego pliku.

STYL LOKALNY

Wewnątrz znacznika <body> znajdują się elementy, które możemy formatować bezpośrednio w tagu, np:

<p style="color: #ff0000;">To jest jakiś tekst</p>

Po dowolnym znaczniku (<p>, <b>, <ul> i innych dostępnych w HTML) wstawiamy style=”…”, a wewnątrz wpisujemy cechę i jej wartość np. kolor akapitu to „color”, czcionka to „font”. Cecha to odpowiednik atrybutu w HTML. Zbiór cech dla arkuszy stylów znajdziecie w specyfikacji CSS. W powyższym przykładzie cecha to color, następnie występuje znak „:” oraz wartość, czyli #ff0000 całość zakończona znakiem „;„.

Jeżeli danemu elementowi chcemy nadać kilka cech, wpisujemy je po sobie tzn.:

<p style="color: #ff0000; font: 12px bold italic Verdana, Arial, sans-serif;"> 
To jest jakiś tekst</p>

po nadaniu cechy color i po średniku wstawiamy kolejną cechę dla czcionki czyli font, a w środku font kilka wartości dla cechy oddzielane spacją. Zwróć uwagę, że część wartości została oddzielona przecinkiem, dzieje się tak w momencie podawania alternatywy dla danej wartości, czyli:

• 12px – podajemy wielkość czcionki
• bold – ma być pogrubiona
• italic – oraz pochylona
• Verdana, Arial, sans-serif; – i styl ma być Verdana, ale jeżeli użytkownik nie ma czcionki Verdana to zostanie użyty Arial o kroju sans-serif.

Styl możemy rozciągnąć na kilka elementów. Stosujemy do tego znacznik <span>

<span style="color: #ff0000; font: 12px bold italic Verdana, Arial, sans-serif;"> 
    <b>To jest jakiś tekst</b>
    <p>to jest jakić akapit</p>
</span>

Alternatywą do <span> służącą do obejmowania formatowaniem większych zakresów jest <div>

<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>

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. Natomiast elementy wyświetlanie w linii (SPAN) nie mogą zawierać elementów blokowych, ale mogą inne elementy wyświetlane w linii oraz zwykły tekst. Wewnątrz DIV można oczywiście wpisać również SPAN.

WEWNĘTRZNY ARKUSZ STYLÓW

<head>
	(...)
<style type="text/css">
/* <![CDATA[ */
selektor { cecha: wartość; cecha2: wartość2... }
selektor2 { cecha: wartość; cecha2: wartość2... }
(...)
/* ]]> */
</style>
	(...)
</head>

Wewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>). Można go zastosować, gdy elementy które pragniemy poddać formatowaniu, występują wielokrotnie na stronie i wszystkim chcemy nadać takie same atrybuty (inne niż domyślne). Na przykład chcemy, aby wszystkie wykazy miały automatycznie kolor niebieski. Wystarczy wpisać odpowiednią deklarację stylów w arkuszu (w treści nagłówkowej) i nie trzeba już nic dopisywać przy samym elemencie.

ZEWNĘTRZNY ARKUSZ STYLÓW

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

Zewnętrzny arkusz stylów wstawia się zawsze w części nagłówkowej dokumentu (pomiędzy znacznikami <head> a </head>). 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. Dzięki temu, za pomocą tego jednego arkusza, wszystkie nasze strony w obrębie całego serwisu mogą mieć pewne wspólne cechy.

Należy stworzyć oddzielny plik „nazwa.css”, w którym określamy style, a w nagłówku dokumentu podajemy jedynie ścieżkę do tego pliku.

Przykładowy plik css:

p {text-align: center; color: red;}
h1 {
  text-align: center;
  color: red;
}
h2 {
  text-align: center;
  color: red;
}

Ćwiczenie:

Na podstawie ćwiczenia z tematu o znacznikach semantycznych (przykładowe rozwiązanie), sformatuj nagłówki dokumentu nadając im własności: text-align: center; color: green; oraz znaczniki semantyczne nadając im tło: background-color: lightblue;.

Wykonaj ćwiczenie tworząc styl liniowy, wewnętrzny i zewnętrzny.

Artykuł CSS – omówienie i wstawianie pochodzi z serwisu Kama Kaczmarek.