HTML y CSS
HTML y CSS
Conceptos y Estructura
CSS3
• El lenguaje HTML está limitado a la hora de aplicarle forma
a un documento.
• Sus estructuras tienen poca flexibilidad a la hora de dar
forma al contenido mostrado.
• HTML se creó originariamente para uso científico y
posteriormente fue adoptado para el desarrollo web.
• Para "maquetar" se utilizan elementos HTML en un uso
diferente de su objetivo (tablas por ejemplo).
• Todos estos problemas dieron lugar al origen de CSS.
CSS3
PRINCIPALES CARACTERÍSTICAS
• Permite definir el estilo de cada elemento HTML de
manera exacta.
• Permite escalar tamaños en función del tamaño de la
pantalla.
• Aísla el contenido de la presentación.
• Permite incorporar cierta lógica a los estilos aplicados
(LESS y SASS).
• Permite crear plantillas de estilos que pueden importarse
en otros HTML.
CSS3
• Los estilos CSS deben darse de alta en un fichero acorde
para ello, no obstante:
• Pueden declararse dentro de un HTML mediante la
etiqueta <style>
• Pueden aplicarse directamente sobre un elemento
concreto en la propiedad "style".
• Lo correcto es llevar los estilos a un o unos ficheros css,
pero se permite añadir pequeños retoques directamente
sobre el HTML.
CSS3
• Cómo se define un estilo en css:
Declaración
Selector { propiedad: valor; ...}
Ejemplo:
H1 {color:#CC9900;}
CSS3
• Un selector es un identificador para saber sobre qué elemento
HTML debemos aplicar el estilo.
• Existen diferentes tipos de selectores.
• Se pueden crear jerarquías de estilos.
• Podemos definir estilos por defecto para los elementos HTML
estándar.
• Los estilos pueden sobre escribir a otro, el orden de sobreescritura
es el mismo en el que se cargan los ficheros css o se lee el fichero.
• Si queremos que un estilo prevalezca sobre el resto, podemos
indicarlo con !important
CSS3
• Tipos de selectores:
• De elemento HTML:
h1, table, div, span…
• De identificador
Todos los elementos HTML cuya propiedad "id"
tenga un determinado valor, tendrán ese estilo.
• De clase
Todos los elementos HTML cuya propiedad "class"
tenga un determinado valor tendrán ese estilo.
CSS3
• Normalmente se le aplica un estilo por defecto a
los elementos HTML para conformar una plantilla.
• La personalización definitiva se suele realizar
haciendo uso de la propiedad "class".
• No es recomendado usar el selector por id. Sólo
se recomienda cuando el componente, además de
estilo realiza alguna funcionalidad javascript.
CSS3
• CSS3 como mejora de CSS incorpora propiedades para una
mejor maquetación y decoración de los elementos.
• Se han añadido propiedades para aplicar efectos de
pintado.
• Se permiten realizar animaciones.
• Habilita el uso de lógica en los CSS.
• Ejemplo de dibujado HTML + CSS: Minion