Arkusze stylów CSS
Download
Report
Transcript Arkusze stylów CSS
Arkusze stylów - CSS
Specjalizacja "Dziennikarstwo On-line„
Arkusze stylów – CSS
Część 5
Prowadzący: Dariusz Jaruga
[email protected]
Arkusze stylów - CSS
Arkusze stylów CSS - wprowadzenie
Czym jest Arkusz styli CSS ?
CSS jest opisem formatowania dokumentów HTML, arkusze CSS są
odpowiedzialne za sposób wizualizacji znaczników HTML/XHTML.
Co oznacza sktrót CSS ?
CSS - Cascading Style Sheets (kaskadowe arkusze stylów)
Wersje arkuszy styli:
1.0 – CSS1
2.0 – CSS2
2.1 - CSS2
3.0 – w ciągłym opracowaniu (został podzielony na moduły, każdy z modułów
posiada inny stopień stabilności – CSS3
Arkusze stylów - CSS
Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML
Bezpośrednio w znaczniku jako jego atrybut
Przykłady:
<p style='color: red'>
<p style='color: blue; background: yellow'>
W nagłówku strony HTML – znacznik <style>
Przykład:
W nagłówku strony definicja stylu <head> </head>
<style>
p.zielony { color: green }
p.negatyw { color: white; background: black }
h1 {color: red}
</style>
w ciele strony <body> </body>
<p class=zielony>
To jest w kolorze zielonym
<p class=negatyw>
To jest w negatywie białe literki czarne tło.
Arkusze stylów - CSS
Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML
<html>
<head>
<style type="text/css">
p.zielony { color: green }
p.negatyw { color: white; background: black }
</style>
</head>
<body>
<p class=zielony> To jest w kolorze zielonym
<p class=negatyw> To jest w negatywie białe literki czarne tło.
</body>
</html>
Arkusze stylów - CSS
Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML – sposób 1
p.zielony { color: green }
p.negatyw { color: white; background: black }
my_ver_a.css
<html>
<head>
<link rel="stylesheet" href="my_ver_a.css" type="text/css" />
</head>
<body>
<p class=zielony> To jest w kolorze zielonym
<p class=negatyw> To jest w negatywie białe literki czarne tło.
</body>
</html>
Arkusze stylów - CSS
Arkusze stylów CSS – osadzanie w dokumencie HTML/XHTML – sposób 2
p.zielony { color: green }
p.negatyw { color: white; background: black }
my_ver_a.css
<html>
<head>
<style type="text/css">
@import url(„my_ver_a.css");
</style>
</head>
<body>
<p class=zielony> To jest w kolorze zielonym
<p class=negatyw> To jest w negatywie białe literki czarne tło.
</body>
</html>
Arkusze stylów - CSS
Arkusze stylów CSS – osadzanie w dokumencie
definicjaHTML/XHTML
stylu w atrybucie.
Poziom najwyższy.
<p style='color: red'>
definicja arkusza styli w dokumencie
HTML/XHTML.
Poziom wyższy.
<style>
p.zielony { color: green }
p.negatyw { color: white; background: black }
</style>
definicja arkusza styli w pliku.
Poziom najniższy.
<link rel="stylesheet" href="my_ver_a.css"
type="text/css" title="styl glowny"/>
Arkusze stylów - CSS
Arkusze stylów CSS – reguły stylów
selektor
{
właściwość
:
wartość
;
dwukropek
właściwość
:
wartość
}
średnik
selektor 1, [ ... selektor n ] { właściwość 1: wartość 1; ...... właściwość m: wartość m}
Przykłady:
p { color: red }
h1, h2, h3, h4, h5, h6 { font-family: „Times New Roman”}
a { font-family: „Times New Roman” ; color: blue }
.tytul { background: black }
Arkusze stylów - CSS
Arkusze stylów CSS – dziedziczenie właściwości
Przykłady:
body {
body
background-color: rgb(234,54,23);
text-align: left;
}
p { color: red }
p.czarny {background: black}
p.niebieski {background: blue}
p.inny {background: #A5730C}
h1 ... h6
p.czarny
h1.black
h1, h2, h3, h4, h5, h6 { font-family: „Times New Roman”}
h1.black: {color: black}
/* Styl własny */
.tytul { background: black }
p
p.niebieski
p.inny
Arkusze stylów - CSS
Arkusze stylów CSS – selektory
selektor zwykły:
p { color: red }
selektor klasy:
p.czarny {background: black}
p.niebieski {background: blue}
p.inny {background: #A5730C}
selektor uniwersalny
*.czarny {background: black}
lub
.czarny {background: black}
selektor ID
#czarny {background: black}
selektor zagnieżdżony
#lista ul p {color: blue}
#lista * p {color: red} - gdzie * selektor uniwersalny
Arkusze stylów - CSS
Arkusze stylów CSS – pseudoklasy
:link
nieodwiedzone łącze
a:link {border: red}
:visited
odwiedzone łącza
a:visited {border: blue}
:active
aktywne łącza
a:active {border: yellow}
:hover
łacze nad którym aktualnie jest kursor myszki
a:hover {border: green}
:focus
łacze w danym momencie używane przez internautę
a:focus {border: black}
Arkusze stylów - CSS
Arkusze stylów CSS – pseudoklasy i pseudoelementy
:first-child
dotyczy pierwszego elementu potomnego
p:first-child {color: red}
:lang
określa dany styl dla konkretnej wersji językowej
:lang(en) { ..... }
:lang(pl) { ...... }
:lang(fr) { ..... }
:before i :after
definjuje automatyczną zawartość przed i po określonym elemencie
blockquote:before { content: ‘tu jakiś tekst';}
blockquote:after { content: ‘tu jakiś tekst';}
:first-line
p.tytul:first-line {color: blue }
:first-letter
p.tytul:first-letter { font-size: 50px }
Nie wszystkie przeglądarki to obsługują.
Arkusze stylów - CSS
Arkusze stylów CSS – znaczniki <span> i <div> w służbie CSS
<Znacznik HTML <span> - pozwala na wyróżnienie pewnego elementu liniowego
do którego można zaliczyć tekst.
<p>Lorem ipsum dolor sit
<span style=„color:red”>amet</span>, consectetur
adipiscing elit.</p>
<Znacznik HTML <div> - pozwala na wyróżnienie i określenie położenia
na stronie elementu blokowego stanowiącego pewnego rodzaju kontener dla
fragmentu strony WWW.
CSS:
#warstwa {color:red; width:200px;
height:100px; background: yellow;
text-align:center; position:absolute;
left:200px; top:200px}
HTML:
<div id="warstwa"><p>To jest tekst w DIV</p></div>
Arkusze stylów - CSS
Arkusze stylów CSS – ramki
top
border-
left
right
-color
-style
-width
bottom
style - none,hidden,dotted,dashed,solid,groove,linia,ridge,inset,outset,double,inherit
width - px|mm|cm|in|pt|pc|em|ex lub w procentach np. 10%
color - rgb(255,128,0) lub #RRGGBB lub słownie np. red
Arkusze stylów - CSS
Arkusze stylów CSS – ramki przykłady
Zapis skrócony:
#paragraf_1 {
border-top: 1px solid green;
border-right: 2px double green;
border-bottom: 2px double black;
border-left: 1px solid rgb(0,0,0);
}
Zapis zwykły:
#paragraf_2 {
border-width: 3px;
border-style: solid;
Border-color: red;
}
Arkusze stylów - CSS
Arkusze stylów CSS – kroje pisma
Przykłady:
#paragraf_1 {
font-family: Georgia, Serif, "Times New Roman";
font-size: 16px;
font-style: normal;
font-weight: normal;
}
font-family: serif,monospace,cursive,Verdana,:Times New Roman”
font-size: xx-small, x-small, small, medium, large, x-large, xx-large,10px, 1em
font-style:normal, oblique,italic
font-variant:normal:small-caps
font-weight:normal,bold,bolder,lighter
Zapis skrócony:
#paragraf_2 { font-style, font-variant, font-weight, font-size, font-family }
#paragraf_2 {italic normal bold 24px Verdana}
Arkusze stylów - CSS
Arkusze stylów CSS – właściwości tekstu
Przykłady:
#paragraf_1 {
color: red;
text-align: left;
text-decoration: none;
text-transform: uppercase;
text-indent: 36px;
line-height: 150%;
}
color: red, rgb(RRR,GGG,BBB), #RRGGBB
text-align: left, right,center,justify
text-decoration:none, overline, line-through, underline, blink
text-transform: uppercase, lowercase, capitalize
text-indent: jednostka miary np. 2cm - wcięcie pierwszej linii
line-height: jednostka miary np. 200% - wysokość linii
Arkusze stylów - CSS
Arkusze stylów CSS – właściwości tekstu
Przykłady:
#paragraf_1 {
letter-spacing: 10px
word-spacing: 20px
white-space: normal
}
letter-spacing: jednostka miary np. 5px – odległość między znakami
word-spacing: jednostka miary np. 20px – odległość między wyrazami
white-space: normal, nowrap, pre, pre-line, pre-wrap
Arkusze stylów - CSS
Arkusze stylów CSS – pozycjonowanie i wyświetlanie
Elementy blokowe a liniowe
Przykłady:
<p>, <h1>, <div>, <table> - elementy blokowe
<a>, <span>,<q>,<b>,<i>,<u> - elementy liniowe
<img> - element liniowy ale z odstępami.
#paragraf_1 {
display: block;
}
display: block ,inline,none
Arkusze stylów - CSS
Arkusze stylów CSS – pozycjonowanie i wyświetlanie
Margin i padding
Przykłady:
#paragraf_1 {
display: block;
margin: 1cm;
padding: 2cm;
}
margin
padding
Arkusze stylów - CSS
Arkusze stylów CSS – pozycjonowanie i wyświetlanie
Pozycjonowanie:
• bezwzględne (absolute) ,
• względne (relative),
• stałe (fixed),
• statyczne (static).
Przykłady:
#paragraf_2{ position: absolute; left:500px; top:300px;
width: 200px; padding: 10px; background: yellow;
z-index:1}
Arkusze stylów - CSS