06 Introduccion a CSS
1 recomendación460 vistas
Este documento presenta una introducción a CSS (Hoja de Estilos en Cascada), incluyendo sus beneficios, sintaxis básica, y diferentes formas de aplicar estilos CSS a documentos HTML. Explica conceptos clave como selectores, pseudoclases, pseudoelementos y las reglas de prioridad de CSS. Finalmente, introduce el modelo de caja CSS, que permite diseñar layouts maquetando elementos HTML como cajas con propiedades como borde, padding, margen y altura/ancho.
![SELECTORES ELEMENTO
Es posible definir mayor grado de precisión en la relación de
elementos
div + span{propiedad:valor;}
Todos los elementos span precedidos del elemento div
a[href="index.html"]{propiedad:valor;}
todos los elementos a con atributo href con valor " index.html "](https://image.slidesharecdn.com/06introduccioncss-100901142813-phpapp01/85/06-Introduccion-a-CSS-20-320.jpg)
06 Introduccion a CSS
- 1. MAESTRÍA EN MEDIOS INTERACTIVOS Curso Propedéutico 2010
- 2. INTRODUCCIÓN A CSS 06
- 3. CONTENIDO • Qué es CSS • Beneficios • Sintaxis básica • Cómo aplicar CSS a documentos HTML • Las reglas de las reglas • El modelo de caja
- 4. ¿QUÉ ES CSS? • CSS(Cascading Style Sheets) es el estándar de la W3C para la definición de la capa presentación de documentos HTML.
- 5. BENEFICIOS DE CSS • Mejor control del diseño (color, tipografía, layout, imágenes) • Menos trabajo!!! • Documentos HTML menos extensos • Descargas más rápidas en navegadores • Mayor accesabilidad • Mayor compatibilidad con navegadores
- 6. BENEFICIOS DE CSS • Peeeero..., esto no es CSS:
- 7. SINTAXIS CSS • La sintaxis básica de CSS es definida por una regla. Una regla CSS consiste en un selector y una o más declaraciones. Cada declaración consta de una propiedad y un valor. • Cada declaración siempre termina con ;. El conjunto de declaraciones está rodeado por signos { y }. La propiedad y valor se separa por : Elemento HTML selector{propiedad:valor;} regla declaración ejemplo: div{border:solid;}
- 8. SINTAXIS CSS selector selector{propiedad1:valor; propiedad2:valor; propiedad3:valor;} regla declaraciones ejemplo: div{border:solid; background-color:#000; width:auto;}
- 9. SINTAXIS CSS • Lo mismo, pero más legible... (los espacios en blanco no se interpretan como código) selector selector{ propiedad1:valor; propiedad2:valor; propiedad3:valor;} regla declaraciones
- 10. SINTAXIS CSS • Lo mismo, pero mejor no lo hagan..., no hay que abusar! selector selector { propiedad1: valor; propiedad2: valor; propiedad3: valor; } regla declaraciones
- 11. SINTAXIS CSS • Lo mismo, pero más legible y además combate el Alzheimer... selector comentario /* Es buena práctica hacer comentarios */ selector{ propiedad1:valor; propiedad2:valor; propiedad3:valor;} regla declaraciones
- 12. CÓMO APLICAR CSS A HTML Existen tres formas de aplicar CSS a documentos HTML: • Estilo externo: Consiste en un documento independiente con una extensión .css. El archivo CSS puede ser aplicado a uno o más documentos HTML. Es el método más recomendado por W3C. • Estilo interno: La definición de reglas CSS se realiza en el mismo documento HTML. Las reglas sólo aplican en el documento en el que están definidas. Es útil para páginas sencillas, no para un sitio completo. • Estilo en línea: Es posible definir estilos aplicando el atributo style en los elementos HTML. Solo aplican en el elemento específico. No es recomendable su uso. Sólo no lo hagan !!!
- 13. SINTAXIS ESTILO EXTERNO Para aplicar una hoja de estilos CSS (archivo .css) a un documento HTML debe crearse un elemento link dentro del elemento head: elemento vacío relación del enlace tipo de enlace <link href="miestilo.css" rel="stylesheet" type="text/css" /> atributo href Define la ruta al archivo .css Buenas prácticas: Crear una carpeta “css” para hojas de estilo. El atributo href sería: href="css/miestilo.css" Definir estilos específicos de acuerdo al dispositivo de salida con el atributo media. Es posible definir screen, print, handheld entre otros.
- 14. SINTAXIS ESTILO INTERNO Para aplicar estilos CSS a un documento HTML debe crearse un elemento style dentro del elemento head: elemento <style type="text/css"> /* estilos aqui */ </style>
- 15. SINTAXIS ESTILO EN LÍNEA Para aplicar estilo CSS a un elemento HTML debe crearse un atributo style dentro del elemento específico: p, div, etc... <elemento style="propiedad1:valor; propiedad2:valor;"> atributo style Buenas prácticas: Insisto, no lo hagan, sólo no lo hagan
- 16. TIPOS DE SELECTORES CSS permite definir varios tipos de selectores: • Todos los elementos o todos los elementos dentro de un elemento específico • Elemento HTML • Elemento con atributo class • Elemento con atributo id • Elemento anidado en otro elemento • Elemento hijo directo de otro elemento • Elemento precedido de otro elemento específico • Elementos con el mismo atributo class • Elementos con el mismo atributo id • Elemento con un atributo específico • Elemento con un atributo y valor específico • Pseudo-selectores y pseudo-clases
- 17. SELECTORES ELEMENTO Cualquier elemento HTML puede ser definido como selector, siempre y cuando sus declaraciones tengan propiedades válidas para ese elemento. body{propiedad:valor;} p{propiedad:valor;} a{propiedad:valor;}
- 18. SELECTORES ELEMENTO Se pueden agrupar varios o todos los elementos en una misma definición de regla, siempre y cuando los elementos coincidan en la validez de las declaraciones. body, p, a{propiedad:valor;} grupo de elementos *{propiedad:valor;} todos los elementos
- 19. SELECTORES ELEMENTO Es posible definir mayor grado de precisión en la relación de elementos div *{propiedad:valor;} p *{propiedad:valor;} Todos los elementos dentro del elemento específico p > span{propiedad:valor;} div > a{propiedad:valor;} todos los elementos span dentro de un elemento p todos los elementos a dentro de un elemento div
- 20. SELECTORES ELEMENTO Es posible definir mayor grado de precisión en la relación de elementos div + span{propiedad:valor;} Todos los elementos span precedidos del elemento div a[href="index.html"]{propiedad:valor;} todos los elementos a con atributo href con valor " index.html "
- 21. SELECTORES CLASS No siempre es deseable que todos los elementos de un documento HTML tengan la misma apariencia. Para eso Dios creó las clases. Recordando, una clase es un nombre que se le asigna a un conjunto de elementos HTML (del mismo tipo o no) por medio del atributo class. Gracias a las clases es posible asignar propiedades a un cierto grupo de elementos del mismo tipo, es decir, de la misma clase.
- 22. SELECTORES CLASS CSS define a las clases con el signo . p.left{propiedad:valor;} Todos los elementos p con clase left div.top{propiedad:valor;} Todos los elementos div con clase top .blue{propiedad:valor;} Todos elementos con clase blue, se omite el tipo de elemento los elementos pueden ser div, span, body, etc.
- 23. SELECTORES ID No todos los elementos pueden agruparse, siempre existirán elementos únicos y exclusivos. Para eso Dios creó los id. Recordando, un identificador es un nombre que se le asigna a un elemento HTML específico por medio del atributo id. Este id debe ser único en toda el documento. Gracias a los identificadores es posible asignar propiedades a un elemento en particular.
- 24. PSEUDOCLASES Y PESUDOELEMENTOS Existen dos tipos especiales de selectores, llamados pseudoselectores: Las pseudoclases son un tipo especial de clase definidas por CSS, los más comunes son los aplicados a elementos a y a elementos de formulario. CSS define a las pseudoclases por el signo : Los pseudoelementos son un tipo especial de clase que describe elementos particulares del texto. CSS define a los pseudoelementos por el signo :
- 25. PSEUDOCLASES Y PESUDOELEMENTOS Las pseudoclases para elementos a son: :link Enlace que no ha sido visitado :visited Enlace ya visitado :hover Movimiento del mouse sobre el enlace :active Enlace activo, click del mouse No olvidar el orden de declaración, LoVe, HA!
- 26. PSEUDOCLASES Y PESUDOELEMENTOS /* definir las declaraciones comunes */ a{propiedad:valor;} /* definir pseudoclases */ a:link {propiedad:valor;} a:visited {propiedad:valor;} a:hover {propiedad:valor;} a:active {propiedad:valor;}
- 27. PSEUDOCLASES Y PESUDOELEMENTOS Los pseudoelementos para texto son: :first-line Primera línea de texto :first-letter Primer caracter del texto :before define contenido antes del texto :after define contenido después del texto :first-child define estilo para el primer elemento hijo
- 28. PSEUDOCLASES Y PESUDOELEMENTOS /* definir las declaraciones comunes */ p{propiedad:valor;} /* definir pseudoclases */ p:first-letter {propiedad:valor;} p:first-line {propiedad:valor;}
- 29. LAS REGLAS DE LAS REGLAS Las hojas de estilo en cascada deben su nombre a que pueden usarse unas sobre otras para sumar reglas y aplicarlas todas a un mismo documento o elemento. Sin embargo, esto puede llevar a un conflicto existencial: Si hay dos reglas para un mismo selector o documento... ¿Cuál de ellas debe ser interpretada? Para resolver esta encrucijada, CSS tiene reglas de oro que imperan en todas las reglas: herencia • cascada • especificidad • orden de las reglas • modelo de caja Estos conceptos son de suma importancia, sin embargo su comprensión no es muy clara al iniciar el aprendizaje de CSS. La práctica y los errores permiten entender y valorar estos principios.
- 30. MODELO DE CAJA Todos los elementos HTML pueden ser interpretados en CSS como una “caja”, gracias a las propiedades de este modelo es posible definir layouts para maquetar los documentos HTML elemento HTML área visible margin border height padding width
- 31. Siguiente sesión: 07. INTRODUCCIÓN A JS