Podstawy CSS

Syntax CSS (notacja BNF)

1. <reguła> ::= <selektor> "{" <blok deklaracji> "}"
2. <blok deklaracji> ::= {<deklaracja> ";"}
3. <deklaracja> ::= <atrybut> ":" <wartość>

Przykład:

p {font-size: 2em; color: red; background: yellow;}

To samo, ale porządniej sformatowane:

p {
  font-size: 2em; 
  color: red; 
  background: yellow;
}

Selektory proste

1. * : dowolny elementm np.
   * {box-sizing:border-box;}
2. element, np.
   p {color:#334455;}
div {background-color: #334455;}
3. identyfikator, np.
   #container {width: 100%; max-width:940px; margin: 0 auto;}
4. klasa, np.
   .naglowek{font-size:3em;}
   uwaga: to jest to samo co
   *.nagłowek {...}

Selektory złożone

1. [element-1] [element-2] {...} : wszystcy potomkowie [element 1] typu [element 2] np
   <div> <p>
2. [element-1] > [element-2] {...} : wszystkie dzieci [element 1] typu [element 2] np
   <div> > <p>

Uwagi

1. grupowanie, np.
   h1, h2, h3, h4, h5, h6 {color:#220012;}
2. element.klasa, np.
   p.naglowek{font-size:3em;}

Przykłady

<p class='big'>

<p class='blue'>

<p class='big blue'>

<p class='alert'>

Pseudo-klasy

:active, :hover, :first-child, :firt-of-type, :link, :visited, :nth-of-type()....

Pseudo-elementy

:after, :before, :first-letter, :first-line, ::selection, ...

<div class="test01">
  <p>ala ma kota</p>
  <div> 
    <p>KOT MA ALE</p>
  </div> 
  <p>ala ma kota</p>
</div>  

TU MOŻESZ EDYTOWAĆ KOD: Pytanie: co się stanie jak zmienisz kolejność tych reguł?

Kilka porad

1. Jeśli dopiero teraz poznajesz css, to z co najmniej jeden rok nie stosuj frameworków (Bootstrap, Foundation, W3.CSS)
2. Jeśli budujesz styl od nowa, to zacznij od zbudowania szkicu dokumentów html.
3. Stosuj mniej więcej taką organizację kodu css:
   1. Ogólne własności (body, p, h1, h2, ..., a)
   2. Naglowek strony (#naglowek { })
   3. Stopka strony (#stopka { } )
   4. Specyficzne elementy
4. Pamiętaj o zasadzie Mobile First.