CSS Cascading Style Sheets

CSS Cascading Style Sheets

style css = reguły css

wykaz

style przez przeglądarkę są czytane od prawej do lewej czyli mając section li p span pierw przeglądarka widzi span, potem że jest on w p, następnie w li i section dzięki temu zawęża jakim elementom span nadać przypisany styl a nie szuka wybranych elementów w kontenerze section.

 

renderowanie

  1. style – dopasowanie styli do elementów strony
  2. layout – wyliczanie layoutu – nadanie wysokości, szerokości, odległości elementów (width, height, margin, padding, top, left)
  3. paint – renderowanie pixeli, najbardziej zasobochłonna (color, background, text-decoration, border-color)
  4. compositing – ustawienie warstw strony (z-index, transform, opacity)

 

poprawienie wydajności styli

 

renderowanie zależne od silnika przeglądarki

 

Jednostki względne:

 

Jednostki bezwzględne:

 

Jednostki czasu:

 

Jednostki kątowe:

 

 

 

Specyficzność (precyzja selektorów)

realizowana jest reguła z wyższą wartością specyficzności.

.myHeadline{
 color:blue;
 font-size:16px;
}
h1{
 color:yellow !important;
 font-size:30px;
}




<h1 class="myHeadline">Mount Everest</h1>




klasa .myHeadline ma specyficzność wyższą niż element h1 więc nagłówek będzie wyświetlony jej stylem, kiedy jednak do styli h1 dodamy 1important ten styl będzie ważniejszy.

 

Kaskadowość

 

cascade of value

inheritance – propagacja styli z rodzica na dzieci

 

stacking context – mogą ustawić:

Preprocesory:

 

#css

Agnieszka Trefler

Agnieszka Trefler (Ruda) - freelancer, web developer, specjalistka od WordPressa z Wrocławia. Z pasją budowania stron, blogowania i fotografowania. Twórca Inspiracji fotograficznych.