Dê um exemplo de como utilizar um CSS para configurar uma fonte de texto:
Soluções para a tarefa
Resposta:
CSS tem várias propriedades para estilos de texto.
Há uma conveniente propriedade de abreviação de caracteres/palavras que facilitam a escrita, font, que você pode usar para especificar várias coisas de uma vez — por exemplo:
Negrito, itálico e letras minúsculas
O tamanho
A altura da linha
O tipo da fonte
Exemplo
p {font: italic 75%/125% "Comic Sans MS", cursive;}
Esta regra coloca várias propriedades da fonte, fazendo todos os parágrafos em itálico.
O tamanho da fonte é três quartos (75%) do tamanho em cada elemento do paragrafo principal e a altura da linha é 125% (um pouco mais espaçada que o normal).
O tipo da fonte é Comic Sans MS, mas se a fonte não estiver disponível então o navegador usará sua fonte cursiva padrão (escrita a mão).
A regra tem o efeito colateral de desativar o negrito e as letras minúsculas (colocando-os no estilo normal)
Tipos de fonte
Você não pode predizer quais fontes os leitores do seu documento terão. Então quando você especifica tipos de fonte é uma boa idéia colocar uma lista de alternativas em ordem de preferência.
Acabe a lista com um dos tipos de fontes internas padrão: serif, sans-serif, cursive, fantasy ou monospace. (Algumas destas podem ser configuradas nas Opções do seu navegador.)
Se o tipo não for suportado por algumas características no documento, então o navegador pode substituí-lo por um tipo diferente. Por exemplo, o documento pode conter caracteres especiais que a fonte não suporte. Se o navegador puder encontrar outra fonte que tenha os caracteres, então ele usará a outra fonte.
Para especificar um tipo de fonte por conta própria, use a propriedade font-family.
Tamanho da fonte
Leitores que usam os navegadores Mozilla podem configurar o tamanho padrão das fontes em Opções, e mudar o tamanho do texto quando lêem uma página, isso a torna boa para você usá-la com tamanho relativos onde você puder.
Você pode usar alguns valores internos para o tamanho das fontes, como: small, medium e large. Você pode também usar valores relativos para o tamanho das fontes do elemento primário, como: smaller, larger, 150% ou 1.5em.
Se necessário você pode especificar um tamanho atual, como: 12px (12 pixels) para um instrumento de exibição ou 12pt (12 pontos) para uma impressora. Este tamanho é nominalmente a largura de uma letra m, mas fontes variam na maneira do tamanho, você vê relatos do tamanho que você especifica.
Para especificar um tamanho de fonte por conta própria, use a propriedade font-size.
Altura da linha
A altura da linha especifica o espaçamento entre linhas. Se seu documento tem longos parágrafos com muitas linhas, um espaçamento mais largo que o normal faz com que a leitura seja mais fácil, especialmente se o tamanho da fonte for pequeno.
Para especificar a altura da linha por conta própria, use a propriedade line-height.
Decoração
A propriedade separada text-decoration pode especificar outros estilos, como underline ou line-through. Você pode configurar isto para none removendo explicitamente qualquer decoração.
Outras propriedades
Para especificar itálico por conta própria, use font-style: italic;
Para especificar negrito por conta própria, use font-weight: bold;
Para especificar letras minúsculas por conta própria, use font-variant: small-caps;
Para tornar qualquer destes valores individualmente desativado, você pode especificar o valor normal ou inherit.
Mais detalhes
Você pode especificar os estilos do texto em uma variedade de outras maneiras.
Por exemplo, algumas propriedades mencionadas aqui têm outros valores que podem ser usados.
Em uma folha de estilo complexa, evite usar a propriedade de abreviação de caracteres/palavras que facilitam a escrita font, por causa de seus efeitos colaterais (o re-escolher de outras propriedades individuais).
Para maiores detalhes sobre as propriedades relacionadas às fontes, veja Fonts na especificação do CSS. Para maiores detalhes sobre decoração de textos, veja Text.
Ação: Especificando fontes
Para um documento de amostra, você pode escolher a fonte do elemento BODY e o resto do documento herda as configurações.
Edite seu arquivo CSS. Adicione esta regra para mudar a fonte completamente. O topo do arquivo CSS é um local lógico para isto, mas isto terá o mesmo efeito em qualquer lugar que for posicionado:
body {font: 16px "Comic Sans MS", cursive;}
Adicione um comentário à regra, e deixe um espaço em branco para fazer sua disposição preferido.
Atualize seu navegador para ver o efeito. Se o seu sistema tem Comic Sans MS, ou outra fonte cursiva que não suporta itálico, então seu navegador escolhe um tipo diferente de fonte para o texto em itálico na primeira linha:
CSS tem várias propriedades para estilos de texto.
Há uma conveniente propriedade de abreviação de caracteres/palavras que facilitam a escrita, font, que você pode usar para especificar várias coisas de uma vez — por exemplo:
Negrito, itálico e letras minúsculas
O tamanho
A altura da linha
O tipo da fonte
Exemplo
p {font: italic 75%/125% "Comic Sans MS", cursive;}
Esta regra coloca várias propriedades da fonte, fazendo todos os parágrafos em itálico.
O tamanho da fonte é três quartos (75%) do tamanho em cada elemento do paragrafo principal e a altura da linha é 125% (um pouco mais espaçada que o normal).
O tipo da fonte é Comic Sans MS, mas se a fonte não estiver disponível então o navegador usará sua fonte cursiva padrão (escrita a mão).
A regra tem o efeito colateral de desativar o negrito e as letras minúsculas (colocando-os no estilo normal)
Tipos de fonte
Você não pode predizer quais fontes os leitores do seu documento terão. Então quando você especifica tipos de fonte é uma boa idéia colocar uma lista de alternativas em ordem de preferência.
Acabe a lista com um dos tipos de fontes internas padrão: serif, sans-serif, cursive, fantasy ou monospace. (Algumas destas podem ser configuradas nas Opções do seu navegador.)
Se o tipo não for suportado por algumas características no documento, então o navegador pode substituí-lo por um tipo diferente. Por exemplo, o documento pode conter caracteres especiais que a fonte não suporte. Se o navegador puder encontrar outra fonte que tenha os caracteres, então ele usará a outra fonte.
Para especificar um tipo de fonte por conta própria, use a propriedade font-family.
Tamanho da fonte
Leitores que usam os navegadores Mozilla podem configurar o tamanho padrão das fontes em Opções, e mudar o tamanho do texto quando lêem uma página, isso a torna boa para você usá-la com tamanho relativos onde você puder.
Você pode usar alguns valores internos para o tamanho das fontes, como: small, medium e large. Você pode também usar valores relativos para o tamanho das fontes do elemento primário, como: smaller, larger, 150% ou 1.5em.
Se necessário você pode especificar um tamanho atual, como: 12px (12 pixels) para um instrumento de exibição ou 12pt (12 pontos) para uma impressora. Este tamanho é nominalmente a largura de uma letra m, mas fontes variam na maneira do tamanho, você vê relatos do tamanho que você especifica.
Para especificar um tamanho de fonte por conta própria, use a propriedade font-size.
Altura da linha
A altura da linha especifica o espaçamento entre linhas. Se seu documento tem longos parágrafos com muitas linhas, um espaçamento mais largo que o normal faz com que a leitura seja mais fácil, especialmente se o tamanho da fonte for pequeno.
Para especificar a altura da linha por conta própria, use a propriedade line-height.
Decoração
A propriedade separada text-decoration pode especificar outros estilos, como underline ou line-through. Você pode configurar isto para none removendo explicitamente qualquer decoração.
Outras propriedades
Para especificar itálico por conta própria, use font-style: italic;
Para especificar negrito por conta própria, use font-weight: bold;
Para especificar letras minúsculas por conta própria, use font-variant: small-caps;
Para tornar qualquer destes valores individualmente desativado, você pode especificar o valor normal ou inherit.
Mais detalhes
Você pode especificar os estilos do texto em uma variedade de outras maneiras.
Por exemplo, algumas propriedades mencionadas aqui têm outros valores que podem ser usados.
Em uma folha de estilo complexa, evite usar a propriedade de abreviação de caracteres/palavras que facilitam a escrita font, por causa de seus efeitos colaterais (o re-escolher de outras propriedades individuais).
Para maiores detalhes sobre as propriedades relacionadas às fontes, veja Fonts na especificação do CSS. Para maiores detalhes sobre decoração de textos, veja Text.
Ação: Especificando fontes
Para um documento de amostra, você pode escolher a fonte do elemento BODY e o resto do documento herda as configurações.
Edite seu arquivo CSS. Adicione esta regra para mudar a fonte completamente. O topo do arquivo CSS é um local lógico para isto, mas isto terá o mesmo efeito em qualquer lugar que for posicionado:
body {font: 16px "Comic Sans MS", cursive;}
Adicione um comentário à regra, e deixe um espaço em branco para fazer sua disposição preferido.
Atualize seu navegador para ver o efeito. Se o seu sistema tem Comic Sans MS, ou outra fonte cursiva que não suporta itálico, então seu navegador escolhe um tipo diferente de fonte para o texto em itálico na primeira linha:
Resposta:
Explicação: