Clique aqui para retornar à coluna do tutorial Wulin.com HTML. Se você deseja navegar no tutorial do CSS, clique aqui.
Acima: Marque o layout Language-CSS . Capítulo 13 Especifique um estilo para texto
Eu acho que é uma boa ideia discutir a prática de usar CSS para definir estilos de texto em um capítulo. De um modo geral, o processamento de conteúdo de texto é provavelmente o local onde o CSS é mais usado, mesmo para sites que não cumprem completamente os padrões. Remova as tags recorrentes nas páginas da web foram uma vez (e agora) muito atraentes para os designers, e não é difícil ver a enorme vantagem de usar CSS para controlar a impressão de texto, ou seja, separando ainda mais os métodos de conteúdo e exibição.
De muitos exemplos anteriores, sabemos que o CSS pode lidar com muitas situações, e definir estilos de texto é a maneira mais fácil de adicionar elementos de design para as páginas da web mais básicas. Ao mesmo tempo, a adição de CSS ao texto também pode impedir que adicione imagens desnecessárias na página.
Neste capítulo, veremos como o CSS leva um texto chato e comum para outra altura (em novas cores, tamanhos e fontes). Como fazer o hipertexto parecer mais legal?
A especificação de estilos de texto é um dos melhores empregos em que o CSS é bom, mesmo quando enfrenta os navegadores que são um pouco antigos e suportam incompletamente as funções avançadas do CSS. No passado, designers e desenvolvedores podem querer criar páginas da web insuportáveis e difíceis de usar pelos padrões atuais ao projetar textos para obter tamanho e efeitos ousados (você já viu páginas da web onde os textos são representados principalmente por imagens? Mas você está usando navegadores de texto ...)
Para fornecer algumas alternativas ao uso de imagens e responder à pergunta acima, neste capítulo, você começará com um parágrafo de texto que ainda não foi estilizado e adicionará gradualmente várias regras CSS, tornando -o um design atraente. Os momentos em constante mudança
Comece olhando para um texto que será processado na fonte predefinida do navegador. No meu caso, a fonte predefinida é de 16 pixels. Use o navegador Safari no Mac OS X. Por causa disso, o texto que você vê será retratado de maneira anti-aliasing. Se você usar o Windows XP e iniciar o ClearType, poderá ver um efeito semelhante.
Os tempos (ou os tempos variantes novos romanos) são fontes predefinidas para muitos navegadores, no entanto, isso é facilmente alterado pelos usuários para suas próprias fontes favoritas, para que você certamente não possa confiar nesse valor predefinido.
A Figura 1301 mostra o conteúdo de texto que usamos neste capítulo que não foi adicionado ao estilo: um título simples marcado com <H1>, e aqui estão três dicas para decoração doméstica.
Figura 13-1 O navegador exibe o título e o efeito predefinido do texto altera a altura da linha
Um dos efeitos mais simples e eficazes do estilo de texto é o atributo de altura de linha. Adicionar algum espaço extra entre cada linha de texto pode facilitar a leitura dos parágrafos de texto, mais atraentes e também trazer efeitos maravilhosos para sua página.
Você pode concluir essa técnica adicionando as seguintes regras CSS à tag <body>. Obviamente, você também pode adicionar essa regra a outras tags, como apenas querer alterar a altura da linha de <p>.
corpo {
altura da linha: 1.5em;
}
O significado deste código é: a altura da linha do texto na página deve ser 1,5 vezes a altura do texto. Eu gosto de usar as unidades EM ao especificar a altura da linha, porque elas mudarão com o tamanho da fonte.
A Figura 13-2 mostra o efeito após adicionar altura de linha.
Figura 13-2 Efeito após o texto predefinido mais altura da linha
Parece ótimo, e os resultados que uma pequena altura de linha pode alcançar são incríveis.
Página anterior1 2 3 4 5 Próxima página Leia o texto completo