Kurs WWW

1
Kurs WWW wyklad 3

• Pawel Rajba
• pawel_at_ii.uni.wroc.pl
• http//www.ii.uni.wroc.pl/pawel/

2
CSS Cascading Style Sheets

• Dlaczego powstal CSS?
• Jak tego uzywac?
• Walidator
• http//jigsaw.w3.org/css-validator/

3
Wstawienie arkusza CSS

• Bezposrednio w dokumencie
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
  4.0//EN"gt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtMoja strona domowalt/TITLEgt
• ltSTYLE type"text/css"gt
• H1 color red
• P color blue
• lt/STYLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtMoja fantastyczna strona domowalt/H1gt
• ltPgtTutaj zobaczycie to, czego nigdzie
  indziej...
• lt/BODYgt
• lt/HTMLgt

4
Wstawienie arkusza CSS

• Poprzez odwolanie do innego dokumentu
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
  4.0//EN"gt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtMoja strona domowalt/TITLEgt
• ltLINK rel"StyleSheet" type"text/css"
• href"mojstyl.css" gt
• lt/HEADgt
• ltBODYgt
• ltH1gtMoja fantastyczna strona domowalt/H1gt
• ltPgtTutaj zobaczycie to, czego nigdzie
  indziej...
• lt/BODYgt
• lt/HTMLgt

5
Reguly CSS

• Regula sklada sie z dwóch czesci
• selektora (np. H1)
• deklaracji (np. colorblue)
• Deklaracja równiez sklada sie z dwóch czesci
• wlasciwosci (np. color)
• wartosci (np. blue)

6
Drzewo dokumentu

• Rozpatrzmy ponizszy dokument
• lt!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
  4.0//EN"gt
• ltHTMLgt
• ltHEADgt
• ltTITLEgtMoja strona domowalt/TITLEgt
• lt/HEADgt
• ltBODYgt
• ltH1gtMoja fantastyczna strona domowalt/H1gt
• ltPgtTutaj zobaczycie to, czego nigdzie
  indziej...
• ltULgt
• ltLIgtTygrysylt/LIgt
• ltLIgtZebrylt/LIgt
• ltLIgtMalpiszonylt/LIgt
• lt/BODYgt
• lt/HTMLgt

7
Drzewo dokumentu

• I odpowiadajace mu drzewko

HTML
BODY
HEAD
TITLE
H1
P
UL
LI
LI
LI
8
Terminologia

• Rodzic (parent) - element B zawiera bezposrednio
  pewna ilosc elementów. Jest on rodzicem tych
  elementów.
• Dziecko (child) element A jest dzieckiem
  elementu B, kiedy B jest rodzicem A
• Potomek (descendant) element A jest potomkiem
  elementu B, kiedy
• A jest dzieckiem B lub
• A jest dzieckiem C, który jest potomkiem B

9
Terminologia

• Przodek (ancestor) element A jest przodkiem
  elementu B, kiedy B jest potomkiem A
• Brat/siotra (sibling) element A jest bratem
  elementu B, kiedy A i B maja wspólnego rodzica. A
  jest poprzedzajacym bratem B, kiedy wystepuje
  wczesniej w drzewie dokumentu A jest
  nastepujacym bratem B, kiedy wystepuje pózniej w
  drzewie dokumentu

10
Terminologia

• Element wczesniejszy (preceding element)
  element A jest wczesniejszy niz element B, kiedy
• A jest przodkiem B lub
• A jest poprzedzajacym bratem B
• Element pózniejszy (following element) element
  A jest pózniejszy niz element B, kiedy B jest
  elementem wczesniejszym niz element A

11
Kilka uwag

• grupowanie
• H1 font-weight bold
• H1 font-size 12pt
• H1
• font-weight bold
• font-size 12pt
• H1 font-family sans-serif
• H2 font-family sans-serif
• H3 font-family sans-serif
• H1, H2, H3 font-family sans-serif

12
Kilka uwag

• Jednostki
• dlugosci
• relatywne
• em szerokosc znaku M
• ex wysokosc linii
• px 1 pixel
• absolutne
• in cale (2.54 cm)
• cm, mm
• pt punkty (1/72 cala)
• pc picas (12 pt)
• procentowe np. 120

13
Kilka uwag

• kolorki
• H1 color maroon
• P color f00 / rgb /
• P color ff0000 / rrggbb /
• P color rgb(255,0,0) / 0 - 255 /
• P color rgb(100, 0, 0)
• napisy
• "this is a 'string'"
• "this is a \"string\""
• 'this is a "string"'
• 'this is a \'string\''

14
Kilka uwag

• Komentarze / ... /
• Dwa rózne obiekty "napis", stala
• color "red" zle
• Mozna przelamywac wiersze
• ATITLE"a not s\
• o very long title"
• /.../
• ATITLE"a not so very long title"
• /.../

15
Selektory

