Como fazer uma fonte de cruzeiro em HTML. Criando uma fonte gordurosa e pretendida por meio de CSS

Hoje vou dizer-lhe como fazer palavras com fontes ousadas no site usando HTML e CSS. Este projeto é usado quando você precisa destacar determinadas informações na página. E não é apenas sobre manchetes, mas também sobre palavras simplesfrases no texto. É simplesmente implementado o suficiente.

Tags HTML especiais são usadas para destacar um determinado texto. e . Por exemplo, o seguinte código:

Texto normal.

Miniatura.

Em negrito.

Texto normal.

Miniatura.

Em negrito.

Na saída dá uma imagem:

As duas últimas opções visualmente parecem as mesmas, mas diferem ligeiramente uns com os outros. Marcação Especifica o simples destaque estilístico da palavra com fonte em negrito, enquanto Isso adiciona algum valor semântico "aprimorado" (importante). Isto é, a última linha não é apenas um texto em negrito, mas algum tipo informação importante. Em princípio, para os mecanismos de busca recomendam usá-lo .

Você também pode atender a fonte de gordura prescrita em HTML com estilos:

Um exemplo de texto negrito.

Texto de amostra S. gordo Resumidamente.

No site é exibido assim:

Apesar do fato de que o código de texto em negrito para HTML funciona corretamente, não faça. Todos os estilos de design devem ser retirados em Arquivo CSS.. Portanto, no exemplo acima, você deveria ter sido para tags

E Especifique a classe apropriada e, em seguida, registre seu design na folha de estilo. Essas aqui estão as regras para registro do código. Portanto, para uma fonte em negrito em HTML, use uma tag .

Texto negrito em css

Para fazer B. Gordura CSS. A fonte usa a propriedade de fontes de fontes. Com ele, a "saturação" do fragmento de texto é indicada. Os valores podem ser de 100 a 900, mas o mais freqüentemente usado é:

  • ousado (gordura) - 700 por padrão;
  • normal (normal) - 400 padrão.

Há também opções para os valores mais ourais e mais leves que mudam a fonte, dependendo do pai para mais ou menos gordura, respectivamente.

Para definir o texto em negrito no CSS, você precisa de algum outro estilo, por exemplo, por exemplo:

Texto normal S. seleção de gordura. no centro.

forte (pensão de fontes: negrito;)

Aqui eu queria celebrar uma pequena nuance, que me disseram - se você criar uma nova classe para algum elemento, é desejável usar um "nome compreensível" mais ou menos. Por exemplo, no exemplo acima da classe de estilo \u003d "My-Bold-Font" parece mais lógica que a classe \u003d "nova fonte", porque Você pode entender parcialmente seu propósito. Esta é uma vantagem para aqueles que vão olhar e usar seu layout no futuro.

No próximo artigo, vou contar sobre fontes de gordura interessantes que consegui encontrar.

Para que nossa página da Web parecesse mais apresentável, dividimos o texto nos parágrafos e estabelecemos o título. O HTML possui 6 níveis dos cabeçalhos da seção dos números numerados do documento de 1 a 6. O título é declarado um par de tags com números, nível adequado, por exemplo,

- seção de cabeçalho do primeiro nível, e
- a seção de título do sexto nível. Do título de texto comum diferem em tamanho e largura das letras. O cabeçalho do primeiro nível H1 é geralmente exibido com uma fonte muito grande, enquanto a manchete do sexto nível H6 é muito pequena.

Título

Fazendo não confundir o título das partições do documento com o cabeçalho discutido anteriormente do documento determinado pelo elemento .

Como cabeçalho de texto, usamos a primeira frase - para isso, é bem limitada às suas tags

e

.

Entrar no texto das tags do outro.html

e

De modo que eles limitam a primeira frase do texto, e esta peça de código aceitou o seguinte tipo:

Bem-vindo ao SD!

Eu vou olhar para o resultado adquirido.

Salve o arquivo selecionando um arquivo de notepad Program Menu (bloco de notas) Arquivo - Salvar (Arquivo Salvar).

A operação de poupança deve sempre ser feita antes de visualizar o documento, porque ele abre o arquivo para visualizar, baixando-o para o percurso a rolar do disco. Se depois de editar o código HTML, você não salvar o arquivo, não verá nenhuma configuração no navegador.

