Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
Technologie internetowe
Wykład 3 Style kaskadowe CSS
2
Style kaskadowe CSS 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 <style> .. </style> 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
cecha wartość <p style="color:red; background:yellow”>Przykład</p> Przykład <img src="obraz.jpg” style="width: 150px”>
5
Definiowanie stylów dla fragmentu dokumentu
<span style="font-family: Courier; font-size: 15pt; font-weight: bold; color: red"> To jest fragment objęty poleceniem SPAN </span> <div style=""font-family: arial; color: olive; position: relative; left: 300; width: 550"> Fragment dokumentu objęty blokiem DIV </div>
6
Definiowanie stylu dla całego dokumentu
selektor {cecha:wartość} <head> <style type="text/css"> <!-- body {margin-left: 1cm; margin-right: 1cm} p {font-size: 10pt; font-family: Arial, Helvetica; font-weight: normal} a {color:green} --> </style> </head>
7
Importowanie styli <style> url(" --> </style>
8
Definiowanie styli w zewnętrznym arkuszu
arkuszstyli.css 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} Strona wykorzystująca arkusz <head> <title>Moja strona</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <LINK REL="stylesheet” HREF="arkuszstyli.css" TYPE="text/css"> </head>
9
Pierwszeństwo styli To jest fragment tekstu
b {color:red} i {color:blue} u{color:green} <head> <title>Moja strona</title> <meta http-equiv="content-type" content="text/html; charset=iso "> <LINK REL=stylesheet HREF="arkuszstyli.css" TYPE="text/css"> <style type="text/css"> <!-- i {color:gray} --> </style> </head> <body> <div style="color:pink”>To <b>jest</b> <i><u>fragment</u></i> <b style="color:orange”>tekstu</b></div> </body></html> 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} <p class="klasa1”>Tekst</p> <a class="zewnetrzny” href=" <a href="strona.htm>Strona</a> Selektor ID #tytul {color:blue} <p id="tytul”>Tekst</p>
11
Selektory Selektor potomka h1 i {color:blue}
<h1>Przykładowy <u><i>tekst</i></u></h1> <i>Inny tekst</i> Selektor dziecka (IE7) h1 > i {color:blue} <h1>Przykładowy <i>tekst</i></h1> Selektor braci (IE7) b + i <color:blue> <p><b>Taki</b> <i>tekst</i></p> <p><i>tekst</i></p>
12
Selektory Selektory atrybutów (IE7) td[width]{background:yellow}
<td width="30%”>Tekst</td> <td>Tekst</td> p[align="center”]{color:blue} <p align="center”>Tekst</p> <p align="left”>Tekst</p> p[title~=„uwaga”]{color:red} <p title="Ważna uwaga”>Tekst</p> <p align="Ważna informacja”>Tekst</p> p[titleI="to”]{color:red} <p title=„To ważna uwaga”>Tekst</p> <p align=„A to ważna informacja”>Tekst</p> p[title|="to”][align][width="30%”]{color:black}
![Selektory Selektory atrybutów (IE7) td[width]{background:yellow}](http://slideplayer.pl/slide/4143200/12/images/12/Selektory+Selektory+atrybut%C3%B3w+%28IE7%29+td%5Bwidth%5D%7Bbackground%3Ayellow%7D.jpg "<td width= 30% >Tekst</td> <td>Tekst</td> p[align= center ]{color:blue} <p align= center >Tekst</p> <p align= left >Tekst</p> p[title~=„uwaga ]{color:red} <p title= Ważna uwaga >Tekst</p> <p align= Ważna informacja >Tekst</p> p[titleI= to ]{color:red} <p title=„To ważna uwaga >Tekst</p> <p align=„A to ważna informacja >Tekst</p> p[title|= to ][align][width= 30% ]{color:black}")
13
Selektory pseudoklas Pseudoklasa wyraża aktualny stan elementu.
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}
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 Miary wzgędne 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
<div style="position:absolute; left:0px; top:0px"><img src="obraz.gif" "></div> Względne, od miejsca wstawienia elementu <p style="position: relative; left: 200px; top: 50px">Tekst</p> Ustalone, względem okna przeglądarki <div style="position:fixed; left:0; top:0”> "><img src="obraz.gif" "></div>
21
Inne możliwości CSS: Marginesy Obramowania Tabele Wykazy Kursory
Suwaki Filtry (IE4)
22
http://www.kurshtml.edu.pl/css/ http://www.w3schools.com/css/
Literatura
23
KONIEC
Podobne prezentacje
