Con css se puede controlar la presentación de una pagina web.
uno ve elementos en la pagina, texto,imágenes, animaciones entre otras.
¿ pero como es todo aquello que es invisible para nosotros?
primero que todo, los elementos estan contenidos en cajas que se separan unas de otras por una margen(margin), estas cajas tienen un color de fondo (background color) pero se le puede colocar una imagen de fondo (background image), estas cajas o capas sirven para contener elementos(contenido), puede ser un texto, imagen, etc , este contenido esta limitado por un borde (border), pero también hay espacio entre el contenido y el borde (padding).
con esto estamos detectando seis elementos claves.
- margin
- background color
- background image
- border
- padding
- contenido
lo voy a explicar gráficamente:
una imagen con fondo transparente se utilizará para el ejemplo.
se colocó una tras otra y tres de los elementos su valor es cero( margin,border, padding).
el border se cambio con un valor de 1 y apareció un borde rodeando la imagen.
ahora se cambio con un valor de uno padding y esta vez apareció un espacio entre la imagen y el borde.
esta vez se colocó en uno margin y apareció un espacio entre los bordes de las imagenes.
se colocó los otro elemento: background color y ademas se tomó dos colores de la paleta.
estos se aplicaron al borde y este elemento.
se colocó background image con otra imagen.
acá se puede apreciar todos los elementos claves.
Al crear paginas con css se crean reglas, estas reglas se dividen en
- Selector
- declaración
la declaración nos indica que se hace y el selector nos indica a que
Hay estándares que nos indican que selectores hay : El estándar de CSS 2.1
Referencia
selectores básicos
- universal
- etiqueta
- descendiente
- de clase
- de Id
la declaración se divide en
- propiedades
- valor
al diseñar una pagina estas se dividen en bloques (layout), una cabecera, un menú, un contenido , una barra lateral y un pie de pagina.
esto se hace con ayuda de “<div> </div>”.
un ejemplo seria:
En las primeras clases con el profesor alberto alvarado se hizo un practica de esto, y así quedó la tarea en aquel entonces
el procedimiento fue el siguiente:
se creo una carpeta imágenes con todas las imágenes e iconos a utilizar.
El archivo cssEn este archivo se puede notar :
los selectores de tipo o Etiqueta
selecciona todos los elementos de la pagina cuya etiqueta coincida con el selector.
los selectores de Clase
en una misma pagina varios elementos diferentes pueden utilizar el mismo valor en el atributo, puede ser utilizado varias veces.
en el archivo de estilos se especifica .x y en el archivo html class=”x”
para restringir el alcance se puede mezclar el selector de tipo y el de clase
aquí se muestra el selector de clase “enlace” restringido solo a la etiqueta tipo vinculo.
los selectores de ID
hace lo mismo que los selectores de clase, la única diferencia es que solo puede ser utilizado una vez.
en el archivo de estilos se especifica #x y en el archivo html id=”x”
El archivo html:
previamente se analizó la estructura
estos son:
un contenedor donde hay cuatro bloques :
- cabecera
- navegador
- cuerpo
- barra lateral
las divisiones se pueden reflejar aquí
vamos a verlo mas en detalle:
la cabecera tiene un banner
el navegador tiene cinco vínculos
el cuerpo tiene tres párrafos y otro bloque “div” con tres vínculos
la barra lateral tiene una imagen y otro bloque “div”
vamos a ver con mas detalle la barra lateral
en la barra lateral hay un bloque que es contenedor de otro bloque que a su vez es contedor de otro y este de otro.
vamos a verlo graficamente visualizando los tags
el archivo html quedaría así:
Advertisement
Me gusta:
Sé el primero en decir que te gusta esta post.
El archivo css
aquí se muestra el selector de clase “enlace” restringido solo a la etiqueta tipo vinculo.
estos son:
