Style Sheet

HTML | Stefanescu Mihai | 2020-10-11

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>

Articolul precedent

Articolul urmator

Imi place ce faci aici

Daca iti place ce fac aici imi poti cumpara o cafea

Stefanescu Mihai
Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.

Get in touch

Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum.

Posteaza un comentariu

Comentarii

Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!

🔖 Bookmarks ⊞

✨ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌪️ Discord ⊞