Reglas de estilo o estilos CSS (V)

Reglas de estilo o estilos CSS (V)
Visualización de los elementos de una página web
Los elementos de una página web pueden ser de dos tipos: de Línea o de Caja .
Los elementos de línea de una página web permiten que varios de ellos puedan ser situados
uno detras de otro en una misma línea de visualización, estos elementos sólo pueden contener
otros elementos en línea; nunca elementos de bloque. El modelo de caja de CSS describe las
cajas rectangulares que son generadas por los elementos que son de bloque, es decir que
presentan un salto de línea antes y despues de dicho elemento.
Elementos de línea
-
a – ancla o hipervínculo
abbr – abreviatua
acronym – acrónimo
b – negrita
big – texto grande
br – salto de línea
cite – cita
code – código informático
dfn – término definido
em - énfasis
i – cursiva
img – imagen
input – control de entrada
kbd – texto a escribir
label – etiqueta de control de formulario
-
q – cita en línea
s – texto tachado
samp – texto de salida
select – cuadro de lista
small – texto pequeño
span – contenedor genérico en
línea
strike – tachado
1/7
Reglas de estilo o estilos CSS (V)
-
strong – énfasis
sub – subíndice
sup – superíndice
textarea – cuadro de texto
multilínea
tt – texto monoespaciado
u – texto subrayado
var - variable
Elementos de bloque
-
address - dirección
blockquote - cita
center – bloque centrado
dir – lista de carpetas
div – contenedor genérico de bloque
dl – lista de definiciones
fieldset – grupo de controles en un formulario
form - formulario
h1 – encabezado de nivel 1
h2 – encabezado de nivel 2
h3 – encabezado de nivel 3
h4 – encabezado de nivel 4
h5 – encabezado de nivel 5
h6 – encabezado de nivel 6
hr – regla horizontal
-
p – párrafo
re – texto pre-formateado
table – tabla
ul – lista no ordenada
dd – descripción de definición
dd – descripción de definición
dt – término definido
li – elemento de lista
tbody – cuerpo de tabla
td – celda de tabla
tfoot – pie de tabla
th – celda de encabezado de tabla
thead – encabezado de tabla
2/7
Reglas de estilo o estilos CSS (V)
-
tr – fila de tabla
El modelo de Caja
Cada caja posee, además de su área de Contenido, otras tres áreas modificables:
- Área de Margen - Margin
- Área de Relleno - Padding
- Área de Borde - Border
Cada área, a su vez, puede dividirse en cuatro elementos: izquierdo (left), , superior (top),d
erecho (right)
e inferior (bottom)
.
El tamaño de cada área o de sus elementos está dado por el valor de las respectivas
propiedades, definidas en forma abreviada o elemento a elemento. Por ejemplo, la siguiente
sentencia asignará un margen homogéneo de 50 píxeles alrededor de la caja de de parrafo,
borde azul y padding de 50px:
3/7
Reglas de estilo o estilos CSS (V)
<p style="margin:50px;border:medium solid blue;padding:50px">
Si en cambio se desea asignar valores distintos a cada uno de los segmentos, pueden
reflejarse los cuatro valores numéricos siguiendo el orden top - right - bottom - left. El
siguiente ejemplo asigna 10 píxeles arriba, 5 a la derecha, 100 abajo y nada a la izquierda:
<p style="margin:10px 5px 20px 0px">
Pueden especificarse valores también con la siguiente notación, en la que ya no es necesario
mantener el orden:
<p style=" margin-top: 10px ;margin-right: 5px ;margin-bottom: 20px ; ">
La lista completa de propiedades es la siguiente:
Propiedades del Margen
"margin-top", "margin-right", "margin-bottom", "margin-left" y "margin"
Propiedades del Relleno
"padding-top", "padding-right", "padding-bottom", "padding-left" y "padding"
Propiedades del Borde
1) Ancho (width)
"border-top-width", "border-right-width", "border-bottom-width", "border-left-width" y
"border-width". Pueden ser valores específicos o los valores "thin" (fino), "medium" (medio) y
"thick" (grueso)
4/7
Reglas de estilo o estilos CSS (V)
2) Color (color)
"border-top-color", "border-right-color", "border-bottom-color", "border-left-color" y "border-color"
3) Estilo (style)
"border-top-style", "border-right-style", "border-bottom-style", "border-left-style" and
"border-style". Toma una serie de posibles valores, tales como:
- none :Ningún borde
- hidden,
Esto tiene un borde hidden :Igual a 'none'
- dotted,
Esto tiene un borde dotted :El borde es una serie de puntos
- dashed,
Esto tiene un borde dashed :El borde es una serie de pequeños segmentos de línea
- solid
Esto tiene un borde solid
- double,
Esto tiene un borde double :El borde son dos líneas sólidas
5/7
Reglas de estilo o estilos CSS (V)
- groove,
Esto tiene un borde groove :El borde luce como si estuviese tallado en la página
- ridge,
Esto tiene un borde ridge de 10 px en verde :Lo opuesto a 'groove': el borde parece que
estuviera sobresaliendo de la
página
- inset
Esto tiene un borde inset :El borde hace que toda la caja luzca como si estuviera
empotrada en la página
- outset.
Esto tiene un borde outset rojo de 3px :Lo opuesto a 'inset': el borde hace que toda la
caja parezca sobresalir
de la página
El valor inicial del estilo de borde es 'none', ningún borde será visible a menos que se
establezca otro estilo de borde.
No todos los navegadores interpretan sus valores de la misma
manera.
¿Qué se verá en cada área del modelo de caja cuando la página se
muestre en un navegador?
En el área de Contenido y en la de Relleno se verá aquello que se determine en la propiedad
"background" del elemento (un color o una imagen).
6/7
Reglas de estilo o estilos CSS (V)
En el área de bordese verá aquello que se determine en border(ancho, color y estilo).
El área de Margen es siempre transparente.
7/7