CSS Text
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.
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).
<!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>
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:
<!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>
Î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:
<!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
dimensiunea textului css, culoarea textului css, textul îndrăzneț css, text-shadow css
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.