Restaure a janela do navegador pressionando o botão na barra de tarefas (barra de tarefas).

Pressione o botão F5 ou o botão UPDresh (atualização) na barra de ferramentas da janela de trabalho do programa. Other.html file será reinicializado e você verá na janela do navegador, pois o cabeçalho do primeiro nível parece.

Confira como o título dos outros 5 níveis aparecerá, alterando os números nas tags: H2, H3 e assim por diante após cada configuração, não se esqueça de salvar o arquivo e atualizar a imagem na janela do navegador.

Quando você terminar de experimentos, restaure as tags no outro arquivo .html

.

Usando 6 níveis de cabeçalho que proporcionam à sua disposição linguagem html., Você pode fazer um documento simplesmente legível com uma estrutura intuitiva-clara. Lembre-se de que seu documento sempre será significativamente melhor se tiver uma divisão precisa em seções e subseções.

Alinhando manchetes.

Por padrão, o título é alinhado à borda esquerda da página. Mas também pode ser alinhado na borda direita ou centen. Para alinhamento à direita na tag

Alinhar \u003d "Direito" Atributo é usado e para centrar - alinhar \u003d "centro". Uma indicação óbvia do alinhamento do lado esquerdo também é permitida - alinhar \u003d "esquerda".

Adicionar à tag.

Atributo Align \u003d "Center" para centen no título. Este elemento deve ter um tipo subseqüente:

Bem-vindo ao SD!

No próximo, não seremos lembrados por você sobre a necessidade antes de visualizarem para salvar o arquivo com o código inicial e atualizar a imagem no navegador.

Como fazer texto selecionado em HTML

Agora vamos lidar com o resto do texto. Eu vou aumentar seu tamanho e colocar o texto por negrito inscrição de consulta. Tags emparelhadas são usadas para instalar traços ousados .

Ficar no outro arquivo .html e fechamento Tags para que eles restrinjam o texto aqui você aprenderá ... Este elemento deve assumir uma visão subseqüente:

Como no HTML faz texto itálico

Inscrição encaracolado é instalado usando tags .

Atenha-se à tag de código HTML inicial e De modo que o elemento editado aceitasse o seguinte tipo:

Aqui você aprenderá sobre nossas atividades, sobre produtos de software. Nossa empresa e o equipamento que produzimos

Os elementos de marcação podem ser investidos, como nessa estrutura, onde o elemento Investido em elemento . Navegadores modernos Gráficas para lidar com tags aninhadas. Porque você precisa estar olhando para a ordem do anexo. O trabalho do navegador será difícil se o aninhamento estiver quebrado. Por exemplo, esse registro será incorreto: . A conformidade com o aninhamento é uma parte muito fundamental da escrita geral do código HTML.

Como tornar o texto sublinhado em HTML

Com um par de tags Você pode estabelecer um desenho sublinhado de uma peça de texto, limitada pela tag e com a ajuda de um par de tags - Mostrar texto por fonte Teletype.

Deve-se notar que com recentemente tag Aproculada e sublinhada é feita com estilos. equivalente . Sim, o novo analógico parece mais complicado, mas é um desgosto. O principal nesse benefício diz, o fato de que creme volumoso é um crossbromzer, em outras palavras adequadas para todos os navegadores quando Nem todos os navegadores são suportados.

Como pegar o texto em HTML

Agora aumente o tamanho da fonte do texto. Isso pode ser feito por vários métodos.

Tag Aumentar o tamanho da fonte do texto concluído entre eles.

Adicione ao início e no final do código acima, respectivamente, tags e Para que o elemento aceitasse o seguinte tipo:

Aqui você aprenderá sobre o nosso negócio, sobre os produtos de software da nossa empresa e o equipamento que produzimos

Com Tagov. Você pode reduzir o tamanho da fonte do texto em comparação com a inicial.

Outro método de indicar o tamanho da fonte - com tags Com o atributo de tamanho. Como os valores desse atributo, os números inteiros são usados \u200b\u200bde 1 a 7. O valor 1 corresponde ao menor tamanho da fonte, e o valor de 7 é o maior.

