Descriere: Stiluri CSS in HTML
Download:
Autor: Anonim
Sursa (Link-ul oficial): Propria parere: Folositor.
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: Selectaţi tot
<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: Selectaţi tot
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: Selectaţi tot
<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>Important: selectorul (aici "cuvant") în STYLE trebuie să înceapă cu punct (.)
Exemplu pentru "id":
Cod: Selectaţi tot
<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:
Download Tabel: http://www.girlshare.ro/33244692.8
- 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>".