Lectia 4 CSS | Formatare text

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 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;
}