CSS Hoja de estilo en cascada
0 recomendaciones93 vistas
CSS (Hoja de Estilo en Cascada) es un lenguaje que permite definir la presentación visual de páginas web mediante propiedades como color, tipo de letra y formato. Existen diferentes formas de incluir CSS en una página, como de forma inline, en la cabecera o en un archivo externo para aplicar los estilos a múltiples páginas. Las propiedades de CSS permiten heredar y priorizar estilos para elementos, clases y IDs.
CSS Hoja de estilo en cascada
- 1. CSS Hoja de Estilo en Cascada Prof. Ramiro Estigarribia ramiroec@gmail.com Link a la presentación
- 2. Es un lenguaje para definir la presentación visual del sitio web. Permite a los desarrolladores controlar el estilo y el formato de múltiples páginas al mismo tiempo. En lugar de definir el tipo de Letra/Color para cada parte, permite hacer para todo el sitio. Tryit Editor v3.6 - My First CSS Example ¿Qué es CSS?
- 3. body { padding-left: 11em; font-family: arial; color: red; background-color: blue; } En este ejemplo se define el tipo de letra por defecto de una página: tamaño 11, arial, color rojo, fondo azul. Lista de colores: HTML Color Names Ejemplo de uso: estilo.css
- 4. 1. Estilo inline: Combinar código CSS con HTML. Se agrega la etiqueta <style> a las partes. 2. Estilo en la cabecera de la página: Se coloca en la cabecera utilizando la etiqueta <style type=text/css> 3. Separación real del código HTML y CSS: La etiqueta <link> sirve para informar que tenemos un código CSS3 en un fichero externo. Diferentes formas de incluir CSS
- 5. Se define con la propiedad style y es la forma más simple pero menos recomendada. El problema es que el código se repite muchas veces, en lugar de hacer asignaciones genéricas. 1.Estilo inline <h1 style=color:red;background-color:yellow> Este mensaje es de color rojo sobre fondo amarillo. </h1>
- 6. Permite definir estilos al inicio del código, que se aplican a las distintas marcas HTML de la página. 2.Estilo en la cabecera de la página. <style type=text/css> h1 {color:red} h2 {color:green} h3 {color:blue} </style> <h1>rojo</h1> <h2>verde</h2> <h3>azul</h3>
- 7. La ventaja es que podemos aplicar las mismas reglas a varias las páginas un sitio web. Al programador le resulta más ordenado tener código HTML y CSS separado. 3.CSS en archivo externo.
- 8. 3.CSS en archivo externo. Archivo: prueba.html <link rel=StyleSheet href=estilo.css> </head> <body> <h1>Estilo en archivo externo.</h1> <p>Un archivo separado.</p> </body> Archivo: estilo.css body { background-color:yellow; color:blue; font-family:arial; }
- 9. Cuando se establece CSS en un elemento, sus descendientes heredan de forma automática. ¿Cómo funciona la Herencia? <style type=text/css> body { color:blue; font-family:arial; } </style> <p>Texto de Prueba</p>
- 10. Si existen 2 reglas iguales, tiene prioridad la más específica. ¿Cómo es la prioridad en la Herencia? <style type=text/css> body { color:black; } h1 { color:red; } p { color:green; } </style> <body> <h1>Primero</h1> <p>Texto de Prueba</p> </body>
- 11. Es una regla CSS que puede ser utilizada muchas veces. ¿Qué son las Clases en CSS? Archivo: prueba.html <link rel=StyleSheet href=estilo.css> <body> <h1 class=resaltado>Titulo</h1> <p class=resaltado>Es un texto resaltado.</p> </body> Archivo: estilo.css .resaltado{ color:black; background-color:yellow; font-style:italic; }
- 12. En lugar de usar class, se puede definir un identificador: id Clase utilizando identificador: id Archivo: prueba.html <link rel=StyleSheet href=estilo.css> <div id="prueba"> <h1 class=resaltado>Titulo</h1> <p class=resaltado>Es un texto resaltado.</p> </div> Archivo: estilo.css #prueba{ color:black; background-color:yellow; }
- 13. Para aprender más sobre CSS un buen curso gratis es: Learn CSS | Sololearn Curso adicional recomendado.