Ayuda:CSS

[editar] Selectores

Listado de selectores
Patrón	Aplicado a:	Ejemplo
`*`	Cualquier elemento	N/D
`e`	Elemento `<e>`	`<e>...</e>`
`e f`	Cualquier `<f>` que esté incluido en `<e>`	`<e>...<d>...<f/>...</d>...</e>`
`e > f`	Cualquier `<f>` que es hijo de `<e>`	`<e>...<f>...</f>...</e>`
`e:first-child`	`<e>` cuando es el primer hijo de su elemento padre	`<f><e></e>...</f>`
`e + f`	`<f>` si está precedido inmediatamente por un `<e>`	`...</e> <f>...<f>`
`e[miAtr]`	`<e>` si posee el atributo `"miAtr"`	`<e miAtr="xxx".../>`
`e[miAtr="v"]`	`<e>` si posee el atributo `"miAtr"` y este tiene el valor `"v"`	`<e miAtr="v".../>`
`e[miAtr~="v"]`	`<e>` si su atributo `"miAtr"` es una lista de valores separados por espacios y uno es `"v"`	`<e miAtr="x y z v".../>`
`e[lang\|="es"]`	`<e>` si su atributo `"lang"` es una lista de valores separados por guiones y comienza con `"es"`	`<e lang="es-ES" .../>`
`e.miClase`	`<e>` cuya clase es `"miClase"`	`<e class="miClase".../>`
`e#miId`	`<e>` cuyo identificador es `miId`	`<e id="miId".../>`
`a:link`	Enlaces no visitados	N/D
`a:visited`	Enlaces visitados	N/D
`e:active`	`<e>` cuando es activado (tiempo entre que se pulsa un botón sobre él y se suelta)	N/D
`e:hover`	`<e>` cuando se posiciona el cursor sobre él pero no se activa	N/D
`e:focus`	`<e>` cuando tiene el foco posicionado en él	N/D
`e:lang(c)`	`<e>` si está marcado con el lenguaje `c`	N/D
`e:fist-line`	Primera línea de `<e>`	N/D
`e:fist-letter`	Primera letra de `<e>`	N/D
`e:before`	Aplica contenido antes de `<e>`	N/D
`e:after`	Aplica contenido después del elemento `<e>`	N/D

[editar] Notación

Notación
Patrón	Descripción
`a b`	`a` seguido de `b`
`( a b )`	`a` y `b` agrupados
`[ a \| b ]`	`a` o `b`, exclusivo
`[ a \|\| b ]`	`a` o `b` o ambos
`a?`	`a` es opcional
`a*`	0 o varios `a`
`a+`	1 o varios `a`
`a {n, m}`	`a` como mínimo n veces y como máximo m

[editar] Tipos de Medios

Tipos de medios o dispositivos soportados
Nombre	Medio
`all`	Todos los dispositivos
`braille`	Dispositivos táctiles braille
`embossed`	Impresoras braille
`handheld`	Dispositivos de mano (pantallas pequeñas, ancho de banda reducido, etc.)
`print`	Para documentos paginados y mostrados en vista de impresión
`projection`	Dispositivos de proyección de presentaciones
`screen`	Pantallas a color de equipos informáticos
`speech`	Para sintetizadores de voz. Similar a "aural"
`tty`	Dispositivos de visualización con capacidades limitadas
`tv`	Televisores

[editar] Sintaxis

@import "hoja.css" tipo-medio;

/* Comentarios */

@media tipo-medio {
  selector {
    propiedad: valor-es;
  }
}

[editar] Unidades

Longitudes relativas
Unidad	Descripción
`0`	No necesita unidad
`%`	Porcentaje relativo a la estructura que lo contiene
`px`	Píxeles (relativo al dispositivo)
`em`	Tamaño de la fuente actual
`ex`	Alto del caracter 'x'

