Código HTML para a cotação. Linha vertical à esquerda
Saudações. Neste tutorial quero ensinar como alterar o design das aspas no wordpress. Para começar, vamos descobrir quais citações estão no texto.
Citação de conceito no wordpress
Para destacar algum texto importante em um artigo, o WordPress tem uma coisa tão legal quanto as citações (não aquelas que foram analisadas). Na barra de ferramentas, este botão tem esta aparência.
Todo mundo sabe como usá-lo - o botão esquerdo do mouse circula o texto que queremos destacar e pressione este botão. Na verdade, agora você vê este texto no design de citações.
Todos os modelos são diferentes e, portanto, o design das cotações também é diferente. Em alguns casos, não é nada bonito e você deseja mudar. Então eu vou aprender como corrigi-lo.
Começamos o trabalho.
Já aviso que trabalharemos com uma linguagem como CSS. O principal é entender todo o princípio do que está acontecendo e então não será difícil.
Encontramos o arquivo e o estilo desejado.
Você precisa encontrar o arquivo style.css no tema ativo. Para fazer isso, vamos para a aparência e, em seguida, o editor, encontramos style.css. O próximo passo é encontrar o estilo para bloco de citação. Observamos a sequência de todas as ações na imagem.
O caminho para o próprio arquivo style.css
Solicitação de pesquisa. A pesquisa é aberta pressionando CNTRL + F e, em seguida, cole a consulta.
Linhas de código encontradas, elas são necessárias.
Mudamos o projeto.
Você precisa entender exatamente o que você quer ver. Aconselho-o a não inventar quaisquer imagens e afins. O máximo que pode ser feito
Mude o fundo.
Tamanho e design da fonte.
Um quadro (sólido, intermitente, pontilhado), pode ser de um lado ou de ambos.
Sem fotos e afins, caso contrário será, você não precisa de problemas desnecessários. Eu ofereço-lhe um conjunto padrão.
Blockquote(cor de fundo: #f6f6f6; borda esquerda: 4px sólido #1F37FF; box-shadow: 1px 2px 2px 2px rgba(0,0,0,.4); margem: 10px 10px 20px 10px; fonte: 20px georgia, Helvetica, sem serifa; estilo da fonte: itálico; cor: #000000; sombra do texto: 2px 2px 2px #FFFFFF; )
Vamos analisar este código linha por linha.
O estilo para aspas em bloco com um colchete de abertura.
Cor de fundo.
Golpe, fiz só do lado esquerdo, se quiser pode fazer de todos os lados, ou de dois.
Sombra de bloco.
Recuos para que o bloco inteiro não grude no texto do artigo.
Tamanho da fonte e sua propriedade.
Estilo da fonte, fiz itálico.
Cor da fonte.
Sombra de texto.
O estilo de chave de fechamento.
A linguagem CSS é muito simples e intuitiva, você pode ler as linhas e entender tudo sozinho. Você pode adicionar, ao contrário, remover, mas repito, não insira fotos, pois é uma adaptação. Se você tem conhecimento, aplique ou pergunte nos comentários.
A segunda maneira é com um plugin para formatar citações em um blog WordPress
De toda a abundância, gostei de uma, esta WP-NOTE é simples e não é pesada. Ele é instalado a partir do painel de administração, procurando por plugins.
Agora vamos aprender como usá-lo.
Possui 5 opções de design para diferentes situações. Primeiro, vou dizer-lhe como escrevê-lo. Ao escrever um artigo, o texto que será destacado deve ser colocado em tags especiais, vou mostrá-lo com um exemplo [ nota ], veja a captura de tela.
Claramente, mostro todas as tags e suas transcrições.
Uso para a saúde. Eu não uso este plugin, o blockquote responde tudo para mim, e é um plugin agradável e leve.
Dois elementos são usados para criar aspas em HTML: elemento de bloco <Ыockquote>
e elemento embutido . Marcação <Ыockquote>
usado para exibir aspas longas que ocupam um parágrafo inteiro e exibi-lo recuado das bordas esquerda e direita. Essa tag permite que você coloque o texto de forma compacta no centro da página. Pode conter outros elementos de formatação de texto.
Elemento usado para citações curtas que fazem parte do parágrafo atual. Geralmente, os navegadores envolvem o conteúdo de um elemento entre aspas. Normalmente, uma cotação não inclui quebras de linha e a cotação é considerada um elemento de nível de texto.
Ambos os elementos podem ter um atributo CITAR, cujo valor é o URL do fragmento citado.
Exemplo: citações longas e curtas
Tente você mesmo "
pode ser facilmente determinado usando uma linha de prumo vertical.
Como disse A. A. Milne, algumas pessoas falam com animais.
Zenith é o ponto mais alto no céu para um observador. na direção vertical, que, como se sabe, pode ser facilmente determinado usando uma linha de prumo vertical.
Como disse A. A. Milne, algumas pessoas falam com animais.
Marcação
Uma abreviatura é uma abreviatura de palavras adotadas por escrito ou uma palavra composta por várias partes de outras palavras (universidade, instituto de pesquisa, comitê executivo, etc.). Ao usar qualquer sigla ou abreviatura no texto, use a tag . Usando o atributo "title", você pode definir uma dica de ferramenta com a decodificação da abreviação. Ao mesmo tempo, os robôs de pesquisa indexam exatamente a versão completa da transcrição, definida no atributo "título". Para distinguir as abreviaturas do texto normal, elas são sublinhadas com uma linha pontilhada.
Exemplo: abreviatura
Tente você mesmo "
A NASA está fazendo alguns experimentos espaciais incríveis.
Ex. Stephen Hawking é físico teórico e cosmólogo.
NАSА!} hospeda alguns incríveis experimentos espaciais.
Ex. Stephen Hawking é físico teórico e cosmólogo.
Marcação
Marcação usado para indicar informações de contato, endereços e números de telefone. Pode conter um endereço postal, bem como um endereço de e-mail ou número de telefone. A maioria dos navegadores exibe o conteúdo do elemento fonte itálica.
Exemplo: Endereço
Tente você mesmo "
Tutorial HTML Belyi Maksim Maksimovich Instituto de Tecnologia do Noroeste Universidade Estadual de Tecnologia e Design de Teplogorsk [e-mail protegido]
Tag e
Marcação usado ao se referir a alguma fonte primária, como um livro, site ou trabalho acadêmico, para indicar a fonte referenciada. Frequentemente usado em bibliografia, ao atribuir direitos autorais ou mencionar o nome do proprietário de um recurso. Os navegadores exibem o conteúdo do elemento fonte itálica.
Marcação usado para indicar a definição de algum termo novo. A explicação de um novo termo (um conceito científico ou um nome de perfil estreito) no texto é chamada de “definição”. Elemento pode ser usado se um novo termo ocorrer no texto pela primeira vez e sua definição for dada imediatamente. O navegador exibe esse texto em itálico.
Exemplo: fontes e definições
Tente você mesmo "
Assistindo o Dragão Vermelho de Stephen Hopkins.
A quantidade de movimento do corpo é uma grandeza vetorial, a direção de seu vetor é a mesma com direção de velocidade
Mais de dez mil ingressos foram vendidos só no primeiro mês assistir um filme Dragão Vermelho Stephen Hopkins.
impulso do corpoé uma quantidade vetorial, a direção de seu vetor é a mesma com direção de velocidade
Marcação
Marcação controla a direção do texto exibido. Possui um atributo dir obrigatório que leva os valores ltr (da esquerda para a direita) e rtl (da direita para a esquerda).
Exemplo: direção do texto
Tente você mesmo "
Se o seu navegador suporta algoritmo bidirecional (bdo), a próxima linha será escrita da direita para a esquerda (rtl)
Este texto é escrito da direita para a esquerda.
Tarefas
Tarefa final
Nesta lição, você se familiarizou com alguns elementos de formatação mais lógicos que determinam não a aparência do texto, mas seu tipo e dependendo de qual navegador aplica um ou outro tipo de formatação externa. Todos os elementos discutidos acima são contêineres e requerem uma tag de fechamento. Alguns desses elementos podem não alterar a aparência do texto, então o foco aqui era como eles definem o significado do texto e não como eles o formatam.
É hora de revisar o que você aprendeu e concluir quatro tarefas simples:
Citação curta
Decida por si mesmo "
Usando o booleano HTML, adicione aspas ao redor da palavra: "Teoria".
Citação curta
A teoria prevê novos fenômenos e novas leis.
Citação curta
Teoria prevê novos fenômenos e novas leis.
longa citação
Decida por si mesmo "
Coloque o texto a seguir dentro de um elemento que o tornará uma citação recuada à esquerda. Especifique a URL do recurso de onde esta citação vem: "http://www.world.org".
longa citação
Uma característica da velocidade e direção do movimento é uma quantidade física - velocidade.
A definição do elemento foi alterada
e . O artigo explica o que isso significa para os desenvolvedores.
Mudanças de definição
Elemento
representa conteúdo que é uma citação de outra fonte, possivelmente, incluindo uma menção a esta fonte, que deveria estar colocados dentro de elementos