Scroll Top

Aprenda tudo que você precisa para criar o seu negócio na internet.  São 30 vídeos aulas totalmente gratuitas. Basta se cadastrar em um de nossos formulário.

Tutoriais

Texto perfeito

texto perfeitoTexto perfeito é aquele que tem harmonia no tamanho, nas cores e nos espaços. Nos negócios online é fundamental ter textos bem elaborados para cativar os leitores. Formatar e estilizar textos é um item primordial para qualquer web designer. Nesta postagem você verá às interessantes formulas que as CSS fornece para adicionar layout aos textos. Estudaremos cada propriedade e suas aplicações dentro dos estilos e formatação de textos nos sites para obter um texto perfeito e legível:

Indentação de texto [text-indent]

 A propriedade text-indent permite que você aplique um recuo à primeira linha de um parágrafo. No exemplo a seguir um recuo de 30px é aplicado à todos os textos. Digite o código abaixo no NotePad+ + e salve em um arquivo como estilo.css:

p {
text-indent: 30px;
}

Agora digite o código abaixo no Notepad+ + e salve em um arquivo como o nome de index.html:

<html>
<head>
<title>Meu Primeiro Estudo de CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css” />
</head>
<body>
<p>Estamos aprendendo a criar <b>texto perfeito</b> usando a propriedade da CSS <b>Indentação de texto</b>,<br>
para que você tenha um melhor entendimento eu sujiro que siga todas as instrunções com todos os<br>
detalhes e repita todos os processos até que tenha aprendido.</p>
</body>
</html>

Caso tenha dúvidas, já estudamos como criar estes arquivos e como abrir no navegador anteriormente, basta acessar a seguinte postagem.

 Veja exemplo de Texto Perfeito na imagem abaixo:

texto perfeito

 

Perceba que a seta vermelha indica um pequeno espaço entre a borda e o texto, isso acontece porque utilizamos a propriedade [text-indent] para criar este espaço, se nós aumentarmos o número 30px do código salvo dentro do arquivo estilo.css, para 60px, o espaço dobra.

 

Alinhamento de textos [text-align]

 

A propriedade text-align corresponde ao atributo align das antigas versões do HTML. Os textos podem ser alinhados à esquerda (left), à direita (right) ou centrados (centred). E temos ainda o valor justify que faz com o texto contido em uma linha se estenda tocando as margens esquerda e direita. Este tipo de alinhamento é usado em jornais e revistas.

No exemplo a seguir o texto contido na célula de cabeçalho <th> é alinhado à direita e os contidos nas células de dados <td> são centrados. E, os textos normais em parágrafos são justificados:

th {
text-align: center;
}
td {
text-align: justify;
}
p {
text-align: left;
}

Digite  código acima  no seu editor de Notepad+ + e salve em nosso arquivo estilo.css.

Agora digite o código abaixo e salve em nosso arquivo index.html e depois abra no navegador.

<html>

<head>
<title>Meu Primeiro Estudo de CSS</title>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”/>
</head>
<body>
<table border = 01 width=300 height=100>
<th>Indentação de Texto 01</th>
<tr>
<td>Coluna Justificada para conferir se realmente o texto encosta nas duas linhas laterais da tabela</td>
</tr>
</table>
<p>Estamos Estudando CSS para iniciantes</p>
</body>
</html>

