ETAPA 4
Propiedades avanzadas CSS
4.1 Propiedad CSS-radio-borde
La border-radius propiedad CSS define el radio de las esquinas de un elemento.
La border-radius propiedad puede tener de uno a cuatro valores. Estas son las
reglas:
Cuatro valores: radio de borde: 15px 50px 30px 5px
Tres valores: radio de borde: 15px 50px 30px
Dos valores: radio de borde: 15px 50px
Un valor radio de borde: 15px
Imágenes de borde CSS
La border-image propiedad CSS le permite especificar una imagen para usar en
lugar del borde normal alrededor de un elemento.
La propiedad tiene tres partes:
1. La imagen para usar como borde .
2. Dónde cortar la imagen.
3. Definir si las secciones del medio deben repetirse o estirarse.
La border-image propiedad toma la imagen y la divide en nueve secciones, como
un tablero de tres en raya. Luego coloca las esquinas en las esquinas, y las
secciones del medio se repiten o estiran según lo especifique.
1
4.2 Rellenos de CSS
Las padding propiedades de CSS se usan para generar espacio alrededor del
contenido de un elemento, dentro de cualquier borde definido.
Con CSS, tienes control total sobre el relleno. Existen propiedades para configurar
el relleno para cada lado de un elemento (arriba, derecha, abajo e izquierda).
Relleno: lados individuales
CSS tiene propiedades para especificar el relleno para cada lado de un elemento:
padding-top
padding-right
padding-bottom
padding-left
Todas las propiedades de relleno pueden tener los siguientes valores:
longitud: especifica un relleno en px, pt, cm, etc.
% - especifica un relleno en% del ancho del elemento contenedor
inherit: especifica que el relleno debe heredarse del elemento principal
2
Rellenos y ancho del elemento
La width propiedad CSS especifica el ancho del área de contenido del elemento. El
área de contenido es la porción dentro del relleno, el borde y el margen de un
elemento.
Entonces, si un elemento tiene un ancho especificado, el relleno añadido a ese
elemento se agregará al ancho total del elemento. Esto a menudo es un resultado
indeseable.
4.3 Márgenes de CSS
Las margin propiedades CSS se usan para crear espacio alrededor de elementos,
fuera de cualquier borde definido.
Con CSS, tienes control total sobre los márgenes. Existen propiedades para
establecer el margen para cada lado de un elemento (arriba, derecha, abajo e
izquierda).
Márgenes – Lados individuales
CSS tiene propiedades para especificar el margen para cada lado de un elemento:
3
margin-top
margin-righ
margin-bottom
margin-left
Todas las propiedades de margen pueden tener los siguientes valores:
auto: el navegador calcula el margen.
longitud: especifica un margen en px, pt, cm, etc.
% - especifica un margen en% del ancho del elemento contenedor.
inherit: especifica que el margen debe heredarse del elemento primario.
Barras de navegación
Tener una navegación fácil de usar es importante para cualquier sitio web.
Con CSS, puede transformar menús aburridos en barras de navegación de buen
aspecto.
Barra de navegación = Lista de enlaces
Una barra de navegación necesita HTML estándar como base.
4
4.4 Menús Horizontales
Barra de navegación horizontal
Hay dos formas de crear una barra de navegación horizontal. Usar elementos de
lista en linea o flotantes.
5
4.5 Menús Verticales
Cree una barra de navegación vertical básica con un fondo gris y cambie el color
de fondo de los enlaces cuando el usuario mueve el mouse sobre ellos:
