1.74M

Категория:

Интернет

Похожие презентации:

CSS га кириш. Селекторлар турлари. Ўлчов бирликлари

Тема 10. CSS vs CSS3

Изображения, ссылки, аудио, видео, и-фреймы в HTML. Стилизация изображений. Псевдо-классы в CSS

CSS (каскадные таблицы стилей)

Базовый синтаксис CSS в HTML

Базовый синтаксис CSS

Область застосування CSS. Способи використання в HTML документі

CSS. Цвет и фон, шрифт, текст

CSS 3. Применение CSS к HTML-документу

Каскадные таблицы стилей CSS

CSS

1. CSS

(Cascade Style Sheet)

2.

Ce este CSS?
Sintaxa constructiei CSS.
Modurile de inserare a foilor de stil.
Selectori CSS.
Proprietati pentru background si text.

3. 1. Ce este CSS?

CSS (Cascading Style Sheets)
reprezintă un mecanism simplu de a adăuga
elemente de stil (tipuri de caractere, culori,
spaţiere etc) unui document web.

4. Stilurile rezolvă o mare problemă

HTML nu a fost conceput ca să conţină
taguri pentru formatarea documentelor,
ci numai pentru definirea conţinutului
documentelor, ca în exemplul următor:
<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>
Când taguri precum <font> şi
atributele de culoare au fost adăugate în
specificaţiile HTML 3.2, a început coşmarul
pentru proiectanţii web.

5.

Dezvoltarea site-urilor mari, în care
informaţiile despre font şi culoare trebuiau
adăugate pe fiecare pagină, a devenit un proces
lung şi costisitor.
Pentru a rezolva această problemă, consorţiul
World Wide Web (W3C) a creat CSS.
În HTML 4.0, toate formatările pot fi înlăturate
din documentul HTML şi stocate într-un fişier CSS
separat. Toate browserele suportă CSS. În acest fel
puteţi schimba uşor aspectul tuturor paginilor web
dintr-un site modificând un singur fişier.

6.

2. Sintaxa
O construcţie CSS are două părţi: un selector, şi una
sau mai multe declaraţii:
Selector
h1
Declaration
Declaration
{color:blue; font-size:12px;}
Property Value Property
Value
Selectorul este uzual elementul HTML pe care dorim să-l formatăm.
Fiecare declaraţie este formată dintr-o proprietate şi o valoare.
Proprietatea este atributul de stil pe care dorim să-l modificăm. Fiecare
proprietate are o valoare.
Declaraţiile CSS se încheie întotdeauna cu ; şi grupurile de declaraţii sunt
scrise între acolade.

7.

p {color:red;text-align:center}
Pentru a face declaraţiile CSS mai uşor de
citit, puteţi scrie fiecare declaraţie pe câte o linie ca
în exemplul următor:
p
{
color:red;
text-align:center;
}

8.

Comentarii
ComentariiCSS
CSS
se folosesc pentru a explica codul
pot fi utile când modificam codul sursă pe
parcurs
comentariile sunt ignorate de către browsere
începe cu "/*", şi se termină cu "*/"
/*Acesta este un comentariu si nu se va afisa*/
p
{
text-align:center;
/*Acesta este un alt comentariu*/
color:blue;
font-family:arial
}

9. 3. Moduri de inserare a foilor de stil

3.
3.Moduri
Moduride
deinserare
inserareaafoilor
foilorde
destil
stil
Foaie externă de stil
Foaie internă de stil
Stil inline

10. Foaie externă de stil

Foaie
Foaieexternă
externăde
destil
stil
Este ideală atunci cînd stilul respectiv se aplică mai multor pagini
Se poate de modificat aspectul întregului site modificînd un singur
fişier
Fiecare pagină trebuie să se lege la foaia de stil folosind tagul
<link> în interiorul secţiunii <head>…….</head>
<link rel=“stylesheets” type=“text/css” href=“style.css”>
rel –relaţia dintre documentul apelant şi documentul
legat
type – tipul documentului legat
href- adresa de unde se introduce fişierul foaie de stil
Poate fi scrisă în Notepad++, nu trebuie să conţină taguri html şi
trebuie salvat cu extensia .css.

