AgerNic.com/ro
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL
Tutorial

CSS Text


Next Page >>
HTML images

CSS Tutorial » Text in CSS

CSS ofer? diverse propriet??i care v? permit s? defini?i diferite stiluri de text, cum ar fi culoarea, alinierea, spa?ierea, decorarea, transformarea etc. foarte u?or ?i eficient.

Cele mai utilizate propriet??i de text sunt: ??
text-align - alinierea textului,
text-decoration - decorarea textului,
text-transform - transformarea textului,
text-indent - script text,
line-height - inaltimea liniei,
letter-spacing - espaciado de letras,
word-spacing - espaciado de palabras y mįs.

Estas propiedades le brindan un control preciso sobre la apariencia visual de los caracteres, palabras, espacios, etc.

 

text-align - alinierea textului,

Proprietatea text-align este folosita pentru a seta alinierea orizontal? a textului.
Textul poate fi aliniat īn patru moduri: stānga, dreapta, centru sau justificat? (margini drepte, stānga ?i dreapta).

Exemplu
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Seta?i alinierea textului utilizānd CSS</title>
<style>
h1 {
text-align: center;
color: #09C;
}
p {
width: 300px;
text-align: justify;
color: #039;
}
</style>
</head>
<body>
<h1>Acesta este un titlu</h1>
<!-- h1 este īn centru -->
<p>Pe lāng? diferitele propriet??i ale fontului CSS,
exist? ?i alte propriet??i care v? pot ajuta s? v? proiecta?i textul.
De exemplu, pute?i schimba culoarea textului, alinia textul,
ad?uga?i propriet??i de decor ?i multe altele.</p>

<p>Īn CSS, pute?i stiliza textul folosind
propriet??ile enumerate mai jos. Cu aceast? list?,
pute?i afla cum s? utiliza?i fiecare proprietate text CSS ?i cum arat?
īntr-un browser.</p>
</body>
</html>
Not?: cānd alinierea textului este setat? pentru a justifica, fiecare linie este īntins? astfel īncāt fiecare linie s? aib? aceea?i l??ime (cu excep?ia ultimei linii), iar marginile din stānga ?i din dreapta s? fie drepte. Aceast? aliniere este īn general utilizat? īn publica?ii precum reviste ?i ziare.

 

Culoarea textului

Culoarea textului este definit? de proprietatea culorii CSS.

Īn acest exemplu, definim atāt proprietatea background-color, cāt ?i proprietatea de culoare a textului:

Exemplu

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white;
}
</style>
</head>
<body>

<h1>Acest antet este negru cu text alb</h1>
<p>Aceast? pagin? are o culoare de fundal gri ?i un text albastru.</p>
<p>Un alt paragraf.</p>

</body>
</html>

Not?: atunci cānd aplica?i imaginea de fundal unui element, asigura?i-v? c? imaginea pe care o alege?i nu afecteaz? lizibilitatea con?inutului text al elementului.

Īn mod implicit, browserul repet? sau ?igl? imaginea de fundal atāt pe orizontal?, cāt ?i pe vertical? pentru a umple īntreaga zon? a unui element. Pute?i controla acest lucru cu proprietatea background-repeat.

 

Cum se creeaz? un text CSS receptiv

Dimensiunea textului poate fi setat? cu o unitate vw, ceea ce īnseamn? „l??imea ferestrei”.

Īn acest fel, dimensiunea textului va urma dimensiunea ferestrei browserului:

Exemplu

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {font-size:10vw;}
p {font-size:5vw;}
</style>

<body>

<h1>Text receptiv receptiv</h1>

<p>Redimensiona?i fereastra browserului la
vezi cum este scalat? dimensiunea textului.</p>

<p>V? rug?m s? utiliza?i unitatea "vw" atunci cānd schimba?i
M?rimea textului. 10vw va seta dimensiunea la 10% din l??ime
din fereastra de vizualizare.</p>

<p>Viewport este dimensiunea ferestrei browserului.
5vw = 5% din l??imea ferestrei. Dac? fereastra are
10 cm l??ime, 5vw are 0,5 cm.</p>

</body>
</html>

 

Etichete: text CSS HTML, efecte, exemple, justificat, gradient, bold, subliniat

text css centrat, cursiv, peste imagine, cu majuscule, vertical, receptiv.

dimensiunea textului css, culoarea textului css, textul īndr?zne? css, text-shadow css

Tags: Etichete: text CSS HTML, efecte, exemple, justificat, gradient, bold, subliniat

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


analytics piwika