Stilizarea HTML cu CSS

Stiluri HTML - CSS

CSS înseamnă Cascading Style Sheets (foi de stil în cascadă). Economisește mult efort, deoarece poate controla aspectul multor pagini web deodată. CSS gestionează stilurile și culorile, îți permite să manipulezi textul, să stilizezi cutii și multe altele.

Ce Este CSS?

CSS este folosit pentru a formata aspectul unei pagini web. Cu el poți controla culoarea, fontul, dimensiunea textului, spațierea dintre elemente, modul în care sunt poziționate elementele, imaginile și culorile de fundal, aspecte diferite pentru dimensiuni diferite de ecran, și multe altele.

Sfat: „Cascading” înseamnă că un stil setat pe un element părinte se aplică și copiilor săi. Deci dacă setezi culoarea textului din body la albastru, titlurile și paragrafele din interiorul body-ului devin de asemenea albastre, dacă nu spui altfel.

Folosirea CSS

CSS poate fi adăugat în HTML în trei moduri: inline, folosind atributul style pe un element; intern, folosind un element <style> în <head>; și extern, folosind un element <link> care indică un fișier CSS separat.

Cea mai comună metodă este un fișier extern, dar acest tutorial folosește stiluri inline și interne deoarece sunt mai ușor de demonstrat și de încercat.

CSS Inline

CSS-ul inline aplică un stil unic unui singur element, folosind atributul style al acelui element.

Exemplu

Un titlu albastru și un paragraf roșu stilizate inline.

O pagină care folosește CSS inline prin atributul style: un h1 albastru „A Blue Heading” și un paragraf roșu „A red paragraph.”

> Rezultat: pagină HTML completă

Prompt

O pagină care folosește CSS inline prin atributul style: un h1 albastru „A Blue Heading” și un paragraf roșu „A red paragraph.”

<!DOCTYPE html>
<html lang="ro">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Css Inline</title>
</head>
<body>

<h1 style="color:blue;">Un titlu albastru</h1>

<p style="color:red;">Un paragraf roșu.</p>

</body>
</html>

CSS Intern

CSS-ul intern definește stilul pentru o pagină întreagă. Se pune în <head>, într-un element <style>, și se aplică fiecărui element corespunzător de pe acea pagină.

Exemplu

O pagină stilizată cu un bloc <style> intern.

O pagină care folosește CSS intern într-un element style din head: fundal powderblue pentru pagină, toate h1 albastre, toate p roșii, cu un titlu și un paragraf în body.

> Rezultat: pagină HTML completă

Prompt

O pagină care folosește CSS intern într-un element style din head: fundal powderblue pentru pagină, toate h1 albastre, toate p roșii, cu un titlu și un paragraf în body.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>

</body>
</html>

CSS Extern

O foaie de stil externă definește stilul pentru multe pagini. Te legi de ea din <head>-ul fiecărei pagini, cu un element <link>. Fișierul conține doar CSS (fără HTML) și se salvează cu extensia .css.

Sfat: Cu o foaie de stil externă, poți schimba aspectul întregului site web editând un singur fișier.

Exemplu

O pagină care se leagă de un fișier extern styles.css.

O pagină care face legătura către o foaie de stil externă styles.css printr-un element link în head, conținând un titlu și un paragraf.

> Rezultat: pagină HTML completă

Prompt

O pagină care face legătura către o foaie de stil externă styles.css printr-un element link în head, conținând un titlu și un paragraf.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>

</body>
</html>

styles.css

Cum arată fișierul extern styles.css.

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}

Culori, Fonturi și Dimensiuni CSS

Câteva proprietăți CSS comune: color setează culoarea textului, font-family setează fontul, iar font-size setează dimensiunea textului.

Exemplu

O pagină care folosește color, font-family și font-size.

O pagină cu CSS intern care demonstrează color, font-family și font-size: h1 albastru, verdana, 300%; p roșu, courier, 160%, cu un titlu și un paragraf.

> Rezultat: pagină HTML completă

Prompt

O pagină cu CSS intern care demonstrează color, font-family și font-size: h1 albastru, verdana, 300%; p roșu, courier, 160%, cu un titlu și un paragraf.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>

