cześć 1

Transkrypt

cześć 1

Kurs WWW
Paweł Rajba
[email protected]
http://pawel.ii.uni.wroc.pl/
CSS – Cascading Style Sheets
 Dlaczego powstał CSS?
 Jak tego używać?
 Walidator
http://jigsaw.w3.org/css-validator/
Wstawienie arkusza CSS
 Bezpośrednio w dokumencie
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Moja strona domowa</TITLE>
<STYLE type="text/css">
H1 { color: red }
P { color: blue }
</STYLE>
</HEAD>
<BODY>
<H1>Moja fantastyczna strona domowa</H1>
<P>Tutaj zobaczycie to, czego nigdzie indziej...
</BODY>
</HTML>
Wstawienie arkusza CSS
 Poprzez odwołanie do innego dokumentu
<HTML>
<HEAD>
<LINK rel="StyleSheet" type="text/css"
href="mojstyl.css" >
</HEAD>
<BODY>
</BODY>
</HTML>
Reguły CSS
 Reguła składa się z dwóch części
selektora (np. H1)
 deklaracji (np. color:blue)

 Deklaracja również składa się z dwóch części
właściwości (np. color)
 wartości (np. blue)

Drzewo dokumentu
 Rozpatrzmy poniższy dokument
<HTML>
<HEAD>
</HEAD>
<BODY>
<UL>
<LI>Tygrysy</LI>
<LI>Zebry</LI>
<LI>Małpiszony</LI>
</BODY>
</HTML>
Drzewo dokumentu
 I odpowiadające mu drzewko
HTML
HEAD
TITLE
BODY
H1
P
UL
LI
LI
LI
Terminologia
 Rodzic (parent) - element B zawiera
bezpośrednio pewną ilość 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

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 mają wspólnego
rodzica. A jest poprzedzającym bratem B,
kiedy występuje wcześniej w drzewie
dokumentu; A jest następującym bratem B,
kiedy występuje później w drzewie
dokumentu
Terminologia
 Element wcześniejszy (preceding element)
– element A jest wcześniejszy niż element B,
kiedy
A jest przodkiem B lub
 A jest poprzedzającym bratem B

 Element późniejszy (following element) –
element A jest późniejszy niż element B,
kiedy B jest elementem wcześniejszym niż
element A
Kilka uwag
 grupowanie


H1 { font-weight: bold }
H1 { font-size: 12pt }
H1 {
font-weight: bold;
font-size: 12pt;
}
H1 { font-family: sans-serif }
H1, H2, H3 { font-family: sans-serif }
Kilka uwag
 Jednostki
 długości:

relatywne:
 em – szerokość znaku M
 ex – wysokość linii
 px – 1 pixel

absolutne





in – cale (2.54 cm)
cm, mm
pt – punkty (1/72 cala)
pc – picas (12 pt)
procentowe: np. 120%
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
"this
'this
'this
is
is
is
is
a
a
a
a
'string'"
\"string\""
"string"'
\'string\''
Kilka uwag
 Komentarze /* ... */
 Dwa różne obiekty: "napis", stała

color: "red" – źle
 Można przełamywać wiersze

A[TITLE="a not s\
o very long title"]
{/*...*/}
A[TITLE="a not so very long title"]
{/*...*/}
Selektory
 Universal selector
 piszemy *, jeżeli po * jest coś jeszcze, to *
można pominąć
 dopasowuje się do każdego elementu drzewa
dokumentu

*.gruby .gruby (równoważne)
*#myid #myid (równoważne)
 Type selectors
 dopasuje się do każdego wystąpienia
konkretnego elementu

Selektory
 Descendant selectors
dopasuje się do elementu, który jest dzieckiem
innego elementu
 przykład: chcemy żeby nagłówek H1 był
innego koloru oraz żeby wyróżniony tekst
zmieniał kolor. Weźmy dwie reguły:

H1 { color: red }
EM { color: red }
No i jest kłopot z poniższym:
<H1>To jest <EM>bardzo</EM> ważny tekst</H1>
Selektory

Rozwiązanie
H1 { color: red }
EM { color: red }
H1 EM { color: blue }

Inny przykład:
dopasuje się do P które jest potomkiem
czegoś, co jest potomkiem DIV
DIV * P –
Selektory
 Child selectors

dopasuje się do elementu, który jest dzieckiem
innego elementu

BODY > P { color: red }
DIV OL>LI P { color: green }
 Adjacent sibling selectors
H1 + H2 { margin-top: 5mm }
H1.opener + H2 { margin-top: 5mm }
(dotyczy H2)
Selektory
 Attribute selectors

