02 introduccion-css
TRANSCRIPT
ESTILOS CSS
INTRODUCCION CSS
Para poder utilizar CSS es necesario tener conocimientos básicosde HTML o XHTML
• CSS significa Hojas de Estilo en Cascada (Cascading Style Sheets)• Los estilos definen cómo se muestran los elementos HTML• Las Hojas de Estilo externas se guardan en archivos CSS y ayudan a ahorrar tiempo y trabajo
INTRODUCCION CSS
Los estilos resolvieron un GRAN problema de desarrollo• HTML no pretendía dar formato a un documento, sino que fue diseñado para definir el contenido de un documento:
<h1>Este es un encabezado</h1><p>Este es un párrafo</p>
• La pesadilla comenzó cuando etiquetas como <font> y atributos para colores fueron agregados a la especificaciónHTML 3.2• World Wide Web Consortium (W3C) creó CSS
INTRODUCCION CSS
A partir de la especificación HTML 4.0 la definición del formato de un documento puede estar aparte en un archivo CSS
• Actualmente todos los navegadores Web soportan CSS
• CSS permite cambiar la apariencia y diseño de todo un sitio web con sólo modificar un archivo de estilos
SINTAXIS CSS
Una regla CSS consta de dos partes: selector y declaraciones
• Un selector es normalmente el elemento HTML al que se lequiere aplicar un estilo
• Una declaración consiste en un par propiedad:valor, termina con punto y coma (;) y se agrupan con llaves { }
SINTAXIS CSS
Se pueden introducir comentarios en un archivo CSS• /* Este es un comentario CSS */
• Los comentarios son útiles para explicar el código y sonignorados por los navegadores
• CSS permite definir selectores personalizados llamadosidentificadores y clases
SINTAXIS CSS
El identificador es usado para definir el estilo de un solo y único elemento
• El identificador usa el atributo “id” de un elemento HTML y en CSS se define con el símbolo #
• NO utilizar números al inicio del nombre de un identificador
SINTAXIS CSS
• Una clase es utilizada para definir los estilos de un grupo deElementos
• Una clase usa el atributo “class” de un elemento HTML y en CSS se define con el símbolo .
SINTAXIS CSS
• También es posible especificar que ciertos elementos seanmodificados por una clase en particular
• NO utilizar números al inicio del nombre de una clase
DEFINICIÓN DE ESTILOS CSS
• Existen tres formas para definir estilos
• Hoja de estilo externa (archivo .css)
• Estilos internos
• Estilos en línea
• Los navegadores web aplican el formato a un documento HTML de acuerdo a los estilos
DEFINICIÓN DE ESTILOS CSS
• Una hoja de estilo externa es ideal cuando los mismos estilos son aplicados a diferentes documentos HTML
• Con una hoja de estilo externa se puede cambiar el diseño y formato de todo un sitio web
• Se utiliza el elemento “link” para incluir una hoja de estilo
DEFINICIÓN DE ESTILOS CSS
• Los estilos internos son utilizados cuando un solo documento contiene estilos únicos
• Los estilos internos se definen en la sección <head> utilizando la etiqueta “style”
DEFINICIÓN DE ESTILOS CSS
• Los estilos en línea se utilizan principalmente cuando se desea redefinir el formato de algún elemento en particular
• Se utiliza el atributo “style” de un elemento HTML
MÚLTIPLES ESTILOS
• Si algunas propiedades son definidas más de una vez para unmismo selector, los valores serán heredados del estilo másEspecífico
• Múltiples estilos se combinan en cascada para formar uno solo
MÚLTIPLES ESTILOS
• Un documento HTML puede incluir varias hojas de estilo, definir estilos internos y utilizar estilos en línea
• Los estilos que se combinan en cascada siguen el siguiente orden de prioridad
1. Estilos por defecto del navegador web2. Hojas de estilo externas3. Estilos internos4. Estilos en línea
PROPIEDADES
• background-colorDefine el color de fondo de un elemento
• Un color se puede especificar de diferentes formas• Valor HEX - #00FF00• Valor RGB - rgb(0,255,0)• Nombre - green
PROPIEDADES
• background-imageDefine la imagen de fondo de un elemento
• Por omisión la imagen se repite hasta ocupar todo el espacio del elemento
PROPIEDADES
• colorEs usada para definir el color del texto
• text-alignSe utiliza para definir el alineamiento horizontal del texto• center, left, right, justify
PROPIEDADES
• font-familyEs usada para definir la fuente del texto
• Se pueden especificar varias fuentes como respaldo en caso de que el navegador no contenga alguna
• font-sizeEs usada para definir el tamaño del texto
