Tworzenie stylów w HTML

Wielkość: px

Rozpocząć pokaz od strony:

Download "Tworzenie stylów w HTML"

Marek Wieczorek
8 lat temu
Przeglądów:

1 Podstawy arkuszy stylów i JS CSS (kaskadowe arkusze stylów) to standard opisu formatowania języka HTML znacznie rozszerzający jego możliwości prezentacyjne. Może być stosowany zarówno dla statycznych stron www, stron dynamicznych (JavaScript, PHP, Java, Python itp.) jak i do stron przygotowywanych w systemach CMS (Yoomla, Wordpress, Drupal). Tworzenie stylów w HTML umieszczenie <LINK REL=STYLESHEET TYPE="text/css" HREF="sheetaddress" TITLE="Sheetname"> w części nagłówkowej <HEAD> użycie tagów <STYLE> w części nagłówkowej : <STYLE TYPE="text/css"> url(sheetaddress) mediatype; H1 { color: blue } --> </STYLE>... <H1>This headline becomes blue</h1> url(sheetaddress) w secji STYLE, aby wykorzystać style określone w zewnętrznych plikach, jak to pokazano wyżej. mediatype to opcjonalna, oddzielona przecinkiem lista mediów obsługiwanych przez arkusz. użycie atrybutów STYLE w ramach tagów HTML, choć nie jest to zalecane: <P STYLE="color: green">paragraph is green.</p> Ogólna konstrukcja informacji o stylu CSS : selector1,selector2,...,selectorn { property1: value ; property2: value ; } np. H1,H5 { color: blue} #krzyzyk {cursor:crosshair}.cl1 {border: 1px solid blue} #przyklad2 { position: absolute; top: 250px; left: 300px; z-index: 2; background-color: red }

Tworzenie stylów w HTML umieszczenie <LINK REL=STYLESHEET TYPE="text/css" HREF="sheetaddress" TITLE="Sheetname"> w części nagłówkowej <HEAD> użycie tagów <STYLE> w części nagłówkowej : <STYLE

2 <TABLE ALIGN=LEFT WIDTH=30% HEIHT=20% style="bordercollapse:collapse;empty-cells:show;border: 1px solid blue;cursor:crosshair" > Efektywne wykorzystanie arkuszy stylów do formatowania dokumentów HTML wymaga znajomości podstawowych atrybutów i ich dopuszczalnych wartości. Tabele od 1 do 6 zawierają najważniejsze atrybuty CSS pogrupowane kategoriami, zaś listing 5 prezentuje sposoby użycia części atrybutów. wyrównanie 1. text-align justify, left, right, center poziome 2. verticalalign baseline, sub, super, top, text-top, middle, bottom, textbottom, długość Tabela 1. Wyrównanie pionowe i poziome Poprawne lp. Atrybut wartości 1. width długość szerokość 2. height długość wysokość wyrównanie pionowe Opis 3. max-width długość maksymalna szerokość 4. max-height długość maksymalna wysokość 5. min-width długość minimalna szerokość 6. min-height długość minimalna wysokość 7. margin długość marginesy (wszystkie cztery) 8. margin-left, margin-right, margin-top, margin-bottom długość marginesy lewy, prawy, górny i dolny 9. padding długość otaczanie (z czterech stron) 10. padding-left, padding-right, padding-top, padding-bottom długość Tabela 2. Wysokość, szerokość, marginesy i otaczanie otaczanie z lewej, prawej, górne i dolne 1. fontfamily nazwa kroju czcionki, np. Courier, Verdana, Arial, Serif nazwa kroju czcionki 2. font-size długość, larger, smaller wielkość czcionki 3. fontweight normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900 grubość kroju 4. font-style normal, italic, oblique kursywa 5. fontvariant 6. fontstretch normal, small-caps normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semicondensed, semi-expanded, expanded, extra-expanded, ultraexpanded kapitaliki rozstrzelenie liter

Tabele od 1 do 6 zawierają najważniejsze atrybuty CSS pogrupowane kategoriami, zaś listing 5 prezentuje sposoby użycia części atrybutów. wyrównanie 1.

3 7. font kombinacja powyższych wartości oddzielonych białymi znakami Tabela 3. Czcionki 1. text-indent długość wielkość wcięcia akapitu 2. text-decoration none, underline, overline, line-through, blink dekoracja tekstu 3. text-transform capitalize, uppercase, lowercase, none przekształcanie tekstu 4. word-spacing normal, długość odstępy między słowami 5. white-space normal, pre, nowrap interpretacja białych znaków 6. letter-spacing normal, długość odstępy między literami 7. line-height normal, długość wysokość linii Tabela 4. Tekst 1. border-style 2. none, hidden, dotted, dashed, solid, double, groove ridge, inset, outset takie jak border-style rodzaj obramowania (linia ciągła, przerywana, itd.) rodzaj obramowania każdej krawędzi z osobna 3. border-width thin, medium, thick, długość grubość obramowania 4. takie jak border-width grubość obramowania każdej krawędzi z osobna 5. border-color kolor kolor obramowania 6. border-style-left, border-styleright, border-style-top, border-stylebottom border-leftwidth, border-rightwidth, border-topwidth, border-bottomwidth border-leftcolor, border-rightcolor, kolor border-top-color, border-bottomcolor 7. border-collapse collapse, separate 8. border kombinacja wszystkich właściwości oddzielonych białymi znakami 9. border-left, kombinacja wszystkich kolor obramowania każdej krawędzi z osobna złączanie krawędzi sąsiadujących komórek tabeli

