Powrót

CSS Cascading Style Sheets

CSS Cascading Style Sheets

style css = reguły css

wykaz

  • selektor – wskazuje formatowany element strony, jako klasa(.) lub identyfikator(#)
  • blok deklaracji – rozpoczęty { i zamknięty }
  • deklaracja – pomiędzy nawiasami znajduje się deklaracja lub deklaracje (instrukcje) formatujące wskazany w selektorze element, składa się z par właściwość: wartość
  • właściwość – określa efekt działania stylu
  • wartość

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

  • nie zagnieżdżanie powyżej 3 zagłębienia
  • zalecane używanie opacity i transform do wykonywania animacji
  • dodanie do właściwości którą chcemy niebawem zmienić will-change – nie należy nadużywać, np will-change: transform; will-change: left, top;

 

renderowanie zależne od silnika przeglądarki

  • sprawdzenie która przeglądarka co obsługuje na css.triggers

 

Jednostki względne:

  • px – pojedyncze punkty widoczne na ekranie
  • em – proporcja wysokości czcionki do danego elementu
  • ex – proporcje do wysokości litery x, związane z rodzajem użytej czcionki
  • % – wielkość względem wartości domyślnej

 

Jednostki bezwzględne:

  • in – cale
  • pt – standardowe, typograficzne jednostki miary czcionki, 72pt=1in=2,54cm
  • cm – 1cm=0.39in
  • mm – milimetr
  • pc – pica, jednostka typograficzna, 1pi=12pt

 

Jednostki czasu:

  • ms – milisekunda, h5{pause-after:100ms}
  • s – sekunda

 

Jednostki kątowe:

  • deg – stopnie
  • grad – gradiany
  • rad – radiany

 

 

 

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

  • zewnętrzne arkusze styli
  • style wpisane w <head>
  • style wpisane bezpośrednio do znacznika
  • defaultowe style przeglądarki

 

  • parametr !important daje najwyższą ważność

cascade of value

inheritance – propagacja styli z rodzica na dzieci

 

stacking context – mogą ustawić:

  • z-index
  • opacity
  • transform
  • filter

Preprocesory:

 

CSS3

Hope this helps and happy coding :)

Zobacz jeszcze

generowanie obrazków z layoutu w PS

...

css3 gradient

- background-image: linear-gradient(red, yellow); background-image: linear-gradient(to left, red, yellow); background-image: linear-gradient(30deg, red, yellow); background-image:...

Powrót