Guia de Codigos

¿Preguntas? Pregunte en el Foro de la comunidad.

Un usuario de Nexo Knights Wiki, para disfrutar de su estancia el máximo posible, debe conocer cómo usar la página, las etiquetas en el chat, y algo de HTML y CSS. Esta página tiene como fin dar una introducción a la comunidad de varios códigos HTML y CSS que podrían ser útiles.
¡Bienvenido al universo!

## Códigos de CSS básico

### Colores de texto y fondo

Para cambiar el color de un texto, se utiliza la propiedad CSS "**color**". Se pueden utilizar nombres de colores en inglés, o códigos de color HEX. (Lista de colores).

Para cambiar el color de fondo de un texto, se utiliza la propiedad CSS "**background**". Se pueden utilizar los mismos colores que en la propiedad **color**.

#### Bordes

El borde se utiliza con la propiedad "*border*", a esa propiedad debes agregarle los siguientes datos:

* Grosor: (Número)px
* Tipo: solid, groove, dotted, dashed, double, ridge, inset, outset y hidden.
* Color: (Los colores tienen que ser en inglés, por tipo color-hex o RGB / RGBA) #FF0000 / red / rgb(255,0,0) / rgba(255,0,0,1)

**Nota:** Como puedes ver, después de "border" las propiedades van en orden: tamaño de tu borde (en px), tipo de borde y color. No uses signos de puntación entre estos 3.
#### Radio de los bordes

El radio de los bordes modifica el aspecto de las esquinas de los bordes utilizando porcentajes (100% <) o pixeles (px).

**Nota:** Para redondear cada esquina con ángulos diferentes, se debe usar 4 variables como se ve en el código.
#### Fuente

Mediante la propiedad CSS "**font-family**" se puede cambiar la tipografía de un texto.

Las fuentes listadas en esta página serán visibles por todos los usuarios. El resto de fuentes sólo serán visibles si el sitio posee instaladas dichas fuentes. Puedes ver la lista de fuentes instaladas aquí.

#### Padding

El atributo de este código es "padding", es solo para ajustar el margen de los bordes, este código es para los códigos mixtos, es decir combinados. Tiene que ir con:

* Número de ajuste: (Número)px

#### Transform

El atributo de este código es "transform", es solo para cambiar la forma geometrica ya sea rotándose, trasladandose, modificando su escala, etc. Las propiedades que usa este atributo son:

* translate(x,y)
* translate3d(x,y,z)
* scale(x,y)
* scale3d(x,y,z)
* rotate(angulo) Ejemplo: `transform:rotate(45deg)`
* rotate3d(x,y,z,angulo)
* skew(x-angulo,y-angulo)

 <div style="transform:translate(10px,10px)"> Mensaje Aquí </div>

### Diferencia entre <div> y <span>

Ambos cumplen la misma funcionalidad pero los dos tienen algo diferente, usualmente el Div se utiliza para marcar todo en ancho de la página y el Span solo para una parte, Ejemplo:

**Uso con <div>:**

Perla es una de las protagonistas de Steven Universe y miembro de las Gemas de Cristal.**Uso con <span>:**
Perla es una de las protagonistas de Steven Universe y miembro de las Gemas de Cristal.
## Ayuda y comentarios

* Navega y busca otras páginas de ayuda en Ayuda:Contenido.
* Navega y busca subcategorías o artículos en la categoría de Ayuda.
* Sepa sobre funcionalidades que están en toda Wikia en Ayuda:Funcionalidades de Wikia.
* Averigua cuáles son los colores en Ayuda:Color y Ayuda:Paleta de colores.
* Sepa más sobre el CSS en Ayuda:CSS.
* Obtenga mayores conocimientos en la Universidad de Wikia.