在WordPressNa edição de artigos, há um botão comum de "citação em bloco"▼
Quando usado, adiciona umMarcador para invocar alguma declaração citada ou destaque.
O que significa blockquote?
O seguinte éChen WeiliangEstilo de citação para blogs:
A tag blockquote XHTML é um elemento muito útil (se algum subutilizado).Semanticamente, o blockquote deve ser usado sempre que você estiver citando um texto mais longo de outra fonte (outro orador, outro site, etc.).Esta é uma maneira de delimitar o texto e exibi-lo com outras fontes.
Em termos de estilo, você pode fazer tudo isso com classes especiais em tags de parágrafo... mas isso é semanticamente inútil agora, não é? Blockquotes têm alguns estilos por padrão.
A maioria dos navegadores recua o texto em tags blockquote, o que ajuda os usuários a identificar o texto de alguma forma.Mas quem disse que precisamos parar por aí?Veja como estilizar suas citações em bloco com CSS.
Teste test-css.html e adicione a seção css ao corpo do html:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en-us"> <head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Test CSS blockquote</title> </head> <blockquote> <p>The blockquote XHTML tag is a fairly useful (if somewhat underused) element. Semantically speaking, a blockquote should be used any time you’re quoting a longer piece of text from another source – another speaker, another website, whatever. It’s a way of setting the text apart, and showing that it came from some other source. Stylistically, you could accomplish all this with a special class on your paragraph tags… but that wouldn’t be as semantically useful, now, would it?<br> Blockquotes do have some styling by default. Most browsers will indent the text in a blockquote tag, which helps the user recognize that the text is different somehow. But who's to say that we need to stop there? Here are six different ways you could style your blockquotes using CSS.</p> </blockquote> </body> </html>
Como usar o blockquote?
Descobriu-se que alguns temas do WordPress não adicionam estilos de referência no arquivo style.css.
Copie e cole o seguinte estilo de canto arredondado de plano de fundo azul no arquivo style.css do tema▼
blockquote, q {
font: bold 21px/1.5 Consolas,"Courier New","KaiTi","KaiTi_GB2312","FangSong_GB2312",SimHei,arial,Monaco,monospace;
color: #000;
margin: 1em;
margin-left: 2em;
margin-right: 2em;
padding: 3px;
max-width: 95%;
quotes: "\201C""\201D""\2018""\2019";
background: #C3F3F7;
border-radius: 20px;
}Os estilos de referência determinam o corpo do texto (tamanho, cor), cor de fundo, espaço em branco, bordas, etc...
estilo de borda
Este estilo é relativamente simples, ou seja, defina a borda esquerda e defina a espessura.A cor controla a cor da fonte e a cor do plano de fundo controla a cor do plano de fundo (ou grupo de plano de fundo direto).
A margem controla a distância até o elemento da janela, o lado esquerdo da borda controla o estilo da borda esquerda e o preenchimento (especialmente o lado esquerdo do preenchimento esquerdo) controla a distância do texto até a borda (esquerda).
Este estilo é tão simples quanto um simples blog.
Copie e cole o seguinte estilo de plano de fundo amarelo no arquivo style.css do tema▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- O acima são 2 estilos de citação em bloco.
- A adição de vários estilos idênticos será substituída.
- Então, por favor, escolha um deles e adicione-o ao arquivo style.css do tema.
Hope Chen Weiliang Blog ( https://www.chenweiliang.com/ ) compartilhou "Como usar blockquote? HTML no efeito de demonstração da tag blockquote, para ajudá-lo.
Bem-vindo a compartilhar o link deste artigo:https://www.chenweiliang.com/cwl-2123.html
Bem-vindo ao canal Telegram do blog de Chen Weiliang para receber as últimas atualizações!
📚 Este guia contém um valor enorme, 🌟Esta é uma oportunidade rara, não perca! ⏰⌛💨
Compartilhe e curta se gostar!
Seus compartilhamentos e curtidas são nossa motivação contínua!