CSS – Fundamentos Básicos

CSS - Fundamentos Básicos
- Lecture 1
  CSS – Tutorial
- Lecture 2
  CSS – Introdução
- Lecture 3
  CSS – Sintaxe
- Lecture 4
  CSS – Unidades de medida
- Lecture 5
  CSS – Cores
- Lecture 6
  CSS – Backgrounds
- Lecture 7
  CSS – Fonts
  30 min
- Lecture 8
  CSS – Text
- Lecture 9
  CSS – Usando imagens
  30 min
- Lecture 10
  CSS – Links
- Lecture 11
  CSS – Tabelas
  30 min
- Lecture 12
  CSS – Bordas
- Lecture 13
  CSS – Listas
  30 min
- Lecture 14
  CSS – Margins
- Lecture 15
  CSS – Paddings
  30 min
- Lecture 16
  CSS – Cursores
  30 min
- Lecture 17
  CSS – barras de rolagem
- Lecture 18
  CSS – Dimensão
  30 min
- Lecture 19
  CSS – Outlines
  30 min

CSS – Fundamentos Básicos

CSS – Text

Este capítulo ensina como manipular texto usando propriedades CSS. Você pode definir as seguintes propriedades de texto de um elemento –

A propriedade color é usada para definir a cor de um texto.
A propriedade direction é usada para definir a direção do texto.
A propriedade letter-spacing é usada para adicionar ou subtrair espaço entre as letras que compõem uma palavra.
A propriedade word-spacing é usada para adicionar ou subtrair espaço entre as palavras de uma frase.
A propriedade text-indent é usada para indentar o texto de um parágrafo.
A propriedade text-align é usada para alinhar o texto de um documento.
A propriedade text-decoration é usada para sublinhar, sobrelinha e tachado.
A propriedade text-transform é usada para colocar o texto em maiúscula ou converter o texto em letras maiúsculas ou minúsculas.
A propriedade de espaço em branco é usada para controlar o fluxo e a formatação do texto.
A propriedade text-shadow é usada para definir a sombra do texto ao redor de um texto.

Defina a cor do texto

O exemplo a seguir demonstra como definir a cor do texto. O valor possível pode ser qualquer nome de cor em qualquer formato válido.

html>
   <head>
   </head>

   <body>
      <p style = "color:red;">
         This text will be written in red.
      </p>
   </body>
</html>

Definir a direção do texto

O exemplo a seguir demonstra como definir a direção de um texto. Os valores possíveis são ltr ou rtl.

<html>
   <head>
   </head>

   <body>
      <p style = "direction:rtl;">
         This text will be rendered from right to left
      </p>
   </body>
</html>

Defina o espaço entre os personagens

O exemplo a seguir demonstra como definir o espaço entre os caracteres. Os valores possíveis são normais ou um número que especifica o espaço.

<html>
   <head>
   </head>

   <body>
      <p style = "letter-spacing:5px;">
         This text is having space between letters.
      </p>
   </body>
</html>

Defina o espaço entre as palavras

O exemplo a seguir demonstra como definir o espaço entre as palavras. Os valores possíveis são normais ou um número que especifica o espaço.

<html>
   <head>
   </head>

   <body>
      <p style = "word-spacing:5px;">
         This text is having space between words.
      </p>
   </body>
</html>

Definir o recuo do texto

O exemplo a seguir demonstra como recuar a primeira linha de um parágrafo. Os valores possíveis são% ou um número que especifica o espaço de recuo.

<html>
   <head>
   </head>

   <body>
      <p style = "text-indent:1cm;">
         This text will have first line indented by 1cm and this line will remain at 
         its actual position this is done by CSS text-indent property.
      </p>
   </body>
</html>

Defina o alinhamento do texto

O exemplo a seguir demonstra como alinhar um texto. Os valores possíveis são esquerda, direita, centro, justificar.

<html>
   <head>
   </head>

   <body>
      <p style = "text-align:right;">
         This will be right aligned.
      </p>
      
      <p style = "text-align:center;">
         This will be center aligned.
      </p>
      
      <p style = "text-align:left;">
         This will be left aligned.
      </p>
   </body>
</html>

Decorando o Texto

O exemplo a seguir demonstra como decorar um texto. Os valores possíveis são none, underline, overline, line-through, blink.

<html>
   <head>
   </head>

   <body>
      <p style = "text-decoration:underline;">
         This will be underlined
      </p>
      
      <p style = "text-decoration:line-through;">
         This will be striked through.
      </p>
      
      <p style = "text-decoration:overline;">
         This will have a over line.
      </p>
      
      <p style = "text-decoration:blink;">
         This text will have blinking effect
      </p>
   </body>
</html>

Definir os casos de texto

O exemplo a seguir demonstra como definir os casos para um texto. Os valores possíveis são nenhum, maiúscula, maiúscula, minúscula.

<html>
   <head>
   </head>

   <body>
      <p style = "text-transform:capitalize;">
         This will be capitalized
      </p>
      
      <p style = "text-transform:uppercase;">
         This will be in uppercase
      </p>
      
      <p style = "text-transform:lowercase;">
         This will be in lowercase
      </p>
   </body>
</html>

Defina o espaço em branco entre o texto

O exemplo a seguir demonstra como o espaço em branco dentro de um elemento é tratado. Os valores possíveis são normal, pré, nowrap.

<html>
   <head>
   </head>

   <body>
      <p style = "white-space:pre;">
         This text has a line break and the white-space pre setting 
         tells the browser to honor it just like the HTML pre tag.
      </p>
   </body>
</html>

Definir a sombra do texto

O exemplo a seguir demonstra como definir a sombra ao redor de um texto. Isso pode não ser compatível com todos os navegadores.

<html>
   <head>
   </head>

   <body>
      <p style = "text-shadow:4px 4px 8px blue;">
         If your browser supports the CSS text-shadow property, 
         this text will have a  blue shadow.
      </p>
   </body>
</html>

Anterior CSS – Fonts

Próximo CSS – Usando imagens

CSS - Fundamentos Básicos