La clase comienza con la introducción a nuevos términos para html:
Etiquetas Div:
Etiqueta que define las divisiones lógicas existentes en el contenido de una página web. Puede utilizar etiquetas div para centrar bloques de contenido, crear efectos de columna y crear diferentes áreas de color, entre otras posibilidades. Sus etiquetas son: <div> y </div> (ambas obligatorias).
La etiqueta <div> se puede anidar (es decir, que una división puede contener otras divisiones), por lo que se utiliza para estructurar en bloques el contenido de la página web.
Hay otros dos elementos que son claves para las hojas de estilo CSS:
Atributo id – nombre único
Es un identificador único, id=»navegacion-principal» no se repiten en la pagina web con el mismo nombre, puede ir con cada etiqueta nav ,- body – articulos – y se identifican para agruparlas o separarlas en CSS.
El atributo global id define un identificador único (ID) el cual no debe repetirse en todo el documento. Su propósito es identificar el elemento al vincularlo (usando un identificador de fragmento), en scripts u hojas de estilo (con CSS).
El valor de este atributo no debe contener espacios en blanco. Los navegadores tratan los IDs que contienen espacios en blanco como si los espacios fueran parte del ID. En contraste con el atributo class, el cual permite valores separados por espacios, los elementos pueden tener sólo un ID definido mediante el atributo ID. Tenga en cuenta que un elemento puede tener muchos ID, pero los demás deben ser definidos de otra forma
El atributo class – nombre en común
El atributo class de HTML se usa para definir estilos iguales para varios elementos al mismo tiempo, es decir, que se podrian repetir. En el ejemplo de abajo tenemos tres <div> que tienen la clase box y a todos se le aplica el mismo estilo.
Antes de usar CSS se debe completar el proceso de escritura de toda la estructura html, es decir todo el documento debiera contener su información visible para el sitio web
La siguiente pagina web es un sitio donde esta disponible una descarga de html y css
Estilo CSS
Qué es una hoja de estilo
En las primeras versiones del HTML el código fuente de una página web contenía tanto la información (el contenido) como la presentación (el diseño o formato), pero ya en 1994 hubo propuestas para separar todo lo relacionado con el diseño en un documento aparte llamado hoja de estilo, propuestas que fructificaron en 1996 con la aprobación de la recomendación CSS 1. Así, la página web (el documento html) puede contener únicamente información, mientras que la hoja de estilo define el formato.
El nombre oficial en inglés de las hojas de estilo para páginas web es CSS, Cascading Style Sheets, es decir, Hojas de Estilo en Cascada. El término «cascada» hace referencia a la forma jerárquica en que las propiedades de estilo se aplican a los distintos elementos de la página web.
El funcionamiento de las hojas de estilo es el siguiente:
- En la página web (archivo .html) se escriben las etiquetas que definen categorías o elementos.
- En la hoja de estilo (archivo .css) se escribe cómo queremos que sea el estilo de presentación de las etiquetas (color, tamaño, fuente, bordes, márgenes, posición, etc).
- En la página web se escribe qué hoja de estilo queremos utilizar.
Forma de vincular el css con html:
<link rel=»stylesheet» type=»text/css» href=»estilo.css»
las ventajas de utilizar hojas de estilo son muchas, sobre todo permiten hacer un diseño consistente y fácil de modificar. Si varias páginas web hacen referencia a la misma hoja de estilo, para cambiar la apariencia de todas las páginas es suficiente con hacer los cambios en un único lugar, en la hoja de estilo.
Sintaxis de las hojas de estilo
Una hoja de estilo es un fichero de texto plano (sin formato) en el que se define el aspecto de las etiquetas de una página web:
Identifica primero la etiqueta que quieres modificar en html
Un error bastante habitual es escribir los caracteres < y > en la hoja de estilo, estos simbolo no deben ir, para ello están las {llaves}.
Comentarios en las hojas de estilo
Una hoja de estilo puede contener comentarios. Los delimitadores del comentario son /* … */ (como en el lenguaje de programación C). Los comentarios pueden extenderse varias líneas, como ilustra el siguiente ejemplo:
Atributos o propiedades de CSS
https://www.w3schools.com/cssref/
En css la clase o class de identifica con un punto .
La clase siempre se escriben con simbolos – clase-parrafo y separado si tiene mas de una clase.
En css la id de identifica con el símbolo #
en Css puedo llamar tanto a la ID o bien al class
Tareas:
revisar si hmlt esta estructurado de la forma correcta.
buscar propiedades de css y aplicarlas al documento