Usando em vez de tagov Visualização de tags. Veja como o tamanho da fonte do texto está mudando em valores diferentes do atributo de tamanho - de 1 a 7.

Como o valor do atributo de tamanho, você também pode usar números de 1 a 7 com + (mais) ou - (menos). Neste caso, o tamanho da fonte aumenta em miniaturizes, em comparação com a inicial, por exemplo, tags Crie tamanho da fonte, em comparação com o nível atual. Verificação de saída.

Defina 5 como o valor do atributo de tamanho para o texto em questão: . Código HTML desta peça deve ser assim:

Aqui você aprenderá sobre o nosso negócio, sobre os produtos de software da nossa empresa e o equipamento que produzimos.

Em tags. Atributo de cor também pode ser usado para indicar a cor da fonte limitada às tags de texto. Os valores desse atributo são os mesmos que para os atributos discutidos anteriormente descrevendo a cor do fundo e o texto do documento.

Por padrão, parágrafo com o texto aqui você aprenderá ... Alinhado à esquerda. Centre sua horizontalmente com tags

. Você também pode alinhar o parágrafo na borda direita da página com a tag ou à esquerda - com a ajuda de tags .

Stick Tags.

Restrito por eles parágrafo designado.

Dirija a atenção que para parágrafo de centragem nós usamos tags

Ao contrário do atributo align \u003d "Center", que é aplicado por nós em tags

.

Atenção! Para tags de 2010. ,

, , É obsoleto e, portanto, você precisa usar analogos de estilos. Isso não significa que é impossível usá-los, mas quando você é capaz de se livrar deles.

=

=

=

=

=

Há também um grande número de outras tags desatualizadas que não descrevem neste artigo, portanto é melhor se familiarizar com os sites especializados em esse problema. Mas o principal eu dei aqui um pouco mais alto

Códigos de seleção

A linguagem HTML admite duas abordagens para a seleção da fonte de fragmentos de texto. Por um lado, é possível indicar diretamente que a fonte em uma determinada seção do texto pode ser negrito ou significa, em outras palavras, é óbvio especificar a fonte na fonte, como fizemos nesta experiência. Por outro lado, você pode marcar pelo menos algum texto, como tendo alguns, bons do estilo habitual, lógico, fornecendo a interpretação desse estilo para o navegador. Então, Makar, um estilo lógico mostra o papel de uma peça de texto, por exemplo, um enorme significado na comparação com o texto cotidiano ou o fato de que esta peça é uma citação. Em seu próprio trabalho, você pode usar tags subseqüentes que definem estilos lógicos. Verifique como eles funcionam em vários navegadores.

- usado para determinar a palavra. O texto está em antecipação por padrão.

- destacar palavras e fortalecer. O texto é exibido em itálico por padrão.

- destacar o título de livros, filmes, performances e assim por diante com o itálico padrão.

- para fragmentos de código de código. Ele é mostrado na exibição de uma fonte de largura fixa.

- usado para texto que o usuário entra no teclado. Em vários navegadores podem ser exibidos em várias fontes. Tag desatualizada.

- usado para exibir programas. Exibe a fonte da largura fixa. Tag desatualizada.

- para fragmentos especialmente fundamentais. Geralmente é alocado por negrito.

- É usado para indicar que parte do texto ou a palavra é uma variável simbólica, em outras palavras, texto que pode ser substituído por diferentes expressões. Exibido por itálico por padrão. Tag desatualizada.

A especificação HTML 4.0 oferece um método mais progressivo de especificar estilos de texto e outras peças - usando uma linguagem especial de estilos CSS em cascata (folhas de estilo em cascata). As tabelas de estilos são uma grande conquista na área de design do design, expandindo a capacidade de melhorar a aparência das páginas. As tabelas do estilo simplificam a definição de intervalos entre linhas, recuos, cores usadas para texto e plano de fundo, tamanho e estilo de fonte e assim por diante, o estilo da maioria das peças HTML pode ser descrito usando o atributo de estilo, que é colocado dentro do elemento de tag de abertura. Como o valor do atributo de estilo, pares de tipo "propriedade: valor" são usados. Por exemplo, em um pedaço de código descrevendo o título da seção,

