Bom dia, geeks da construção de sites. Na publicação de hoje, consideraremos um tópico relacionado ao design do conteúdo do texto. É por isso que você aprenderá a definir letras maiúsculas em css - por meio, se familiarizará com as várias opções para criar uma capitulação e, é claro, poderá experimentar de tudo na prática. Agora vamos à parte divertida!

Vamos transformar o texto

Com as folhas de estilo em cascata, você pode alterar o primeiro caractere de um bloco e todo o texto. Vou mostrar como você pode fazer as duas coisas. Além disso, todas as ferramentas nomeadas neste artigo são suportadas em três níveis da linguagem: css1, css2, css2.1 e css3.

Vou começar com uma propriedade interessante que modifica todo o conteúdo do texto na seleção. isto transformação de texto.

O elemento nomeado pode converter caracteres em maiúsculas, minúsculas e também colocar cada primeiro caractere de uma palavra em maiúscula. Escrevi mais sobre os valores da tabela.

Agora, para consolidar o material teórico, dê um exemplo.

Atenção!

! Amanhã tem desconto em todos os produtos de beleza!

A promoção é válida em todas as agências localizadas em sua cidade.

Criação de capitulação

Se você não sabe o que significa o termo "capitular", então é hora de descobrir, pois está diretamente relacionado ao tema atual.

A capitulação (ou às vezes eles dizem a inicial) é a primeira letra do capítulo, que difere das demais em seu tamanho grande, cor e, em alguns casos, até mesmo no design da fonte. Na vida, um exemplo de tal carta pode ser encontrado em manuscritos e livros antigos.

Existem várias maneiras de criar uma inicial. Freqüentemente, um caractere é destacado com uma tag de linguagem de marcação e depois disso, certas propriedades são prescritas nos estilos que o modificam. Este é um bom caminho, mas esta publicação fala sobre os mecanismos css (que, na minha opinião, neste caso são muito mais lógicos e convenientes de usar).

Para resolver o problema, você pode usar uma ferramenta como.

Portanto, neste caso: a primeira letra é usada. Como todos os pseudoelementos, ele é atribuído ao seletor, separado por dois pontos. Depois, de acordo com todas as regras das folhas de estilo, as propriedades são especificadas. No entanto, você só pode aplicar propriedades relacionadas à edição de fontes, preenchimento, cor, plano de fundo, margens e bordas.

Proponho considerar um exemplo específico. Enquanto implementava o pequeno programa apresentado, decidi fazer não apenas uma tampa protetora colorida, mas também enchê-la de flores. Para fazer isso, você precisa usar alguns truques complicados para definir uma cor de fonte transparente e preencher a letra com a imagem selecionada.

Este parágrafo contém uma frase com um conteúdo muito interessante.

Vamos continuar uma história interessante no próximo parágrafo.

O resultado parece muito atraente e incomum, que é a solução perfeita para.

Como você pode ver, este tópico é muito simples. Você pode usar facilmente o código do programa fornecido por mim para seus recursos da web, modificando e ajustando ao seu estilo.

Se o material acima foi útil para você, então se inscreva para receber atualizações no meu blog e não se esqueça de compartilhar o conhecimento adquirido (e é claro um link para o meu blog) com seus amigos. Boa sorte!

Bye Bye!

Atenciosamente, Roman Chueshov

Uma letra maiúscula, de acordo com a definição, é um elemento de texto que aumenta de tamanho relativamente.Em quase todas as línguas, uma frase começa com uma letra maiúscula. E o desenho do início do parágrafo com uma letra maiúscula proeminente permite estruturar o texto e facilita a leitura. Quando uma página da web está sendo elaborada, o texto pode ser escrito de acordo com as preferências do autor e as regras da língua russa. Além disso, seu design pode ser "automatizado" inserindo certos "comandos" no arquivo com a extensão css - uma folha de estilo - ou suplementar seu arquivo html com uma seção de estilo. CSS geralmente é estudado adicionalmente com html para alterar rapidamente alguns elementos de design em todo o texto de uma vez.

Isso é especialmente verdadeiro se o site tiver centenas de páginas, e fazer alterações em cada uma delas é um processo muito demorado.

Se você aplicar css, as letras maiúsculas no início de cada parágrafo podem parecer especiais. Por exemplo, o código abaixo, inserido em html sem parênteses, permite que o texto, decorado com a tag "p", torne a letra maiúscula - primeira letra - maior - 220% do tamanho padrão, amarelo - o valor da cor é amarelo e escreva em fonte diferente do resto do texto - Geórgia versus batangche.

