FANDOM


Inline-CSS es CSS que se añade directamente en el código HTML. Un atributo de estilo se añade a una etiqueta de apertura HTML (style="…"), que puede contener varias declaraciones CSS entre comillas; estas declaraciones se aplican a todo lo contenido dentro de las etiquetas HTML correspondientes. Una declaración CSS consiste en un atributo, dos puntos y un valor para asignar al atributo. declaraciones CSS múltiples están permitidos y deben estar separados por punto y coma.

En la vista de código, se permiten varias etiquetas HTML. De esta manera elaborar cambios de diseño son posibles en virtud de la utilización de inline-CSS. En general etiquetas <div style="">…</div> se utilizan para el cambio de un párrafo entero mientras que las etiquetas <span style="">…</span> son para frases individuales en un párrafo. Además inline-CSS se puede utilizar para la sintaxis de tablas, más información en Ayuda:Wikitexto/Ejemplos de tablas.

Ejemplo de la sintaxis

En esta página, los valores posibles y sus efectos sobre los atributos CSS individuales se describirán por secciones.

<span style="color: green; text-decoration: blink;">…</span>

Tablas

Los atributos siguientes no son exclusivo para los tablas, pero se utilizan con frecuencia en ellas.

Border

Grosor, -type, y -color

Estos tres atributos están definidos por el atributo "border"; hasta 3 valores, separados por espacios, se introducen después de los dos puntos en el orden siguiente: anchura, tipo, color. Color y grosor sólo se pueden ajustar con el tipo.

<div style="border:___ … …;">…</div>
Valores de espesor Efecto
Thin Delgado
medium medio (como el borde de esta tabla)
Thick Grueso
__px Grosor en píxeles
<div style="border: … ___ …;">…</div>
Valores de tipo Efecto
none Sin bordes
dotted punteado
dashed discontinuo
Solid Sólido (línea normal)
stand-in Línea Doble (como el borde de esta tabla)
Groove Ranurado (depende del color)
Ridge elevado (depende del color)
Inset creciente hacia el exterior (depende del color)
outset inclinado hacia el exterior (depende del color)
<div style="border:… … ___;">…</div>
Valores para el color Efecto
___ El color elegido; Los valores posibles en Ayuda:Color
transparente invisible (como el borde de esta tabla)

Si desea cambiar el borde en un solo lado a continuación, utilizar "border-top", "border-bottom", "border-left" o "border-right" (upper, lower, left, right).

Bordes superpuestos

{|style = "border-collapse: ___;"
...
|}
Valores Efecto
Collapse bordes adyacentes se superponen a un borde
separate bordes adyacentes permanecen separados (como en esta tabla)
Distancia entre bordes adyacentes

Si se separan los bordes adyacentes, es posible fijar la distancia entre ellos con border-spacing. Si se dan dos valores, el primero de ellos se refiere a las distancias arriba / abajo.

{|style = "border-collapse: separate; border-spacing: ___ ___;"
...
|}
Valores Efecto
__px Distancia en píxeles
__em dependiendo del tamaño de la fuente (1 em = altura de la letra grande actual)
__ex dependiendo del tamaño de la fuente (1ex = altura de la minúscula actual)
Mostrar celdas vacías

En bordes separados se puede ajustar para que las celdas vacías reciban cualquier tipo de formato.

{|style = "border-collapse: separate; empty-cells: ___;"
...
|}
Valores Efecto Ejemplo
show celdas en blanco con formato  
hide celdas vacías sin formato

Esquinas redondeadas

La propiedad border-radius acepta hasta 8 valores; los primeros cuatro valores determinan el radio inicial en el plano horizontal, los últimos cuatro el radio final en el vertical. El valor cuadrangular se refiere a las cuatro esquinas, empezando por la parte superior izquierda en dirección a las manecillas del reloj. Al omitir un cuarto valor, este acepta el valor de la esquina opuesta, al igual que en sólo dos o un valor. El segundo cuadrado puede ser completamente omitido, de manera que los radios se mantienen constantes en una esquina.

