Css Introducción
-
Upload
universidad-intercontinental -
Category
Education
-
view
36 -
download
0
Transcript of Css Introducción
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]