CSS

CSS por Raul Vazquez Romero

• Universidad Autonoma del Estado de Mexico
• Ingenieria en sistemas inteligentes
• Raul Vazquez Romero
• Trabajo del dia 2/09/21
• Programacion WEB
• Periodo 2021B
• 

Hojas de estilo CSS

• 
• ¿Que es y para que sirve CSS?
• CSS son las siglas en inglés para «hojas de estilo en cascada» (cascading style sheets). Básicamente, es un lenguaje que maneja el diseño y presentación de las páginas web, es decir, cómo lucen cuando un visitante las visita. Funciona junto al lenguaje HTML, que se encarga del contenido básico de las páginas.
• Con CSS puedes crear reglas para decirle a tu sitio web cómo quieres mostrar la información y puedes guardar los comandos para elementos de estilo (como fuentes, colores, tamaños, etc.) separados de los que configuran el contenido.
• Así que, básicamente, si el contenido es el rey, CSS es el segundo al mando. Por eso como propietario de sitio o experto en marketing con conocimiento web es conveniente que conozcas algunos aspectos fundamentales; si estás listo, comenzamos.

Funciones básicas en CSS

• Las funciones CSS se utilizan como valor de algunas propiedades CSS. Por ejemplo la función hsl() se utiliza para definir el color utilizado como valor de algunas propiedades como, background-color, border-color, etc…realizan una acción muy sencilla que se traduce en un valor para la propiedad que estemos usando. De esta forma hacemos que nuestro código sea más flexible y genere o recoja valores de forma automática. Lo que hacemos con estas funciones es crear una especia de “programa” que realiza una operación por nosotros, ya sea un cálculo matemático o la toma de un valor variable.

Funciones en CSS

Funciones en CSS

Funciones en CSS

Funciones en CSS

Estructura de las hojas de estilo CSS

• Vinculamos una hoja de estilo externa a nuestra página. Este es el método más común y útil para adjuntar CSS a un documento, porque puedes vincular el CSS a varias páginas y dar estilo a todas ellas con la misma hoja de estilo. En la mayoría de los casos, las diferentes páginas de un sitio web se verán más o menos iguales, de modo que puedes usar el mismo conjunto de reglas para el aspecto y la interacción básicos.
• Una hoja de estilo externa significa que el CSS está escrito en un archivo independiente con una extensión .css y que lo vinculas desde un elemento <link> de HTML:
• 

Sintaxis de CSS

• Declaraciones de CSS
• Configurando propiedades CSS a valores específicos es la función principal del lenguaje del CSS. Una propiedad y su valor son llamados una declaración, y cualquier motor de CSS calcula qué declaraciones aplican a cada uno de los elementos de una página para mostralos apropiadamente y estilizarlos.
• Bloques de declaraciones en CSS
• Las declaraciones son agrupada en bloques, que es una estructura delimitada por una llave de apertura, '{' (U+007B LEFT CURLY BRACKET), y una de cierre, '}' (U+007D RIGHT CURLY BRACKET). Los bloques en ocasiones puedes anidarse, por lo que las llaves de apertura y cierre deben de coindidir.
• Sets de reglas CSS
• Si cada hoja de estilos pudiera aplicar una sól declaración a cada elemento de una página web, sería algo inútil. El verdadero objetivo es aplicar varias declaraciones a distintas partes del documento.
• 
• Legenda: Imagen demostrativa

Sintaxis de CSS

Bibliografia

• Cómo se estructura el CSS - Aprende sobre desarrollo web | MDN. (2021, 2 septiembre). Developer.Mozila. https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/How_CSS_is_structured
• enxaneta.info. (s. f.). Funciones CSS. W3.Unpocodetodo.Info. Recuperado 3 de septiembre de 2021, de http://w3.unpocodetodo.info/css3/funciones_css.php
• Introducción al CSS: qué es, para qué sirve y otras 10 preguntas frecuentes. (s. f.). Hubspot. Recuperado 3 de septiembre de 2021, de https://blog.hubspot.es/marketing/que-es-css
• Luque, P. (s. f.). El uso de funciones de CSS: la función calc(). Blog Escola Espai. Recuperado 3 de septiembre de 2021, de https://www.espai.es/blog/2017/04/funciones-de-css/
• Sintaxis - CSS | MDN. (2021, 2 septiembre). Developer.Mozila. https://developer.mozilla.org/es/docs/Web/CSS/Syntax