[att] – dopasuje się wtedy, gdy atrybut att
jest ustawiony, niezależnie od jego wartości
H1[title] { color : blue }

[att=val] – dopasuje się wtedy, gdy atrybut
att jest ustawiony na wartość val
SPAN[class="main"] { color : red }
SPAN[align="left"][class="g"] {color: blue}
Selektory

[att~=val] – dopasuje się wtedy, gdy
wartością atrybutu att jest lista, w której jeden
z elementów jest równy dokładnie val
P[align~="left"] { color : green }
// dopasuje się dla np. rel="left right"

[att|=val] – dopasuje się wtedy, gdy
wartością atrybutu att jest lista, w której
elementem jest val lub słowo rozpoczynające
się słowem val*[lang|="en"] { color : blue }
// dopasuje się wtedy, gdy atrybut lang
// będzie ustawiony na np. "en", "en-US"
Selektory
 Class selectors

W języku HTML możemy użyć kropki "." jako
alternatywę dla składni "class~=".
DIV.value to to samo co DIV[class~=value]

Przykład:
.zielony { color : green }
<H1 class="zielony">Zielony nagłówek</H1>
P.czerwony.gruby
{ color: red; font-weight: bold }
<P class="czerwony gruby maly">
Ojojoj</P>
Selektory
 ID selectors
Każdy element HTML może mieć atrybut o
nazwie id. Atrybut ten wyróżnia spośród
innych to, że jego wartości są w obrębie
dokumentu unikalne.
 Przykład:

reguła H1#chapter1 { text-align: center }
dopasuje się do <H1 id="chapter1">...</H1>
Pseudo-klasy
 :first-child

dopasowuje się do elementu będącego
pierwszym dzieckiem swojego rodzica.

DIV > P:first-child { color: navy }
<DIV>
<P>Ala ma kota</P>
<P>Ala ma dwa koty</P>
</DIV>
<DIV>
<H1>Ala ma kota</H1>
<P>a tu nie działa</P>
</DIV>


Pseudo-klasy
 :link – link nieodwiedzony
 :visited – link odwiedzony
 :hover – myszka nad linkiem
 :active – link aktywny
 :focus – focus ustawiony na linka
 :lang(C)

dopasowuje się, kiedy element jest w języku C

:lang(fr) > Q { quotes: '« ' ' »' }
Pseudo-klasy
 Przykłady







A.external:visited { color: blue }
<A class="external"
href="http://www.wp.pl/">WP</A>
A:link { color: red }
A:visited { color: blue }
A:visited:hover { color: black }
A:hover { color: yellow }
A:active { color: lime }
A:focus { background: yellow }
Pseudo-elementy
 :first-line

P:first-line { text-transform: uppercase }

<P>To jest bardzo długi tekst, który nie
zmieści się w jednym wierszu i trzeba go
wyświetlić w kilku wierszach. Zostaną
wówczas dodane fikcyjne tagi.</P>
<P><P:first-line>To jest bardzo długi tekst,
który nie</P:first-line> zmieści się w
jednym wierszu i trzeba go wyświetlić w
kilku wierszach. Zostaną wówczas dodane
fikcyjne tagi.</P>

Pseudo-elementy
 :first-letter


<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style:
italic; font-weight: bold; float:left }
SPAN { text-transform: uppercase }
</STYLE>
<P><SPAN>The first</SPAN> few words of an
article in The Economist.</P>
Pseudo-elementy
<P>
<SPAN>
<P:first-letter>
T
</P:first-letter>
he first
</SPAN>
few words of an article in
the Economist.
</P>
Przykład z http://www.w3.org/
Własności kolorów i tła
 color – kolor tekstu


P { color: red }
H1 { color: rgb(255,0,0) }
 background-color – kolor tła

H1 { background-color: #F00 }
 background-image – obrazek tła


BODY { background-image: url("marble.gif") }
P { background-image: none }
 background-repeat – jak powtarzać obrazek
repeat – powtarzanie w pionie i w poziomie
 repeat-x – powtarzanie w poziomie
 repeat-y – powtarzanie w pionie
 no-repeat – po prostu narysować


BODY {
background-color: white;
background-image: url("pendant.gif");
background-repeat: repeat-y;
}
 background-attachment – zaczepienie obrazka
scroll (domyślne) – z tekstem
 fixed – z oknem

 background-position – pozycja obrazka
procenty
 długości
 top, center, bottom
 left, center, right






BODY { background: url("banner.jpeg")
/* 100%
0% */
center }
/* 50%
0% */
/* 50% 50% */
/* 50% 100% */
BODY {
background-image: url("logo.png");
background-attachment: fixed;
background-position: 100% 100%;
background-repeat: no-repeat;
}
right top }
top
center }
bottom }
 background – grupuje różne własności
