CSS - wprowadzenie

Transcript

1. Spis treści Pojęcie CSS Składnia CSS Przykłady reguł języka Stylowanie poszczgólnych elementów Osadzanie arkuszy stylów w dokumencie Budowa blokowa i liniowa elementów
2. Czym jest CSS? CSS ﴾ang. Cascading Style Sheets﴿ ‐ język służący do nadawania wyglądu poszczególnym elementom dokumentu. Umożliwia formatownie elementu poprzez zmianę jego: pozycji koloru tła kroju czcionki oraz ogromnej liczby wielu innych cech!
3. Kaskadowość arkuszy styli Zawarta w akronimie CSS kaskadowość arkuszy polega na dziedziczeniu poszczególnych reguł dla elementów będących potomkami ostylowanego. Przy zmianie koloru czcionki dla tagu <body> , elementy znajdujące się wewnątrz niego również będą posiadały zdefiniowany dla <body> kolor czczionki. Nie wszystkie reguły ulegają kaskadowości ‐ przykład takiego zachowania występuje dla reguły position bądź elementu input .
4. Składnia CSS Struktura języka przybiera następującą postać: selektor { atrybut: wartość; innyAtrybut: innaWartość; } innySelektor { jeszczeInnyAtrybut: iKolejnaWartość; }
5. Selektory CSS Odniesienie do poszczególnych elementów HTML'a następuje poprzez użycie selektorów. Trzy podstawowe metody "łapania" elementów : przez rodzaj znacznika, przykład: h1 => <h1> przez id elementu, przykład: #ajdi => <h1 id="ajdi"> przez klasę elementu, przykład: .klasa => <p class="klasa">
6. Różnica między [id] a [class] Identyfikator elementu HTML deklarujemy przez nadanie mu atrubutu id , np. <b id="jakiśTamIdentyfikator"> . Jest on unikalny i nie może się powtarzać. Każdy element powinien mieć jedno id. Klasa elementu określana jest poprzez atrybut class , np. <textarea class="jakaśSobieKlasa" . Wiele elementów może posiadać jedną klasę. Pojedynczy element może zawierać wiele klas.
7. Przykłady reguł CSS selektor { display: block|none; /* typ wyświetlania */ background‐color: red; /* kolor tła */ color: #ab19de; /* kolor czcionki */ font‐size: 21px; /* rozmiar czcionki */ text‐align: left | center | right;/* wyrównanie tekstu */ width: 100px; /* szerokość elementu */ height: 100px; /* wysokość elementu */ position: absolute | relative; /* typ pozycjonowania */ top: 100px; /* pozycja od góry */ left: 50px; /* pozycja od lewej */ }
8. Stylowanie poszczególnych elementów Najlepszą praktyką na formatownie elementów dokumentu jest nadawanie im klas, do których przypisane zostaną konkretne reguły. <!‐‐ kod HTML ‐‐> <p class="warning">ważne ostrzeżenie</p> /* kod CSS */ .warning { color: red; letter‐spacing: 10px; } rezultat: w a ż n e o s t r z e ż e n i e
9. Osadzanie arkuszy stylów w dokumencie Istnieją dwa podstawowe sposoby na osadzanie arkuszów w HTML: umieszczenie ich wewnątrz tagu <style> : <style> selektor { atrybut: wartość; } </style> lub podpinanie zewnętrznego pliku z zawartością: <link rel="stylesheet" href="./nazwa_pliku.css"> Dokument może zawierać wiele takich arkuszów.
10. Przykład ostylowanego elementu: <style> .square { width: 50px; height: 50px; background‐color: red; </style> <div class="square"></div> rezultat:
11. Budowa blokowa i liniowa elementów Podstawowe typy budowy elementów HTML: blokowa ‐ display: block , element zajmuje całą szerokość, sąsiadujące z nim są umieszczane w nowych liniach, budowę taką domyślnie posiada element <div> , liniowa ‐ inline , element zajmuje szerokość zależnie od treści jaka w nim występuje, elementy sąsiadujące, które nie posiadają budowy blokowej znajdują się obok tego elementu, domyślnie budowę taką posiada element <span> , liniowo‐blokowa ‐ inline‐block , budowa identyczna z inline, pozwalająca jednak na zadeklarowanie wymiarów elementu, brak ‐ none , element nie jest wyświetlany na stronie.
12. Budowa blokowa i liniowa elementów <style> .line { background‐color: red; } .block { background‐color: blue; } .inline‐block { display: inline‐block; background‐color: green; height: 100px; } </style> <div class="block">blok</div> <span class="line">linia</span> <div class="inline‐block">linio‐blok</div> rezultat: blok linia linio‐blok
13. Podsumowanie najważniejszych rzeczy CSS odpowiada za prezentację dokumentu, jego celem jest formatowanie ﴾stylowanie﴿ poszczególnych elementów dokumentu, Za pobieranie poszczególnych elementów w CSS odpowiadają selektory, którymi zazwyczaj powinny być klasy, Wyróżniamy cztery podstawowe typy wyświetlania elementów na stronie: block , inline , inline‐block , none , Kod CSS może znajdować się wewnątrz HTML bądź zostać zaimportowany z pliku zewnętrznego, CSS jest po prostu spoko!
14. To wszystko!