Blogger: estilo CSS para el código de tu blog
Un amigo me preguntó cómo hacía las regiones del código en la entrada de Blogger. Lo hice utilizando una etiqueta de estilo para CSS en mi plantilla de Blogger. Esto es lo que agregué:
p.code {
font-family: Courier New;
font-size: 8pt;
border-style: inset;
border-width: 3px;
padding: 5px;
background-color: #FFFFFF;
line-height: 100%;
margin: 10px;
}
p.code
: Esta es una regla CSS dirigida a HTML.<p>
elementos con el nombre de clase "código". Significa que cualquier párrafo con esta clase tendrá un estilo de acuerdo con las siguientes propiedades.font-family: Courier New;
: Esta propiedad establece la familia de fuentes en "Courier New". Especifica la fuente que se utilizará para el texto dentro de los elementos de destino.font-size: 8pt;
: Esta propiedad establece el tamaño de fuente en 8 puntos. El texto dentro de los elementos de destino se mostrará con este tamaño de fuente.border-style: inset;
: Esta propiedad establece el estilo del borde en "insertado". Crea una apariencia hundida o presionada para el borde alrededor de los elementos objetivo.border-width: 3px;
: esta propiedad establece el ancho del borde en 3 píxeles. El borde alrededor de los elementos tendrá un grosor de 3 píxeles.padding: 5px;
: esta propiedad agrega 5 píxeles de relleno alrededor del contenido dentro de los elementos de destino. Proporciona espacio entre el texto y el borde.background-color: #FFFFFF;
: Esta propiedad establece el color de fondo en blanco (#FFFFFF). El contenido de los elementos de destino tendrá un fondo blanco.line-height: 100%;
: Esta propiedad establece la altura de la línea al 100% del tamaño de fuente. Garantiza que las líneas de texto estén espaciadas según el tamaño de fuente.margin: 10px;
: Esta propiedad agrega un margen de 10 píxeles alrededor de todo el elemento. Proporciona espacio entre este elemento y otros elementos de la página.
El código CSS proporcionado define un estilo para los párrafos HTML con la clase "código". Establece la fuente, el tamaño de fuente, el estilo del borde, el ancho del borde, el relleno, el color de fondo, la altura de la línea y el margen de estos párrafos. Este estilo se puede aplicar a fragmentos de código o texto preformateado en una publicación de Blogger para darles una apariencia específica.
Así es como se verá:
p.código {
familia de fuentes: Courier New;
tamaño de fuente: 8 puntos;
estilo de borde: insertado;
ancho del borde: 3px;
padding: 5px;
color de fondo: #FFFFFF;
altura de línea: 100%;
margen: 10px;
}
¡Feliz codificación!