Ćw.2.Arkusze stylów w dokumentach HTML
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.