O atributo estilo \u003d "cor: azul" determina que a propriedade colorida (cor) é azul (azul), em outras palavras, o texto do cabeçalho de primeiro nível deve ser exibido em azul.

Alinhamento de estilo

Vamos ver como com a linguagem das tabelas de estilo em cascata, especifique o estilo de uma peça de texto, que começa palavras aqui você vai aprender ...

Para indicar a espessura da fonte, a propriedade de peso da fonte é usada com valores mais leves (estreito), negrito (negrito), mais ousado, por exemplo, estilo \u003d "Peso de fonte: negrito".

A propriedade de estilo de fonte com o valor itálico é usada para definir uma apropriação. Portanto, para dar ao texto Bummer Body-Inspeção, o atributo de estilo é seguido por: estilo \u003d "Peso de fonte: negrito; estilo de fonte: itálico". Atenção direta: As características podem ser acomodadas em qualquer ordem e certamente necessária para compartilhar um ponto e vírgula.

Se você quiser especificar o tamanho da fonte, você deve usar a propriedade de tamanho de fonte, cujos valores podem ser especificados em valores relativos ou absolutos. Os valores relativos são percentuais, e itens (PT), pixels (PC), centímetros (cm), milímetros (mm) são usados \u200b\u200bcomo valores absolutos. Por exemplo:

estilo \u003d "font-size: 200%"

estilo \u003d "font-size: 16pt"

estilo \u003d "font-size: 100px"

Indicando tamanhos absolutos, não relativos, você privar os usuários que olham para suas páginas, a capacidade de aumentar ou reduzir o tamanho da fonte usando o comando do menu do navegador em coordenação com sua visão e resolução do monitor. As fontes serão exibidas apenas no tamanho especificado. Portanto, é melhor especificar o tamanho da fonte em porcentagem. Nesse caso, o tamanho da fonte será menor ou mais no número marcado de por cento do que quando ele é projetado quando ajuda HTML. A tag padrão.

Para determinar o método de alinhamento de texto horizontalmente, a propriedade de alinhamento de texto com valores esquerdos (esquerda), direita (por direita), central (centrada), justificar (largura) é usada. Então, Makar, para salientar que o texto aqui você aprenderá ... deve ser decorado com um inquérito ousado em tamanho com um tamanho de 150% da inicial e alinhada no centro, segue seu estilo a ser encontrado seguido:

estilo \u003d "Peso de fontes: negrito; estilo de fonte: itálico; Tamanho da fonte: 150%; alinhamento de texto: centro"

Aplicamos este atributo em tags<р>que permitem enviar texto como um parágrafo separado.

Editar elemento HTML.incluindo texto aqui você vai aprender ... removendo tags

, , , E inserir tags.<р> e Com o atributo de estilo para que este elemento tenha tomado uma visão subseqüente:

<р style="font-weight: bold; font-style: italic; font-size: 150%; text-align: center">Aqui você aprenderá sobre o nosso negócio, sobre os produtos de software da nossa empresa e o equipamento que produzimos

Veja, a linguagem HTML permite que você use vários métodos Design de estilo. Juntos, a aplicação dos estilos CSS de tabelas em cascata é mais desejada.

Outras opções de alinhamento e uso de estilos

Nós vimos apenas uma opção para usar o estilo de tabelas de estilo quando a definição do estilo é colocada especificamente dentro da tag de elemento que você descreve.

Isso é feito usando o atributo de estilo usado com a maioria dos padrões tags HTML.. Mas existem outras opções para usar CSS.

No HTML padrão, sem a introdução de tabelas de estilo, para atribuir qualquer elemento de determinados parâmetros, como cor, tamanho, posição na página e, é necessário obradecer essas características para cada elemento toda vez, mesmo que Uma página é necessária para ser colocada 10- ki tais peças que não diferem umas das outras. Você tem que inserir um e o mesmo pedaço de código HTML na página, aumentando o tamanho do arquivo e o tempo de carregamento da rede.

Tabelas de estilo atuam outro método mais confortável e econômico. Para atribuir qualquer elemento de determinados recursos, você deve delinear este elemento uma vez e encontrar esta descrição como um estilo, e na chegada simplesmente indicar que o elemento que você deseja emitir uma maneira adequada deve assumir as características do estilo descrito por você. Confortável, não é?