Vou explicar o código acima entes de mostrar a imagem renderizada no navegador, criamos uma tabela usando o código<table border = 01 width=300 height=100>, onde border é a largura da borda que é de 1 píxels, width para definir a largura da tabela que ficou com 300 píxels e heigth para definir a altura da tabela que ficou com 100 píxels . A tag <th> é usada para criar um cabeçalho de uma célula na tabela, inserimos uma linha como está destacado de vermelho, obtivemos uma coluna com o cabeçalho. A tag <tr> que está em preto negrito,  cria linha dentro da tabela, utilizamos apenas uma vez, isso fez com que a tabela tenha duas linhas, a que é definida pela tag <th> que é o cabeçalho e a que é definida pela tag <tr> que é o corpo da tabela. Já a tag <td> que aparece na cor azul, defini o conteúdo por  colunas dentro da tabela. Os parágrafos que são as tags <p> na cor verde, ficam de fora tabela. Note: que a nossa instrução de CSS salva no arquivo estilo.css logo acima do código que acabamos de comentar determina que conteúdo dentro das  tags <th> fique no centro da tabela, os conteúdos dentro das tags <td> jã foram justificados, encostando nas duas laterais da tabela, e as tags <p> que são os parágrafos foi determinado que encostasse na lateral esquerda da página e fora da tabela. Note que este negocio de CSS deixa realmente o texto perfeito dentro de uma página e com muita estética.

Agora veja como ficou a imagem:

texto perfeito

 

Decoração de textos [text-decoration]

A propriedade text-decoration possibilita adicionar “efeitos” ou “decoração” em textos. Você pode por exemplo, sublinhar textos, cortar o texto com uma linha, colocar uma linha sobre o texto, etc. No exemplo a seguir os cabeçalhos <h1> são sublinhados, os cabeçalhos <h2> levam um linha em cima e os cabeçalhos <h3> são cortados por uma linha.

h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}

Veja como fica  a imagem apos rodar no navegador:

texto perfeito

 

Espero que você tenha aprendido alguma coisa sobre CSS nesta postagem, continue estudado a sequencia de texto perfeito, com o próximo assunto, basta clicar no texto abaixo e acessar a postagem sobre o assunto:

CSS Espaçamento entre Caracteres

<<<Voltar —

 

Está Gostando do Artigo?

Se inscreva em nossa lista e receba 30 vídeos aulas grátis, ensinando como criar o seu negócio na internet a partir do zero.

| Website

Sou blogueiro por que gosto de ler e escrever. Criei este blog para te ajudar a criar o seu negócio na internet e ter um novo estilo de vida.

  • Esther Gallati

    I know this if off topic but I’m looking into starting my own blog and was curious what all is needed to get setup? I’m assuming having a blog like yours would cost a pretty penny? I’m not very internet smart so I’m not 100% positive. Any recommendations or advice would be greatly appreciated. Kudos

    Eu sei que este blog é profissional, mas eu estou olhando para começar o meu próprio blog e fiquei curiosa com tudo e o que é necessário para começar? Eu sei que para ter um blog como o seu custaria uma boa grana? Eu não sou muito familiarizada com internet por isso não estou 100% certa. Qualquer recomendação ou conselho seria muito bom. Obrigada.

    Traduzido com Google Tradutor por Eurípedes Jorge

    • Para começar, você precisa primeiro gostar de ler muito e escrever, se você já tiver estas características já é um bom começo. Depois é estudar muito na própria internet, como você pode fazer estes estudos? Pesquisando assuntos que você tenha dúvida, se você quiser eu posso te enviar algum conteúdo por e-mail para te ajudar.
      Abraços.

      To begin, you first need to read a lot and like to write, if you already have these caracterítisicas is already a good start. After much study is the internet itself, as you can do these studies? Researching subjects you have questions, if you as you want I can send some content via e-mail to help you.
      Hugs.

      Traduzido por Eurípedes Jorge com Google Tradutor

  • I just want to tell you that I am just newbie to blogs and absolutely loved this blog site. Probably I’m want to bookmark your site . You amazingly come with really good stories. Cheers for sharing your web page.

    Tradução:

    Eu só quero te dizer que eu sou apenas um novato para blogs e absolutamente amei este blog. Provavelmente eu vou querer marcar o seu site. Você incrivelmente vêm com histórias realmente boas. Felicidades para partilhar a sua página web.

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
error: Este conteúdo está protegido ! Se precisar de alguma coisa envie mensagem pelo formulário de contato.