(<) style(>)

p: primeira letra (família da fonte: Geórgia; tamanho da fonte: 220%; cor: amarelo;)

(<)/style(>)

Você pode obter belas letras maiúsculas se criar sua própria fonte na forma de imagens - para cada letra uma imagem separada, por exemplo, no estilo russo antigo ou gótico. Eles podem ser desenhados Em seguida, nos locais necessários no lugar da letra maiúscula, você pode inserir o código sem parênteses (<) img src=”ссылка на место, где лежит картинка”(>) Atributos adicionais serão altura e largura - a largura e a altura da imagem, que pode ser definida em pixels para se misturar harmoniosamente com o resto do texto. Exemplo: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>) Parênteses ao redor< и >nós removemos.

Se você não tiver a oportunidade de desenhar o alfabeto sozinho, a letra maiúscula pode ser decorada usando fontes disponíveis gratuitamente no Google (seção Fontes) ou outros motores de busca e recursos. Para fazer isso, o código acima deve ser formatado da seguinte maneira:

(<) style(>)

p (família da fonte: batangche; tamanho da fonte: 93%;)

p: primeira letra (família da fonte: Kelly + Slab; tamanho da fonte: 220%; cor: azul;)

(<)/style(>)

(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).

O serviço Google permite que você escolha um ou outro e fornece links prontos para inserção em html ou css. Chamamos a atenção para o fato de que é necessário selecionar um grupo de fontes - latinas ou cirílicas, porque quase todas as fontes latinas não funcionam para texto em russo. No momento, o mecanismo de busca oferece cerca de 40 tipos gratuitamente.

Uma letra maiúscula ou sua contraparte maiúscula pode ser estilizada usando a propriedade de transformação de texto CSS. Se você definir o valor transform: none do texto na folha de estilo, o texto terá a aparência conforme você o escreve. Para converter todas as letras em minúsculas, defina a transformação do texto: valor de minúsculas separado por dois pontos e maiúsculas para maiúsculas. Definir a propriedade para transformação de texto: capitalize fará com que haja uma letra maiúscula no início de cada palavra.

Permite que você altere a capitalização das letras do texto.

Por padrão, o valor é definido como nenhum, o que não tem efeito no texto. O caso do texto permanece o mesmo. Os valores em maiúsculas e minúsculas convertem os caracteres em maiúsculas e minúsculas, respectivamente. Se você especificar um valor de capitalização, apenas os primeiros caracteres de cada palavra serão capitalizados. Herdar herda o valor do pai.

Exemplo

h3 (transformação do texto: letras maiúsculas;). letras baixas (transformação do texto: letras minúsculas;) .capitalize (transformação do texto: letras maiúsculas;)

Este é o título. Ele tem uma propriedade text-transform definida para maiúsculas. Todos os caracteres estarão em maiúsculas.

A propriedade Text-transform foi aplicada a este parágrafo com um valor em minúsculas, o que significa que todas as letras estarão em minúsculas.

E este último parágrafo tem uma propriedade de transformação de texto com uma propriedade CAPITALIZE aplicada. As primeiras letras de cada palavra serão maiúsculas, e somente isso.

Resultado

No entanto, nem tudo é tão simples. Existem algumas nuances. Se você prestar atenção ao segundo parágrafo do exemplo acima, notará que a palavra capitalize, apesar da propriedade text-transform aplicada ao parágrafo com o valor capitalize, é exibida inteiramente em letras maiúsculas, o que corresponde ao texto original. Isso se explica pelo fato de que, com o valor de capitalização especificado, apenas as primeiras letras das palavras são verificadas, e o restante permanece inalterado, independentemente de seu estado inicial.
Apesar de sua aparente simplicidade, a propriedade text-transform pode ser muito útil. Por exemplo, para capitalizar o texto de todos os cabeçalhos H1 em seu site, tudo o que você precisa fazer é adicionar uma propriedade à sua folha de estilo.

H1 (transformação de texto: maiúsculas;)

e o problema será resolvido. E não há necessidade de alterar manualmente todos os cabeçalhos, que podem ser muitos, muitos.

Muitas vezes com pressa ao adicionar materiais ao site ou, por exemplo, ao criar um novo tópico no fórum, o usuário pode começar a escrever uma frase (título) com uma letra minúscula (minúscula). Até certo ponto, isso é um erro.

