Directorio de artículos
在WordPressEn la edición de artículos, hay un botón común de "cita en bloque"▼
Cuando se usa, agrega unMarcador para invocar alguna declaración citada o resaltar.
¿Qué significa cita en bloque?
El siguiente eschen weiliangEstilo de citación para blogs:
La etiqueta blockquote XHTML es un elemento muy útil (aunque poco utilizado).Semánticamente, la cita en bloque debe usarse siempre que se cite un texto más largo de otra fuente (otro orador, otro sitio web, etc.).Esta es una forma de delimitar texto y mostrarlo con otras fuentes.
En cuanto al estilo, puedes hacer todo esto con clases especiales en las etiquetas de párrafo... pero eso es semánticamente inútil, ¿verdad? Blockquotes tiene algunos estilos por defecto.
La mayoría de los navegadores sangran el texto en las etiquetas de comillas en bloque, lo que ayuda a los usuarios a identificar el texto de alguna manera.Pero, ¿quién puede decir que debemos detenernos allí?A continuación, le mostramos cómo diseñar sus citas en bloque con CSS.
Pruebe test-css.html y agregue la sección css al cuerpo 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>
¿Cómo usar la cotización en bloque?
Se encuentra que algunos temas de WordPress no agregan estilos de referencia en el archivo style.css.
Copie y pegue el siguiente estilo de esquina redondeada de fondo azul en el archivo style.css del 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;
}Los estilos de referencia determinan el texto del cuerpo (tamaño, color), color de fondo, espacios en blanco, bordes, etc.
estilo de borde
Este estilo es relativamente simple, es decir, establece el borde izquierdo y establece el grosor.El color controla el color de la fuente y el color de fondo controla el color de fondo (o el grupo de fondo directo).
El margen controla la distancia al elemento de la ventana, el lado izquierdo del borde controla el estilo del borde izquierdo y el relleno (especialmente el lado izquierdo del relleno izquierdo) controla la distancia desde el texto hasta el borde (izquierdo).
Este estilo es tan simple como un simple blog.
Copie y pegue el siguiente estilo de fondo amarillo en el archivo style.css del tema▼
blockquote { margin: 1em 3em; padding: .5em 1em; border-left: 5px solid #fce27c; background-color: #f6ebc1; } blockquote p { margin: 0; }
- Los anteriores son 2 estilos de citas en bloque.
- Se sobrescribirá la adición de varios estilos idénticos.
- Por lo tanto, elija uno de ellos y agréguelo al archivo style.css del tema.
Esperanza Chen Weiliang Blog ( https://www.chenweiliang.com/ ) compartió "¿Cómo usar blockquote? HTML en el efecto de demostración de la etiqueta blockquote, para ayudarlo.
Bienvenido a compartir el enlace de este artículo:https://www.chenweiliang.com/cwl-2123.html
¡Bienvenido al canal de Telegram del blog de Chen Weiliang para obtener las últimas actualizaciones!
📚 Esta guía contiene un gran valor. 🌟Esta es una oportunidad única, ¡no la pierdas! ⏰⌛💨
¡Comparte y dale me gusta si te gusta!
¡Su compartir y Me gusta son nuestra motivación continua!