Wyklad TI 3


2010-03-31
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
1
2010-03-31
Miejsca definiowania styli
Odrębny plik .css zawierający wzorzec stylu
Importowanie stylów z innych stron przez
polecenie @import.
Sekcja 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ść


To jest fragment objęty poleceniem SPAN


Fragment dokumentu objęty blokiem DIV

Definiowanie stylu dla całego
dokumentu
selektor {cecha:wartość}



3
2010-03-31
Importowanie styli

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

Moja strona



4
2010-03-31
Pierwszeństwo styli
b {color:red}
i {color:blue}
u{color:green}

Moja strona





tekstu


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}
"

CHIP
" " #tytul {color:blue}
"

" h1 i {color:blue}
"

Przykładowy tekst


" Inny tekst
" Selektor dziecka (IE7)
" h1 > i {color:blue}
"

Przykładowy tekst


"

Przykładowy tekst


" Selektor braci (IE7)
" b + i
"

Taki tekst


"

tekst


Selektory
Selektory atrybutów (IE7)
td[width]{background:yellow}

Tekst


p[title~= uwaga ]{color:red}

Tekst


p[titleI="to ]{color:red}

Tekst


Tekst


p[title|="to ][align][width="30% ]{color:black}
6
2010-03-31
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}
7
2010-03-31
Jednostki miary
Miary absolutne
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
8
2010-03-31
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
9
2010-03-31
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

Względne, od miejsca wstawienia elementu

Tekst


Ustalone, względem okna przeglądarki
src="obraz.gif" ">

10
2010-03-31
Inne możliwości CSS:
Marginesy
Obramowania
Tabele
Wykazy
Kursory
Suwaki
Filtry (IE4)
http://www.kurshtml.boo.pl/css
11


Wyszukiwarka