• Universal selector
• piszemy , jezeli po jest cos jeszcze, to
  mozna pominac
• dopasowuje sie do kazdego elementu drzewa
  dokumentu
• .gruby .gruby (równowazne)
• myid myid (równowazne)
• Type selectors
• dopasuje sie do kazdego wystapienia konkretnego
  elementu
• H1 font-family sans-serif

16
Selektory

• Descendant selectors
• dopasuje sie do elementu, który jest dzieckiem
  innego elementu
• przyklad chcemy zeby naglówek H1 byl innego
  koloru oraz zeby wyrózniony tekst zmienial kolor.
  Wezmy dwie reguly
• H1 color red
• EM color red
• No i jest klopot z ponizszym
• ltH1gtTo jest ltEMgtbardzolt/EMgt wazny tekstlt/H1gt

17
Selektory

• Rozwiazanie
• H1 color red
• EM color red
• H1 EM color blue
• Inny przyklad
• DIV P dopasuje sie do P które jest potomkiem
  czegos, co jest potomkiem DIV

18
Selektory

• Child selectors
• dopasuje sie do elementu, który jest dzieckiem
  innego elementu
• BODY gt P color red
• DIV OLgtLI P color green
• Adjacent sibling selectors
• H1 H2 margin-top 5mm
• H1.opener H2 margin-top 5mm
• (dotyczy H2)

19
Selektory

• Attribute selectors
• att dopasuje sie wtedy, gdy atrybut att jest
  ustawiony, niezaleznie od jego wartosci
• H1title color blue
• attval dopasuje sie wtedy, gdy atrybut att
  jest ustawiony na wartosc val
• SPANclass"main" color red
• SPANalign"left"class"g" color blue

20
Selektory

• attval dopasuje sie wtedy, gdy wartoscia
  atrybutu att jest lista, w której jeden z
  elementów jest równy dokladnie val
• Palign"left" color green
• // dopasuje sie dla np. rel"left right"
• attval dopasuje sie wtedy, gdy wartoscia
  atrybutu att jest lista, w której elementem jest
  val lub slowo rozpoczynajace sie slowem val-
• lang"en" color blue
• // dopasuje sie wtedy, gdy atrybut lang
• // bedzie ustawiony na np. "en", "en-US"

21
Selektory

• Class selectors
• W jezyku HTML mozemy uzyc kropki "." jako
  alternatywe dla skladni "class".
• DIV.value to to samo co DIVclassvalue
• Przyklad
• .zielony color green
• ltH1 class"zielony"gtZielony naglóweklt/H1gt
• P.czerwony.gruby
• color red font-weight bold
• ltP class"czerwony gruby maly"gt
• Ojojojlt/Pgt

22
Selektory

• ID selectors
• Kazdy element HTML moze miec atrybut o nazwie id.
  Atrybut ten wyróznia sposród innych to, ze jego
  wartosci sa w obrebie dokumentu unikalne.
• Przyklad
• regula H1chapter1 text-align center
• dopasuje sie do ltH1 id"chapter1"gt...lt/H1gt

23
Pseudo-klasy

• first-child
• dopasowuje sie do elementu bedacego pierwszym
  dzieckiem swojego rodzica.
• DIV gt Pfirst-child color navy
• ltDIVgt
• ltPgtAla ma kotalt/Pgt
• ltPgtAla ma dwa kotylt/Pgt
• lt/DIVgt
• ltDIVgt
• ltH1gtAla ma kotalt/H1gt
• ltPgta tu nie dzialalt/Pgt
• lt/DIVgt

24
Pseudo-klasy

• link link nieodwiedzony
• visited link odwiedzony
• hover myszka nad linkiem
• active link aktywny
• focus focus ustawiony na linka
• lang(C)
• dopasowuje sie, kiedy element jest w jezyku C
• lang(fr) gt Q quotes ' ' ' '

25
Pseudo-klasy

• Przyklady
• A.externalvisited color blue
• ltA class"external"
• href"http//www.wp.pl/"gtWPlt/Agt
• Alink color red
• Avisited color blue
• Avisitedhover color black
• Ahover color yellow
• Aactive color lime
• Afocus background yellow

26
Pseudo-elementy

• first-line
• Pfirst-line text-transform uppercase
• ltPgtTo jest bardzo dlugi tekst, który nie zmiesci
  sie w jednym wierszu i trzeba go wyswietlic w
  kilku wierszach. Zostana wówczas dodane fikcyjne
  tagi.lt/Pgt
• ltPgtltPfirst-linegtTo jest bardzo dlugi tekst,
  który nielt/Pfirst-linegt zmiesci sie w jednym
  wierszu i trzeba go wyswietlic w kilku wierszach.
  Zostana wówczas dodane fikcyjne tagi.lt/Pgt

27
Pseudo-elementy

