Una Introducción Básica a la Edición de Divs
Puntuación: +12+x

Hola, soy Uncle NicoliniUncle Nicolini. Podrías recordarme de esta monstruosidad.

giphy.gif

Como ya sabrán, sé usar css y me gustaría compartir mi maldición conocimiento con ustedes.

Vamos a empezar con algo simple, como divs. ¿Sabías que podrías hacer que hicieran todo tipo de cosas locas?

despacito No.Deux

Pero eso es algo bastante avanzado. Bajemos el tono y vamos a intentar una aplicación práctica a este conocimiento para poder utilizarlo para enriquecer nuestros artículos. Para empezar, echemos un vistazo a un divstyle básico.

Esto…

[[div style="border:solid 1px #999999; background:#f2f2c2; padding:5px; margin-bottom: 10px;"]]
[[=]]
blah

blah

-- blah
[[/=]]
[[/div]]

… produce lo siguiente:

blah

blah

— blah

¿Qué significan todas estas cosas? Vamos a ver.

border:solid 1px #999999;

Si está familiarizado con el idioma inglés, puede haber adivinado que esto es responsable de la línea que rodea el estilo div. La parte que dice 'solid'indica cómo será la envoltura del div, que en este caso es una línea recta. La parte '1px' indica el grosor. Puedes hacer líneas div muy gruesas (cuanto más gruesas las hagas, más tendrás que corregir el relleno) o muy delgadas hasta el punto de ser invisible. La sección '# 999999' dicta de qué color será la envoltura. Los colores estarán determinados por su valor hexadecimal y se importarán de sus cadenas hexadecimales. Puedes encontrar más información sobre esto aquí.1

Los punto y comas, o ';' son absolutamente importante y deben permanecer al final de cada sección como an visto arriba. Piense en ello como una coma en una oración larga y continua.

Ahora, ¿qué pasa si empezamos a jugar un poco con el div? Digamos que queríamos un bonito div style tablero con un contorno amarillo.

blah

blah

— blah

Hmm… Puede que no se vea bonito, pero apenas estamos empezando. Vamos ahora a el fondo. Si está interesado en otras formas de jugar con esta sección, consulte el siguiente documento plegable.


background:#f2f2c2;

Al igual que arriba, este es bastante simple. Como habrás adivinado, cambiar el valor hexadecimal de color aquí cambia el color del fondo. Queremos un bonito tono púrpura, porque estamos tratando de hacer un div temático de Dr. Wondertainment.

blah

blah

— blah

¡Hurra, lo hicimos! Pero el color del texto no es muy legible. Llegaremos a eso en un minuto, primero quiero cubrir la última sección de este div.


padding:5px; margin-bottom: 10px;

Estas dos secciones son bastante similares. 'Margen'2 los valores controlan el contenido externo de la div, mientras que los valores de relleno controlan la ubicación de lo que está dentro de la div. Siéntase libre de jugar con ellos en su borrador, pero aquí hay un ejemplo de relleno de 50px y margen de 25px. He eliminado la alineación central, para que sea más notable en este ejemplo.

blah

blah

— blah


OK, ahora tenemos a nuestro div un poco más parecido a como lo queremos, pero como mencionamos anteriormente, el color del texto no es muy legible. ¿Qué podemos hacer para arreglarlo? Usemos un color diferente.

Hay dos formas fáciles de cambiar el color del texto en wikidot.

##red|testeo##

o…

[[span style="color:red"]]testeo[[/span]]

Prefiero usar la primera opción porque me permite utilizar valores hexadecimales para los colores, lo que me permite ser más específico. Por ejemplo:

¿Ve cómo esto es diferente a este color?

Para hacer esto, simplemente encuentre el hex que desea y colóquelo en lugar del nombre del color. Fácil, ¿no?

Ahora pongámoslo en práctica.

blah

blah

— blah


¡Increíble! Pero aun no es perfecto. ¿Qué haría que esto vaya de bueno a excelente, te preguntarás? Una fuente especial. Google Fonts es un excelente recurso para importar fuentes de forma gratuita, ¡e incluso te permite previsualizarlas, también!

Puede importarlo seleccionando la fuente deseada, luego haga clic donde dice'@import' en la pestaña que se abre, luego copie y pegue la línea que se ve así:

@import url('https://fonts.googleapis.com/css?family=FONTNAMEHERE');

Una vez que tenga eso listo, póngalo en su borrador dentro de un módulo css como este:

[[module css]]
@import url('https://fonts.googleapis.com/css?family=FONTNAMEHERE');
h4 {
    padding: 0 0 0.25em;
    margin: 0 0 0.6em;
    font-family: 'FONT NAME';
}
[[/module]]
[[/module]]

Como ha aprendido anteriormente, el relleno y los márgenes se pueden ajustar en consecuencia para hacerlos más grandes o más pequeños. La seccion que lee 'h4' la configura para que la fuente aparezca automáticamente cuando se inicie un nuevo salto de línea con 4 '+'. También puede agregar comandos para que esté en todas las reglas cursivas y otras, como puede ver aquí.

[[module css]]
@import url('https://fonts.googleapis.com/css?family=Berkshire+Swash');
h4 {
    padding: 0 0 0.25em;
    margin: 0 0 0.6em;
    font-family: 'Berkshire Swash', cursive;
}
[[/module]]

Vamos a ver cómo se ve todo esto juntos.

blah

blah

— Dr. Wondertainment

¡Maravilloso!


Uso Avanzado de Shitposting divs

Hay cosas más avanzadas que puedes hacer, como tener el fondo como una imagen, o incluso usar divs para crear tus propios memes en CSS. ¿No me crees? Pues mira esto.

Tiene Crotolamo

Honestamente, esto no tiene mucho uso, pero es bastante simple y si uno sabe cómo meterse con divs, entenderá cómo usarlo con bastante facilidad.

Si tiene alguna pregunta, no tenga miedo de preguntar en la discusión. Probablemente escribiré otro ensayo técnico para ustedes más tarde, ¡pero eso es todo por ahora!

Y eso es todo lo que escribí.

Si no se indica lo contrario, el contenido de esta página se ofrece bajo Creative Commons Attribution-ShareAlike 3.0 License