CSS Conceptos Básicos 2
Anuncio
Sesión 11
Sintaxis CSS
•
Una regla CSS consiste de un selector y un bloque de declaraciones:
Selector
Declaración
h1
{ color:red; font-size:12px;}
Propiedad
Valor
By: Mg. Ing. David Gil
Propiedad
Valor
Selectores CSS
•
Los selectores CSS permiten seleccionar y manipular elementos HTML.
•
Los selectores CSS son usados para “encontrar” (o seleccionar) elementos HTML basándose
en su ID, clase, tipo, atributo, etc.
By: Mg. Ing. David Gil
El selector Elemento
•
El selector elemento selecciona elementos basándose en el nombre del elemento.
Ejemplo
p{
text-align: center;
color: red;
}
By: Mg. Ing. David Gil
El selector id
•
El selector id utiliza el atributo id de un elemento HTML para seleccionar un elemento
específico.
Ejemplo
#identificador {
text-align: center;
color: red;
}
By: Mg. Ing. David Gil
El selector class
•
El selector class selecciona elementos con un atributo class específico.
Ejemplo
.clase {
text-align: center;
color: red;
}
By: Mg. Ing. David Gil
Formas de insertar CSS
Hoja de estilos
externa
Hoja de estilo
interna
Estilo en línea
• <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
• <head>
<style>
</style>
</head>
body {background-color: linen;} h1 {color: maroon; margin-left: 40px; }
• <h1 style="color:blue;margin-left:30px;">Título</h1>
By: Mg. Ing. David Gil
Orden en cascada
Estilo en línea
Hojas de estilo
externas e internas
Navegador
predeterminado
By: Mg. Ing. David Gil
CSS List
•
Las propiedades CSS List permiten establecer diferentes marcadores de elementos de lista
para listas ordenadas y desordenadas; además, establecer una imagen como el marcador de
elemento de la lista.
Propiedad
Descripción
list-style
Establece todas las propiedades para una lista en una sola declaración.
list-style-image
Especifica una imagen como el marcador de elemento de lista.
list-style-position
Especifica si los marcadores de elementos de lista deben aparecer dentro o fuera
del flujo de contenido
list-style-type
Especifica el tipo de marcador de elemento de lista.
By: Mg. Ing. David Gil
CSS Tables
•
El aspecto de una Tabla HTML puede ser mejorado con CSS.
Propiedad
Descripción
border
Especifica el borde de una tabla.
border-collapse
Establece si los bordes de la tabla se colapsan en un solo borde o separados.
width
Define el ancho de la tabla.
height
Define la altura de la tabla.
text-align
Especifica la alineación horizontal del texto en la tabla.
vertical-align
Especifica la alineación vertical del texto en la tabla.
padding
Controla el espacio entre el borde y el contenido en una tabla.
By: Mg. Ing. David Gil
HTML
<div>
•
La etiqueta <div> define una división o una sección en un documento HTML.
•
La etiqueta <div> se utiliza para agrupar bloques de elementos para darles
formato con CSS.
•
La etiqueta <div> es compatible con la de los atributos globales en HTML.
•
La etiqueta <div> es compatible con la atributos de eventos en HTML.
•
Los atributos más utilizados con esta etiqueta son id (para identificar la sección de
forma única) y class (para aplicar a la sección estilos CSS).
By: Mg. Ing. David Gil
Divisiones comunes
•
contenedor (wrapper) suele encerrar la mayor parte de los contenidos de la página y se
emplea para definir las características básicas de la página: su anchura, sus bordes,
imágenes laterales, si se centra o no respecto de la ventana del navegador, etc.
•
cabecera (header) que incluye todos los elementos invariantes de la parte superior de la
página (logotipo, imagen o banner, cuadro de búsqueda superior, etc.)
•
contenido (content) engloba el contenido principal del sitio (la zona de noticias, la zona de
artículos, la zona de productos, etc. dependiendo del tipo de sitio web)
•
menu (menu) se emplea para agrupar todos los elementos del menú lateral de navegación
de la página
•
pie (footer) que incluye todos los elementos invariantes de la parte inferior de la página
(aviso de copyright, política de privacidad, términos de uso, etc.)
•
lateral (sidebar) se emplea para agrupar los elementos de las columnas laterales y
secundarias de la página.
By: Mg. Ing. David Gil
CSS “Box Model”
•
•
Margen (Margin)
En CSS, el término “Box
Model” se utiliza cuando se
habla de diseño y
maquetación.
Borde (Border)
Relleno (Padding)
El modelo de caja CSS es
esencialmente una caja que
se envuelve alrededor de los
elemento HTML, y se
compone de:
•
•
•
•
Contenido (Content)
Márgenes
Bordes
Relleno
Contenido
By: Mg. Ing. David Gil
Práctica de laboratorio 09
Creando reglas CSS.
Ing. David Gil