</body>
</html>

Bordura CSS

Proprietatea CSS border desenează o bordură în jurul unui element. Poți pune o bordură pe aproape orice element.

Exemplu

Un paragraf cu bordură.

O pagină cu CSS intern care oferă paragrafelor un chenar de 2px solid powderblue, cu un paragraf afișat.

> Rezultat: pagină HTML completă

Prompt

O pagină cu CSS intern care oferă paragrafelor un chenar de 2px solid powderblue, cu un paragraf afișat.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
  border: 2px solid powderblue;
}
</style>
</head>
<body>

<p>Acesta este un paragraf cu chenar.</p>

</body>
</html>

Padding-ul CSS

Proprietatea CSS padding adaugă spațiu între text și bordură.

Exemplu

Un paragraf cu bordură și padding.

O pagină cu CSS intern care oferă paragrafelor un chenar de 2px solid powderblue și un padding de 30px, cu un paragraf.

> Rezultat: pagină HTML completă

Prompt

O pagină cu CSS intern care oferă paragrafelor un chenar de 2px solid powderblue și un padding de 30px, cu un paragraf.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
  border: 2px solid powderblue;
  padding: 30px;
}
</style>
</head>
<body>

<p>Acesta este un paragraf cu chenar și padding.</p>

</body>
</html>

Marginea CSS

Proprietatea CSS margin adaugă spațiu în afara bordurii.

Exemplu

Un paragraf cu bordură și margine.

O pagină cu CSS intern care oferă paragrafelor un chenar de 2px solid powderblue și o margine de 50px, cu un paragraf.

> Rezultat: pagină HTML completă

Prompt

O pagină cu CSS intern care oferă paragrafelor un chenar de 2px solid powderblue și o margine de 50px, cu un paragraf.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
p {
  border: 2px solid powderblue;
  margin: 50px;
}
</style>
</head>
<body>

<p>Acesta este un paragraf cu chenar și margine.</p>

</body>
</html>

Legătura Către CSS Extern

Te poți lega de o foaie de stil externă cu un URL complet, sau cu o cale relativă la pagina curentă sau la domeniu.

URL Complet

Legătura cu o adresă web completă.

O pagină care face legătura către o foaie de stil folosind un URL complet: https://prompt-cookbook.com cu un titlu și un paragraf.

> Rezultat: pagină HTML completă

Prompt

O pagină care face legătura către o foaie de stil folosind un URL complet: https://prompt-cookbook.com cu un titlu și un paragraf.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://prompt-cookbook.com">
</head>
<body>

<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>

</body>
</html>

Relativ la Domeniu

Legătura cu un fișier din folderul html al site-ului curent.

O pagină care face legătura către o foaie de stil folosind o cale relativă la domeniu: /html/styles.css, cu un titlu și un paragraf.

> Rezultat: pagină HTML completă

Prompt

O pagină care face legătura către o foaie de stil folosind o cale relativă la domeniu: /html/styles.css, cu un titlu și un paragraf.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="/html/styles.css">
</head>
<body>

<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>

</body>
</html>

Același Folder

Legătura cu un fișier din același folder cu pagina.

O pagină care face legătura către o foaie de stil aflată în același folder: styles.css, cu un titlu și un paragraf.

> Rezultat: pagină HTML completă

Prompt

O pagină care face legătura către o foaie de stil aflată în același folder: styles.css, cu un titlu și un paragraf.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>

</body>
</html>

Rezumatul Capitolului

Pe scurt: folosește atributul style pentru stilizare inline, elementul <style> pentru CSS intern, și elementul <link> pentru CSS extern, ambele plasate în <head>. Proprietățile CSS comune includ color pentru culoarea textului, font-family pentru fonturi, font-size pentru dimensiunea textului, border pentru borduri, padding pentru spațiul din interiorul bordurii și margin pentru spațiul din exteriorul ei.

Tag-uri HTML de Stil

Cele două tag-uri înrudite sunt <style>, care definește informații de stil pentru un document, și <link>, care definește o legătură între un document și o resursă externă.