word-spacing normal, długość odstępy między słowami 5. white-space normal, pre, nowrap interpretacja białych znaków 6. letter-spacing normal, długość odstępy między literami 7.

4 border-right, border-top, border-bottom Tabela 5. Obramowanie właściwości oddzielonych białymi znakami w stosunku do każdej krawędzi z osobna 1. list-style-type 2. list-styleposition 3. list-styleimage disc, circle, square, decimal, decimal-leading-zero, lowerroman, upper-roman, lower-greek, lower-alpha, lower-latin, upper-alpha, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none inside, outside adres uri obrazu styl numerowanie i wypunktowania położenie numeracji względem tekstu ikona wypunktowania Pozycjonowanie Element position najczęściej jest związany z tagiem <div>. Może przyjąć następujące wartości. static (statyczne) relative (relatywne) absolute (absolutne) fixed (ustalone) Pozycjonowanie statyczne Elementy z position:static. Jest to wartość domyślna dla wszystkich elementów. Umieszczenie elementu zależy od pozycji w dokumencie. Pozycjonowanie relative Elementy z position:relative. Możemy przesunąć element w dowolnym kierunku od miejsca w którym by się znalazł domyślnie. Możliwości przesunięcia to top, bottom, left, right. Jeśli przesuniemy element nadając mu top:10px to element przesunie się o 10px w dół. Zajmuje on miejsce tam gdzie powinien być domyślnie wyświetlany a pokazywany jest w innym miejscu. Można nadawać też wartości ujemne. Tak pozycjonowany element staje się kontenerem dla wszystkich innych, które są absolutnie w nim pozycjonowane. Pozycjonowanie absolut Elementy z position:absolute. Możemy przesunąć element w dowolnym kierunku od miejsca położenia w kontenerze. Kontenerem są elementy z position relative, absolute, fixed. Gdy

cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha, none inside, outside adres uri obrazu styl numerowanie i wypunktowania położenie numeracji względem tekstu ikona wypunktowania

5 niema takiego elementu nadrzędnego to wybiera go przeglądarka. Może to być body ale nie musi. Możliwości przesunięcia to top, bottom, left, right. Elementy pozycjonowane w ten sposób nie zajmują miejsca w dokumencie. Możemy więc przenieść element poza widzialny obszar w przeglądarce. position:relative i position:absolute Pozycjonowanie fixed Elementy z position:fixed. Możemy przesunąć element w dowolnym kierunku od miejsca położenia kontenera, którym w tym przypadku zawsze jest okno przeglądarki. Możliwości przesunięcia to top, bottom, left, right. Elementy pozycjonowane w ten sposób nie zajmują miejsca w dokumencie. Możemy więc przenieść element poza widzialny obszar z-index Elementy pozycjonowane mają wagę widoczności elementu na osi-z czyli warstwy. Widoczność określa nam atrybut z-index. Czym wartość liczbowa jest większa tym większy jest priorytet widoczności. Zadania: 1. Utwórz dla dowolnych kilku zdjęć dokument, w którym zdjęcia te będą sprawiały wrażenie rzuconych jedno na drugie

position:relative i position:absolute Pozycjonowanie fixed Elementy z position:fixed.

6 2. Zmień kolor suwaka paska przewijania. 3. Utwórz tabelę 3 na 3, w której każda komórka ma inny kolor tła. 4. Stwórz element, po najechaniu na który kursor myszy będzie zamieniał się w krzyżyk. 5. Stwórz kilka odnośników, z których każdy będzie przyjmował inny kolor po odwiedzeniu, inny po najechaniu myszką a inny jeśli odnośnik nie jest odwiedzony. Pozmieniaj układ i kolory w przykładach 1-5 JavaScript to język rozszerzający HTML o elementy dynamiczne. Działa po tronie przeglądarki (klienta) w przeciwieństwie do języków serwerowych (PHP, ASP, Java Server Pages). Uruchom przykłady przedstawione w pierwszej części laboratorium, wyodrębnij elementy w tagu <script>, przeanalizuj działanie skryptów.

Stwórz kilka odnośników, z których każdy będzie przyjmował inny kolor po odwiedzeniu, inny po najechaniu myszką a inny jeśli odnośnik nie jest odwiedzony.

Podobne dokumenty

LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW

LABORATORIUM 3 WSTĘP DO SIECI TELEINFORMATYCZNYCH CSS CECHY WYBRANYCH SELEKTORÓW 1. Definicja tła Tło elementu HTML można definiować w CSS korzystając z następujących cech: background-color background-image