Prin formatarea textului se întelege modificarea parametrilor initiali.
De ce sa formatam textul?
Deoarece aceasta ne ajuta sa evidentiem anumite cuvinte, sa delimităm începutul unui subtitlu sau pur si simplu pentru a face site-ul mai atractiv din punct de vedere al designului.
Unui text i se poate modifica urmatorii parametrii:
-culoarea
-alinierea
-decorarea

Culoare textului:
Poti aplica o anumita culoare textului prin folosirea etichetei "font-color:".
Setarea culorii se poate face prin trei metode:
1. Prin scrierea numelui culorii in limba engleza: "color: red".
2. Prin scrierea culorii in cod hexadecimal: "color: #FF0000".
3. Prin metoda RGB: "color: rgb(255,0,0)".

EXEMPLU:

html>
<head>
<title>Culoarea textului</title>
<style>
#engleza {
color: red;
}

#hexadecimal {
color: #ff0000;
}

#rgb {
color: rgb(255,0,0);
}
</style>
</head>
<body>
<p id="engleza">Text rosu (engleza)</p>
<p id="hexadecimal">Text rosu (hexadecimal)</p>
<p id="rgb">Text rosu (rgb)</p>
</body>
</html>

↓

Text rosu (engleza)

Text rosu (hexadecimal)

Text rosu (rgb)

Dimensiunea textului:
Textul se poate redimensiona prin doua metode:
1. Prin folosirea etichetelor pereche "<h1></h1>;<h2></h2>;<h3></h3>...<h6></h6>"
2. Prin folosirea atributului "font-size:" in interiorul etichei "<style="">".

EXEMPLU:

html>
<head>
<title>Aliniere text</title>
<style>
#size {
font-size: 40px;
}
</style>
</head>
<body>
<p id="size">Redimensionare text CSS "font-size: 50px"</p>
<h1>Redimensionare text CSS h1</h1>
<h2>Redimensionare text CSS h2</h2>
<h3>Redimensionare text CSS h3</h3>
<h4>Redimensionare text CSS h4</h4>
<h5>Redimensionare text CSS h5</h5>
<h6>Redimensionare text CSS h6</h6>

</body>
</html>

↓

Redimensionare text CSS "font-size: 50px"

Redimensionare text CSS h1

Redimensionare text CSS h2

Redimensionare text CSS h3

Redimensionare text CSS h4

Redimensionare text CSS h5

Redimensionare text CSS h6

Alinierea textului:
In CSS textul se poate alinia la stanga, la dreapta, centrat sau justificat prin folosirea etichetei "font-align".
Atributele acestei etichete sunt:
-left (textul se va alinia de la stanga) "align: left;".
-right (textul se va alinia de la dreapta) "align: right;".
-center (textul se va alinia de la centru) "align: center;".
-justified (textul se va alinia justificat) "align: justified;".

EXEMPLU:

html>
<head>
<title>Aliniere text</title>
<style>
#left {
text-align: left;
}

#center {
text-align: center;
}

#right {
text-align: right;
}

#justified {
text-align: justified;
}
</style>
</head>
<body>
<p id="left">Text aliniat la stanga</p>
<p id="center">Text aliniat la centru</p>
<p id="right">Text aliniat la dreapta</p>
<p id="justified">Text aliniat justificat</p>
</body>
</html>

↓

Text aliniat la stanga

Text aliniat la centru

Text aliniat la dreapta

Text aliniat justificat

Decorarea textului:
Prin decorarea textului putem seta, dar si inlatura anumiti parametrii. Aceasta metoda este cel mai des folosita pentru inlaturarea sublinierii linkurilor.
Pentru a decora textul se foloseste eticheta "text-decoration".
Atributele acestei etichete sunt:
- "none" | textul nu contine nicio subliniere
- "overline" | textul este strabatut pe deasupra cu o linie
- "line-throught" | textul este taiat cu o linie
- "underline" | textul este subliniat
- "underline overline" | textul este atat subliniat cat si strabatut pe deasupra cu o linie

Exemplu:

h1 {
text-decoration: overline;
}

Lectia 4 CSS | Formatare text

Redimensionare text CSS h1

Redimensionare text CSS h2

Redimensionare text CSS h3

Redimensionare text CSS h4

Redimensionare text CSS h5

Redimensionare text CSS h6

Acest site foloseste cookie-uri.