background-color
 background-image
 background-repeat
 background-attachment
 background-position


background: fixed yellow url("pov.jpg") center
repeat-x;
Własności 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 }
 font-style
normal
 italic
 oblique


H1 { font-style: italic }
H1 EM { font-style: normal }
 font-variant
normal
 small-caps


P { font-variant: small-caps }
 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 }
 font-stretch










ultra-condensed
extra-condensed
condensed
semi-condensed
normal (domyślne)
semi-expanded
expanded
extra-expanded
ultra-expanded
wider, narrower
 font-size
stałe: xx-small | x-small | small | medium
large | x-large | xx-large
 relatywnie: larger | smaller
 wielkości: 12pt
 procentowo: 120%


P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
 font – opisuje zestaw własności
font-style, font-variant, font-weight, font-size,
line-height, font-family
 stałe







caption
icon
menu
message-box
small-caption
status-bar
 Przykłady:







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 }
Własności tekstu
 text-indent- wcięcie akapitu
 jednostki: długości lub procenty

P { text-indent: 3em }
 text-align- wyrównywanie
 wartości: left | right | center | justify

DIV.center { text-align: center }
 text-decoration
 wartości: none | underline | overline |
line-through | blink

P { text-decoration: none }
A[href] { text-decoration: underline }
Własności 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

wartości: normal lub długości
 word-spacing

wartości: normal lub długości
Własności 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 }
TD[nowrap] { white-space: nowrap }


CSS – Box model
 Dla każdego elementu drzewa dokumentu
jest tworzony prostokątny blok, w którym ten
element się znajduje. Model ten omawia
dodatkowe parametry takich prostokątów.
 Każdy blok zawiera 4 obszar
content
 padding
 border
 margin

CSS - Box model
ze strony W3 Konsorcjum
CSS – Box model
 Marginesy
 właściwości






margin-top
margin-right
margin-bottom
margin-left
margin
wartości



długości (np. 3 cm)
procenty (np. 120%)
auto
CSS – Box model
 Marginesy c.d.
domyślne wartości: 0
 margin – skrót dla margin-top, margin-right,
margin-bottom, margin-left
 w zależności od ilości ustawionych wartości
mamy





1 wartość – ustawia wszystkie strony
2 wartości – #1: top i bottom, #2: left i right
3 wartości – #1: top, #2: left i right, #3: bottom
4 wartości – #1: top, #2: right, #3: bottom, #4: left
CSS – Box model
 Marginesy - przykłady




BODY { margin: 2em }
BODY { margin: 1em 2em }
BODY { margin: 1em 2em 3em }
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
}
CSS – Box model
 Marginesy – uwagi
marginesy mogą czasamy zostać
skolapsowane (collapse); oznacza to, że 2 lub
więcej marginesów zostanie zamienione na
jeden, zwykle ten o największej wartości
 marginesy poziome nie kolapsują się
 marginesy bloków, których pozycje są
absolutne lub relatywne nie kolapsują się

CSS – Box model
 Padding
 właściwości






padding-top
padding-right
padding-bottom
padding-left
padding
wartości (domyślnie 0)


długości (np. 1cm)
procenty (na podstawie wielkości zawartości, np.
120%)
CSS – Box model
 Border – wielkość

właściwości






border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
wartości


długościami (np. 1cm)
thin, medium, thick (thin<=medium<= thick)
CSS – Box model
 Border – kolor
 właściwości






border-top-color
border-right-color
border-bottom-color
border-left-color
border-color
wartości


kolor
transparent (wtedy border jest przeźroczyty, ale
ma grubość)
CSS – Box model
 Border – styl

właściwości – styl





border-top-style
border-right-style
border-bottom-style
border-left-style
border-style
CSS – Box model
 Border – styl
 wartości
 none – brak
 hidden – prawie to samo co none; różnica w
kontekście konfliktu rozdzielczości w tabelkach
 dotted – kropki
 dashed – krótkie kreski
 solid – ciągła linia
 double – podwójna linia (w połączeniu z borderwidth:thin daje to pojedynczą linię)
 groove – jakby wyrzeźbione
 ridge – podobne do ridge
 inset – jakby osadzone
 outset – podobne do inset
CSS – Box model
 Border – skróty

właściwości






