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.