docKaskadowe arkusze stylów - BK-S
download 
Reklamacja Transkrypt
Kaskadowe arkusze stylów - BK-S
Kaskadowe arkusze stylów
CSS (Cascading Style Sheets)
Narzędzie do formatowania wyglądu dokumentów. Chodzi głównie o wielkości czcionek, kolory,
rozmieszczenie elementów na stronie, obrazowania ilustracji i tekstów
Sposób definiowania arkuszy stylów
Kaskadowe arkusze stylów, zawierają zestaw definicji określających prezentację dokumentu. Istnieją trzy
sposoby definiowania arkuszy stylów:
1. Arkusz stylu można umieścić w dokumencie XHTML. W takim przypadku będzie on zastosowany
tylko do tego dokumentu
2. Arkusz stylu może być zachowany w oddzielnym liku – będzie wtedy dostępny dla wielu
dokumentów XHTML
3. Może on zostać umieszczony bezpośrednio w tekście – będzie wtedy odpowiedzialny za formatowanie
konkretnej sekcji dokumentu
Umieszczanie arkusza stylu wewnątrz dokumentu
<html>
<head>
<meta http-equiv="author" content="Imię i nazwisko" />
<meta http-equiv="content-type" content="text/htm; charset=iso-8859-2" />
<title> Tytuł strony </title> Znacznik <style> mówi o tym, że rozpoczyna się
<style type=”text/css”>
definicja arkusza stylu
<!— Atrybut type określa typ arkusza
p {
Para znaczników <!-- --> powoduje, że wszystkie
color: red;
instrukcje umieszczone między nimi traktowane będą
font-size: 14pt;
jak komentarz
font-family: sans-serif
Znacznik </style> zamyka definicję
}
h1 {
Kod arkuszy stylów
color: green;
selektor {własność; wartość; własność: wartość; …}
background: yellow;
Selektor określa nazwę formatowanego elementu, może to
text-align: center
być np. element h1
}
Własność to nazwa właściwości, którą określamy, np.
-->
kolor lub wielkość czcionki
</style>
Wartość to wartość przypisana
</head>
<body>
Treść strony wyświetlana w oknie przeglądarki
</body>
</html>
Włączanie arkusza stylu
Arkusz zdefiniowany w oddzielnym pliku np. mojstyl.css zawiera dokładnie takie same informacje, jak te
umieszczone bezpośrednio w dokumencie XHTM
Aby utworzyć odsyłacz do tego arkusza, należy umieścić link poniżej elementu title, w miejscu gdzie
przedtem znajdowała się definicja wewnętrznego arkusza stylu:
<link rel=”stylesheet” href=”mojstyl.css” type=”text css”/>
Zastosowanie arkuszy stylów do formatowania więcej niż jednego elementu
Aby zastosować określony styl do zdefiniowania wyglądu wszystkich podstawowych elementów w danej
grupie dokumentów, można określić prezentację elementu body, np.
body {
color: blue;
background: white;
margin-left: 50pt;
font-style: italic;
font-size: 20pt;
font-family: courier
}
Jeśli chcemy określić formatowanie tylko kilku elementów, można wymienić je przed danymi
formatującymi:
h1, h2, h3 {
color: greek;
background: yellow;
text-align: center
}
Formatowanie będzie dotyczyło tylko tych elementów
Formatowanie wybranych fragmentów dokumentu
Można dokonać formatowania konkretnej części dokumentu. W tym celu należy dodać do tekstu atrybut style,
np.
<h1 style=”color: green; background: yellow; text-align: center”> to jest
wycentrowany nagłówek I poziomu na zielono z żółtym tłem </h1>
<p style=”color:red; font-size: 14; font-family: sans-serif”> ten akapit jest
czerwony, używa czcionki Sans-serif o wielkości 14, z domyślnym kolorem tła</p>
Klasy i identyfikatory
Klasy (classes) i identyfikatory (IDs) służą do modyfikacji stylu danego elementu. Na przykład jeśli chcemy
utworzyć akapit mający taki sam wygląd jak pozostałe, ale używający większej czcionki można to zrobić za
pomocą klasy lub identyfikatora
Identyfikatory różnią się od klasy tym, że mogą być użyte tylko jeden raz
Tworzenie i stosowanie identyfikatorów:
Identyfikator składa się z dwóch części:
Znaku # wraz z nazwą. Nazwa powinna odzwierciedlać działanie identyfikatora
Zestawu formatowań objętych parą znaków{}
Styl h1 jest następujący:
h1 {color: red; background: white; font-size: 18pt; text-align: left;
font-family: sans-serif}
jeśli chcemy zachować styl przy jednoczesnej zmianie czcionki na mniejszą kursywę to można zdefiniować
identyfikator:
#small {font-size: 12 pt; font-style: italic}
Aby identyfikator został zastosowany należy użyć atrybutu id
<h1>Przykład nagłówka</h1>
<h1 id=”small”> Zmniejszony nagłówek</h1>
Definicja klasy
.small {font-size: 12pt; font-style: italic}
Aby użyć klasy zamiast id wykorzystujemy atrybut class
<h1> Przykład nagłówka</h1>
<h1 class=”small”> Zmniejszony nagłówek</h1>
![(Microsoft PowerPoint - XHTML_5_style.ppt [tryb zgodno\234ci])](http://s2.doczz.pl/store/data/002956443_1-e49f44061de070fd4dcf1f04a595a655-70x70.png "(Microsoft PowerPoint - XHTML_5_style.ppt [tryb zgodno\234ci])")
