Modelado de sitios web HTML y CSS

HTML y CSS

 En este apartado se hablará del modelado de sitios web en HTML Y CSS, primero tenemos que saber, ¿qué es HTML y CSS?, como anteriormente se vió HTML (Lenguaje Marcado de Hipertexto) es un lenguaje utilizado para crear la estructura y contenido de una página web, utilizando gran variedad de etiquetas como lo son <h1> - <h6>, <p>, entre otras.

Mientras que CSS (Hojas de Estilo en Cascada) es un lenguaje pero de diseño, que permite personalizar y dar estética visual a los elementos de HTML en una página web, el CSS que se llevó a cabo fue de lo más básico ya que solo se buscaba entender lo que esto era. 

ANATOMÍA DE UNA REGLA CSS

• SELECTOR: Permite seleccionar los elementos de una msima clase, en el ejemplo de la imágen de arriba se puede ver que está la "p" como selector, esto quiere decir que el párrafo se pondrá de color rojo, si en lugar de la "p" estuviera un "h1", este sería el que tuviera el color rojo, es decir, el selector es la etiqueta que quieres que tome un diseño en específico. 
• DECLARACIÓN: Una propiedad y su valor son llamados una declaración. 
• PROPIEDADES: Son elementos que modifican la página, ya sea el borde, fondo, texto, decoración, etc. Hay más de 100 propiedades.
• VALOR DE LA PROPIEDAD: En este caso, el valor de la propiedad es "red", o sea el color que tomará el texto, este cambia según tu quieras estilizar y modificar.

También cabe recalcar que es posible seleccionar varios elementos como a continuación se muestra, no olvides añadir comas (,): 

DIFERENTES TIPOS DE SELECTORES

Estos son solo algunos de los ejemplos de los selectores más comunes en CSS. Existen muchos más selectores y combinaciones posibles para adaptarse a las necesidades de tu estilo en una página web.

1.- SELECTOR DE TIPO: Selecciona elementos según el nombre del elemento. 

2.- SELECTOR DE CLASE: Selecciona elementos según el calor del atributo de clase

3.- SELECTOR DE ID: Selecciona un elemento según el valor del atributo de ID. 

4.- SELECTOR DE ATRIBUTO: Selecciona elemtos según el valor de un atributo en específico.

5.- SELECTOR DE PSEUDO - CLASE: Selecciona elementos en un estado o posición específica. 

LAS CAJAS EN CSS

Son elementos fundamentales para estructurar y diseñar la maquetación de una página web. Cada elemento en HTML es considerado una caja, y CSS proporciona propiedades para controlar su apariencia, dimensiones, posición y otros aspectos. 

Ejemplos de algunas propiedades relacionadas con las cajas:width, heighy, hadding, margin, border, background, etc. 

                                                                                                        by: Soledad Reséndiz Guzmán.