Primer capítulo del tutorial de CSS (Cascading Style Sheets) u hojas de estilo de la Fundación Mozilla. Traducido por la comunidad al castellano: «CSS (Cascading Style Sheets – en español Hojas de Estilo en Cascadas) es usado para darle estilo y diseño a las páginas Web — por ejemplo, para cambiar la fuente de letra, color, tamaño y el espaciado de tu contenido; dividir en múltiples columnas, o agregar animaciones y otras propiedades decorativas. Este modulo provee un inicio suave para tu ruta de aprendizaje hacia el dominio de CSS con su funcionamiento básico, como luce su sintaxis, y cómo puedes comenzar a utilizarlo y añadir estilo a HTML.»…
Crear columnas como divs en WordPress sin Gutenberg
Hacia el final del post tienes otra forma de hacerlo… (ver)
Valencia, 01/03/2022, G.B.
Tras leer el artículo Como aplicar columnas en WordPress incorporadas en style.css de la web de antonioperez.pro (estaba buscando cómo hacerlo de otra forma), he hecho algunos pequeños cambios (y seguiré haciendo más) para ajustar las columnas realizadas con divs en WordPress sin utilizar Gutenberg. Aquí van los archivos (CSS u hoja de estilo CSS) y el HTML que he utilizado para crear tres columnas.
Mis pequeños cambios están en azul en el código CSS, en mi caso insertado en la personalización del CSS que permite WordPress, al menos en plantillas más desarrolladas. Se llama CC adicional y lo encontrarás en Apariencia -> Personalización –> CSS adicional de tu tema o plantilla, si lo permite, claro. En caso contrario, tendrías que modificar la hoja de estilos de tu tema, a sabiendas que si actualizas la plantilla, tema o theme, los cambios se te irán ‘al garete‘. Bueno, aquí va: Continuar leyendo «Crear columnas como divs en WordPress sin Gutenberg»
Josh W Comeu
Blog (en inglés) de Josh W Comeu con interesante tutoriales sobre JavaScript, Twitter, React, CSS, Gastby… » My goal with this blog is to create helpful content for front-end web devs, and my newsletter is no different! It includes to upcoming posts and access to special bonus goodies. No spam, unsubscribe at any time.»
Selectores básicos CSS (librosweb.es)
Artículo de la web librosweb.es que nos explica los selectores básicos en CSS (Cascading Style Sheets) u hojas de estilo. Para ver el ‘libroweb’ completo sobre CSS: Introducción a CSS.
http://librosweb.es/libro/css/capitulo_2/selectores_basicos.html
Tutoriales sobre los DIVS o capas
El otro día un amigo me preguntó cómo cambiar el estilo de un formulario de contacto para que aparecieran varios elementos en columnas. Era un formulario del plugin de contacto de WordPress Contact Form 7, el cual ya tiene su propia hoja de estilo.
El caso es que, para no tener que modificar el estilo del plugin, y no perder así los cambios realizados en el archivo style.css del plugin (Editor de plugins – Contact Form 7 – style.css, si no recuerdo mal), puedes ‘maquetar’ el formulario que hayas creado, utilizando estilos dentro de cada uno de los elementos, sin necesidad de crear una clase (es mucho mejor crear la hoja de estilo y asociar la clase al elemento, desde luego, pero lo siguiente sirve), de esta forma:
<div style=»float: left; padding-right:3px; padding-left: 3px; width:45%»;>
<p>Un párrafo en un div flotante a la izquierda (es mucho mejor crear la hoja de estilo y asociar la clase al elemento, desde luego, pero lo anterior sirve)</p></div>
<div style=»float:right; padding-right:3px; padding-left:3px; width:45%»;><p>Y otro párrafo en un div flotante a la derecha (es mucho mejor crear la hoja de estilo y asociar la clase al elemento, desde luego, pero lo anterior sirve)</p></div>
<div style=»clear:both;»></div>
Un párrafo en un div flotante a la izquierda (es mucho mejor crear la hoja de estilo y asociar la clase al elemento, desde luego, pero lo anterior sirve)
Y otro párrafo en un div flotante a la derecha (es mucho mejor crear la hoja de estilo y asociar la clase al elemento, desde luego, pero lo anterior sirve)
La próxima vez lo haré de forma mucho más limpia y elegante…
Dejo de paso una captura de pantalla sobre el editor de plugins de WordPress (no recomiendo cambiar nada ahí, a no ser que sepas muy bien lo que estás haciendo y luego bloquees la actualización del plugin):
Me las ví y deseé para acordarme del tema de la alineación (float). Más o menos me acordé, pero para que no me vuelva a pasar, además de refrescar la memoria estudiando de nuevo un poquito sobre CSS o Cascading Style Sheets, dejo algunos tutoriales interesantes sobre los divs (o capas). Aquí van:
TUTORIALES DIV
El primero (en inglés):
FLOATS
Nº 7. of HTML & CSS Is Hard
An old-timey web dev tutorial (and a friendly intro to CSS layouts)
The div tag – HTML tutorial
Creando La Estructura HTML De Tu Página (Uso De DIVs)
http://www.psdahtmlpasoapaso.com/blog/creando-la-estructura-html-de-tu-pagina-uso-de-divs/
Estructura con CSS
Hojas de estilo en documentos
La etiqueta div
http://www.ite.educacion.es/formacion/materiales/182/cd/seis/la_etiqueta_div.html
Diferencia entre div y span