11.

Fişierul de stil (stil1.css) are următorul conţinut:
body
{
background-color:yellow;
}
h1
{
font-size:35pt;
}
h2
{
color:green;
}
p {
margin-left:40px;
}

12.

Fişierul HTML se leagă la o foaie externă de stil cu tagul <link>:
<html>
<head>
<link rel="stylesheet"
type="text/css" href="stil1.css" />
</head>
<body>
<h1>Acest titlu are 35 pt</h1>
<h2>Acest titlu este verde</h2>
<p>Acest paragraf are marginea stanga de 40 pixeli</p>
</body>
</html>

13. 14. Foaie interna de stil

Foaie
Foaieinterna
internade
destil
stil
Utilizata cînd un singur document are un anumit
stil
Se defineste în secțiunea <head>…</head> a
paginii HTML folosind tagul <style>

15.

<html>
<head>
<style type="text/css">
p{
color:red;
text-align:center;
}
</style>
</head>
<body>
<p>Buna ziua!</p>
<p>Acest paragraf este stilizat cu CSS.</p>
</body>
</html>

16. 17. Stiluri inline

Stiluri
Stiluriinline
inline
Utilizat cînd un singur element are un anumit stil
De utilizat această metodă cît mai rar
Se definește folosind atributul style în tagul
reapectiv
<p
<pstyle="color:sienna;margin-left:20px">Acesta
style="color:sienna;margin-left:20px">Acestaeste
esteun
unparagraf.
paragraf.</p>
</p>

18. Foi multiple de stiluri

Foi
Foimultiple
multiplede
destiluri
stiluri
Într-un document HTML pot fi specificate mai multe
foi de stil pentru un element HTML.
Stilurile se vor mixa într-o foaie de stil virtuală după
următoarele reguli, unde prioritatea creşte odată
cu numărul de ordine:
Setările implicite ale browserului;
Foi de stiluri externe (din fişiere CSS);
Foi de stiluri interne (din secţiunea head);
Stiluri inline (din tagul elementului HTML).

19.

Stilul inline al unui
element suprascrie stilul
definit în <head>, într-un
fişier extern sau în
browser
Dacă legătura către o
foaie externă de stil este
amplasată în
secţiunea <head> după
foaia internă de stiluri,
atunci fişierul extern va
suprascrie stilul intern

20.

Într-o foaie de stil externă, selectorul h3 are setate
următoarele trei proprietăţi:
h3 {
color:red;
text-align:left;
font-size:8pt;
}
Şi foaia de stil intern setează pentru h3 următoarele
proprietăţi:
h3 {
text-align:right;
font-size:20pt;
}
Care vor fi proprietăţile pentru h3?

21. 3. Selectorii CSS

Selector element
Selector id
Selector class

22. Selector element

Aplică proprietăţile conţinute, tuturor elementelor de acest tip
h5 {
color:blue;
}
Toate elementele h5 din pagina vor avea culoarea albastra
<html>
<head>
<style type="text/css">
h5 {color:blue;}
</style>
</head>
<body>
<h4>Titlu de marimea 4</h4>
<h5>Titlu de marimea 5</h5>
<h6>Titlu de marimea 6</h6>
<h5>Alt titlu de marimea 5</h5>
</body>
</html>

23. Selectorul id

utilizat pentru a specifica stilul unui singur element
foloseşte atributul id al unui element HTML
este definit cu "#".
<html>
<head>
<style type="text/css">
#par1{text-align:center;
color:red;}
</style>
</head>
<body>
<p id="par1">Buna ziua!</p>
<p>Acest paragraf nu este afectat de declaratia de stil.</p>
</body>
</html>

24.

