docĆw.2.Arkusze stylów w dokumentach HTML
download 
Reklamacja Transkrypt
Ćw.2.Arkusze stylów w dokumentach HTML
Mechatronika – Informatyka
Ćw.2.Arkusze stylów w dokumentach HTML
HTML – przypomnienie
Struktura szkieletu dokumentu HTML:
<HTML>
<HEAD>
<TITLE> Tytuł w nagłówku okna </TITLE>
</HEAD>
<BODY>
Tu są elementy pojawiające się na stronie
główna część dokumentu HTML
</BODY>
</HTML>
Tworzymy przy pomocy Notatnika Windows plik index.html o powyższej strukturze, a następnie otwieramy w
przeglądarce internetowej. Uwaga: aby przeglądarki "widziały" polskie czcionki zapisujemy dokument Notatnika z
kodowaniem UTF8.
Znaczniki HTML mają ogólną strukturę:
<ZNACZNIK atrybuty> Treść </ZNACZNIK>
Znaczniki bez treści (np. BR, IMG, HR i inne) można zapisać:
<ZNACZNIK atrybuty />
Składnikiem treści może być inny znacznik (zagnieżdżanie), przykładowo:
<P> Jakiś <B>tekst</B><IMG src="obrazek.jpg" /></P>
Najważniejsze znaczniki:
Znacznik
Znaczenie
Przykład
<P>
akapit tekstowy
<P> Tekst </P>
<TABLE>
<TR>
<TD>
tabela
wiersz tabeli
komórka tabeli
<UL>
<OL>
<LI>
lista wypunktowana
lista numerowana
element listy
<IMG>
<A>
<BR>
<HR>
<B><I><U>
grafika
odnośnik (hiperłącze)
zmiana wiersza
linia pozioma
znaczniki stylu (pogrubienie, pochylenie, podkreślenie)
<TABLE>
<TR> <TD> AA </TD> <TD> AB </TD></TR>
<TR> <TD> BA </TD> <TD> BB </TD> </TR>
<TR> <TD> CA </TD> <TD> CB </TD> </TR>
</TABLE>
<UL>
<LI> tekst punktu pierwszego</LI>
<LI> tekst punktu drugiego</LI>
<LI> tekst punktu trzeciego</LI>
</UL>
<IMG SRC="obrazki/1.jpg">
<A HREF= " http://www.wp.pl" > Wirtualna Polska </A>
<P> jakiś tekst <BR /> inny tekst</P>
<HR />
Style CSS
Arkusz stylów CSS to lista reguł ustalających w jaki sposób mają zostać wyświetlone przez przeglądarkę wybrane elementy HTML. Znaczniki HTML posiadają atrybut style, który może zawierać wiele cech o różnych wartościach.
Przykładowe cechy stylów:
Cecha stylu
Opis
background-color
kolor tła elementu
background-image
border-color
adres obrazu tła graficznego
kolor obramowania
Przykładowe wartości
red
#ff0000
url('rys.gif')
#CCFF33
border-width
border-style
grubość obramowania
styl obramowania
border
całe obramowanie (grubość
typ linii, kolor)
border-left
border-right
border-top
border-bottom
color
kolor czcionki tekstu
cursor
wygląd kursora myszki
font-family
font-size
font-style
font-weight
height
width
margin-left
margin-right
margin-top
margin-bottom
text-align
rodzaj oraz rodzina czcionki
wielkość czcionki
styl czcionki
grubość (waga) czcionki
wysokość elementu
szerokość elementu
marginesy zewnętrzne
vertical-align
wyrównanie pionowe tekstu
2px
dotted
dashed
solid
3px solid green
osobno krawędzie
wyrównanie poziome tekstu
yellow
#669933
hand
crosshair
Arial sans-serif
14px
italic
bold
23mm
5cm
10cm
100px
left
center
right
justify
top
middle
bottom
Pełny opis możliwych do zastosowanie cech stylów znajduje się np. pod adresem:
http://www.signs.pl/html/o/style.php
Można zastosować poszczególne cechy w atrybucie style dla znaczników, np.:
<P style="font-size:18px; color:red;font-weight:bold"> Tekst</P>
<TABLE style="background-color:yellow;border:2px solid green">
<TR><TD style="color:red; font-size:30px">A</TD>B<TD>C</TD><TD>D</TD></TR>
</TABLE>
Poszczególne cechy stylu oddzielamy średnikami.
Własne style można dowolnie nazywać, np. "naglowek", "akapitczerwony" (tzw. klasa). Można je zadeklarować w osobnym pliku lub wprost na wybranej stronie WWW.
W nagłówku strony, w sekcji HEAD umieścić swoją definicję stylu pomiędzy znacznikami <STYLE></STYLE>.
<HTML><HEAD>
<STYLE type="text/css">
h1,td {color: green;}
.naglowek {color: red; font-size:30px;}
.gruby_w_ramce {font-weight: bold;border:2px solid green}
p.duza { font-size:30px;}
</STYLE>
</HEAD>
<BODY>
<H1>Nagłówek strony</H1>
<a href="http://www.signs.pl/html/" class="naglowek">Duży link do strony SIGNS</A>
<P> Standardowy akapit</P>
<P style="color:blue;font-size:50px"> Bezpośredni opis stylu</P>
<SPAN class="gruby_w_ramce"> Opis klasy </SPAN>
<P class="duza"> Akapit opisanej klasy <I>duza</I> </P>
</BODY></HTML>
W przykładzie zostały zdefiniowany styl dla elementów H1 i TD i trzy style o nazwach klas: naglowek i gruby_w_ramce i duza.
Najczęściej spotykane jest przypisanie stylu do istniejącego elementu HTML. Kropka przed nazwą stylu określa, że styl jest selektorem klasy, czyli klasa będzie miała nadaną przez nas nazwę, którą można potem użyć jako
atrybut class dla dowolnego elementu HTML. Cechy stylu opisujemy w nawiasach klamrowych. Cechy w opisie
stylu oddzielamy średnikami.
• wszystkie tytuły H1 i komórki tabeli TD będą miały kolor zielony (color: green;)
• klasa naglowek ma mieć czerwony kolor czcionki (color: red;) i wielkość czcionki 30 pikseli (fontsize:30px;).
• klasa gruby_w_ramce będzie posiadała opisane cechy. Duza to klasa, ale tylko dla akapitów <P>.
Dowolny element HTML na stronie, który ma mieć styl klasy naglowek, powinien mieć atrybut class z nazwą
naszego stylu (bez kropki).
Zamiast osadzać style CSS w tekście strony, można je dołączyć z zewnętrznego pliku (arkusza stylów) za pomocą elementu link w sekcji <HEAD>:
<head>
<title>Tytuł strony </title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
Dołączany dodatkowy plik tekstowy o własnej nazwie np. style.css powinien zawierać definicje stylów, przykładowo:
body, p {font-family: Arial, sans-serif; font-size: 14px;}
a {text-decoration:none;}
.mojstyl { font-size:30px;font-family:Verdana}
Taka metoda pozwala na dołączanie gotowych plików CSS (ze zdefiniowanymi stylami) do wielu projektów
stron.
Zadanie
Dokument HTML (nowy, lub wykonywany w ubiegłym semestrze) wzbogacić o funkcjonalny arkusz stylów
w osobnym pliku, stosując wybrane cechy stylu dla znaczników na stronie i stosując własne definicje klas.
Sprawdzić jego działanie po modyfikacji pliku CSS.
![(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])")