Tworzenie stron internetowych CSS Kaskadowe Arkusze Stylów

Wydzielanie bloków – przykład Przykład: o o o definicja stylu „blok 1” w nagłówku dokumentu: #blok 1 {font-family: verdana; font-size: 14 px; } #blok 1 - niepowtarzalna nazwa (id) konkretnego bloku w dokumencie, wydzielenie bloku:

CSS z pliku zewnętrznego o dołączenie do strony zewnętrznego arkusza stylów (plik z rozszerzeniem . css), w którym definiujemy poszczególne style, przykład takiego pliku na następnym slajdzie, o powiązanie każdej ze stron naszej witryny z powyższym arkuszem stylów poprzez dopisanie w ich nagłówkach znacznika:

CSS z pliku zewnętrznego – przykład Przykład zewnętrznego arkusza stylów (np. plik styl. css):

Kaskadowość stylów o hierarchia źródeł stylów, od lokalizacji stylu zależy zasięg jego oddziaływania, o rodzaje arkuszy stylów zaczynając od najbardziej ogólnych: → styl importowany z zewnątrz (z innej witryny), → styl z pliku zewnętrznego, → styl osadzony, → styl lokalny, o kaskadowość stylów objawia się w przypadku korzystania z przynajmniej dwóch z wymienionych wcześniej rodzajów arkuszy, o gdy jakiś element znajduje się w zasięgu więcej niż jednego stylu, obowiązuje zasada, że styl znajdujący się "bliżej" formatowanego elementu znosi działanie stylu "odległego".

Budowanie stylu o ogólna postać arkusza stylu: selektor {cecha: wartość; } o dowolność zapisu: selektor { cecha: wartość; } o selektor – element, dla którego chcemy zdefiniować styl, o cecha – to, co chcemy określić dla danego elementu (np. kolor), o wartość – np. 12 px, blue, small, bold.

Budowanie stylu – przykłady Przykład: chcemy ustalić kolor czcionki dla zwykłego akapitu (

), p {color: green; } lub P {COLOR: #00 FF 00; } Przykład: chcemy ustalić szerokość i kolor linii poziomej (

Selektor – class o Przykład - class jako selektor: Rozdział 1

Selektor – class c. d. o o o H 1. naglowek 1 {color: #00 FF 00; } można użyć tylko dla znaczników prawidłowo: Rozdział 1 nieprawidłowo:

Tekst

Tekst

Przykład … body {background: #0000 FF; color: #FFFF 00; margin-left: 2 cm; margin-right: 2 cm} h 2 {font-size: 20 pt; color: #FF 0000; background: #FFFFFF} p {font-size: 14 pt; text-indent: 4 cm}. lewa {text-align: left}. prawa {text-align: right} … Czerwony nagłówek na białym tle

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Wyrównamy go do lewego marginesu.

Tekst jest żółty na niebieskim tle. Zastosowano do niego wcięcie i marginesy takie jak do nagłówka. Akapit został wyrównany do prawego marginesu.

Selektor – id o definicje stylu: #tytul_3 {font-size: 16; } H 1#tytul_3 {font-size: 16; } o formatowany element (w ):

Jakiś tytuł

Rozciąganie stylu o Rozciąganie stylu polega na objęciu stylem pewnej sekcji dokumentu HTML. Służy do tego para znaczników Element span jest szczególnie przydatny, gdy konieczne jest odmienne sformatowanie kilku znaków w obszarze, w którym styl narzucają arkusze stylów, lecz można go także wykorzystać, aby zastosować styl do większej sekcji dokumentu o o. kolorowa {font-size: 24 pt; color: #FFFFFF} o o Przykład: Ala ma kota

Cechy – tekst o font-family – krój czcionki n nazwa czcionki np. verdana, Arial n n n o o jeżeli jest wielowyrazowa, to musi zostać ujęta w cudzysłów np. w procentach nazwa: xx-small, medium, large, xx-large, larger, smaller ‘Arial CE‘ font-size – wielkość czcionki n w jednostkach np. 11 px font-weight – grubość czcionki n nazwa: normal, bolder, lighter n liczba: 100 -900 font-style – określa czy czcionka jest pisana kursywą czy nie n nazwa: normal, italic, oblique font-variant – kapitaliki n nazwa: normal, small-caps

o color – kolor tekstu n n o o test-decoration – dekoracja tekstu n nazwa: none, underline, overline, line-through, blink text-transform – transformacja tekstu n nazwa: none, capitalize, uppercase, lowercase text-align – wyrównanie tekstu n nazwa: left, center, right, justify text-indent – wcięcie tekstu n n o dowolna wartość procentowa wartość wyrażona w jednostkach np. 10 pt line-height, letter-spacing, word-spacing – odstępy między: wierszami, literami, wyrazami n nazwa: normal n n o nazwa angielska np. white wartość szesnastkowa np. #FFFFFF dowolna wartość procentowa wartość wyrażona w jednostkach np. 10 pt vertical-align – pionowe wyrównanie tekstu n nazwa: baseline, sub, super, top, text-top, middle, bottom, text-bottom

Cechy – tło o background-color – kolor tła n transparent (przezroczystość), nazwa angielska, wartość szesnastkowa o o background-image – rysunek w tle n none lub url (nazwa_pliku) background-attachment – przewijanie tła wraz z tekstem n scroll, fixed background-repeat – powtarzanie się tła n repeat, no-repeat, repeat-x, repeat-y background-position – pozycja tła n left, right, center, bottom, top

Pozostałe cechy Oprócz wyżej wymienionych elementów można formatować jeszcze wiele innych (wykazy, marginesy, tabele, opływanie rysunku tekstem, warstwy, pozycjonowanie itp. ). Działanie jest analogiczne, a wszystkich możliwości jest bardzo dużo. Pełny opis możliwości CSS znajduje się w oficjalnej specyfikacji na stronie World Wibe Web Consortium, pod adresem: http: //www. w 3. org/Style/CSS/

Przykład – zmiana wyglądu tabeli w HTML o przykładowa prosta strona stworzona za pomocą HTML; index. html:

o w przeglądarce powyższa strona wygląda następująco (Firefox 2. 0. 0. 7): o modyfikacja wyglądu tabeli – np. zmiana czcionki w komórkach – wymaga zmiany w każdej komórce z osobna; biorąc pod uwagę, że jest 26 komórek zawierających tekst – należy 26 razy wpisać/skopiować to samo, np. w miejsce: wkleić: problem się potęguje, gdy dopiero szukamy pasującego układu kolorów i w tym celu sprawdzamy różne możliwości o