Além disso, você pode salvar a descrição do estilo não no texto da sua página da Web, mas em arquivo separado - Isso permitirá que você use a descrição do estilo em qualquer número de calças web. E a próxima vantagem associada - a capacidade de alterar o design de pelo menos qualquer número de páginas corrigindo o estilo de estilo em um arquivo separado.

Além da linguagem das mesas de estilo permite que você trabalhe com o design da fonte de páginas para ainda mais o nível mais alto.do que o HTML padrão.

Na hora atual, a linguagem CSS tem um número suficientemente grande de partes HTML, que ele pode controlar. Usando "seguro", em outras palavras compatíveis com o maior número Navegadores. elementos CSS. - Características da fonte, peças e cor de fundo, características de texto e fronteiras - você pode aliviar significativamente o seu trabalho e fazer suas páginas da web bonita no design do design de texto.

ou aprender tags formatando texto html

Uma das principais lições tutoriais e mais fáceis é apresentada à sua atenção.

  • Texto HTML. É o principal componente da maioria das páginas da Internet.
  • De frases chave no texto das páginas HTML Os usuários podem encontrar o seu site.
  • Texto HTML. Pode ser qualquer tamanho e cor, a seu critério. Você também pode determinar o tipo de fonte e seu volume.
  • Tamanho da fonte HTML. É comumente instalado em pixels.
  • Formatação de texto HTML. Tags generalizadas, formatação são aplicadas.

Veja abaixo tags Formatando o texto HTML:

  • Tag → gordura. Texto HTML. (negrito).
  • Tags → gordura. Texto HTML. (negrito).
  • Tag → Monoshyry. Texto HTML. (fonte monossular).
  • Tag → Monoshyry. Texto HTML. (fonte monossular).
  • Tag → Monoshyry. Texto HTML. (fonte monossular).
  • Tag Texto HTML., o tamanho é mais do que o habitual (fonte grande).
  • Tag Texto HTML.O tamanho é menor que o usual (fonte pequena).
  • Tag → inclinado Texto HTML. (fonte inclinada).
  • Tag → inclinado Texto HTML. (fonte inclinada).
  • Tag → inclinado Texto HTML. (fonte inclinada).
  • Tag → Estressado Texto HTML. (fonte sublinhada).
  • Tag → esmagado Texto HTML. (Fonte estressada).
  • Tag Texto HTML. (fonte) no menor índice.
  • Tag Texto HTML. (Fonte) no índice superior.

Formatação de texto HTML: texto esmagado, sublinhado

Resultado: ... Monoshyry Font

Resultado: ... O tamanho da fonte é mais do que o habitual

Resultado: ... fonte inclinada

Resultado: texto estressado (fonte estressada)

Resultado: Índice Superior

A formatação C, apresentada acima, deve ser aplicada apenas para pequenas seções de texto. Usar CSS. Se você quiser definir uma fonte específica para toda a página, ou para várias linhas, por exemplo.

HTML nos fornece algo em termos de design de texto. Hoje vou contar como fazer uma fonte cursiva em HTML, e ambos na fonte padrão e não-padrão. No segundo caso, será necessário levar em conta tudo funcionando.

Como escrever em HTML Itálico?

Vou começar com o fato de que no próprio HTML existem duas tags que dão texto ao texto. Isso é em e eu. A propósito, o segundo é construído no editor HTML do Engine WordPress no qual estou agora este artigo. O que essas tags diferem? Na verdade, hoje eu não gostaria de declarar ruidosamente que eles diferem alguma coisa.

Em geral, o EM é usado para destacar palavras que precisam pronunciar com uma entonação especial, e simplesmente destaca o texto. Mas não nos incomodaremos nisso, porque é desconhecido, isso é verdade.

Quais são as propriedades CSS para um texto de interseção?

Esta é a propriedade de estilo de fonte e seu valor itálico. Ainda há um valor oblíquo e transforma o texto para o inclinado. Existe alguma diferença entre esses valores? Praticamente não. By the way, em detalhes sobre isso e outros propriedades CSS. Para texto, leia no artigo apropriado, onde tudo é decomposto nas prateleiras.

