Pobieranie prezentacji. Proszę czekać

Pobieranie prezentacji. Proszę czekać

Technologie internetowe Wykład 3 Style kaskadowe CSS.

Podobne prezentacje


Prezentacja na temat: "Technologie internetowe Wykład 3 Style kaskadowe CSS."— Zapis prezentacji:

1 Technologie internetowe Wykład 3 Style kaskadowe CSS

2 Narzędzie do formatowania wyglądu dokumentów Umożliwiają rozdział treści od sposobu jej formatowania Nie wszystkie przeglądarki realizują w pełni style CSS

3 Miejsca definiowania styli Odrębny plik.css zawierający wzorzec stylu Importowanie stylów z innych stron przez Sekcja.. w nagłówku dokumentu html Sekcja stylu obejmująca fragment tekstu Style inline (bezpośrednio w formatownym elemencie poprzez atrybut STYLE Definicje lokalne mają priorytet wyższy od bardziej globalnych

4 Wstawianie stylów inline Przykład cecha wartość

5 Definiowanie stylów dla fragmentu dokumentu To jest fragment objęty poleceniem SPAN Fragment dokumentu objęty blokiem DIV

6 Definiowanie stylu dla całego dokumentu selektor {cecha:wartość}

7 Importowanie styli

8 Definiowanie styli w zewnętrznym arkuszu BODY {text-align: justify; margin-left: 1cm; margin-right: 1cm; margin-top: 1cm} P {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal; text- indent: 3 em} A {text-decoration: none; color: blue} H1 {font-size: 24pt} H2 {font-size: 20pt} H3 {font-size: 16pt} H1, H2, H3 {font-family: "Arial CE", Arial, Helvetica; font-weight: bold; color: #808000} TD {font-family: "Arial CE", Arial, Helvetica; font-size: 10pt; font-weight: normal} arkuszstyli.css Moja strona Strona wykorzystująca arkusz

9 Pierwszeństwo styli b {color:red} i {color:blue} u{color:green} Moja strona To jest fragment tekstu To jest fragment tekstu

10 Selektory selektor {cecha:wartość} Selektor elementu b {color:red} Grupowanie selektorów i,u,h1 {font-size:15px} Selektor uniwersalny * {color:#FF0000; font-weight:bold} Selektor z klasą *.klasa1 {color: blue} a.zewnetrzny {color:green} Tekst CHIP Strona Selektor ID #tytul {color:blue} Tekst

11 Selektory Selektor potomka h1 i {color:blue} Przykładowy tekst Inny tekst Selektor dziecka (IE7) h1 > i {color:blue} Przykładowy tekst Selektor braci (IE7) b + i Taki tekst tekst

12 Selektory Selektory atrybutów (IE7) td[width]{background:yellow} Tekst p[align="center”]{color:blue} Tekst p[title~=„uwaga”]{color:red} Tekst p[titleI="to”]{color:red} Tekst p[title|="to”][align][width="30%”]{color:black}

13 Selektory pseudoklas Pseudoklasa nieodwiedzanego, niewskazywanego łącza a:link {color:blue} Pseudoklasa odwiedzonego łącza a:visited {color:green} Pseudoklasa wskazywanego łącza a:hover {color:orange} Pseudoklasa aktywnego (wybranego) łącza a:active {color:red} Pseudoklasa elementu edytowanego (np. pola edycyjnego) input:focus {background:yellow} Pseudoklasa wyraża aktualny stan elementu.

14 Selektory pseudoelementów Pierwsza linia akapitu p:first-line {color:blue} Pierwsza litera akapitu p:first-letter {font-size:200%} Przed p:before { content: „Tekst:"; color: red } Po p:after {content: "Koniec”} Piesze dziecko td:first-child {color:red}

15 Jednostki miary Miary absolutne in - cale, 1in = 2.54cm cm - centymetry, 1cm mm - milimetry, 1mm pt - punkty, 1pt = 1/72in pc - pika, 1pc = 12pt Miary wzgędne em - wysokość czcionki elementu ex - x-height - wysokość litery x px - piksele, w odniesieniu do rozdzielczości tła %

16 Formatowanie czcionek Rodzaj czcionki - font-family: Arial, Times Styl czcionki – font-style: italic (inne: normal, oblique ) Wariant czcionki –font-variant: small-caps (inne: normal) Waga czcionki – font-weight: bold (inne: normal, bolder, lighter, ) Wysokość czcionki – font-size: 15px (inne: medium, small, smaller, 200%) Atrybut mieszany – font: small-caps bold 14pt/18pt Times, serif

17 Formatowanie tekstu Wyrównanie tekstu – text-align:center (inne: right, center, justify) Wcięcie – text-indent: 1cm Odstępy pomiędzy wyrazami - word-spacing: 1cm Odstępy pomiędzy literami – letter-spacing: 1mm Odstępy pomiędzy liniami – line-height: 1cm Dekoracja tekstu – text-decoration: underline (inne: none, overline, line- through, blink) Transormacje tekstu – text-tranform: capitalize (uppercase,lowercase,none)

18 Kolory i tła Kolor tekstu - color:blue Kolor tła – background-color: yellow Grafika w tle: background-image: url(obraz.jpg) Powtarzanie: beckground-repeat:repeat (inne: repeat-x, repeat-y, no-repeat) Pozycja – backgrouind-position: center (inne: left, top, right bottom, 5cm 10cm) Zaczepienie: background-attachment: scroll (inne:fixed) Atrybut mieszany - background: #FFFF00 url(obraz.jpg) Usunięcia tła: background: none

19 Rozmiary Szerokość – width:150px (3mm, 1 cm, 50%) Wysokość – height:50% Maksymalna szerokość – max-width:100px Maksymalna wysokość – max-height:100px Minimalna szerokość – min-width:100px Minimalna wysokość – min-height:100px

20 Pozycjonowanie Absolutne, w dowolnym miejscu strony Względne, od miejsca wstawienia elementu Tekst Ustalone, względem okna przeglądarki ">

21 Inne możliwości CSS: Marginesy Obramowania Tabele Wykazy Kursory Suwaki Filtry (IE4)

22 Literatura

23 KONIEC


Pobierz ppt "Technologie internetowe Wykład 3 Style kaskadowe CSS."

Podobne prezentacje


Reklamy Google