border-top
border-bottom
border-right
border-left
border
wartości

width style color
CSS – Box model
 Border – przykłady



P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
BLOCKQUOTE {
border-color: red;
border-left: double;
color: black
} /* bordel-color-left: black */
CSS – rodzaje wartości
 specified
 computed
 actual
 Specified values

ustalanie wartości odbywa się wg
następujących kryteriów:



uzyskujemy wartość z kaskady (np. w arkuszu
wprost mamy wartość dla danej właściwości)
jeśli wartość jest dziedziczona, to używamy tej
wartości
użyj wartości domyślnej
 Computed values

wartości specified mogą być absolutne (red,
2mm) lub relatywne (auto, 2em, 120%). Dla
wartości absolutnych obliczeń wykonywać nie
trzeba, natomiast dla relatywnych jak
najbardziej.
 Actual values
Wartość ostatecznie przypisana. Może się
różnić od computed, gdy np. zostanie
obliczona wielkość czcionki na 15px, a w
systemie takiej nie ma i wtedy zostanie
wybrana wielkość 14px.
 actual value to computed lub specified value
po zaokrągleniach, przybliżeniach

Reguła import
 Powoduje wczytanie reguł z zewnętrznego
pliku
@import "mystyle.css"
 @import url("mystyle.css")

Inheritance (dziedziczenie)
 Elementy dziedziczą wartości po swoim
rodzicu z drzewa dokumentu, jeśli to
dziedziczenie jest dopuszczone.

<H1>To jest <EM>ważny</EM> nagłówek</H1>
Jeśli kolor w EM nie jest ustawiony, a H1 ma
kolor czerwony, to EM też będzie miało kolor
czerwony.
Kaskada
 Arkusze styli mogą mieć trzy różne źródła
pochodzenia
author
 user
 user agent

Kaskada – wyszukiwanie wartości
1. Znaleźć wszystkie deklaracje, które dopasowują się do
elementu i właściwości (wyszukanie odpowiednich
selektorów)
2. Pierwsze sortowanie jest wg wag i źródła
pochodzenia:




domyślnie, reguły autora mają wyższy priorytet od reguł
usera
jeśli reguła jest !important to porządek ten się ulega
odwróceniu
reguły !important są ważniejsze od reguł normalnych
reguły user agenta mają najniższy priorytet
3. Drugie sortowanie jest wg szczegółowości:
bardziej szczegółowe selektory mają wyższy
priorytet od tych ogólnych.
4. Ostatecznie, jeśli dwie reguły mają ten sam
priorytet, to wygrywa ta, która pojawiła się
później.
 /* From the user's style sheet */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }
 /* From the author's style sheet */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }
text-indent: 1em
font-style: italic
font-size: 12pt
font-family: sans-serif
Typy mediów
 Określenie rodzaju medium

w arkuszu stylów:
@import url("loudvoice.css") aural;
@media print {
/* definicja arkusza styli */
}

jako atrybut znacznika LINK
<LINK rel="stylesheet" type="text/css"
media="print, handheld" href="foo.css">
Typy mediów
 Rozpoznawane typy mediów:
 all – wszystkie rodzaje urządzeń
 aural – urządzenia generujące mowę; do tego typu jest
przeznaczony osobny zestaw styli
 braille – przeznaczone dla urządzeń dotykowych
braille’a
 embossed – przeznaczone dla stronicowanych
drukarek braille’a
 handheld – przeznaczone dla urządzeń podręcznych
(mały ekran, czarno-białe, słaba przepustowość)
 print – przeznaczone dla drukarek oraz do
wyświetlania na ekranie w trybie print preview
Typy mediów
 Rozpoznawane typy mediów c.d.:
 projection – przeznaczone do prezentacji na
projektorach, druków transparentów, itp.
 screen – do wyświetlania na kolorowych
ekranach komputerów
 tty – do wyświetlania na urządzeniach o
ustalonej siatce znaków, np. terminali
tekstowych
 tv – do wyświetlania na urządzeniach typu
television (niska rozdzielczość, kolor,
dźwięk,...)

cześć 1

Transkrypt

Podobne dokumenty

Tusz Epson T0520 color | Stylus Color 400/440

Kliknij aby pobrać dokument w formacie PDF

Akcja TOALETA TO NIE ŚMIETNIK

Tworzenie stron WWW 1 Zajęcia stacjonarne. Arkusze CSS

Kaskadowe arkusze stylów - BK-S

pobierz pdf.

ActiveJet AH-41R (AH-1641) tusz kolorowy do drukarki HP