NOMBRE FUNCIÓN PROPIEDADES EJEMPLO
Consiste en definir un <div
conjunto de propiedades id=”prueba_id”>Ejemplo
Identificador de Bloque de estilo agrupadas bajo
un nombre, que se
<div></div> de estilo</div>
asignarán a un bloque.
Consiste en escribir las
definiciones de estilo en <LINK REL="stylesheet"
un fichero aparte de las TYPE="text/css"
Fichero de Estilos Externo páginas, y referenciarlo .css HREF="estilo.css">
en la cabecera de cada
una.
margin-left:unidad
margen izquierdo
Son el espacio margin-right:unidad
comprendido entre el
bloque y el borde de la
margin margen derecho
margin-top:unidad
Márgenes de Bloque ventana activa del margen superior
Donde unidad puede ser
navegador. margin-bottom:unidad
en pixeles (px o numeros)
margen inferior
margin:unidad
los cuatros márgenes
border-left-width:unidad
borde izquierdo
Sin aplicar estilos, no son border-right-width:unidad
visibles, y es como un borde derecho
Bordes de Bloque cuadro imaginario que border border-top-width:unidad
envuelve todo el borde superior
contenido del bloque. border-bottom-widt:unidad
Donde unidad puede ser
borde inferior
en pixeles (px o numeros)
border-width:unidad
los cuatros bordes
border-left-style:estilo
Estilo y color de los Son las líneas que borde izquierdo
bordes delimitan el bloque, que
pueden dibujarse de
border border-right-style:estilo
borde derecho
varias formas en cuanto border-top-style:estilo
Donde estilo puede ser:
a tipo de trazo, grosor y borde superior
color. Estos dos atributos •none (defecto) border-bottom-style:estilo
también pueden actuar •solid borde inferior
sobre los bordes de otros •double border-style:estilo
elementos contenidos •ridge los cuatros bordes
dentro de un bloque, •groove border-left-color:color
como formularios, tablas, •inset borde izquierdo
gráficos, etc. •outset border-right-color:color
•dotted borde derecho
•dashed border-top-color:color
borde superior
Donde color puede ser el border-bottom-color:color
nombre (#FFFFFF) borde inferior
border-color:color
los cuatros bordes
padding-left:unidad
Espaciado Interno del Es la distancia entre el margen interno izquierdo
Bloque borde del bloque y su
contenido
padding padding-right:unidad
margen interno derecho
padding-top:unidad
margen interno superior
Donde unidad puede ser
padding-bottom:unidad
en pixeles (px o numeros)
margen interno inferior
padding:unidad
los cuatros márgenes
internos
background-image:
Los colores pueden url(../imgenes/fondo.gif);
repeat no-repeat repeat-y
definirse con su nombre
repeat-x repeat (por
en inglés o con la defecto) hace que la imagen se
notación RGB en repita tanto en horizontal como
hexadecimal. En este en vertical por todo el bloque.
caso, el color amarillo del Dependiendo del tamaño del
gráfico se puede conseguir un
Color del Fondo ejemplo puede obtenerse
también con background:
background efecto mosaico o una sola
imagen estática. Para que
#FFFF00; el color del solamente se repita en
fondo de cualquier horizontal se utiliza repeat-x, y
elemento también puede para que lo haga en vertical
ser transparent (por repeat-y.
defecto). La propiedad attachment: fixed
attachment: scroll el valor
color no se hereda, pero fixed sirve para que la imagen
puede forzarse de la se quede fija al hacer scroll con
forma habitual: inherit. el texto, con lo que parece que
el texto "flota" sobre la imagen.
Para que la imagen acompañe al
texto en su desplazamiento se
utilizará scroll (por defecto).
position Indica la posición del
gráfico dentro del bloque. Si no
se indica otra cosa, por defecto
éste será colocado en el ángulo
superior izquierdo del bloque.
Para variar su posición se
pueden escribir las coordenadas
deseadas de la esquina superior
izquierda del gráfico en píxels o
en tantos por ciento respecto al
total del bloque.
width
Tamaño Indicas la Anchura y height width:unidad
Altura. height:unidad
Donde unidad puede ser
en pixeles (px o numeros)
Dentro de un bloque,
además de texto, pueden
ir gráficos u otros
bloques. Para conseguir
que estos objetos se
alineen respecto al texto
Gráficos y Bloques
Flotantes
que ya exista en el
bloque, o para que se
float float:left
float:right
alineen varios bloques float:none
entre sí, se utiliza la
instrucción float que
puede tener tres
parámetros: left right
none (por defecto).
