Autor: Marek Buła bulkas@poczta.onet.pl CSS kaskadowe arkusze stylów CASCADING STYLE SHEETS
Validator (X)HTML
Validator CSS
CSS CSS level 1 (1996, 1999) contains properties for fonts, margins, colors, etc., that nearly all profiles of CSS need. http://www.w3.org/tr/css1 CSS level 2 revision 1 ( CSS 2.1 ) contains all of CSS level 1 and adds absolutely positioned elements, automatic numbering, page breaks, right to left text and other things. At this moment, November 2008, it is a Candidate W3C Recommendation. http://www.w3.org/tr/css21/
Określamy styl dla elementu <h1> selektor h1 { reguła stylu background-color : green; } właściwość stylu - kolor tła wartość właściwościzielony
Określamy styl dla elementu <h1> moŝna równieŝ pisać w ten sposób h1 { background-color : green; } h1 { background-color : green; }
Dodajemy kolejne style dla elementu <h1> h1 { background-color : green; color : red; } kolor czcionki
Umieszczenie styli w kodzie strony sposób 1 <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-2"> <title>moja super strona!</title> <style type="text/css"> h1 { background-color: green; color: red; } </style> </head> <body> <h1>moja super strona</h1> Masz wyjątkową okazję zobaczyć moją super stronę! </body> </html> polskie czcionki
Umieszczenie styli w kodzie strony sposób 2 <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-2"> <title>moja super strona!</title> </head> <body> <h1 style="background-color:green; color:red;">moja super strona</h1> Masz wyjątkową okazję zobaczyć moją super stronę! </body> </html>
Umieszczenie zewnętrznego arkusza stylów <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-2"> <title>moja super strona!</title> <link rel= "stylesheet" type="text/css" href="style.css"> </head> plik style.css <body> <h1>moja super strona</h1> Masz wyjątkową okazję zobaczyć moją super stronę! </body> </html> plik strona.html h1 { } background-color: green; color: red; PołoŜenie plików w folderze
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
http://www.w3schools.com/css/css_reference.asp
Szeryf Szeryf (błędne spolszczenie z ang. serif) poprzeczne lub ukośne zakończenia kresek głównych liter danego kroju pisma. Jego forma graficzna jest jednolita w danym kroju. http://pl.wikipedia.org/wiki/szeryf_(typografia)
body { Kolejność wybierania czcionek przez przeglądarkę sans-serif grupa czcionek posiadająca podobne cechy jest pięć grup 1 2 3 4 font-family: Verdana, Arial, Century Gothic, sans-serif; } brak szeryfów
Wielkość liter jest waŝna! serif jeśli spacje to cudzysłowy body { 1 2 3 font-family:georgia, "Times New Roman", serif; } czcionki z szeryfami
monospace body { 1 2 3 font-family: Courier New, Lucida Console, monospace; } jednakowa szerokość wszystkich znaków
cursive body { 1 2 3 font-family: Comic Sans MS, Monotype Corsiva, cursive; } pismo odręczne
fantasy body { 1 2 3 font-family:impact, PS Bluegum Forest, fantasy; } czcionki dekoracyjne
body { font-size: 20px; } font-size 20px
body { font-size: 20px; } font-size łatwo zmienić wielkość czcionek na całej stronie (dzięki względnemu określeniu wielkości czcionek) h1{ font-size:150%; } h2{ font-size:2.2em; } wspólczynnik skalowania h3{ font-size:x-large; } xx-small x-small small medium large x-large xx-large
drzewo dokumentu Drzewo elementów umieszczonych w dokumencieźródłowym. KaŜdy element w takim drzewie ma dokładnie jednego rodzica, oprócz elementu podstawowego, czyli korzenia drzewa (root). http://www.kurshtml.boo.pl/css/drzewo_dokumentu,definicje.html
drzewo dokumentu root http://www.kurshtml.boo.pl/css/drzewo_dokumentu,definicje.html
drzewo dokumentu dziedziczenie html body root dziedziczenie p h1 h2 h3 a a dzieci dziedziczą od rodziców
wypełnienie, margines, obramowanie To jest moja strona To jest moja strona To jest moja strona To jest moja strona To jest moja strona To jest moja strona margin-top border padding-left padding-top padding-right Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst Tekst padding-bottom margin-left margin-right margin-bottom To jest moja strona To jest moja strona To jest moja strona To jest moja strona To jest moja strona To jest moja strona
wypełnienie, margines, obramowanie 2cm 10px 4cm 40px 20px 4cm 30px 3cm
obramowanie border-style: dotted;
obramowanie border-top-color border-top-style border-top-width border-left-color border-left-style border-left-width border-right-color border-right-style border-right-width border-bottom-color border-bottom-style border-bottom-width
Quiz http://www.w3schools.com/quiztest/quiztest.asp?qtest=css