CSS / CASCADING STYLE SHEETS

Arturo Apanco

¿Qué es un Estilo en Cascada?

Es la forma en la que aplicamos formato visual a los

elementos semánticos del HTML

Es muy versátil porque nos permite mantener por

separado ambos elementos sin entrar en conflictos

Permite paginas más ligeras y rápidas de cargar

Facilita el desempeño visual de los navegadores

¿Qué características tiene un CSS?

Esta escrito en formato de texto

Su aplicación es en forma de compilador

tradicional ( efecto en cascada)

Utiliza herencia (por default o especifica)

Crea hojas de estilo, selectores y reglas

Tipos de Aplicación de CSS

Externa Se crea la hoja de estilos en un

documento .css Se hacen los selectores y las reglas para

todo el sitio. Se vincula.Ventajas Desventajas

Tiempo de renderizado del navegador menor

Solamente se necesita un proceso previo de diseño

Carga única que permea a varios documentos o al sitio entero

Edición simplificada

Cambios de aplicación global

Tipos de Aplicación de CSS

Interna ( incrustada o embeded) Se crea dentro del documento HTML Se hacen los selectores y las reglas para

ese único documento. Se hace una declaración al principio del

HTML.Ventajas Desventajas

Fácil de controlar en sitio pequeños

Solamente se aplica a un documento

Es conveniente para ajustes rápidos

Aumenta tiempo de renderizado, ya que debe leer cada página

Edición simplificada Las reglas pueden colapsar

Cambios de aplicación local

Tipos de Aplicación de CSS

En línea( Inline) Se crea directamente en la parte semántica

del HTML Se aplica en ese momento a ese único

selector Se hace una declaración al principio de la

etiqueta. No se recomienda esta aplicación.

Ventajas Desventajas

Aplicación única Solamente se aplica a una línea

Algunos LMS utilizan esta forma de estilo

Aumenta tiempo de renderizado, ya que debe leer cada página

Edición simplificada Las reglas pueden colapsar fácilmente

Cambios de aplicación local Edición complicada

Estructura Básica de un SelectorSelector

Declaración

Regla o Bloque de Declaración

h1 {background: yellow;

color: red;}

Propiedad

Valor

Aplicación CSS

Selectores por nombre de etiqueta <h1> <p> Selectores por clase .class Selectores por id #id Selectores por contexto article.about p Seleccionando parte de un elemento p:first-line Selección basado en su estado a:link a:visited Selección basada en un atributo section[class]