Dowiedz się, czym są kaskadowe arkusze stylów, jak je używać w dokumencie HTML.
Definicja CSS
Kaskadowe arkusze stylów – CSS – wg. wikipedii to język służący do opisu formy prezentacji stron WWW. CSS został opracowany przez organizację W3C w 1996 r. jako potomek języka DSSSL przeznaczony do używania w połączeniu z SGML-em. Pierwszy szkic CSS zaproponował w 1994 r. Håkon Wium Lie.
Format zapisu CSS
Styl definiowany za pomocą CSS zapisany jest zgodnie ze schematem
Selektor { właściwości : wartość właściwości; }
lub z angielskiego Selector { property: property value;}
Wszystko co jest w nawiasie klamerkowym, zakończone średnikiem, nazywamy deklaracją (declaration).
Selektor – jest to element, dla którego tworzona jest cała reguła CSS. Może być nim tag HTML, identyfikator (poprzedzony znakiem „#”) lub klasa (poprzedzona znakiem „.”). Selektor może więc odnosić się do jednego lub wielu elementów, selektor może też łączyć kilka elementów, jak na przykład .content p czy .text-content dt
Deklaracja – deklaracją nazywamy jedną kompletną regułę, jak na przykład background-color: red; czy text-align: center;
Właściwość – jest to element stylizujący zawartość danego tagu HTML. Określa on co dokładnie ma zostać wystylizowane ale to jak to ma zostać zrobione, definiują wartości wpisane dla danej właściwości. Np. właściwością może być color, text-align, float, margin-top, font-weight i tak dalej. Każda właściwość ze zdefiniowaną jej wartością kończymy średnikiem.
Wartość właściwości – analogicznie do wartości, będą to właściwe wartości, jak dla wartości color: pojawi się na przykład #f1f2dd albo dla właściwości float: będzie to przykładowo right.
przykłady:
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
Komentarze w arkuszach stylów
Jak zawsze pisząc jakikolwiek kod, warto komentować to co się w nim robi. Pomaga to zarówno nam samym przypomnieć sobie po dłuższym czasie co mieliśmy na myśli tworząc dany selektor czy też możemy komentarzem oddzielić wszystkie swoje selektory na przykład dotyczące wylącznie sekcji footera na pisanej stronie internetowej. Komentarze mają jeszcze jedną, bardzo ważną zaletę, otóż tworzone w sposób opisowy, pozwalają osobie, którą dołączamy do projektu szybko się wdrożyć w niego by praca z nami czy naszym zespołem była przejrzysta i czytelna i co najważniejsze – zrozumiała.
Zapis komentarza w arkuszy stylów ma postać
/* treść komentarza, który przy okazji jest zignorowany przez przeglądarki internetowe */
3 sposoby na wstawienie kodu CSS
Do dyspozycji mamy trzy formy zapisu styli CSS. Są to style zewnętrzne, wewnętrzne oraz wbudowane.
Zewnętrzne style CSS
Zawartość dokumentu HTML i (wytłuszczona) deklaracja zewnętrznego stylu CSS
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mojstyl.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Zawartość pliku mojstyl.css
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
Wewnętrzne style CSS
Czyli style, CSS, zapisane w sekcji HEAD dokumentu HTML, między znacznikami <style> a </style>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
Wbudowane (zagnieżdżone ) style CSS
Jest to styl, deklarowany bezpośrednio w tagu html za pomocą style="deklaracja"
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
Identyfikatory i klasy w CSS
id=”” – Identyfikator w dokumencie HTML tworzymy poprzez id="nazwa_identyfikatora". Identyfikator w arkuszu CSS jest zapisywany w formie #nazwa_identyfikatora {}. Identyfikator można użyć tylko jeden raz na jeden dokument HTML
class =””- Inaczej jest z klasą (class), która w dokumencie HTML definiowana jest jako class="nazwa_klasy" natomiast w arkuszu CSS odnosimy się do niej poprzez .nazwa_klasy{}. Klasę można używać wielokrotnie w obrębie jednego dokumentu HTML