• first-letter
• ltSTYLE type"text/css"gt
• P font-size 12pt line-height 12pt
• Pfirst-letter font-size 200 font-style
• italic font-weight bold floatleft
• SPAN text-transform uppercase
• lt/STYLEgt
• ltPgtltSPANgtThe firstlt/SPANgt few words of an article
  in The Economist.lt/Pgt

28
Pseudo-elementy

• ltPgt
• ltSPANgt
• ltPfirst-lettergt
• T
• lt/Pfirst-lettergt
• he first
• lt/SPANgt
• few words of an article in
• the Economist.
• lt/Pgt
• Przyklad z http//www.w3.org/

29
Wlasnosci kolorów i tla

• color kolor tekstu
• P color red
• H1 color rgb(255,0,0)
• background-color kolor tla
• H1 background-color F00
• background-image obrazek tla
• BODY background-image url("marble.gif")
• P background-image none

30
Wlasnosci kolorów i tla

• background-repeat jak powtarzac obrazek
• repeat powtarzanie w pionie i w poziomie
• repeat-x powtarzanie w poziomie
• repeat-y powtarzanie w pionie
• no-repeat po prostu narysowac
• BODY
• background-color white
• background-image url("pendant.gif")
• background-repeat repeat-y

31
Wlasnosci kolorów i tla

• background-attachment zaczepienie obrazka
• scroll (domyslne) z tekstem
• fixed z oknem
• background-position pozycja obrazka
• procenty
• dlugosci
• top, center, bottom
• left, center, right

32
Wlasnosci kolorów i tla

• BODY background url("banner.jpeg") right top
  / 100 0 /
• BODY background url("banner.jpeg") top center
  / 50 0 /
• BODY background url("banner.jpeg") center
  / 50 50 /
• BODY background url("banner.jpeg") bottom
  / 50 100 /
• BODY
• background-image url("logo.png")
• background-attachment fixed
• background-position 100 100
• background-repeat no-repeat

33
Wlasnosci kolorów i tla

• background grupuje rózne wlasnosci
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
• background fixed yellow url("pov.jpg") center
  repeat-x

34
Wlasnosci czcionek

• font-family rodzina czcionek
• nazwa-rodziny
• Times
• Arial
• rodzina-ogólna
• serif
• sans-serif
• cursive
• fantasy
• monospace
• P font-family Arial, Helvetica, sans-serif

35
Wlasnosci czcionek

• font-style
• normal
• italic
• oblique
• H1 font-style italic
• H1 EM font-style normal
• font-variant
• normal
• small-caps
• P font-variant small-caps

36
Wlasnosci czcionek

• font-weight
• 100, 200, 300, 400, 500, 600, 700, 800, 900
• normal to samo co 400
• bold to samo co 700
• bolder
• lighter
• P font-weight normal
• H1 font-weight 700
• BODY font-weight 400
• STRONG font-weight bolder

37
Wlasnosci czcionek

• font-stretch
• ultra-condensed
• extra-condensed
• condensed
• semi-condensed
• normal (domyslne)
• semi-expanded
• expanded
• extra-expanded
• ultra-expanded
• wider, narrower

38
Wlasnosci czcionek

• font-size
• stale xx-small x-small small medium
• large x-large xx-large
• relatywnie larger smaller
• wielkosci 12pt
• procentowo 120
• P font-size 12pt
• BLOCKQUOTE font-size larger
• EM font-size 150
• EM font-size 1.5em

39
Wlasnosci czcionek

• font opisuje zestaw wlasnosci
• font-style, font-variant, font-weight, font-size,
  line-height, font-family
• stale
• caption
• icon
• menu
• message-box
• small-caption
• status-bar

40
Wlasnosci czcionek

• Przyklady
• P font 12pt Arial,sans-serif
• P font 80 sans-serif
• P font x-large/110 "new century schoolbook",
  serif
• P font bold italic large Palatino, serif
• P font normal small-caps 120/120 fantasy
• P font oblique 12pt "Helvetica Nue", serif
  font-stretch condensed
• BUTTON P font menu

41
Wlasnosci tekstu

• text-indent- wciecie akapitu
• jednostki dlugosci lub procenty
• P text-indent 3em
• text-align- wyrównywanie
• wartosci left right center justify
• DIV.center text-align center
• text-decoration
• wartosci none underline overline
• line-through blink
• P text-decoration none
• Ahref text-decoration underline

42
Wlasnosci tekstu

• text-shadow
• H1 text-shadow 0.2em 0.2em
• H2 text-shadow 3px 3px 5px red
• H2 text-shadow 3px 3px red, yellow -3px 3px
  2px, 3px -3px
• letter-spacing
• wartosci normal lub dlugosci
• word-spacing
• wartosci normal lub dlugosci

43
Wlasnosci tekstu

• text-transform
• capitalize uppercase lowercase none
• H1 text-transform uppercase
• white-space
• normal pre nowrap
• P.pre white-space pre
• P white-space normal
• TDnowrap white-space nowrap