Longitudes absolutas
Unidad	Descripción
`in`	Pulgadas (1' = 2,54cm)
`cm`	Centímetros
`mm`	Milímetros
`pt`	Puntos (1pt = 1/72pulgadas)
`pc`	Picas (1pica = 12 puntos)

Representación de los colores
Unidad	Descripción
`#RRGGBB`	Color RGB (hexadecimal)
`#RGB`	Notación simplificada (#RGB = #RRGGBB)
`rgb(R,G,B)`	Color RGB (3 valores decimales de 0 a 255)
`rgb(R%,G%,B%)`	Color RGB (3 valores porcentuales de 0% a 100%)

[editar] Modelo de cajas

Archivo:Modelo de cajas CSS.png

[editar] Márgenes

Propiedades de márgenes
Propiedad	Descripción	Valores
`margin-top` `margin-right` `margin-bottom` `margin-left`	Tamaño del margen superior, derecho, inferior e izquierdo	[ <longitud> \| <porcentaje> \| `auto` ]
`margin`	Ancho para varios márgenes individuales	[ <longitud> \| <porcentaje> \| `auto` ]{1,4}

[editar] Relleno

Propiedades de relleno
Propiedad	Descripción	Valores
`padding-top` `padding-right` `padding-bottom` `padding-left`	Ancho del relleno superior, derecho, inferior e izquierdo	[ <longitud> \| <porcentaje> \| `auto` ]
`padding`	Tamaños para varios rellenos individuales	[ <longitud> \| <porcentaje> \| `auto` ] {1,4}

[editar] Bordes

Propiedades de los bordes
Propiedad	Descripción	Valores
`border-top-width` `border-right-width` `border-bottom-width` `border-left-width`	Anchura del borde superior, derecho, inferior o izquierdo	[ `thin` \| `medium` \| `thick` \| <longitud> ]
`border-width`	Anchos de varios bordes individuales	[ `thin` \| `medium` \| `thick` \| <longitud> ] {1,4}
`border-top-color` `border-right-color` `border-bottom-color` `border-left-color`	Color del borde superior, derecho, inferior o izquierdo	[ <color> \| `transparent` ]
`border-top-style` `border-right-style` `border-bottom-style` `border-left-style`	Estilo del borde superior, derecho, inferior o izquierdo	[ `none` \| `hidden` \| `dotted` \| `dashed` \| `solid` \| `double` \| `groove` \| `ridge` \| `inset` \| `outset` ]
`border-style`	Estilos de varios bordes individuales	[ `none` \| `hidden` \| `dotted` \| `dashed` \| `solid` \| `double` \| `groove` \| `ridge` \| `inset` \| `outset` ] {1,4}
`border-top` `border-right` `border-bottom` `border-left`	Ancho, estilo y el color para el borde superior, derecho, inferior o izquierdo	[ <border-width> \|\| <border-style> \|\| <border-color> ]
`border`	Ancho, el estilo y el color para los 4 bordes	[ <border-width> \|\| <border-style> \|\| <border-color> ]

[editar] Modelo de formato visual

Propiedades de formato visual
Propiedad	Descripción	Valores
`display`	Comportamiento del contenedor	[ `inline` \| `block` \| `list-item` \| `run-in` \| `inline-block` \| `table` \| `inline-table` \| `table-row-group` \| `table-header-group` \| `table-footer-group` \| `table-row` \| `table-column-group` \| `table-column` \| `table-cell` \| `table-caption` \| `none` ]
`position`	Esquema de posicionamiento	[ `static` \| `relative` \| `absolute` \| `fixed` ]
`top` `right` `bottom` `left`	Desplazamiento de la caja (respecto al límite superior, derecho, inferior o izquierdo del contenedor)	[ <longitud> \| <porcentaje> \| `auto` ]
`float`	Posicionamiento flotante	[ `left` \| `right` \| `none` ]
`clear`	Control de cajas adyacentes a los `float`	[ `none` \| `left` \| `right` \| `both` ]
`z-index`	Solapamiento de niveles de capas	[ `auto` \| <entero_con_signo> ]
`direction`	Sentido direccional de la escritura	[ `ltr` \| `rtl` ]
`unicode-bidi`	Sentido direccional de la escritura	[ `normal` \| `embed` \| `bidi-override` ]

[editar] Detalles del modelo de formato visual

Propiedades de los detalles formato visual
Propiedad	Descripción	Valores
`width`	Ancho	[ <longitud> \| <porcentaje> \| `auto` ]
`min-width`	Ancho mínimo	[ <longitud> \| <porcentaje> ]
`max-width`	Ancho máximo	[ <longitud> \| <> \| `none` ]
`height`	Alto	[ <longitud> \| <porcentaje> \| `auto` ]
`min-height`	Alto mínimo	[ <longitud> \| <porcentaje> ]
`max-height`	Alto máximo	[ <longitud</a>> \| <porcentaje> \| `none` ]
`line-height`	Altura entre las bases del texto	[ `normal` \| <número> \| <longitud> \| <porcentaje> ]
`vertical-align`	Alineación vertical del texto	[ `baseline` \| `sub` \| `super` \| `top` \| `text-top` \| `middle` \| `bottom` \| `text-bottom` \| <porcentaje> \| <longitud> ]

[editar] Efectos visuales

Propiedades para efectos visuales
Propiedad	Descripción	Valores
`overflow`	Comportamiento del contenido si se desborda en la caja	[ `visible` \| `hidden` \| `scroll` \| `auto` ]
`clip`	Especifica la región visible del elemento	[ `rect (`<longitud> <longitud> <longitud> <longitud>`)` \| `auto` ]
`visibility`	Visibilidad de las cajas	[ `visible` \| `hidden` \| `collapse` ]

[editar] Contenido generado, numeración automática y listas

Propiedades para contenido generado, numeración automática y listas
Propiedad	Descripción	Valores
`content`	Agregador de contenido para `:after` y `:before`	[ `normal` \| `none` \| [ <texto> \| <uri> \| <contador> \| `attr(X)` \| `open-quote` \| `close-quote` \| `no-open-quote` \| `no-close-quote`]+ ]
`quotes`	Especifica las marcas para indicar las citas	[ [ <texto> <texto> ]+ \| `none` ]
`counter-reset`	Inicializa un contador	[ [ <identificador> <entero>? ]+ \| `none` ]
`counter-increment`	Incrementa un contador	[ [ <identificador> <entero>? ]+ \| `none` ]
`list-style-type`	Estilo aplicable a los marcadores visuales de las listas	[ `disc` \| `circle` \| `square` \| `decimal` \| `decimal-leading-zero` \| `lower-roman` \| `upper-roman` \| `lower-greek` \| `lower-latin` \| `upper-latin` \| `armenian` \| `georgian` \| `lower-alpha` \| `upper-alpha` \| `none` ]
`list-style-image`	Imagen aplicable a los elementos de las listas	[ `url("`http://...`")` \| `none` ]
`list-style-position`	Posición dentro de la lista de los elementos marcadores de las listas	[ `inside` \| `outside` ]
`list-style`	Permite establecer el estilo de la lista, la imagen y/o la posición	[ <list-style-type> \|\| <list-style-position> \|\| <<list-style-image> ]

[editar] Colores y Fondo

Propiedades para gestión de colores y fondo
Propiedad	Descripción	Valores
`color`	Color del primer plano	<color>
`background-color`	Color de fondo	[ <color> \| `transparent` ]
`background-image`	Imagen de fondo	[ `url(`...`)` \| `none` ]
`background-repeat`	Repetición de la imagen de fondo	[ `repeat` \| `repeat-x` \| `repeat-y` \| `no-repeat` ]
`background-attachment`	Desplazamiento de la imagen de fondo	[ `scroll` \| `fixed` ]
`background-position`	Posición de la imagen de fondo	[ [ <porcentaje> \| <longitud> \| `left` \| `center` \| `right` ] [ <porcentaje> \| <longitud> \| `top` \| `center` \| `bottom`]? ] \| [ [ `left` \| `center` \| `right` ] \|\| [ `top` \| `center` \| `bottom` ] ]
`background`	Propiedades individuales relacionadas con el fondo	[ <background-color> \|\| <background-image> \|\| <background-repeat> \|\| <background-attachment> \|\| <background-position> ]

[editar] Medios paginados

Propiedades para medios paginados
Propiedad	Descripción	Valores
`page-break-before`	Gestionar saltos de página antes del elemento	[ `auto` \| `always` \| `avoid` \| `left` \| `right` ]
`page-break-after`	Gestionar saltos de página posterior al elemento	[ `auto` \| `always` \| `avoid` \| `left` \| `right` ]
`page-break-inside`	Evita los saltos de línea en el interior del elemento	[ `avoid` \| `auto` ]
`orphans`	Mínimo número de líneas de un párrafo que deben ser dejadas como mínimo al final de una página	<entero>
`widows`	Mínimo número de líneas de un párrafo que deben ser dejadas como mínimo al principio de una página	<entero>

[editar] Fuentes

Propiedades para gestión de fuentes tipográficas
Propiedad	Descripción	Valores
`font-family`	Familias de fuentes	[ [ <nombre-familia> \| <familia-genérica> ] [, <nombre-familia> \| <familia-genérica> ]* ]
`font-style`	Estilo de la fuente	[ `normal` \| `italic` \| `oblique` ]
`font-variant`	Convierte las minúsculas a mayúsculas pero mantienen un tamaño inferior a las mayúsculas	[ `normal` \| `small-caps` ]
`font-weight`	Intensidad de la fuente	[ `normal` \| `bold` \| `bolder` \| `lighter` \| `100` \| `200` \| `300` \| `400` \| `500` \| `600` \| `700` \| `800` \| `900` ]
`font-size`	Tamaño de la fuente	[ [ `xx-small` \| `x-small` \| `small` \| `medium` \| `large` \| `x-large` \| `xx-large`] \| [`larger` \| `smaller`] \| <longitud> \| <porcentaje> ]
`font`	Atajo para establecer el resto de propiedades sobre las fuentes a la vez	[ [ [ <font-style> \|\| <font-variant> \|\| <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] \| `caption` \| `icon` \| `menu` \| `message-box` \| `small-caption` \| `status-bar` ]

[editar] Texto

Propiedades para el texto
Propiedad	Descripción	Valores
`text-indent`	Desplazamiento de la primera línea del texto	[ <longitud> \| <porcentaje> ]
`text-align`	Alineamiento del texto	[ `left` \| `right` \| `center` \| `justify` ]
`text-align`	Alineamiento del texto	[ `left` \| `right` \| `center` \| `justify` ]
`text-decoration`	Efectos de subrrallado, tachado, parpadeo	[ `none` \| [ `underline` \|\| `overline` \|\| `line-through` \|\| `blink` ] ]
`letter-spacing`	Espacio entre caracteres	[ `normal` \| <longitud> ]
`word-spacing`	Espacio entre palabras	[ `normal` \| <longitud> ]
`text-transform`	Transformaciones del texto a mayúsculas/minúsculas	[ `capitalize` \| `uppercase` \| `lowercase` \| `none` ]
`white-space`	Comportamiento de los espacios dentro de los elementos	[ `normal` \| `pre` \| `nowrap` \| `pre-wrap` \| `pre-line` ]

[editar] Tablas

Propiedades para el texto
Propiedad	Descripción	Valores
`caption-side`	Posición del título de respecto la tabla	[ `top` \| `bottom` ]
`table-layout`	Control del algoritmo usado para el formato de las celdas, filas y columnas	[ `auto` \| `fixed` ]
`border-collapse`	Selección del modelo de los bordes	[ `collapse` \| `separate` ]
`border-spacing`	Espaciado entre los bordes de celdas adyacentes	<longitud> <longitud>?
`empty-cells`	Visibilidad de los bordes de celdas sin contenido	[ `show` \| `hide` ]

[editar] Interfaz de usuario

Propiedades para el interfaz con el usuario
Propiedad	Descripción	Valores
`cursor`	Especifica el cursor	[ [`http://.../cursor.ico,`]* [ `auto` \| `crosshair` \| `default` \| `pointer` \| `move` \| `e-resize` \| `ne-resize` \| `nw-resize` \| `n-resize` \| `se-resize` \| `sw-resize` \| `s-resize` \| `w-resize` \| `text` \| `wait` \| `help` \| `progress` ] ]
`outline-width`	Ancho de la línea exterior	<border-width>
`outline-style`	Estilo de la línea exterior	<border-style>
`outline-color`	Color de la línea exterior	[ <color> \| `invert` ]
`outline`	Propiedades individuales de la línea exterior.	[ <outline-color> \|\| <outline-style> \|\| <outline-width> ]
`speak-header`	(Aural) Indica si las cabeceras de la tabla se leen antes de cada celda	[ `once` \| `always` ]

[editar] Referencias

Este texto proviene de Ayuda de Wikia. Puedes sugerir cambios aquí.

Contenido

1 ¿Qué pieles están disponibles?
2 Opciones personales
3 Personalizando y entendiendo pieles
4 Visión general de pieles
- 4.1 Wikia
- 4.2 Monobook
5 Véase también

Una piel (o skin, en inglés) es el estilo aplicado en una página de contenido de un wiki. El contenido en si no se cambia según la piel en la que aparezca, pero sí se cambian los colores, el diseño y la navegación de la página - llegando a ser muy diferente de una piel para otra.

¿Qué pieles están disponibles?

La piel empleada en los nuevos wikis de Wikia es Wikia. Actualmente, está disponible en once temas por defecto: Oasis, Jade, Babygirl, Carbon, Rockgarden, Opulence, Bluesteel, Creamsicle, Plated, Police y Aliencrate.

La piel también puede ser personalizada completamente, o detalles de los temas por defecto pueden ser cambiados. Véase Ayuda:Diseñador de Temas para más detalles.

Algunos antiguos wikis de Wikia todavía utilizan Monobook: esta es la misma piel que empleó Wikipedia y otros proyectos de la Fundación Wikimedia, sin embargo no soporta las características modernas de Wikia (sitios antiguos deberían ser actualizados a Wikia contactando con el Equipo de la Comunidad).

Opciones personales

Si estás conectado, puedes cambiar personalmente la forma de ver las páginas de Wikia, eligiendo entre Wikia y Monobook en tus preferencias. Solo podrás ver el tema que eligieron los administradores.

Algunas comunidades emplean mucho tiempo en personalizar sus propias pieles con sus menús, colores y más. Si tus preferencias personales están establecidas de manera diferente a las del wiki por defecto, especialmente si utilizas un skin antiguo, puede que no veas algunas características y cambios del wiki. Por tanto, recomendamos activar la opción que dice "Permitir a los administradores anular mi elección de piel" en tus Preferencias. Tu piel favorita tendrá todo en estándar, wikis sin personalizar - sin embargo, páginas que estén personalizadas aparecerán de la manera que pretende su comunidad.

Personalizando y entendiendo pieles

Para información sobre el funcionamiento de pieles, y como personalizarlas para uso personal, véase Ayuda:Personalizando pieles.

Visión general de pieles

Recuerda que algunas de estas pieles están aquí tan solo por razones históricas. No soportan las nuevas características de Monaco. Para más sobre esto, véase Ayuda:Comparación de pieles.

Wikia

También llamada Oasis, es la actual piel estándar de los wikis de Wikia. Posee una barra lateral donde se ubican los módulos con un menú desplegable y personalizable en la parte superior. La barra flotante tiene una interfaz que permite a los usuarios añadir funciones extra en el menú desplegable Mis Herramientas. La barra superior contiene un menú desplegable de páginas del usuario, y wikis relacionados, y la sección inferior de la página se ubica la publicidad y los spotlights.

Véase también:

Monobook

Monobook es uno de los estilos de Wikipedia y varios otros sitios MediaWiki.

Véase Ayuda:Personalizando Monobook para más información.

Previsualizar la piel Monobook

Véase también

Esta página o sección está siendo traducido a partir del artículo Help:Skins en el idioma inglés. Por lo cual puede tener errores de sintaxis, escritos sin traducir o lagunas en el contenido.
Puedes colaborar con Ayuda de Wikia continuando con la traducción del artículo original