Text

postat acum 4 ani de Stefanescu Mihai in categorie CSS

In aceasta lectie v-om invata despre proprietatile ce na ajuta sa formatam textul, si anume:

  • Culoarea
  • Alinierea
  • Decorarea
  • Transformarea
  • Indentatia

Culoarea

Atributul color este folosit pentru a seta culoarea textului, lucru ce poate fi facut folosind:

  • valoarea HEX – “#ff0000”
  • valoarea RGB – “rgb(255,0,0)”
  • numele in engleza – “red”

Exemplu:

body {
    color: blue;
}

h1 {
    color: #00ff00;
}

h2 {
    color: rgb(255,0,0);
}

Aliniera

Proprietatea text-align este folosita pentru alinierea pe orizontala a textului. Cu aceasta poti seta ca textul sa fie centrat sau aliniata la stanga, respectiv dreapta sau justified. Cand este setat atributul justified fiecare linie de text este facuta sa aiba exact aceasi latime si marginile din stanga si dreapta sa fie egale (precum articolele din ziare)

Exemplu:

h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}

Decorarea

Proprietatea text-decoration este folosita la setarea sau stergerea decoratiilor unui text, de obicei este folosita pentru scoaterea sublinierii link-urilor.

Exemplu:

a {
    text-decoration: none;
}

Poate fi folosit si pentru decorarea textului:

h1 {
    text-decoration: overline;
}

h2 {
    text-decoration: line-through;
}

h3 {
    text-decoration: underline;
}

Transformarea

Proprietatea text-transformation este folosita pentru a specifica tipul literelor (litere mari, mici sau capitalize(mareste decat prima litera a cuvantului) )

Exemplu:

p.litereMari {
    text-transform: uppercase;
}

p.litereMici {
    text-transform: lowercase;
}

p.primaLiteraMare {
    text-transform: capitalize;
}

Indentatia

Proprietatea text-indentation specifica indentatia primei linii a textului.

Exemplu:

p {
    text-indent: 50px;
}

 

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!