<div style="border-radius: _ _ _ _ / _ _ _ _;">…</div>
<div style="border-radius: _;">…</div>
Valores Efecto
__px Radio en píxeles
__em dependiendo del tamaño de la fuente (1 em = altura de la letra grande actual)
__ex dependiendo del tamaño de la fuente (1ex = altura de la minúscula actual)

Margin

La propiedad Margin acepta hasta cuatro valores de las distancias en las direcciones, derecha, abajo, izquierda en adelante (mnemotécnica: reloj analógico). Si se omite el cuarto valor, se adopta el valor del opuesto, etc.

<div style="margin:_ _ _ _;">…</div>
Valores Efecto
Auto automáticamente (como aquí)
__px Distancia en píxeles
__em dependiendo del tamaño de la fuente (1em = altura de la letra grande actual)
__ex dependiendo del tamaño de la fuente (1ex = altura de la minuscula actual)
__% dependiendo de la anchura del elemento padre

Con margin-right: auto y margin-left: auto, puede ser un cuadro a la derecha o una diapositiva al lado izquierdo, sin ser rodeado por texto u otros elementos en línea.

Padding

La propiedad Padding acepta al igual que margin hasta cuatro valores que se aplican a las distancias desde el borde hacia el interior.

<div style="border-collapse:separate; padding:_ _ _ _;">…</div>
Valores Efecto
__px La distancia en píxeles (en este caso 8 píxeles)
__em dependiendo del tamaño de la fuente (1 em = altura de la letra grande actual)
__ex dependiendo del tamaño de la fuente (1ex = altura de la minuscula actual)
__% dependiendo de la anchura del elemento padre

Width y height

<div style="width:___;">…</div>
Valores Efecto
Auto de forma automática (por defecto)
__px Anchura en píxeles
__em dependiendo del tamaño de la fuente (1 em = altura de la letra grande actual)
__ex dependiendo del tamaño de la fuente (1ex = altura de la minuscula actual)
__% dependiendo de la anchura del elemento padre (aquí, 90%)
<div style="height:___;">…</div>
Valores Efecto
Auto de forma automática (por defecto)
__ px Altura en píxeles (270px aquí)
__ em dependiendo del tamaño de la fuente (1 em = altura de la letra grande actual)
__ ex dependiendo del tamaño de la fuente (1ex = altura de la minuscula actual)
__% dependiendo de la cantidad del elemento padre

Con max-height, min-height, max-width y min-width puede dejarse en una dirección

Escalar contenido

<div style = "transform:scalex(__);">
Valores Efecto
<code>Transform:ScaleX(value) Escala los contenidos horizontalmente.
<div style = "transform:scaley(__);">
Valores Efecto
<code>Transform:ScaleY(value) Escala el contenido verticalmente.
<div style = "transform:scale(__);">
Valores Efecto
<code>Transform:Scale(value) Escala los contenidos junto con X e Y

Se puede ajustar la escala del tamaño del contenido cambiando los valores por ScaleX, ScaleY, Scale3D o Scale.

Prevenir deborde

Con overflow se puede definir lo que debería ocurrir si el contenido es demasiado grande para el cuadro de abajo.

<div style="overflow:___;">…</div>
Valores Efecto
Visible
no toma ninguna acción, el contenido va más allá de la caja (estándar)
Hidden
el contenido será cortado al final de la caja
scroll
el contenido recibe una barra de desplazamiento
auto el contenido recibe barras de desplazamiento, siempre y cuando el contenido se desborde

Posición del encabezado de la tabla

{|style = "caption-side: ___;" "table caption" ...
|+

|}
Valores Efecto
top Encabezado arriba
bottom Encabezado abajo (como en este caso)

Float

<div style="float:___;">…</div>
Valores Efecto
none no permite elementos alrededor; El elemento no se moverá
right a la derecha, otros elemntos a la izquierda izquierda
left para el lado izquierdo, lo demás a la derecha (como aquí)

El parametro Float empuja el elemento hasta el borde y permite que fluya alrededor de los elementos left en línea tales como texto.

Sombra

