Hola, soy Uncle Nicolini.

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?

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:

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

border:solid 1px #999999;

Los punto y comas, o ';' son absolutamente importante y deben permanecer al final de cada sección como han 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.

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.

border: 1rem solid;

border: thick double #999999;

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.

¡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'² 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.

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.

¡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.

¡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.

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í.