Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS, Lenguaje de marcado de hipertexto Extensible (XHTML), Lenguaje de…
CSS
¿Qué es CSS?
-CSS significa Cascading Style Sheets (Hoja de Estilos en Cascada).
-El lenguaje CSS describe cómo se mostrarán los elementos HTML en la pantalla.
-El lenguaje CSS ahorra mucho trabajo, ya que permite controlar el diseño de varias páginas web a la vez.
-Todas las hojas de estilo externas se almacenan en archivos CSS.
¿Por qué usar CSS?
El lenguaje CSS se utiliza para definir los estilos de tus páginas web, incluyendo el diseño, la disposición y las variaciones en la imagen para los diferentes dispositivos y tamaños de pantalla .
¿Cómo se vinculan el CSS y el HTML?
El HTML y CSS tienen una relación muy fuerte entre ellos, ya que el HTML es un lenguaje de marcado (constituye la base de un sitio web) y CSS define el estilo de la página (toda la parte estética).
A pesar de que las Hojas de Estilo en Cascada no son imprescindibles, son importantes para darle forma y apariencia a tu página web. Si solo usas HTML tu página se verá desnuda y no destacará entre la competencia.
Frameworks CSS
Algunos frameworks (Marco de trabajo o entorno de trabajo) CSS
-TailWindCSS
-Semantic UI
-Materialize CSS
-Bootstrap 4
-Bulma
-Foundation
¿Por qué vale la pena implementar CSS en un sitio web?
La tecnología CSS está diseñada para marcar la separación del contenido de las páginas web y la forma de presentación de estas. Lo que genera múltiples beneficios, como: presentar el documento final en diferentes estilos (pantalla, voz, impresión); definir el estilo visual de todo un sitio web.
Sintaxis y selector CSS
El selector apunta a un etiqueta o elemento HTML que se deseé estilizar con CSS.
El bloque de declaración puede contiener una o más declaraciones separadas por punto y coma, la última declaración en una regla CSS no necesariamente debe llevar punto y coma.
Etiquetas de estilo HTML
El formato de documento HTML era tedioso y complejo antes de CSS debido a los atributos de estilo HTML incorporados. Específicamente, las etiquetas de estilo requerían descripciones detalladas y repetitivas de los siguientes elementos:
-colores de las fuentes.
-estilos de fondo.
-elementos de alineación.
-fronteras.
-tamaños.
El término cascada deriva del hecho de que se pueden aplicar múltiples hojas de estilo a la misma página Web. CSS fue desarrollado por el W3C.
-
¿Para qué sirve el CSS?
La tecnología CSS está diseñada para marcar la separación del contenido de las páginas web y la forma de presentación de estas. Lo que genera múltiples beneficios, como:
-tener un sitio web responsivo.
-definir el estilo visual de todo un sitio web. Así, si cambiamos una página, cambiarán todas automáticamente.
-trabajar con estándares y separar (hasta cierto punto) la estructura de la presentación logrando un trabajo más definido.
-provee más flexibilidad y control en las especificaciones del sitio web.
-simplifica la creación de la página.
-
Selectores
Las declaraciones nos dirán qué estilo aplicar, pero antes debemos saber a qué elemento.
Este es el papel que juegan los selectores, y como veremos permiten una gran variedad a la hora de seleccionar los elementos afectados por una regla. A un mismo elemento del DOM le pueden afectar varias reglas, y una regla puede afectar a varios elementos.
Referenciando con el atributo id
El atributo id es como un nombre que identifica al elemento. Esto significa que el valor de este atributo no puede ser duplicado. Este nombre debe ser único en todo el documento.
-
Breve historia de CSS
Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets). En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de HTML.
Referencias
Almacenar todos nuestros estilos en un archivo externo e insertar este archivo dentro de cada documento que lo necesite es muy conveniente, sin embargo no podremos hacerlo sin buenos mecanismos que nos ayuden a establecer una específica relación entre estos estilos y los elementos del documento que van a ser afectados.
Cuando hablábamos sobre cómo incluir estilos en el documento, mostramos una de las técnicas utilizadas a menudo en CSS para referenciar elementos HTML.
el estilo para cambiar el tamaño de la letra referenciaba cada elemento <p> usando la palabra clave p. De esta manera el estilo insertado entre las etiquetas <style> referenciaba cada etiqueta <p> del documento y asignaba ese estilo particular a cada una de ellas.
-
-
-
Existen muchos tipos diferentes de selectores. Antes, solo viste los selectores de elementos, los cuales seleccionan todos los elementos de un tipo dado en los documentos HTML.
-
Una de las técnicas más simples para incorporar estilos CSS a un documento HTML es la de asignar los estilos dentro de las etiquetas por medio del atributo style.
El siguiente código muestra un documento HTML simple que contiene el elemento <p> modificado por el atributo style con el valor font-size: 20px. Este estilo cambia el tamaño por defecto del texto dentro del elemento <p> a un nuevo tamaño de 20 pixeles.
-
Una mejor alternativa es insertar los estilos en la cabecera del documento El elemento <style> permite a los desarrolladores agrupar estilos CSS dentro del documento. En versiones previas de HTML era necesario especificar qué tipo de estilos serían insertados. En HTML5 los estilos por defecto son CSS, por lo tanto no necesitamos agregar ningún atributo en la etiqueta de apertura <style>.
-
-
-
-
-
Declarar los estilos en la cabecera del documento ahorra espacio y vuelve al código más consistente y actualizable, pero nos requiere hacer una copia de cada grupo de estilos en todos los documentos de nuestro sitio web. La solución es mover todos los estilos a un archivo externo y luego utilizar el elemento <link> para insertar este archivo dentro de cada documento que los necesite. Este método nos permite cambiar los estilos por completo simplemente incluyendo un archivo diferente. También nos permite modificar o adaptar nuestros documentos a cada circunstancia o dispositivo, como veremos al final de esta serie de publicaciones.
En el Capítulo 1, estudiamos la etiqueta <link> y cómo utilizarla para insertar archivos con estilos CSS en nuestros documentos. Utilizando la línea <link rel="stylesheet" href="misestilos.css"> le decimos al navegador que cargue el archivo misestilos.css porque contiene todos los estilos necesitados para presentar el documento en pantalla. Esta práctica fue ampliamente adoptada por diseñadores que ya están trabajando con HTML5.
Al declarar las reglas CSS utilizando la palabra clave del elemento afectamos cada elemento de la misma clase en el documento.
-Existen varios métodos para seleccionar cuáles elementos
HTML serán afectados por las reglas CSS -referencia por la palabra clave del elemento
-referencia por el atributo class
- referencia por el atributo id