Tablas y secciones Div pueden estar usando box-shadow para emitir una sombra. Los dos primeros valores (posición de la sombra a la derecha / inferior) son obligatorios, todos los demás se pueden omitir.

<div style="box-shadow:___ ___ ___ ___ ___ ___;">…</div>
Valores para 1-4 (1.2 negativa) Efecto 1.2 Effect 3 efecto 4
__px Posición en píxeles Longitud expira sombra sombra adicional de tamaño
__em dependiendo del tamaño de la fuente (1 em = altura de la letra grande actual)
__ex dependiendo del tamaño de la fuente (1ex = altura de la minuscula actual)
Valores para 5 Efecto
___ color de la sombra; Los valores posibles se encuentran en Ayuda:Color
Valor para 6 Efecto
Inserción hace que la sombra se proyecte por el marco en la caja

Texto

Color del texto

<div style="color:___;">…</div>
Valores Efecto
___ Valor de color; Los valores posibles se encuentran en Ayuda:Color

Tamaño de la fuente

<div style="font-size:___;">…</div>
Valores Efecto

xx-small
x-small
small
medium
large
x-large
xx-large

diversos tamaños fijos (en este caso "grande")
__px Tamaño de la fuente en píxeles ( "20px")
__em dependiendo del tamaño de la fuente exterior ( "2em")
__ex dependiendo del tamaño de la fuente exterior ( "2ex")
__% dependiendo del tamaño de la fuente exterior ( "70%")

Ancho de la fuente

<div style="letter-spacing:___;">…</div>
Valores Efecto
Normal normal
__px letras de espaciamiento en píxeles ( "2px")
__em dependiendo del tamaño de la fuente exterior ( "0.2em")
__ex dependiendo del tamaño de la fuente exterior ( "-0.08ex")

Alto de la fila

<div style="line-height:___;">…</div>
Valores Efecto
Normal normal
__px altura de la fila en píxeles ( "30px")
foo
__em dependiendo del tamaño de la fuente exterior ( "1.7em")
foo
__ex dependiendo del tamaño de la fuente exterior ( "1.7ex")
foo
__% dependiendo del tamaño de la fuente exterior ( "166%") foo

Orientación del texto

<div style="text-align:___;">…</div>
Valores Efecto
right nivelado a la derecha
Center centralmente
left alineado a la izquierda
justify Justificación

Alineación vertical

<span style="vertical-align:___;">…</span>
Valores Efecto
top Encima
Middle Centralmente
bottom Bajo
sub Como subíndice
great Como superíndice
__px Aumento de píxeles ( "40px")
__em Dependiendo del tamaño de la fuente ( "1.7em")
__ex Dependiendo del tamaño de la fuente ( "-3ex")

Con vertical-align más que solo texto se pueden alinear.

Sangría

<div style="text-indent:___;">…</div>
Valores Efecto
__px La sangría en píxeles ( "20px")
__em dependiendo del tamaño de la fuente exterior ( "1.2em")
__ex dependiendo del tamaño de la fuente exterior ( "1ex")
__% dependiendo de la anchura del elemento padre ( "25%")

Cursiva

<div style="font-style:___;">…</div>
Valores Efecto
normal normal
italic cursiva
Oblique cursiva forzadas

Negrita

<div style="font-weight:___;">…</div>
Valores Efecto
normal normal
Bold</​​code> gruesa
<code>Bolder más gruesa que el texto afuera
Lighter no tan gruesa como el texto afuera

Mayúscula

<div style="font-variant:___;">…</div>
Valores Efecto
normal normal
small-caps Mayúsculas con-escala de minúsculas

Minúscula

<div style="text-transform:___;">…</div>
Valores Efecto
lowercase Todo en minúsculas
capitalize cada letra inicial mayúscula
Uppercase Todo en mayúsculas

Marcadores de texto

<div style="text-decoration:___;">…</div>
Valores Efecto
none normal
underlinestyle subrayado
overline sobrerayado
line-through tachado
Flashing texto intermitente

Sombras de texto

Los dos primeros valores (posición de la sombra a la derecha, abajo) son obligatorios, todos los demás se pueden omitir.

<div style="text-shadow:___ ___ ___ ___;">…</div>
Valores para 1-3 (negativa 1.2) Efecto 1.2 Effect 3
__px Posición en píxeles Longitud de la sombra que expira
__em dependiendo del tamaño de la fuente (1em = altura de la letra grande actual)
__ex dependiendo del tamaño de la fuente (1ex = altura de la minúscula actual)
Valores para 4 Efecto
___ color de la sombra; Los valores posibles se encuentran en Ayuda:Color

Fuentes

<span style="font-family:'Times New Roman',Georgia,Serif;"></span>

La propiedad font-family especifica una lista de fuentes aplicables, en orden de preferencia. El navegador aplica la primera fuente disponible para el texto adjunto. Siempre usa un grupo de nombre genérico como serif o sans-serif como un valor por defecto a prueba de fallos.

Color de fondo

<div style="background-color:___;">…</div>
Valores Efecto
transparent Fondo permanece transparente (estándar)
___ Color de fondo; Los valores posibles se encuentran en Ayuda:Color

Listas

Las listas pueden ser personalizadas con la propiedad list-style, que acepta hasta tres valores: tipo y posición de la lista de puntos, y un enlace a un archivo gráfico que se va a utilizar como un elemento de la lista (en este orden).

CSS en línea con las listas puede solamente con HTML puro: se utilizan (Ayuda HTML / listas).

<ol style="list-style:_ … …;"><li>…</li><li>…</li>…</ol>
Valores para Type Efecto
none sin lista
Circle Anillo
Disc Circulo
Square Cuadrado
decimal Número
decimal-leading-zero Número con un cero adelante
lower-latin minúsculas
upper-roman números romanos en mayúsculas
<ol style="list-style:… _ …;"><li>…</li><li>…</li>…</ol>
Valores para position Efecto
inside puntos de la lista estan donde comenzaría el texto
outside los elementos de la lista se desplazan a la izquierda de modo que el texto comienza donde comenzaría el texto sin formato
<ol style="list-style:… … _;"><li>…</li><li>…</li>…</ol>
Valores para la integración gráfica Efecto
none ningún archivo, en lugar del elemento normal de la lista normal
url ('___') descarga un archivo de imagen como un elemento de la lista

Marco

La propiedad outline proporciona un marco alrededor del exterior del objeto (es decir, incluso alrededor del margin). Outline se configura igual que border.

Transparencia

<div style="opacity:___;">…</div>
Valores Efecto
___ Número decimal de 0,0 (totalmente transparente) y 1,0 (sin transparencia); aquí 0,4

Blending

<div style="mix-blend-mode:___;">…</div>
Valores Efecto
normal Sin efecto de mezcla
color-dodge, screen, lighten Mezclado con un fondo más claro
color-burn, darken, multiply Mezclado con un fondo más oscuro
Overlay, Hard-Light, Soft-Light Mezclado con métodos </span> de contraste
difference, exclusion Mezclado con modos de inversión
hue, saturation, color, luminosity Mezclado con mezclas de color

Las mezclas con texto e imágenes usando modos de mezcla requieren colores de fondo de las celdas para ser utilizados, de otra manera no funcionarán.

No permitir texto alrededor

...O elementos en línea similares.

<div style="clear:___;">…</div>
Valores Efecto
none permite elementos alrededor
right ningún elemento a la derecha
left sin enlaces alrededor
Both sin ningun elemento alrededor

Esta propiedad está a menudo en <br style="clear:both;" /> uso al final de una sección, a fin de evitar que desde abajo nada se deslice hacia arriba.

Ocultar elementos

<div style="visibility:___;">…</div>
Valores Efecto
Visible normal
Hidden Oculta el elemento, no libera su lugar

Eliminar elementos

<div style="display:___;">…</div>
Valores Efecto
none oculta el elemento completo y da su lugar libremente
Inline envuelto, como una imagen en el medio de texto
block No reflujo, como una imagen centrada

Enlaces

Ayuda y comentarios


Páginas de ayuda sobre Wikitexto:

El contenido de la comunidad está disponible bajo CC-BY-SA a menos que se indique lo contrario.