APLIKACJE INTERNETOWE 3 CSS - W Y G L Ą D S T R O N Y I N T E R N E T O W E J
PLAN PREZENTACJI Wprowadzenie do css Budowa stylu - selektor cecha wartość Klasa i identyfikator selektora Jednostki Miary Czcionki Tekst Tło Gradient Odstępy - margin, padding Obramowanie Szerokość, wysokość Przepełnienie overflow Elementy pływające float Pozycjonowanie Kolejność elementów Lista Pseudo-klasa :link
WPROWADZENIE DO CSS CSS - kaskadowe arkusze stylów odpowiadają za prezentację poszczególnych elementów strony. CSS oddziela część graficzną od części definiującej strukturę witryny - HTML. Dzięki temu ilość kodu na stronie ulega zmniejszeniu co wpływa na czytelność i szybsze działanie serwisu. Ponadto praca w oddzielnych dokumentach jest znacznie łatwiejsza. Do przygotowania takiego dokumentu wystarczy dowolny edytor tekstowy np. notatnik.
WPROWADZENIE DO CSS Wstawianie stylów z zewnętrznego pliku <head> <link rel="stylesheet" href="styl.css" type="text/css" /> </head> p { color: red; font-weight: bold; } <p>tekst będzie koloru czerwonego, pogrubiony.</p> Styl lokalny <p style="color: red; font-weight: bold;">tekst będzie pogrubiony, w kolorze czerwonym.</p>
BUDOWA STYLU Składnia stylu selektor - dowolny znacznik, np. p (akapit), h1 (nagłówek), li (lista) cecha - właściwość stylu dla znacznika, np. kolor (color) wartość - opis cechy np. kolor czcionki (color) czerwony (red) p { font-style: italic; color: blue; background: silver; } <p>tekst pochylony w kolorze niebieskim na szrym tle.</p>
BUDOWA STYLU Używanie identyfikatora (id) lub klasy (class) dany identyfikator może wystąpić w dokumencie tylko raz. <h5>pierwszy nagłówek h5.</h5> <h5 style="color: green;">drugi nagłówek h5.</h5> <h5>trzeci nagłówek h5.</h5> <h5>pierwszy nagłówek h5.</h5> <h5 class="drugi">drugi nagłówek h5.</h5> <h5>trzeci nagłówek h5.</h5> h5.drugi { color: green; }
KLASA I IDENTYFIKATOR SELEKTORA Klasa selektora selektor.klasa { cecha: wartość; } Klasą może być pojedynczy wyraz. W nazwie należy unikać polskich liter oraz znaków zakazanych takich jak kropka czy znak równości. p.styl { color: green; } <p>ten akapit bedzie mieć globalnie ustawiony styl.</p> <p class="styl;">ten akapit bedzie mieć odrębny styl.</p> <p>ten akapit bedzie mieć globalnie ustawiony styl.</p>
KLASA I IDENTYFIKATOR SELEKTORA Identyfikator selektora selektor.klasa { cecha: wartość; } Identyfikatorem może być pojedynczy wyraz. W nazwie należy unikać polskich liter oraz znaków zakazanych takich jak kropka czy znak równości. p#styl1 { color: orange; } p#styl2 { color: green; } <p id="styl1;">ten akapit będzie mieć odrębny styl.</p> <p id="styl2;">ten akapit będzie mieć odrębny styl.</p> <p>ten akapit będzie mieć globalnie ustawiony styl.</p>
JEDNOSTKI MIARY Miary relatywne px - piksele em - wysokość czcionki ex - wysokość litery <p style="font-size: 15px;">Pierwszy akapit czcionką 15px.</p> <p style="font-size: 1.5em;">Drugi akapit czcionką 1.5em.</p> <p style="font-size: 3.0ex;">Trzeci akapit czcionką 3.0ex.</p>
JEDNOSTKI MIARY Miary absolutne mm - milimetry cm - centymetry in - cale pt - punkty pc - pika <p style="font-size: 5mm;">Pierwszy akapit czcionką 5mm.</p> <p style="font-size: 1cm;">Drugi akapit czcionką 1cm.</p> <p style="font-size: 0.3in;">Trzeci akapit czcionką 0.3in.</p> <p style="font-size: 15pt;">Czwarty akapit czcionką 15pt.</p> <p style="font-size: 1pc;">Piąty akapit czcionką 1pc.</p>
CZCIONKI Właściwości czcionki: wielkość rodzaj kolor waga styl wariant połączenie właściwości
CZCIONKI Wielkość - font-size selektor { font-size: wartość; } Jednostki względne są obliczane na podstawie wielkości czcionki rodzica: xx-small, x-small, small medium large, x-large, xx-large Wielkość względna czcionki określana jest przez: smaller larger
CZCIONKI Rodzaj - font-family Rodzaje czcionki: szeryfowe (serif) - posiadają ozdobniki np. 'Times New Roman', Georgia bezszeryfowe (sans-serif) - bez ozdobników np. Arial, Tahoma, Verdana Deklarując styl fontu dobrze jest podać rodzinę czcionek na wypadek, jeśli użytkownik nie będzie dysponował którąś z wymienionych. p { font-family: Arial, Tahoma, Verdana, sans-serif; }
CZCIONKI Styl font-style selektor { font-style: wartość; } Dostępne wartości stylu czcionki: normal - standardowa (domyślna) italic - pochylona (kursywa) - odrębna wersja czcionki oblique - pochylona (kursywa) - pochylenie czcionki bez względu czy faktycznie taki krój istnieje p { font-style: italic; }
CZCIONKI Wariant font-variant selektor { font-variant: wartość; } Dostępne wartości wariantu czcionki: normal - standardowa (domyślna) small-caps - kapitaliki p { font-variant: small-caps; }
CZCIONKI Połączenie właściwości - Kilka właściwości w jednej deklaracji. p { font: italic bold 1.8em serif; }
TEKST Formatowanie tekstu może odbywać się przez: wyrównanie wcięcie transformacja dekoracja cień odstęp pomiędzy literami odstęp pomiędzy wyrazami
TEKST Wyrównanie - text-align Można zastosować wartości: left - wyrównanie do lewej (domyślne) right - wyrównanie do prawej center - wyśrodkowanie justify - justowanie (wyrównanie do lewego i prawego marginesu) p { text-align: right; }
TEKST Wcięcie - text-indent p { text-indent: 40px; } Transformacja - text-transform Można zastosować wartości: capitalize - pierwsza litera każdego wyrazu będzie duża uppercase - wszystkie litery będą duże lowercase - wszystkie litery będą małe none - bez efektu transformacji p { text-transform: uppercase; }
TEKST Dekoracja text-decoration Można zastosować wartości: underline - podkreślenie overline - linia nad tekstem line-through - przekreślenie blink - miganie none - bez efektu dekoracji tekstu p { text-decoration: underline; }
TEKST Cień - text-shadow selektor { text-shadow: a b c d; } a - położenie w poziomie b - położenie w pionie c - rozmycie d - kolor p { text-shadow: 2px 2px 1px silver; }
TEKST Odstęp pomiędzy literami letter-spacing selektor { letter-spacing: wartość; } p { letter-spacing: 5px; } Odstęp pomiędzy wyrazami - word-spacing selektor { word-spacing: wartość; } p { word-spacing: 15px; }
TŁO Możliwości formatowania: kolor obrazek w tle pozycja powtarzanie położenie rozmiar połączenie właściwości
TŁO Kolor background-color selektor { background-color: wartość; } p { background-color: yellow; } Obrazek w tle background-image selektor { background-image: ścieżka do obrazka; } body { background-image: url(../images/arrow2.png); } selektor { background-repeat: ścieżka do obrazka1, ścieżka do obrazka2; }
TŁO Pozycja background-position Można zastosować wartości: left - na lewo right - na prawo top - w górze bottom - na dole center - na środku odległość np. px, em, cm, % body { background-position: top right; }
TŁO Powtarzanie background-repeat selektor { background-repeat: ścieżka do obrazka; } Można zastosować wartości: repeat - powtarzanie w pionie i poziomie repeat-x - powtarzanie w poziomie repeat-y - powtarzanie w pionie no-repeat - bez powtarzania space - obrazki w tle i przestrzeń pomiędzy bez przycinania round - obrazki w tle bez przycinania body { background-repeat: repeat-x; }
TŁO Położenie background-position selektor { background-attachment: wartość; } Można zastosować wartości: scroll - tło przewijane (domyślne) fixed - tło zablokowane local - tło zablokowane względem elementu, w którym się znajduje body { background-attachment: fixed; }
TŁO Rozmiar background-size selektor { background-size: wartość; } Można zastosować wartości: auto - rozmiar obrazka (domyślny) cover - rozmiar obrazka zostanie zwiększony na szerokość elementu contain - rozmiar obrazka zostanie zwiększony na wysokość elementu piksele - rozmiar obrazka w pikselach procenty - rozmiar obrazka w procentach body { background-size: cover; }
TŁO Połączenie właściwości body { background: blue url(../images/arrow2.png) top center repeax-y; }
GRADIENT Ustalenie za pomocą background-gradient liniowy kołowy selektor { background-gradient: wartość; }
GRADIENT Gradient liniowy selektor { background: linear-gradient: a, b c, d e; } a - kierunek to right - z lewej do prawej to left - z prawej do lewej to top - z dołu do góry to bottom - z góry do dołu to right top, to right bottom, to left top, to left bottom - na ukos b - pierwszy kolor c - odległość początkowa d - drugi kolor e - odległość końcowa body { background: linear-gradient(to top, aqua, blue); }
GRADIENT Gradient liniowy Ustalając styl dla poszczególnych elementów strony trzeba pamiętać, że nie wszystkie przeglądarki poprawnie interpretują deklaracje CSS3. Niektóre wymagają oddzielnej implementacji. /* Dla starszych przeglądarek */ body { background: blue; } /* Safari 4-5, Chrome 1-9 */ background: -webkit-gradient(linear, left top, left bottom, from(aqua), to(blue)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-linear-gradient(top, aqua, blue); /* Firefox 3.6+ */ background: -moz-linear-gradient(top, aqua, blue); /* IE 10 */ background: -ms-linear-gradient(top, aqua, blue); /* Opera 11.10+ */ background: -o-linear-gradient(top, aqua, blue);
GRADIENT Gradient kołowy selektor { background: radial-gradient: a b at c, d e, f g; } a - kształt circle - okrąg ellipse - elipsa b - rozmiar closed-side - promień gradientu do najbliższego punktu od środka farthest-side - promień gradientu do najdalszego punktu od środka closed-corner - promień gradientu do najbliższego narożnika od środka farthest-corner - promień gradientu do najdalszego narożnika od środka (domyślny) c - pozycja punktu środkowego d - odległość początkowa e - drugi kolor f - odległość końcowa
ODSTĘPY - MARGIN, PADDING Margin - odstęp na zewnątrz elementu selektor { margin: wartość; } Można ustawić margines: margin-left - lewy margin-right - prawy margin-top - górny margin-bottom - dolny p { margin-top: 50px; } p { margin: 50px 30px 20px 25px; } Marginesy są ustawiane w kolejności góra, prawy, dół, lewy.
ODSTĘPY - MARGIN, PADDING Padding - odstęp wewnątrz elementu selektor { padding: wartość; } Można ustawić padding: padding-left - lewy padding-right - prawy padding-top - górny padding-bottom - dolny p { padding-top: 50px; } p { padding: 50px 30px 20px 25px; } Padding jest ustawiany w kolejności góra, prawy, dół, lewy.
OBRAMOWANIE Obramowanie border selektor { border: wartość; } p { border: a b c; } a - width (szerokość) b - style (styl) c - color (kolor)
OBRAMOWANIE Można ustawić osobno każdą z ramek: border-left - lewa border-right - prawa border-top - górna border-bottom - dolna p { border-left: 3px solid red; } p { } border-left-width: 3px; border-left-style: solid; border-left-color: red;
OBRAMOWANIE p { border: 5px dashed green; } Zaokrąglenia narożników: p { border: 2px solid green; border-radius: 5px 10px 5px 10px; }
SZEROKOŚĆ, WYSOKOŚĆ Szerokość - width selektor { width: wartość; } div.blok { width: 300px; background: navy; } Dodatkowo można zadeklarować szerokość minimalną - element nie będzie węższy niż zadeklarowana wartość oraz maksymalną - element nie będzie szerszy od zadeklarowanej wartości. selektor { min-width: wartość; } selektor { max-width: wartość; }
SZEROKOŚĆ, WYSOKOŚĆ Wysokość - height selektor { height: wartość; } div.blok { height: 100px; background: navy; } Połączenie właściwości div.blok { width: 300px; height: 100px; background: navy; } Podobnie jak przy szerokości również tutaj można zadeklarować wysokość minimalną - element nie będzie mniejszy niż zadeklarowana wartość oraz maksymalną - element nie będzie wyższy od ustalonej wartości. selektor { min-height: wartość; } selektor { max-height: wartość; }
PRZEPEŁNIENIE - OVERFLOW Przepełnienie overflow selektor { overflow: wartość; } Wartość może przybierać jeden z parametrów: visible - domyślne hidden - zakrywanie nie mieszczącej się zawartości w zadeklarowanych ramach scroll - przewijanie auto - w razie konieczności pojawią się przewijanie p { width: 100px; height: 83px; overflow: visible; background: silver; }
PRZEPEŁNIENIE - OVERFLOW Visible p { width: 100px; height: 83px; overflow: visible; background: silver; } Hidden p { width: 100px; height: 83px; overflow: hidden; background: silver; } Scroll p { width: 100px; height: 83px; overflow: scroll; background: silver; } Auto p { width: 100px; height: 83px; overflow: auto; background: silver; }
ELEMENTY PŁYWAJĄCE - FLOAT Float - elementy mogą znajdować się po prawej albo lewej stronie. selektor { float: wartość; } Float może przyjmować wartości: left - na lewo right - na prawo none - element nie bedzie pływający (domyślne) div.blok1 { float: left; width: 100px; background: aqua; } div.blok2 { float: right; width: 100px; background: blue; }
ELEMENTY PŁYWAJĄCE - FLOAT Clear - elementy pływające na stronie np. obrazki nachodzą na siebie. selektor { clear: wartość; } Clear może przyjmować wartości: left - element będzie poniżej elementu pływającego, umożliwia opływanie z prawej strony right - element będzie poniżej elementu pływającego, umożliwia opływanie z lewej strony both - element będzie poniżej elementu pływającego none - właściwość nieaktywna (domyślne) div.blok1 { float: left; width: 100px; background: aqua; } div.blok2 { float: left; clear: left; width: 100px; background: blue; }
POZYCJONOWANIE position - pozycjonowanie umożliwia precyzyjne umiejscowienie elementów na stronie. selektor { position: wartość; } Właściwość position może przyjmować wartości: absolute - element znajduje się w miejscu zdefiniowanym przez wartości left, right, top, bottom względem bloku, w którym został umieszczony relative - definiowana na podstawie rzeczywistego umiejscowienia na stronie, przesuwanie następuje za pomocą wartości left, right, top, bottom fixed - pozycja ustalana względem okna przeglądarki, przesuwanie następuje za pomocą wartości left, right, top, bottom static - wyłączenie pozycjonowania
POZYCJONOWANIE Absolute p { position: absolute; top: 25px; left: 270px; font-weight: bold; } Relative p { position: relative; left: 80px; } Fixed p { position: fixed; } Static p { position: static; }
KOLEJNOŚĆ ELEMENTÓW z-index porządek wyświetlania elementów wzdłuż osi z. selektor { z-index: wartość; } Element, któremu zostanie przyporządkowany wyższy indeks przykryje ten z niższym..box1 { z-index: 1; position: absolute; background: green; width: 100px; height: 100px; }.box2 { z-index: 2; position: absolute; background: aqua; width: 100px; height: 100px; top: 20px; left: 20px; }.box3 { z-index: 3; position: absolute; background: blue; width: 100px; height: 100px; top: 40px; left: 40px; }
LISTA Rodzaj listy: Nieuporządkowana Jeden Dwa Trzy Uporządkowana 1. Jeden 2. Dwa 3. Trzy
LISTA list-style-type - typ wypunktowania selektor { list-style-type: wartość; } Lista nieuporządkowana: disc - ul { list-style-type: disc; } circle - ul { list-style-type: circle; } square - ul { list-style-type: square; }
LISTA Lista uporządkowana: decimal - ul { list-style-type: decimal; } lower-alpha - ul { list-style-type: lower-alpha; } upper-alpha - ul { list-style-type: upper-alpha; } lower-roman - ul { list-style-type: lower-roman; } upper-roman - ul { list-style-type: upper-roman; }
LISTA Obrazek jako wypunktowanie - list-style-type selektor { list-style-image: wartość; } ul { list-style-image: url(../images/wyslane.png); } Wygląd listy Znacznik listy li możemy formatować również przy pomocy właściwości określających kolor czcionki, typ, grubość, styl, itd. ul li { color: leaf; font-size: 2.0em; font-weight: bold; fontstyle: italic; }
PSEUDO-KLASA :LINK Stosowanie pseudo-klas daje możliwość zbudowania logicznej struktury odnośników. Poprzez właściwości takie jak :link, :visited, :hover, :active, :focus można nadać formatowanie linkom w zależności od wykonanej akcji.
PSEUDO-KLASA :LINK :link - linki, które nie zostały jeszcze odwiedzone. a:link { color: blue; } :visited - linki, które zostały już odwiedzone. a:visited { color: green; } :hover - linki, nad którymi znajdzie się kursor. a:hover { color: red; } :active - link, na którym w danym momencie wykonywana jest akcja. a:active { background: orange; } :focus - link, który po wybraniu nadal jest aktywny. a:focus { color: aqua; }