Hoje vou falar como fazer palavras em negrito em um site com usando HTML e CSS. Este design é usado quando você precisa destacar certas informações em uma página. Além disso, não estamos falando apenas de cabeçalhos, mas também de palavras simples, frases do texto. Isso é implementado de forma bastante simples.
Para destacar determinado texto em negrito, especial Tags HTML — e ... Por exemplo, o seguinte código:
| Texto simples. Miniatura. Texto em negrito forte. |
Texto simples.
Miniatura.
Texto em negrito forte.
A saída dá a seguinte imagem:
As duas últimas opções parecem iguais, mas são ligeiramente diferentes uma da outra. Marcação especifica a ousadia estilística simples de uma palavra, enquanto adiciona um certo significado semântico "aprimorado" (importante). Ou seja, a última linha não é apenas texto em negrito, mas algumas informações importantes. Em princípio, para mecanismos de pesquisa, é recomendável usar exatamente .
Você também pode vê-lo escrito em HTML negrito usando estilos:
Um exemplo de texto em negrito.
Texto de amostra com negrito palavra.
O site o exibe assim:
Embora o código HTML em negrito funcione corretamente, não deveria. Todos os estilos de design devem ser renderizados em Arquivo CSS... Portanto, no exemplo acima, você teve que para tags
E especifique a classe apropriada e, a seguir, escreva sua aparência na folha de estilo. Estas são as regras de codificação. Então, para negrito em HTML, use a tag .
Texto CSS em negrito
Para deixar o CSS em negrito, a propriedade font-weight é usada. Com sua ajuda, a "saturação" do fragmento do texto é indicada. Os valores podem variar de 100 a 900, mas os mais comumente usados são:
- negrito (negrito) - 700 por padrão;
- normal - 400 por padrão.
Também há opções para os valores mais negrito e mais claro, que alteram a fonte dependendo do pai para mais ou menos negrito, respectivamente.
Para definir texto em negrito em CSS, você precisa definir algum estilo para este ou aquele elemento, por exemplo:
Texto simples com descarga oleosa no centro.
forte (espessura da fonte: negrito;)
Aqui eu gostaria de observar uma pequena nuance que me falaram - se você criar uma nova classe para algum elemento, então é aconselhável usar um "nome mais ou menos compreensível". Por exemplo, no exemplo acima, o estilo class = "my-bold-font" parece mais lógico do que class = "new-font", porque você pode compreender parcialmente seu propósito. Esta é uma vantagem para aqueles que irão olhar e usar seu layout no futuro.
No próximo artigo, vou falar sobre algumas fontes em negrito interessantes que consegui encontrar.
Em html, o tamanho da fonte desempenha um papel importante. Ele permite que você chame a atenção do usuário para informação importante postado na página do site. Embora não só o tamanho das letras seja importante, mas também a sua cor, espessura e até família.
Tags e atributos ao rastrear com fontes html
A linguagem de hipertexto possui um grande conjunto de ferramentas para trabalhar com fontes. Afinal, a formatação de texto é a principal tarefa do html.
Razão para criar Linguagem HTML tornou-se o problema de exibição de regras de formatação de texto pelos navegadores.
Considere as tags que são usadas para trabalhar com fontes em html e seus atributos. O principal é a tag ... Usando os valores de seus atributos, você pode definir várias características da fonte:
- color - define a cor do texto;
- tamanho - tamanho da fonte em unidades convencionais.
Valores positivos de atributos de 1 a 7 são suportados.
- face - usado para definir a família da fonte do texto a ser usado dentro da tag ... Vários valores são suportados ao mesmo tempo, separados por vírgulas.
Apenas o texto entre as partes da tag de fonte emparelhada é formatado. O resto do texto é exibido na fonte padrão padrão.
Também em html, há várias tags emparelhadas que especificam apenas uma regra de formatação. Esses incluem:
- - define a fonte em negrito em html. Marcação a ação é semelhante à anterior;
- - o tamanho é maior que o padrão;
- - tamanho de fonte menor;
- - texto em itálico. Tag semelhante ;
- - texto sublinhado;
- riscado;- - exibir texto apenas em minúsculas;
- - em maiúsculas.
Texto simples
Miniatura
Miniatura
Mais do que o normal
Menos que o normal
Itálico
Itálico
Sublinhado
Riscado
Capacidades de atributo de estilo
Além das tags descritas, existem várias outras maneiras de alterar a fonte em html. Um deles é o uso do atributo de estilo genérico. Usando os valores de suas propriedades, você pode definir o estilo de exibição da fonte:
1) font-family - propriedade define a família da fonte. A enumeração de vários valores é possível.
A mudança da fonte em html para o próximo valor acontecerá se a família anterior não estiver configurada para sistema operacional do utilizador.
Sintaxe de escrita:
família da fonte: nome da fonte [, nome da fonte [, ...]]
2) font-size - o tamanho é definido de 1 a 7. Esta é uma das principais formas de aumentar a fonte em html.
Sintaxe de escrita:
tamanho da fonte: tamanho absoluto | tamanho relativo | valor | interesse | herdar
O tamanho da fonte também pode ser definido:
- Em pixels;
- Em valor absoluto ( xx-pequeno, x-pequeno, pequeno, médio, grande);
- Em porcentagens;
- Em pontos (pt).
Tamanho da fonte: 7
Tamanho da fonte: 24px
Tamanho da fonte: muito grande
Tamanho da fonte: 200%
Tamanho da fonte: 24pt
3) estilo da fonte - define o estilo de escrita da fonte. Sintaxe:
estilo da fonte: normal | itálico | oblíqua | herdar
Valores:
- normal - grafia normal;
- itálico - itálico;
- oblíqua - fonte inclinada para a direita;
- herdar - herda a grafia do elemento pai.
Um exemplo de como alterar a fonte em html usando esta propriedade:
estilo da fonte: herdar
estilo da fonte: itálico
estilo da fonte: normal
estilo da fonte: oblíquo
4) font-variant - converte todas as letras maiúsculas em maiúsculas. Sintaxe:
variante da fonte: normal | versalete | herdar
Um exemplo de como alterar a fonte em html com esta propriedade:
variante da fonte: herdar
variante da fonte: normal
variante da fonte: versalete
5) espessura da fonte - permite definir a espessura da escrita do texto (saturação). Sintaxe:
tamanho da fonte: negrito | mais negrito | mais claro | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Valores:
- negrito - define a fonte em negrito html;
- mais ousado - mais gordo em relação ao normal;
- mais claro - menos saturado em relação ao normal;
- normal - grafia normal;
- 100-900 - define a espessura da fonte em equivalente numérico.
intensidade da fonte: Negrito
font-weight: bolder
peso da fonte: mais leve
peso da fonte: normal
tamanho da fonte: 900
tamanho da fonte: 100
A propriedade da fonte e a cor da fonte html
Font é outra propriedade do contêiner. Internamente, ele combinou os valores de várias propriedades projetadas para alterar as fontes. A sintaxe da fonte é:
fonte: font-size font-family | herdar
Além disso, o valor pode ser definido para as fontes usadas pelo sistema nas inscrições em vários controles:
- legenda - para botões;
- ícone - para ícones;
- menu - menu;
- caixa de mensagem - para caixas de diálogo;
- legenda pequena - para controles pequenos
- barra de status - fonte da barra de status.
fonte: ícone
fonte: legenda
fonte: menu
fonte: caixa de mensagem
legenda pequena
fonte: barra de status
fonte: itálico 50px negrito "Times New Roman", Times, serif
Para definir a cor da fonte em html, você pode usar a propriedade color. Ele permite que você defina a cor usando uma palavra-chave e o formato rgb. E também na forma de um código hexadecimal.
Olá queridos leitores do blog! Este artigo se concentrará em tags de formatação de texto... Texto em negrito ou itálico é um bom exemplo. Também consideraremos a influência de algumas tags na otimização interna do site e as regras para sua redação. Você pode ler sobre isso no artigo fornecido. A propósito, você pode encontrar elementos de design de texto semelhantes em muitos editores de texto, por exemplo, no Word.
As tags são divididas em 2 tipos: tags em bloco e em linha. Ao usar o primeiro, você pode alterar o conteúdo de uma parte do texto (linhas, fragmentos individuais ou palavras), enquanto o último o é. As tags de formatação que examinaremos neste artigo são predominantemente em letras minúsculas.
Regras e ordem de escrita das tags
Você já sabe o que são as tags de início e fim. Se não, então leia o artigo no início deste material. Em suma, existem dois tipos de tags: única (por exemplo, transferência para nova linha) e contêiner (emparelhado). Portanto, todas as tags de formatação de texto são emparelhado... Isso significa que qualquer elemento possui uma tag de início e fim, e a seleção deve ser colocada entre eles. Por exemplo, a seleção correta de uma frase ficaria assim: Trecho selecionado
Quando o navegador processar este fragmento, você verá o seguinte texto: Trecho selecionado. A propósito, em feed RSS todas as tags não são exibidas ().
O principal ao escrever tags é mantê-las fechadas. Caso contrário, todo o texto da página ficará em negrito (no exemplo com a tag ) Mas há momentos em que você precisa destacar um determinado fragmento e itálico e negrito ao mesmo tempo. Mas não há tag que execute essa ação. Só há uma maneira de sair dessa situação: use duas tags ao mesmo tempo. Não importa a ordem em que você os usa. Portanto, escrevendo o texto com tags como esta:
Trecho selecionado
ou assim:
Trecho selecionado
Você ainda vai conseguir Trecho selecionado em itálico e negrito ao mesmo tempo. Porém, é preferível usar a primeira opção, porque inicialmente era a única e correta. Além disso, não se esqueça de que cada navegador pode manipular tags de maneira diferente (), dependendo das configurações. Agora, vamos passar para as próprias tags de formatação.
Texto em negrito e itálico - tags , , e
Tags de formatação de texto mais populares - enfatizando negrito e em itálico... Geralmente são usados para dar importância a uma peça. O primeiro caso serve para selecionar um fragmento contendo informação útil ou palavras-chave... Itálico é usado para os mesmos fins que o texto em negrito, mas as informações são menos importantes porque o itálico é menos visível no fundo do corpo do texto do que o texto em negrito.Considere primeiro texto em negrito... Existem duas tags usadas para esta ação - e ... Diferenças em aparência não. Embora, dado que qualquer navegador pode interpretar cada elemento de maneira diferente, você deve ser capaz de ver as diferenças. É assim que o texto nas tags se parece e no formulário já processado pelo navegador:
Texto em tags fortes
Texto em tags b
E aqui está a aparência dessas duas linhas no código-fonte da página:
Texto em tags fortes Texto em tags b
Podemos observar a mesma situação no caso de tags em itálico e ... Tente encontrar as diferenças entre os dois exemplos:
Texto em tags em
Texto em tags I
E aqui está o código-fonte:
Texto em tags em Texto em tags I
Então, as marcas de negrito e itálico consideradas não são realmente diferentes, mas por que precisamos, por exemplo, da marca se houver ? Afinal, este último contém apenas um caractere (sem contar os parênteses) e, portanto, é mais fácil de escrever. E o fato é que as tags e afetar. Se você cercar palavras-chave com essas tags, terá um efeito benéfico na promoção do site da Web. O principal é não exagerar - o texto máximo deve ser 5% em negrito na tag. e a mesma quantidade de itálico na tag .
Se você quiser apenas destacar algum momento no texto, use a tag ou ... Em geral, acho que os mecanismos de pesquisa também consideram o texto nessas tags como mais importante, mas otimização interna eles ainda têm menos impacto do que e .
Tags de texto de barra - , e
Agora, vamos dar uma olhada em algumas tags que usam um traço no estilo do texto. O mais conhecido por você de editores de texto — marcação
ou sublinhado. Essa tag não tem influência no ranking (até onde eu sei), mas ajudará a destacar algum texto e focar nele. Eu dei um exemplo de como usar essa tag logo acima. Existem mais duas tags com objetivos semelhantes - e ... Ambos têm a função de tachado. Você pode usar esta tag em qualquer situação: se você atualizar um documento (ou melhor, uma parte dele), você pode riscar o antigo e adicionar um novo; se você vai escrever algo que se desvia do tema do material; algo que não corresponde aos padrões morais e éticos.
As diferenças entre essas duas marcas estão apenas em seus escrita, pelo que é preferível utilizar o primeiro, uma vez que em primeiro lugar, é mais conveniente escrever e, em segundo lugar, haverá menos código HTML em sua página, e os mecanismos de pesquisa adoram.
Marcação e atributos - parâmetros de fonte do texto
Agora vamos examinar uma tag que não é usada sem atributos. Com ele, você pode definir parâmetros para um trecho específico de texto. Em geral, agora é preferível usar (folhas de estilo em cascata) porque eles podem encurtar muito o código HTML inteiro da página. Então, vamos olhar para a mesma tag . Para ele tem tudo três atributos:
- enfrentar- a própria fonte. Por exemplo, Arial, Courier ou Verdana. Você pode listar alguns, tk. nem todos os usuários possuem um extenso conjunto de fontes, e ao escrever algumas no atributo face, o navegador poderá escolher qual usar, ou melhor, qual está presente no sistema;
- Tamanho- um atributo que indica o tamanho do texto. Pode ser expresso em unidades arbitrárias e em pixels;
- cor- cor do texto. Este atributo pode ser usado tanto em códigos HTML de cores quanto em palavras. Os primeiros são da forma #FFFFFF (onde F é qualquer número ou letra de A a F), e os últimos são escritos em palavras simples(por exemplo, vermelho é vermelho).
É assim que o texto na tag se parece usando cada atributo:
Este texto tem um tamanho de 6px
Este texto é vermelho Este texto está em fonte Arial Este texto é vermelho e 5pxE aqui está o que você verá após processar o código escrito: 
Elementos de design de texto em blocos - cabeçalhos -, parágrafo
, parágrafo
Finalmente, veremos os elementos de bloco que são usados em quase todos os documentos. Estas são tags de título e de parágrafo. Vamos considerar o primeiro. Existem 6 tipos de títulos e cada um tem sua própria tag. Cada espécie tem apenas seu próprio número de série e é registrado por meio de etiquetas
, ,..., ... Todos os cabeçalhos ficam assim quando processados:
... Todos os cabeçalhos ficam assim quando processados:
O número após a palavra título corresponde ao número na tag
Agora vamos falar sobre a tag de realce de parágrafo.
A função desta tag é separar o texto de outro texto semelhante com uma linha em branco. Se você olhar o código-fonte de um documento, verá o seguinte:
As caixas verdes têm um parágrafo, as caixas vermelhas têm outro. E é assim que esse código fica após ser processado pelo navegador (a seta aponta para uma linha em branco):
Como resultado, obtemos uma separação bastante perceptível de um parágrafo do outro, o que é benéfico - a leitura se torna mais conveniente.
Então, o artigo sobre tags de formatação de documento... Há muito mais deles do que descrevi neste material. É só que você precisa falar muito sobre alguns, como resultado disso, artigos separados com uma revisão completa serão dedicados a eles.!
O peso da fonte é determinado usando o atributo CSS espessura da fonte, que pode assumir os seguintes valores:
- mais leve- mais leve
- normal- normal
- negrito- negrito
- mais ousado- mais ousado
- 100..900 - 100 corresponde à fonte mais fina; 900 - o mais espesso
Atributo estilo de fonte(estilo da fonte) é usado para escrever em itálico e pode assumir os seguintes significados:
- itálico- itálico, as bordas do texto são arredondadas
- normal- normal
- oblíquo- itálico
Atributo variante da fonte(tipo de fonte) é usado para escrever em letras minúsculas e pode assumir os seguintes significados:
- normal- normal
- smaoo-caps- letras maiúsculas minúsculas
Junto com negrito, itálico e versalete, existem vários outros tipos populares de fontes: sublinhado e marcação.
Atributo decoração de texto(decoração de texto) serve para sublinhar o texto e pode assumir os seguintes valores:
- piscar- texto piscando (não suportado pelo IE)
- line-through- texto tachado
- Nenhum- sem mudanças
- overline- linha acima do texto
- sublinhado- texto sublinhado
Atributo transformação de texto(transformação de texto) é usado para trabalhar com letras maiúsculas e pode assumir os seguintes valores:
- capitalizar- todas as palavras começam com letra maiúscula
- minúsculas- todo o texto está escrito em letras minúsculas
- Nenhum- sem mudanças
- letras maiúsculas- todo o texto é escrito em letras maiúsculas
Exemplo de uso espessura da fonte, estilo de fonte, decoração de texto, transformação de texto: Exemplo # 9
Código HTML da página:
Sem título
"Anel de ouro da Rússia"(na antiguidade Zalesye), uma rota turística que inclui uma rede de antigas cidades russas: Sergiev Posad, Pereslavl-Zalessky, Rostov, o Grande, Yaroslavl, Kostroma, Ples, Vladimir, Bogolyubovo, Suzdal, Yuryev-Polskoy, Uglich. O nome Zalesye é principalmente geográfico, significava tudo o que estava “além da floresta” em relação à Rus de Kiev.
O roteiro turístico (em operação desde o início de 1970), traçado por cidades históricas, passa pelo território de cinco regiões - Moscou, Yaroslavl, Kostroma, Ivanovskaya, Vladimirskaya. As antigas cidades dessas terras têm seu próprio destino, seu passado. Eles fizeram caminho difícil No dele desenvolvimento histórico desde os primeiros dias de nascimento até os dias atuais. Muito se perdeu irremediavelmente nesta longa jornada. A indiferença e a negligência levam à destruição parcial ou total de edifícios únicos, como as cidades de Kalyazin, Mologa, Uglich. Durante a construção da usina hidrelétrica de Uglich, o antigo Mosteiro Pokrovsky com monumentos únicos dos séculos 15-17 foi explodido e afundou. Metade das igrejas em Uglich foram demolidas, as cercas dos mosteiros foram desmontadas, o que destruiu a integridade do conjunto. Por meio dos esforços dos restauradores, dezenas de objetos da arquitetura antiga, aparentemente perdidos de forma irreparável, puderam ser retirados do estado de emergência e salvos da destruição. Restaurado à vida em sua forma original: o conjunto arquitetônico do Mosteiro da Ressurreição (1674-77) de Uglich, a Igreja da Intercessão em Nerl (século 12), Catedral Dmitrievsky (século 12) e a "Porta Dourada" de Vladimir , Catedral de São Jorge (século 12) Yuryev-Polsky, monumentos da antiga Suzdal, onde se realizaram um trabalho abrangente para restaurar os edifícios históricos dentro de toda a cidade, a cidade-museu. Complexos arquitetônicos inteiros dos Museus de Arquitetura de Madeira em Kostroma e Suzdal foram recriados. Todas essas são criações de mãos humanas que tocaram os territórios protegidos da Terra Russa.