Selectorul class
este utilizat pentru a specifica stilul unui grup de elemente
foloseşte atributul HTML class
este definit cu "."
<html>
<head>
<style type="text/css">
.center{text-align:center;}
</style>
</head>
<body>
<h1 class="center">Acest titlu este aliniat la centru cu CSS</h1>
<p class="center">Acest paragraf este de asemenea aliniat la centru
cu CSS.</p>
</body>
</html>

25.

În exemplul următor, numai elementele p din clasa center vor fi
aliniate la centru:
<html>
<head>
<style type="text/css">
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Acest titlu nu este afectat de stilul CSS</h1>
<p class="center">Acest paragraf este aliniat la centru cu CSS.</p>
</body>
</html>

26.

Putem specifica şi ce elemente din clasă vor fi afectate de stil.
În exemplul următor, numai elementele p din clasa center vor fi
aliniate la centru:
<html>
<head>
<style type="text/css">
p.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Acest titlu nu este afectat de stilul CSS</h1>
<p class="center">Acest paragraf este aliniat la centru cu CSS.</p>
</body>
</html>

27.

4. Formatarea background-ului
Proprietatea background-color
<html>
<head>
<style type="text/css">
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>Pagina stilizata cu CSS!</h1>
<p>Buna ziua! Acesta este un exemplu de utilizare a stilurilor.</p>
</body>
</html>

28.

29.

În exemplul următor, elementele h1, p, şi div au
diferite culori de fundal:
<html>
<head>
<style type="text/css">
h1 { background-color:#6495ed; }
p { background-color:#e0ffff; }
div { background-color:#b0c4de; }
</style>
</head>
<body>
<h1>Exemplu pentru proprietatea CSS background-color!</h1>
<div> Acesta este un text in interiorul unui element div.
<p> Acest paragraf are propria culoare de fundal, desi este in interiorul
elementului div. </p> Acest text face parte tot din elementul div.
</div>
</body>
</html>

30.

31.

Proprietatea background-image
<html>
<head>
<style type="text/css">
body {background-image:url('paper.gif')}
</style>
</head>
<body>
<h1>Buna ziua!</h1>
</body>
</html>

32.

Proprietăţile fundalului în CSS
Proprietate
Descriere
Valori
background-color
background-image
background-repeat
Backgroundattachment
background-position
background
Setează toate
proprietăţile
background într-o
singură
declaraţie
Backgroundattachment
Stabileşte dacă
imaginea de
scroll
fundal este fixă sau
fixed
defilează împreună
cu restul paginii
background-color
Setează culoarea
de fundal a unui
element
color-rgb
color-hex
color-name
transparent

33.

background-image
Setează imaginea
de fundal a unui
element
Backgroundposition
top left
top center
top right
center left
Setează poziţia de
center center
început a
center right
unei imagini de
bottom left
fundal
bottom center
bottom right
x% y%
xpos ypos
Background-repeat
Stabileşte dacă şi
cum va fi
repetată imaginea
de fundal
url(URL)
none
repeat
repeat-x
repeat-y
no-repeat

34.

5. Formatarea textului
Proprietăţile CSS pentru formatarea textului
Proprietate
Descriere
Valori
color
Setează culoarea textului
color
direction
Setează direcţia textului
ltr
rtl
Line-height
Setează distanţa dintre linii
normal
number
length
%
Letterspacing
Măreşte sau micşorează spaţiul
dintre caractere
normal
length
Aliniază un element în cadrul
textului
left
right
center
justify
text-align

35.

Textdecoration
Adaugă decoraţiuni unui text
none
underline
overline
line-through
blink
Text-indent
Indentează prima linie de text
dintr-un element
length
%
Text-shadow Adaugă umbră unui text
none
color
length
Texttransform
none
capitalize
uppercase
lowercase
Controlează literele unui element

36.

Verticalalign
Setează alinierea verticală a unui
element
baseline
sub
super
top
text-top
middle
bottom
text-bottom
length
%
White-space
Setează spaţiul alb din interiorul
unui element
normal
pre
nowrap
Wordspacing
Măreşte sau micşorează spaţiul
dintre cuvinte
normal
length

English Русский Правила