Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS, Las reglas en una hoja de estilos se aplicarán según sus criterios:,…
CSS
CSS definición
CSS o Cascading Style Sheets es un lenguaje de hojas de estilo que sirve para describir la forma descibrir la forma en que se dibuja un documento escrito en lenguaje markup (HTML. XHTML, XML, ect)
-
Sintaxis
Una regla de CSS consiste en un sector y un bloque de declaración.
La declaración consta en propiedades y sus respectivos valores, separados por punto y coma.
Historia
1994: primera propuesta de Håkon Wium Lie
Trabajo con Tim Berners Lee en CERN
1996: En W3C, junto a Bert Boss desarrollan la primera recomendación CSS1
Reglas CSS internas • Se pueden insertar las reglas en el HTML. • Se escriben dentro de un elemento <style> que a su vez está dentro de la sección head. <head> <style> a{ color: #FF000; text-decoration: none; } </style> </head>
Inline “styles” • Aunque no se recomienda, se puede aplicar estilos a un elemento ocupando su atributo “Style”. <p style=“text-align: left;”>Hello World!</p>
-
-
Inserción Hay 4 fuentes de estilos en un HTML, donde la última tiene mayor prioridad: 1. Predeterminadas en el navegador 2. Archivo CSS externo 3. Reglas CSS internas 4. Inline “styles”
Predeterminadas en el navegador • Cada navegador interpreta los elementos del HTML y le aplica estilos predeterminados para ordenar y jerarquizar el contenido visualmente. <!DOCTYPE html> <html> <head> <title>Página HTML</title> </head> <body> <h1>Bienvenidos</h1> <p>¡Hola!</p> <a href=“http://www.google.com”>Google</a> </body> </html> Bienvenidos ¡Hola! Google HTML Navegador
Archivo CSS externo • Se puede crear una hoja de estilos con cualquier editor de texto. • Se debe guardar con la extensión .css . • Se inserta un elemento <link> dentro de la sección head . • Se especifica su ubicación con el valor del atributo href. <head> <link rel="stylesheet" type="text/css" href=”css/mystyle.css"> </head>
Historia • EL objetivo del HTML es entregar indicaciones sobre el contenido. • Sin embargo, la versión HTML 3.2 introdujo la posibilidad de agregar estilos visuales a la presentación del contenido (bgcolor, center, font, align, width...). • Esto generó soluciones de diseño pero problemas de mantención.
-
Se aplican estilos sobre elementos ocupando estos 3 tipos de selectores:
1.-element
-se puede seleccionar por el nombre del elemento.
-Todos los elementos indicados recibirán las mismas reglas.
2.-id
-El sector Id usa dicho atributo de un elemento HTML para asignar reglas.
-Deben ser únicos dentro de una página.
3.-class
-El selector class usa dicho atributo de un elemento HTML para asignar reglas.
-Puede haber más de uno en cada página.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
Orden de aparición Las últimas reglas reemplazarán las primeras. Todos los párrafos del HTML serán amarillos. p{ color: red; } p{ color: yellow; }
-