Vou mostrar várias opções para resolver esse problema: PHP e CSS são mais adequados para materiais já publicados, quando como jQuery pode corrigir a situação antes mesmo da publicação.

A primeira letra de uma string é maiúscula no PHP

Em PHP, existe uma função chamada “ primeiro", Que apenas converte o primeiro caractere da string em maiúsculas, mas o menos é que não funciona corretamente com o alfabeto cirílico.

Para fazer isso, vamos escrever nossa própria pequena função. A implementação será semelhante a esta:

Nesta versão, receberemos uma frase que começa com maiúscula, que, de fato, é o que precisamos.

Primeira letra da string maiúscula em CSS

Esse método visualmente (ou seja, no código-fonte do site, as ofertas ficarão como estão) também converte o primeiro caractere em maiúsculas.

O uso é o seguinte:

Usando o pseudo-elemento " primeira carta"E propriedades" transformação de texto»Definimos a aparência de cada primeira letra do parágrafo.

A primeira letra de uma string é maiúscula no jQuery

Como eu disse antes, esse método de conversão é melhor para materiais que ainda não foram publicados.

Por exemplo, vamos pegar um campo de texto (ele funcionará como um campo para inserir um título para nós) e escrever um pequeno script para ele que, ao inserir uma frase com uma letra minúscula, a torna com uma capitalização:

O script é acionado ao escrever o texto e simplesmente ao colá-lo. Não se esqueça que para os scripts funcionarem em seu site, você deve ter a biblioteca jQuery conectada.

Controla a conversão do texto do elemento em caracteres maiúsculos ou minúsculos. Quando o valor for diferente de nenhum, a caixa do texto fonte será alterada.

informação curta

Designações

	Descrição	Exemplo
<тип>	Indica o tipo de valor.	<размер>
A && B	Os valores devem ser exibidos na ordem mostrada.	<размер> && <цвет>
A | B	Indica que apenas um dos valores sugeridos deve ser selecionado (A ou B).	normal | versalete
A || B	Cada valor pode ser usado sozinho ou em conjunto com outros em qualquer ordem.	largura || contar
	Valores de grupos.	[colheita || cruzar]
*	Repita zero ou mais vezes.	[,<время>]*
+	Repita uma ou mais vezes.	<число>+
?	O tipo, palavra ou grupo especificado é opcional.	inserir?
(A, B)	Repita pelo menos A, mas não mais do que B vezes.	<радиус>{1,4}
#	Repita uma ou mais vezes, separados por vírgulas.	<время>#

×

Os valores

letras maiúsculas O primeiro caractere de cada palavra na frase será maiúsculo. Os demais símbolos não mudam de aparência. minúsculas Todos os caracteres de texto se tornam minúsculos (minúsculos). maiúsculas Todos os caracteres de texto são maiúsculas (maiúsculas). nenhum Não altera a capitalização dos personagens.

Caixa de areia

O Ursinho Pooh nem sempre foi avesso a um refresco, principalmente às onze horas da manhã, porque a essa hora o café da manhã já havia acabado há muito tempo, e o jantar nem havia pensado em começar. E, claro, ele ficou terrivelmente feliz ao ver Rabbit pegando xícaras e pratos.

div (transformação de texto: capitalize;)

Exemplo

Monumento cultural da Idade Média

As terras baixas amazônicas acolhem uma pequena quantidade de cães e gatos, e Hayosh Bayah é famosa por seus vinhos tintos.

O resultado deste exemplo é mostrado na Fig. 1

Arroz. 1. Aplicando a propriedade text-transform

Modelo de Objeto

Um objeto.style.textTransform

Especificação

Cada especificação passa por vários estágios de aprovação.

• Recomendação - Esta especificação é endossada pelo W3C e recomendada como padrão.
• Recomendação do candidato ( Recomendação possível) - o grupo responsável pelo padrão está convencido de que ele está de acordo com seus objetivos, mas a ajuda da comunidade de desenvolvedores é necessária para implementar o padrão.
• Recomendação Proposta ( Recomendação sugerida) - Nesse momento, o documento é submetido ao Conselho Consultivo do W3C para aprovação final.
• Rascunho de Trabalho - Uma versão mais madura do rascunho após discussão e revisão para análise da comunidade.
• Rascunho do editor ( Rascunho editorial) - uma versão preliminar da norma após a edição pelos editores do projeto.
• Esboço, projeto ( Rascunho de especificação) é o primeiro rascunho da norma.

×