026. Instrukcja - wstęp

Na początku chcę was uprzedzić, że moje instrukcje nie są fachowe. Są to poradniki dla tych, którzy chcą chodź trochę "liznąć" kodu CSS. To uproszczone i zmodyfikowane informacje, jakie ja posiadam lub takie, które znalazłam w internecie ^^

Skoro jest tyle tego na różnych stronach to po co to robię? 

Pierwsza sprawa: po to właściwie się tu zgłosiłam. By pisać instrukcje. 

Druga sprawa: wiem, jak trudno jest zacząć i zrozumieć budowę kodu, dlatego chcę wam w tym pomóc :)

To co potocznie nazywamy kodem, naprawdę nazywa się stylem CSS. Styl sam jako taki nie funkcjonuje. Definiuje on tylko istniejący element na stronie. 

Jak jest zbudowany?

selektor {cecha: wartość;}

Selektor – to istniejący już element, któremu chcemy nadać nowy wygląd. Na przykład chcemy zmienić wygląd postu do tego użyjemy selektora .post

Cecha – inaczej własność lub właściwość. Na przykład chcemy zmienić tło posta, do tego użyjemy cechy, która odpowiada za tło czyli background. Po danej cesze zawsze musimy wpisać dwukropek inaczej nic nie zadziała! Teraz nasz kod wygląda tak: .post {background:

Wartość – jest to określenie dla wpisanej wcześniej cechy. Chcąc by nasze tło było czarne wpisujemy np. black. Nasz kod wygląda teraz tak: .post {background: black}

Gdzie wpisywać kody?

Wchodzisz na swojego bloga -> projekt -> dostosuj -> zaawansowane -> dodaj arkusz CSS 

Jeżeli chcemy nadać tą samą cechę dla kilku selektorów wtedy wpisujemy:

selektor, selektor, selektor  {cecha:  wartość}

• Przykład:

 .post, .column-right-inner, .header {background: Black}

Jeżeli chcemy nadać kilka cech dla jednego selektora wpisujemy:

selektor {cecha: wartość; cecha: wartość; cecha: wartość;} <- dopisywać można do znudzenia.

• Przykład:

 .post {background: Black; opacity: 0.8; padding: 10px;}

Można też połączyć oba:

Selektor, selektor, selektor {cecha: wartość; cecha: wartość; cecha: wartość}

• Przykład

.post, .column-right-inner, .header {background: black; opacity: 0.8; padding: 10px;}

Ważne informacje: 

1. Wpisując kody używamy języka angielskiego! (polski nie zadziała! Ale to dobra sprawa, można się trochę podszkolić : )
2. Jeżeli dana komenda nie działa, można do niej wpisać !important. Tak zwana dyrektywa czyni cechę ważniejszą.

• Przykład: 

.post {background: Green !important;}

      3. Nasz kod nie musi wyglądać tak:

selektor, selektor, selektor {cecha: wartość; cecha: wartość; cecha: wartość}

równie dobrze może on wyglądać tak:

Selektor, selektor, selektor {cecha: wartość;

Cecha: wartość;

Cecha: wartość;}

lub tak:

Selektor,

selektor, 

selektor {cecha: wartość; cecha: wartość; cecha: wartość}

nawet tak: (z tego sposobu korzystam - jest najbardziej przejrzysty moim zdaniem)

Selektor, selektor, selektor {

Cecha: wartość;

Cecha: wartość;

Cecha: wartość;

}

Strukturę kodu już rozumiecie? To świetnie! W następnej notce, podam wam selektory, wartości i cechy, z których będziemy budować kody :) 

Jeżeli coś byłoby nie zrozumiałe, piszcie śmiało w komentarzu ^^ Ale wydaje mi się, że w miarę prosto to wszystko ujęłam :)

zainspirowana instrukcją Avii Tinar z http://demens-mulier.blogspot.com/ :)