Pobierz prezentację
Pobieranie prezentacji. Proszę czekać
1
Arkusz stylów CSS Cascading Style Sheet
2
Opis stylu Reguła = selektor + blok deklaracji
3
Komentowanie stylów p { color: red; /* jednolinijkowy */ text-align: center; } /* Wielolinijkowy komentarz w kodzie stylów */
4
Sposoby dołączania stylów
W znaczniku w kodzie strony Wewnętrzne w sekcji head Zewnętrznie w pliku .css url(inny_plik.css);
5
Styl w znaczniku <h1 style="color:blue;"> Niebieski nagłówek
6
Styl w sekcji <head>
<!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} </style> </head> <body> … </body> </html>
7
Style w zewnętrznym pliku
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> … </body> </html>
8
Style w zewnętrznym pliku
body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
9
Dołączenie pliku .css do stylów
@import url(inny_plik.css);
10
Kolejność stosowania stylów
Style w znacznikach Style wewnętrzne i zewnętrzne z sekcji <head> Style domyślne przeglądarki
11
Kolory Nazwa np. red 140 nazwanych kolorów
Skala RGB np. „rgb(255, 0, 0)” Zapis w systemi HEX np. „#ff0000” „#f00”
12
Style tła background-color background-image background-repeat
background-attachment background-position
13
Kolor h1 { background-color: green; }
14
Grafika body { background-image: url("paper.gif"); }
15
Powtarzanie grafiki w poziomie body { background-image: url("gradient_bg.png"); background-repeat: repeat-x; } w pionie body { background-image: url("gradient_bg.png"); background-repeat: repeat-y; } bez powtarzania body { background-image: url("gradient_bg.png"); background-repeat: no-repeat; }
16
Inne ustawienia tła Punkt zaczepienia Bez przewijania
background-position: right top; Bez przewijania background-attachment: fixed;
17
Skrót Kolejność: background-color background-image background-repeat
body { background: #ffffff url("img_tree.png") no-repeat right top; } Kolejność: background-color background-image background-repeat background-attachment background-position
19
Margines Skrót dla margin-top margin-right margin-bottom margin-left
20
Stosowanie skrótów div { } margin:15px 30px 45px 60px;
margin-top:15px; margin-right:30px; margin-bottom:45px; margin-left:60px;
21
Stosowanie skrótów margin:50px; margin:50px 50px 50px 50px; margin:50px 25px; margin:50px 25px 50px 25px; margin:50px 25px 10px; margin:50px 25px 10px 25px;
22
Inne uwagi Wartość auto dla centrowania elementów
Nakładanie się marginesów
23
Padding Skrót dla padding-top padding-right padding-bottom
padding-left Zasady stosowania skrótów jak dla marginesu
24
Border border-width border-style (wymagane) border-color
25
Szerokość border-width: 1px; border-color: red; Kolor
26
border-style: dotted dashed solid double groove ridge inset outset
none hidden
28
Dla 4 wartości top right bottom left top right and left bottom
border-style: dotted solid double dashed; top right bottom left border-style: dotted solid double; top right and left bottom border-style: dotted solid; top and bottom right and left border-style: dotted; wszystkie
29
Skrót Kolejność border-width border-style border-color
30
Zaokrąglenie obramowania
border-radius
31
Content Wysokość i szerokość
Height and width nie wliczają paddingu, bordera ani marginesu Max-width i min-width
32
Tekst color text-align text-decoration text-transform text-indent
letter-spacing word-spacing line-height text-shadow
33
text-align h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } div { text-align: justify; }
34
text-decoration a { text-decoration: none; } h1 { text-decoration: overline; h2 { text-decoration: line-through; h3 { text-decoration: underline;
35
Zmiana liter w napisach
p { text-transform: uppercase; } p { text-transform: lowercase; } p { text-transform: capitalize; }
36
Odstęp między literami
h1 { letter-spacing: 3px; } h2 { letter-spacing: -3px;
37
Odstęp między wyrazami
h1 { word-spacing: 10px; } h2 { word-spacing: -5px;
38
Interlinia p.small { line-height: 0.8; } p.big { line-height: 1.8;
39
Wcięcie akapitu p { text-indent: 50px; }
40
Cień h1 { text-shadow: 3px 2px red; }
41
Czcionki color font-family font-size font-style font-weight
43
Typy czcionek Times New Roman Serif Georgia Arial Sans-serif Verdana
Monospace Courier New Lucida Console
44
Styl czcionki p { font-style: normal; } p { font-style: italic; } p { font-style: oblique; }
45
Wielkość czcionki h1 { font-size: 40px; } h2 { font-size: 30px; p { font-size: 14px; 1em = 16px
46
Wielkość czcionki body { font-size: 100%; } h1 { font-size: 2.5em; } h2 { font-size: 1.875em; } p { font-size: 0.875em; }
47
Grubość czcionki p.normal { font-weight: normal; } p.thick { font-weight: bold; }
48
Linki Stany: a:link a:visited a:hover a:active
49
Style a:link { color: red; } a:visited { color: green; } a:hover { color: hotpink; } a:active { color: blue; }
50
Linki jako przyciski a:link, a:visited { background-color: #f44336; color: white; padding: 14px 25px; text-align: center; text-decoration: none; display: inline-block; } a:hover, a:active { background-color: red; }
51
Listy ul.a { list-style-type: circle; } ul.b { list-style-type: square; } ol.c { list-style-type: upper-roman; } ol.d { list-style-type: lower-alpha; } ul { list-style-image: url('sqpurple.gif'); }
52
Inne style ol { background: #ff9999; padding: 20px; } ul { background: #3399ff; padding: 20px; } ol li { background: #ffe5e5; padding: 5px; margin-left: 35px; } ul li { background: #cce5ff; margin: 5px; }
53
Tabele Obramowania table, th, td { border: 1px solid black; }
54
Tabele Odstępy table { border-collapse: collapse; } table, th, td { border: 1px solid black; }
55
Tabele inne style Wysokość szerokość Wyrównanie zawartości tr :hover
text-align vertical-align tr :hover
56
id Wskazanie jednego elementu <p id="p01">Jakiś inny</p>
#p01 { color: blue; }
57
class Wskazanie grupy elementów <p class="error">Błąd</p>
p.error { color: red; }
58
Kilka klas h1, h2, p { text-align: center; color: red; }
59
Źródła
60
Dziękuję za uwagę!
Podobne prezentacje
