Technologie internetowe Wykład 3 Style kaskadowe CSS
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
Miejsca definiowania styli Odrębny plik .css zawierający wzorzec stylu Importowanie stylów z innych stron przez polecenie @import. 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
Wstawianie stylów inline cecha wartość <p style="color:red; background:yellow”>Przykład</p> Przykład <img src="obraz.jpg” style="width: 150px”>
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>
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>
Importowanie styli <style> <!-- @import url("http://www.polsl.pl"); --> </style>
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-8859-2"> <LINK REL="stylesheet” HREF="arkuszstyli.css" TYPE="text/css"> </head>
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-8859-2"> <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
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="http://chip.pl”>CHIP</a> <a href="strona.htm>Strona</a> Selektor ID #tytul {color:blue} <p id="tytul”>Tekst</p>
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>
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 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}
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}
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 %
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, 100-900) Wysokość czcionki – font-size: 15px (inne: medium, small, smaller, 200%) Atrybut mieszany – font: small-caps bold 14pt/18pt Times, serif
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)
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
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
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>
Inne możliwości CSS: Marginesy Obramowania Tabele Wykazy Kursory Suwaki Filtry (IE4)
http://www.kurshtml.edu.pl/css/ http://www.w3schools.com/css/ Literatura http://www.kurshtml.edu.pl/css/ http://www.w3schools.com/css/
KONIEC