Arkusz stylów CSS Cascading Style Sheet
Opis stylu Reguła = selektor + blok deklaracji
Komentowanie stylów p { color: red; /* jednolinijkowy */ text-align: center; } /* Wielolinijkowy komentarz w kodzie stylów */
Sposoby dołączania stylów W znaczniku w kodzie strony Wewnętrzne w sekcji head Zewnętrznie w pliku .css * @import url(inny_plik.css);
Styl w znaczniku <h1 style="color:blue;"> Niebieski nagłówek
Styl w sekcji <head> <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} </style> </head> <body> … </body> </html>
Style w zewnętrznym pliku <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="style.css"> </head> <body> … </body> </html>
Style w zewnętrznym pliku body { background-color: powderblue; } h1 { color: blue; } p { color: red; }
Dołączenie pliku .css do stylów @import url(inny_plik.css);
Kolejność stosowania stylów Style w znacznikach Style wewnętrzne i zewnętrzne z sekcji <head> Style domyślne przeglądarki
Kolory Nazwa np. red 140 nazwanych kolorów Skala RGB np. „rgb(255, 0, 0)” Zapis w systemi HEX np. „#ff0000” „#f00” http://colorschemedesigner.com/ http://paletton.com/
Style tła background-color background-image background-repeat background-attachment background-position
Kolor h1 { background-color: green; }
Grafika body { background-image: url("paper.gif"); }
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; }
Inne ustawienia tła Punkt zaczepienia Bez przewijania background-position: right top; Bez przewijania background-attachment: fixed;
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
Margines Skrót dla margin-top margin-right margin-bottom margin-left
Stosowanie skrótów div { } margin:15px 30px 45px 60px; margin-top:15px; margin-right:30px; margin-bottom:45px; margin-left:60px;
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;
Inne uwagi Wartość auto dla centrowania elementów Nakładanie się marginesów
Padding Skrót dla padding-top padding-right padding-bottom padding-left Zasady stosowania skrótów jak dla marginesu
Border border-width border-style (wymagane) border-color
Szerokość border-width: 1px; border-color: red; Kolor
border-style: dotted dashed solid double groove ridge inset outset none hidden
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
Skrót Kolejność border-width border-style border-color
Zaokrąglenie obramowania border-radius
Content Wysokość i szerokość Height and width nie wliczają paddingu, bordera ani marginesu Max-width i min-width
Tekst color text-align text-decoration text-transform text-indent letter-spacing word-spacing line-height text-shadow
text-align h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } div { text-align: justify; }
text-decoration a { text-decoration: none; } h1 { text-decoration: overline; h2 { text-decoration: line-through; h3 { text-decoration: underline;
Zmiana liter w napisach p { text-transform: uppercase; } p { text-transform: lowercase; } p { text-transform: capitalize; }
Odstęp między literami h1 { letter-spacing: 3px; } h2 { letter-spacing: -3px;
Odstęp między wyrazami h1 { word-spacing: 10px; } h2 { word-spacing: -5px;
Interlinia p.small { line-height: 0.8; } p.big { line-height: 1.8;
Wcięcie akapitu p { text-indent: 50px; }
Cień h1 { text-shadow: 3px 2px red; }
Czcionki color font-family font-size font-style font-weight
Typy czcionek Times New Roman Serif Georgia Arial Sans-serif Verdana Monospace Courier New Lucida Console
Styl czcionki p { font-style: normal; } p { font-style: italic; } p { font-style: oblique; }
Wielkość czcionki h1 { font-size: 40px; } h2 { font-size: 30px; p { font-size: 14px; 1em = 16px
Wielkość czcionki body { font-size: 100%; } h1 { font-size: 2.5em; } h2 { font-size: 1.875em; } p { font-size: 0.875em; }
Grubość czcionki p.normal { font-weight: normal; } p.thick { font-weight: bold; }
Linki Stany: a:link a:visited a:hover a:active
Style a:link { color: red; } a:visited { color: green; } a:hover { color: hotpink; } a:active { color: blue; }
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; }
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'); }
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; }
Tabele Obramowania table, th, td { border: 1px solid black; }
Tabele Odstępy table { border-collapse: collapse; } table, th, td { border: 1px solid black; }
Tabele inne style Wysokość szerokość Wyrównanie zawartości tr :hover text-align vertical-align tr :hover
id Wskazanie jednego elementu <p id="p01">Jakiś inny</p> #p01 { color: blue; }
class Wskazanie grupy elementów <p class="error">Błąd</p> p.error { color: red; }
Kilka klas h1, h2, p { text-align: center; color: red; }
Źródła http://www.w3schools.com/cssref/
Dziękuję za uwagę!