Logo Facebook8    Logo Youtube12     Logo twitter

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


 

Acest site foloseste cookie-uri.

Folosim cookie-uri pentru a vă asigura că aveti cea mai bună experiență pe acest site.

I understand
DESPRE NOI
World-IT este un site care are ca domeniu Tehnologia Informatiei(IT).
Acest site are ca prim scop introducerea persoanelor in acest domeniu. Mai multe informatii aici.

URMARESTE-NE 
Logo Facebook8  Logo Youtube12  Logo twitter