css

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.

  1. margin
  2. background color
  3. background image
  4. border
  5. padding
  6. 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

  1. Selector
  2. 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

  1. universal
  2. etiqueta
  3. descendiente
  4. de clase
  5. de Id

la declaración se divide en

  1. propiedades
  2.  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 “

“.

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 css
En 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í:
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s