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
|
Transform:ScaleX(value) |
Escala los contenidos horizontalmente.
|
<div style = "transform:scaley(__);">
Valores |
Efecto
|
Transform:ScaleY(value) |
Escala el contenido verticalmente.
|
<div style = "transform:scale(__);">
Valores |
Efecto
|
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
|
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 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: