Style Sheet

postat acum 2 ani de Stefanescu Mihai in categorie HTML

Un prim punct pe care as vrea sa-l prezint aici este faptul ca in Cascading Style Sheets (CSS) putem seta mai multe atribute unui element HTML delimitandu-le cu punct si virgula(;).

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p><font color="green" size="5">Salut!</font></p>
</body>
</html>

Acelasi cod poate fi scris in CSS in felul urmator:

<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style="color:green;font-size:24px;">Salut!</p>
</body>
</html>

Puteti folosi CSS in 3 moduri:

  • Extern – Definesti regulile CSS intr-un fisier separat cu extensia .css si il incluzi in documentul HTML cu ajutorul tag-ului <link>
  • Intern – Definesti regulile CSS in header-ul documentului HTML in interiorul tag-ului <style>
  • Inline – Definecti regulile CSS direct in tag-ul HTML folosind atributul style.

Extern

Daca folosesti aceste stiluri in mai multe documente HTML iti recomand sa faci un fisier separat de stiluri. Acest fisier de stil va avea extensia .css si va fi inclus in documentele HTMl cu ajutorul tag-ului <link>.Exemplu fisier .css cu 3 clase definite

.textRosu{
   color: red;
}
.textIngrosat{
   font-weight: 700;
}
.textVerde{
   color:green;
}

Mai sus am definit 3 clase CSS ce pot fi aplicate mai multor elemente HTML.

Acum hai sa va arat cum puteti folosi fisierul CSS de mai sus:

<!DOCTYPE html>
<html>
<head>
<title>CSS Extern</title>
<link rel="stylesheet" type="text/css" href="/html/style.css">
</head>
<body>
<p class="textRosu">Acesta este un text rosu</p>

<p class="textIngrosat">Acesta este un text ingrosat</p>

<p class="textVerde">Acesta este un text verde</p>

<p class="textIngrosat textVerde">Acesta este un text verde si ingrosat</p>
</body>
</html>

 Intern

Folositi acest tip de CSS decat atunci cand trebuie sa aplicati un anumit set de reguli CSS decat unui document si faceti-o folosind tag-ul <style>.

Daca definim clase si ID-uri cu acelasi nume si intr-un fisier extern si in tag-ul <style> cele din tag-ul style au prioritate, iar cele din fisierul css extern sunt ignorate.

<!DOCTYPE html>
<html>
<head>
<title>CSS Intern</title>
<style type='text/css'>
.textRosu{
   color: red;
}
.textIngrosat{
   font-weight: 700;
}
.textVerde{
   color:green;
}
</style>
</head>
<body>
<p class="textRosu">Acesta este un text rosu</p>

<p class="textIngrosat">Acesta este un text ingrosat</p>

<p class="textVerde">Acesta este un text verde</p>

<p class="textIngrosat textVerde">Acesta este un text verde si ingrosat</p>
</body>
</html>

 Inline

Putem aplica regulile CSS direct in interiorul elementului HTML folosind atributul style.

<!DOCTYPE html>
<html>
<head>
<title>CSS Inline</title>
</head>
<body>
<p style="color:red;">Text Rosu</p>

<p style="font-weight: 700;">Text ingrosat</p>

<p style="color:green;">Text Verde</p>

<p style="color:green;font-weight: 700;">Text verde si ingrosat.</p>
</body>
</html>

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!