Como trazer uma fonte não padrão em itálico?

O fato é que se você conectar uma fonte não padrão Google Fonts. Nesse caso, você deve marcar a caixa de seleção quando conectar pelo menos 1 string de fonte. Se isso não for feito, então você tentar fazer esses itens de fonte, será uma imposta uma das fontes padrão. By the way, você pode ler sobre conectar fontes não padrão neste artigo.

Nesta captura de tela você pode ver um fragmento da conexão de fonte através de serviço do google. Fontes.

Como pode ser visto, há um carrapato perto de pelo menos uma inscrição de alto nível. Agora, ao usar as tags necessárias ou propriedades de estilo, realmente esta fonte se tornará significativa e não outra.

Assim, desmontamos todos os momentos que estão trabalhando com uma interseção. Não te desafio mais a deter.

Uma das maneiras mais simples de destacar a palavra ou frase no texto - use outro desenho de letras. Para que você possa enfatizar a palavra ou frase, usando páginas em negrito com facilidade permite que você destaque palavras usando diferentes desenhos - média, sublinhado, gorduroso.

Fonte gorda como uma maneira de destacar a coisa principal

Palavras destacadas com fonte em negrito olhar mais brilhante e captura. Tais palavras e frases imediatamente se apressam nos olhos. Então, para aprender a alocar rapidamente os lugares necessários no texto, você deve se lembrar do código HTML especial. Negrito Exibido com uma tag de par.

Antes da palavra ou frase, uma proposta que deve ser destacada, a abertura da tag é definida . Após a última letra no texto, que deve ser destacada, é colocada tag de fechamento. Tudo o que se vira entre essas duas tags, ao exibir no navegador tem um derrame gorduroso.

Outras opções

Então, descobrimos que você pode selecionar texto usando outro design. Decidiu que o mais simples e ao mesmo tempo efetivamente usa gordura fonte html.. Agora vamos falar sobre outras opções de seleção.

Então, você pode selecionar texto em itálico com uma tag de par , enfatize com . Este é o mais maneiras simples Selecionando texto.

Há também etiquetas menos conhecidas e usadas, com as quais você pode alocar palavras e sugestões no texto. Então, para atravessar o texto, basta usar . Fazer o texto monossol ajudará a tag do par . Se você precisar criar um índice superior, use Nizhny - .

Ao mesmo tempo, como antes, o texto que você precisa deve estar entre a tag de abertura e fechamento. Como você pode ver, não há nada complicado, o principal é lembrar esses códigos ou queimá-los.

Use várias fontes

Se você quiser tornar o texto mais expressivo, você pode usar não apenas fonte gordurosa. A HTML-Markup permite selecionar simultaneamente a palavra usando várias pilhas. Então, você pode fazer simultaneamente a palavra gordura, cruzada e dizer.

Ao mesmo tempo, é necessário lembrar uma coisa - todas as tags devem ser fechadas sequencialmente. Por exemplo, o registro correto pode ser assim:

  • o texto selecionado.

Se você fechar as tags em uma ordem diferente, o texto será alocado incorretamente. Um exemplo de uma entrada errônea:

  • o texto selecionado.

Neste caso, o navegador é confuso e não entenderá exatamente o que você quer disso.

A propósito, pode ser notado aqui que três opções de desenho - gordura, sublinhadas e médias - lembradas com bastante facilidade, se você tiver chaves quentes na palavra. Lá, o desenho é definido usando as mesmas chaves da letra ao apertar Ctrl.

Como você pode ver, você pode usar não apenas um curso ou fonte gordurosa. A marca HTML permite que você destaque as palavras tão fáceis quanto a palavra usual.

Conclusões

Não apenas uma variedade de cores e tons, tamanho diferente e tipo de fonte, mas também sua inscrição é amplamente usada para destacar o texto. Além disso, é precisamente usando um esboço diferente que é bonito e fácil de selecionar um ou outro fragmento do texto.

Para alterar o empilhamento de fonte, você deve usar qualquer tag conhecida por você. A fonte gorda das páginas HTML é a mais brilhante e perceptível e, portanto, é usada com mais frequência para destacar.