Nume Tutorial:Stiluri CSS in HTML
Descriere:Stiluri CSS in HTML
Download:Nu necesita
Autor:Anonim
Sursa (Link-ul oficial):
Propria parere:Util.
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:
- Conform acestui cod, toate textele "h2" din pagină vor avea culoarea albastră şi vor fi subliniate.
- 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:
Pentru a adăuga acest stil CSS într-o pagină web, adăugaţi în secţiunea HEAD a documentului HTML care va folosi acel fişier cu stiluri, (între <head> ... </head>) următoarea comandă:
<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:
plul de sus, stilul creat poate fi folosit doar de elementele unde vom adăuga comanda class="cuvant", celelalte elemente nefiind afectate.
Important: selectorul (aici "cuvant") în STYLE trebuie să înceapă cu punct (.)
Exemplu pentru "id":
Cod:
- În acest exemplu, stilul creat pentru "idh" va fi folosit doar pentru primul element "h2" care conţine 'id="idh"'
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
un font de dimensiunea 13pt înseamnă că sunt 13 puncte între partea superioară a literei N sau h şi partea inferioară a literei y sau j
- 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.
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:
<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:
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:
<html>
<head>
<title>Titlul</title>
<style type="text/css">
<!--
.cuvant {
color:[Cerere modificare ] Devils.Jucausii.netfe;
dext-decoration:underline;
}
-->
</style>
</head>
<body>
<h2 class="cuvant">Text ...</h2>
<h3 class="cuvant">Alt text ... </h3>
</body>
</html>
- În exem
Important: selectorul (aici "cuvant") în STYLE trebuie să înceapă cu punct (.)
Exemplu pentru "id":
Cod:
Code:
<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:
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.