Categoria: CSS
Formatação de texto com CSS
O texto pode ter características alteradas em CSS que não poderiam ser alteradas em HTML. Podemos citar como exemplo, o espaçamento entre as linhas.
Com o uso do CSS e de suas propriedades, podemos caracterizar textos em qualquer elemento do HTML.
color – Define a cor do texto.
text-ident – Define a distância de recuo do texto no início do parágrafo.
line-height – Define o espaçamento entre as linhas.
text-align – Define o alinhamento do texto, que pode ser ao centro, à direita, à esquerda ou no estilo justificado.
text-decoration – Define a decoraçãao de um texto e é feita com os seguintes valores:
underline (sublinhado), overline (sobrelinhado), line-through (uma linha em cima do texto) e blink (faz piscar o texto).
text-transform – Define uma transformação ao texto, que podem ser as seguintes:
– torná-las todas maiúsculas – uppercase;
– todas minúsculas – lowercase;
– todas as primeiras letras maiúsculas – capitalize.
Vamos criar um exemplo, abre seu editorde texto favoritoe digite o código abaixo, salve como estilos.css.
h1 {
color: #DDA0DD;
text-decoration: underline;
text-transform: uppercase
}
h2 {
color: #3366FF;
text-decoration: line-through;
text-transform: none
}
p {
text-ident: 1cm;
line-height: 2px;
text-align: center
}
Vamos agora criar a página HTML que vai chamar o arquivo CSS, não esqueça de salvar os dois arquivos no mesmo diretório.
<html>
<head>
<title> Bem-vindo! </title>
<link rel= “stylesheet” type= “text/css” href= “estilo.css” />
</head>
<body>
<h1> Textos </h1>
<h2> Formatando textos em CSS</h2>
<p>Exemplos de formatação de texto em CSS e HTML</p>
</body>
</html>
Criando uma folha de estilo – CSS básico
Vamos criar um arquivo CSS básico que irá definir a cor de fundo da página e o tamanho da fonte.
Abra seu editor preferido e digite:
body {
background-color: #0000FF;
}
p {
font-size: 3
}
Salve como estilo.css
Depois crie a página HTML usando o código abaixo, para este exemplo salve os arquivos no mesmo diretório.
<html>
<head>
<title> Bem-vindo! </title>
<link rel= “stylesheet” type= “text/css” href= “estilo.css” />
</head>
<body>
<p> Fazendo minha folha de estilos!!! </p>
</body>
</html>