M4 - CSS
Stilizarea textului
În ceea ce privește stilizarea textului acesta cuprinde două aspecte:
Structurile de tip text – p, h1,h2,etc sau care pot include text – body, table, div
Stilizarea la nivel de font
În primul caz menționăm o serie de proprietăți care pot fi utilizate, conform W3Schools1
color Stabilește culoarea textului
direction Stabilește direcția textului
letter-spacing Permite mărirea sau micșoreare distanței dintre litere
text-align Stabilește alinierea pe orizontală a textului
text-decoration Permite adăugare de efecte pe text
text-indent Permite indentarea primului rând al unei structuri de text
text-transform Stabilește utilizarea de litere mari sau mici în text
vertical-align Stabilește alinierea pe verticală a textului
word-spacing Permite mărirea sau micșoreare distanței dintre cuvinte
Exercițiul 1
Exemplele de mai jos vor fi testate pe o structură de tip paragraf și una de tip titlu de nivel 1
p {color:blue;}
h1 {text-align:center;}
p {text-align:right;}
h1 {text-decoration:overline;}
h1 {text-decoration:line-through;}
h1 {text-decoration:underline;}
h1 {text-decoration:blink;}
p {text-transform:uppercase;}
apoi
p {text-transform:lowercase;}
În ceea ce privește stilizarea fonturilor vor fi studiate următoarele proprietăți:
font Permite includerea tutoror celorlalte definiții într-una singură
font-family Stabilește tipul fontului
1
[Link]
font-size Stabilește dimensiunea fontului
font-style Stabilește stilul fontului
font-weight Stabilește grosimea fontului
Exercițiul 2
Testați următoarele definiții pe unul din paragrafele de mai sus:
p{font-family:"Times New Roman", Times, serif;}
În ceea ce privește tipul de font utilizat se utilizează în general o combinație între un tip de font, subfamilia din
care acesta face parte, familia de fonturi, astfel încât în cazul în care browserul pe care s vizualizează o pagină
Web nu suportă acel tip de font, se va utiliza un font disponibil din cadrul subfamiliei sau al familiei.
Detalii despre tipuri de font și familii:
[Link]
p {font-style:normal;}
p {font-style:italic;}
p {font-style:oblique;}
Dimensiunea fontului se poate stabili în pixeli sau în em. Ea poate fi calculată în valori absolute sau
relative la dimensiunes celorlalte elemente din jur.
Dimensiunea implicită este de 16 px.
p {font-size:14px;}
p {font-size:0.875em;} /* 14px/16=0.875em */
În cadrul seminarului se va discuta diferența între utilizarea pixel vs em.
Utilizarea CSS în vederea stilizării fundalului unei pagini Web
Prezentăm mai jos proprietățile de bază utilizate în astfel de cazuri și câteva cazuri de utilizare.
background-color – permite definirea culorii de fundal
background-image – permite inserarea unei imagini de fundal
background-repeat – permite stabilirea modului în care se repetă imaginea de fundal pe axa
XY
background-attachment – permite stabilirea unei imagini fixe sau a unei imagini cu effect de
scrolling în cadrul paginii.
background-position – permite poziționarea imaginii de fundal
Exercițiul 3
Utilizați proprietățile de mai sus în cadrul selectorului Body pentru a exemplifica utilizarea acestora.
<!DOCTYPE HTML>
<html>
<head>
<title> Pagina exemplu 2 </title>
<style>
Body
{background-color:#336633}
</style>
</head>
<body>
</body>
</html>
Utilizați o imagine de dimensiunea 200*200 pixeli drept fundal al unei pagini. În exemplul de mai jos imaginea
utilizată este – [Link]
<!DOCTYPE HTML>
<html>
<head>
<title> Pagina exemplu 2 </title>
<style>
Body
{background-image:url('[Link]');}
</style>
</head>
<body>
</body>
</html>
Verificați pe rând utilizarea următoarelor proprietăți
Body
{background-image:url('[Link]');
background-repeat:no-repeat}
Body
{background-image:url('[Link]');
background-repeat:repeat-x}
Body
{background-image:url('[Link]');
background-repeat:repeat-y}
Body
{background-image:url('[Link]');
background-repeat: no-repeat;
background-position:right top}
În caz general se poate utiliza proprietatea background pentru a introduce mai multe proprietăți
body {background:#336699 url('[Link]') no-repeat right top;}
Stilizarea hyperlegăturilor
Legăturile pot fi stilizate utilizând proprietățile legate de text, dar există și proprietăți speciale care
vizează starea legăturilor în momentul utilizării acestora:
a:link – link nevizitat
a:visited - link vizitat
a:hover – link-ul în momentul trecerii cu mouse- peste
a:active – link-ul în momentul apăsării click
Exercițiul 4
Se va discuta stilizarea unui meniu de navigare utilizând stiluri CSS, luând în considerare cazul practic
de mai jos:
<!DOCTYPE html>
<html>
<head>
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:# 3333CC;
text-align:center;
padding:5px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>
<body>
<ul>
<li><a href="# ">Link 1</a></li>
<li><a href="# ">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="# ">Link 4</a></li>
</ul>
</body>
</html>
Modelul Box
Un aspect important în stilizarea elementelor cu CSS este așa-numitul Model Box. Acest model
stabilește că fiecare element de structură din cadrul unei pagini Web poate fi văzut ca o cutie
(dreptunghi) definită prin următoarele proprietăți:
Margin – Permite stabilirea unei zone libere transparente în exteriorul bordurii
Border – Permite adăugarea unei borduri în jurul elementului luat în considerare
Padding – Permite stabilirea unei zone libere transparente în interiorul bordurii
Content – conținutul elementului – text, imagine , etc
Modelul de mai sus permite stabilirea de borduri și spațieri între elementele din cadrul unei pagini
Web.
Sursa: [Link]
Exercițiul 5
Exemplificați Modelul Box în cazul structurii DIV de mai jos. Calculați dimensiunea totală a
elementului, luând în considerare valorile din cadrul exemplului.
<!DOCTYPE html>
<html>
<head>
<style>
[Link]
{
width:200px;
padding:10px;
border:5px solid black;
margin:0px;
}
</style>
</head>
<body>
<div class="ex">Acesta este un paragraf exemplu </div>
</body>
</html>