02 introduccion-css

INTRODUCCION CSS
Para poder utilizar CSS es necesario
tener conocimientos básicos
de 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ón
HTML 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 le
quiere 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 son
ignorados por los navegadores
• CSS permite definir selectores personalizados llamados
identificadores 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 de
Elementos
• 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 sean
modificados 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

• 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

• 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”

• 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 un
mismo selector, los valores serán heredados del estilo más
Especí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 web
2. Hojas de estilo externas
3. Estilos internos
4. Estilos en línea

PROPIEDADES
• background-color
Define 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-image
Define la imagen de fondo de un elemento
• Por omisión la imagen se repite hasta ocupar todo el
espacio del elemento

PROPIEDADES
• color
Es usada para definir el color del texto
• text-align
Se utiliza para definir el alineamiento horizontal del texto
• center, left, right, justify

PROPIEDADES
• font-family
Es usada para definir la fuente del texto
• Se pueden especificar varias fuentes como respaldo en caso
de que el navegador no contenga alguna
• font-size
Es usada para definir el tamaño del texto

02 introduccion-css

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (10)

Similar a 02 introduccion-css

Similar a 02 introduccion-css (20)

Más de sinaibucio

Más de sinaibucio (17)

Último

Último (20)

02 introduccion-css

Notas del editor