MODELADO DE SITIOS WEB CON HTML + CSS

 

CSS BÁSICO

Es el código que usas para dar estilo a tu página web.

¿Qué es CSS, realmente?

(Cascading Style Sheets) Es un lenguaje de hojas en estilo, permite aplicar estilos de manera selectiva a documentos en documentos HTML.

         Anatomía de una regla CSS

La estructura completa es llamada regla predeterminada. 

- Selector: El elemento HTML en el que comienza la regla. Esta selecciona el elemento a dar estilo.

- Declaración: Una sola regla como color: red; especifica a cuál de las propiedades del elemento quieres dar estilo.

- Propiedades: Maneras en las cuales puedes dar estilo a un elemento HTML. . En CSS, seleccionas qué propiedad quieres afectar en tu regla.

- Valor de la propiedad: A la derecha de la propiedad (:), tienes el valor de la propiedad, para elegir una de las muchas posibles apariencias para una propiedad determinada.

Nota las otras partes importantes de la sintaxis:

* Cada una de las reglas (aparte del selector) deben estar encapsuladas entre llaves ({}).

* Dentro de cada declaración, debes usar los dos puntos (:) para separar la propiedad de su valor.

* Dentro de cada regla, debes usar el punto y coma (;) para separar una declaración de la siguiente.

Para modificar la propiedad de varios valores a la vez se separan por punto y coma (;).

 Se pueden seleccionar varios elementos y se incluyen selectores separados por comas(,).

TIPOS DE SELECTORES

El diseño de CSS esté basado principalmente en el modelo de caja. Cada una de las cajas que

ocupa espacio en tu página tiene propiedades como estas:

- padding (relleno), el espacio alrededor del contenido. En el ejemplo siguiente, es el espacio alrededor del texto del párrafo.

- border (marco), la línea que se encuentra fuera del relleno.

- margin (margen), el espacio fuera del elemento que lo separa de los demás.

En esta sección también se utiliza:

- width (ancho del elemento)

- background-color, el color de fondo del contenido y del relleno

- color, el color del contenido del elemento (generalmente texto)

- text-shadow: coloca una sombra difuminada en el texto dentro del elemento

- display: selecciona el modo de visualización para el elemento (no te preocupes de esto por ahora)