Descriere:Stiluri CSS in HTML
Download:Nu necesita
Autor:Anonim
Sursa (Link-ul oficial):
Tutorialul:
Cu HTML 4.0 au apărut specificaţiile pentru modele de stiluri, cunoscute ca Modele de Stiluri în Cascadă (Cascading Style Sheets - CSS). Acestea ajută la afişarea grafică şi încadrarea conţinutului în pagină.
Până la acea dată, forma, culoarea şi mărimea textului puteau fi date cu instrucţiunea "font" şi cu atributele sale: "face", "color", "size".
Modelele de stiluri pot fi aplicate aproape oricărei etichete HTML, folosind proprietăţi şi valori specifice codului CSS, unele din ele sunt prezentate în tabelul de jos al paginii.
Modelele de stiluri pot fi aplicate în mai multe moduri:
1. Intern - direct în eticheta HTML
- Pentru adăugarea unui STYLE intern la un element se foloseşte atributul style urmat de proprietăţi şi valori, folosind următoarea sintaxă:
<element style="proprietate:valoare; proprietate:valoare;"></element>
- Exemplu:
<h4 style="color:#ff1111;">Exemplu h4</h4>
2. În antetul (header-ul) fişierului
- În acest caz se adaugă în secţiunea HEAD a documentului HTML următoarea sintaxă
<style type="text/css"> ... </style>
Aceasta spune browser-ului că sunt adăugate elemente de stil CSS.
- Această metodă este utilă când se doreşte folosirea aceloraşi stiluri pentru mai multe elemente din pagină astfel sunt scrise o singură dată şi nu la fiecare element.
- Proprietăţile şi valorile de stil CSS se introduc în acest element STYLE, după cum puteţi vedea în exemplul următor:
Cod:
Code: Select all
<html>
<head>
<title>titlu</title>
<style type="text/css">
<!--
h2 {color:blue; text-decoration:underline;}
-->
</style>
</head>
<body>
</body>
</html>- Se foloseşte (opţional) "<!-- ... -->" pentru browserele care nu recunosc elementul "<style>" şi astfel îl ignoră.
3. Extern
- Aici proprietăţile şi valorile pentru diverse stiluri sunt specificate într-un fişier extern special, de obicei cu extensia "css" (pe care îl putem construi cu un editor simplu de texte gen Notepad).
- Avantajul folosirii fişierelor externe CSS este faptul că aceleaşi coduri de stil pot fi folosite de mai multe pagini din site, chiar tot site-ul, fiind scrise o singură dată. În plus ajută la micşorarea ca mărime (în bytes) a documentului HTML care astfel se încarcă mai repede.
- În fişierul extern CSS se scriu direct elementele cu proprietăţile şi valorile dorite, NU se mai adaugă eticheta "style".
Exemplu de model pentru creare unui fişier ".css" :
Se scrie într-o pagină nouă, deschisă cu NotePad, următoarele, şi se salvează fişierul cu extensia ".css"
Cod:
Code: Select all
a:link {
color:#0000ff;
text-decoration:none;
font-weight:normal;
font-size:15px;
font-family: Arial;
}
a:visited {
color:#008080;
text-decoration:none;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
a:active {
color:#b54090;
text-decoration:underline;
}
a:hover {
color:#b54090;
text-decoration:underline;
font-weight:normal;
font-size: 15px;
font-family: Arial;
}
p {
font-weight: normal;
font-size: 11pt;
line-height: 12pt;
text-indent: 20px;
font-family: Arial;
}<link href="fisier.css" rel="stylesheet" type="text/css">
- unde la "href" se scrie calea şi numele fişierului css folosit.
Se poate face chiar ca un anumit stil să poată fi aplicat numai unei singure etichete HTML, iar altul să poată fi aplicat mai multor etichete HTML de tipuri diferite. Pentru aceasta se foloseşte atributul id sau class în interiorul etichetelor HTML la care vrem să aplicăm un anumit stil.
Diferenţa dintre id şi class este faptul că se poate folosi acelaşi atribut "class" pentru mai multe elemente HTML, pe când acelaşi "id" se foloseşte numai pentru un singur element HTML.
Exemplu pentru "class":
Cod:
Code: Select all
<html>
<head>
<title>Titlul</title>
<style type="text/css">
<!--
.cuvant {
color:#1111fe;
dext-decoration:underline;
}
-->
</style>
</head>
<body>
<h2 class="cuvant">Text ...</h2>
<h3 class="cuvant">Alt text ... </h3>
</body>
</html>
- În exemImportant: selectorul (aici "cuvant") în STYLE trebuie să înceapă cu punct (.)
Exemplu pentru "id":
Cod:
Code: Select all
<html>
<head>
<title>Titlul</title>
<style type="text/css">
<!--
#idh {
color:#fe1111;
dext-decoration:overline;
text-align:center;
}
-->
</style>
</head>
<body>
<h2 id="idh">Text ...</h2>
<h2>Alt text ... </h2>
</body>
</html>Important: Pentru stilurile definite de ID, selectorul (aici "idh") trebuie să înceapă cu #.
Încercaţi singuri aceste exemple pentru a vedea rezultatul.
În tabelul de mai jos sunt câteva atribute (sau proprietăţi) care pot fi modificate cu STYLE
Atribut Descriere Valori
Code: Select all
background imagini sau culori de fundal URL-ul (imaginii) sau culori date prin nume sau valoare RGB
Color culoarea textului nume sau valoare RGB
font-family tipul fontului Numele fontului sau al familiei de fonturi
font-size dimensiunea fontului dată în puncte(pt), inch(in), centimetri(cm), pixeli(px)
font-style text cursiv normal, italic
font-weight grosimea fontului extra-light, light, demi-light, medium, demi-bold, bold, extra-bold
line-height distanţa dintre liniile de bază ale rândurilor dată în puncte(pt), inch(in), centimetri(cm), pixeli(px), procent(%)
margin-left distanţa faţă de marginea din stânga a paginii dată în puncte(pt), inch(in), centimetri(cm), pixeli(px)
margin-right distanţa faţă de marginea din dreapta a paginii dată în puncte(pt), inch(in), centimetri(cm), pixeli(px)
margin-top distanţa faţă de textul precedent sau faţă de marginea de sus a paginii dată în puncte(pt), inch(in), centimetri(cm), pixeli(px)
text-align alinierea textului left(stânga), center(centru), right(dreapta), justify
text-decoration evidenţierea textului none(nimic), underline(subliniat), italic(cursiv), line-through(tăiat)
text-indent distanţa primului rând faţă de marginea din stânga dată în puncte(pt), inch(in), centimetri(cm), pixeli(px)
border-style tipul chenarului none, groove, dotted, dashed, solid, double, ridge, inset, outset
border-width grosimea chenarului dată în puncte(pt), inch(in), centimetri(cm), pixeli(px)
border-color culoarea chenarului nume sau valoare RGB
72 pt=1 inch = 25,4 mm;- Pentru aplicarea unui stil css asupra unei porţiuni dintr-un text, se foloseşte eticheta <span> </span>, ca în exemplu următor:
O frază <span class="cls"> cu orice text</span> şi caractere.
- în acest exemplu se pot aplica elemente de stil css clasei (.cls) care vor afecta doar porţiunea de text inclusă între tag-ul "<span>".
Pentru mai multe informaţii despre lucru cu stiluri CSS, studiaţi tutorialele de la secţiunea CSS.
