Introducción a CSS
Joaquin Lara Sierra
Introducción a CSS por Joaquín Lara Sierra se encuentra bajo una Licencia Creative ...
Estructura
Los diferentes términos se definen a
continuación
• Regla: cada uno de los estilos que componen
una hoja de estilos CSS. C...
Los diferentes términos se definen a
continuación
• Declaración: especifica los estilos que se
aplican a los elementos. Es...
CSS Indirectas o dentro del
Documento HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.o...
Definir CSS en un archivo externo
Un archivo de tipo CSS no es más que un archivo simple de
texto cuya extensión es .css
l...
Etiqueta <Link>
Normalmente, la etiqueta <link> incluye cuatro atributos
cuando se enlaza un archivo CSS:
• rel: indica el...
Etiqueta <Link>
Normalmente, la etiqueta <link> incluye cuatro atributos
cuando se enlaza un archivo CSS:
• href: indica l...
Comentarios
/* Este es un comentario en CSS */
/* Este es un
comentario CSS de varias
líneas */
<!-- Este es un comentario...
Selectores básicos
* {
margin: 0;
padding: 0;
}
p {
...
}
Selector universal
Selector de tipo o etiqueta
Ejemplo
h1 {
color: red;
}
h2 {
color: blue;
}
p {
color: black;
}
Ejemplo
h1 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}
h2 {
color: #8A8E27;
font-w...
Ejemplo
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica,
sans-serif;
}
En este caso, CSS p...
Selector de clase
Si se considera el siguiente código HTML de
ejemplo:
<body>
<p>Texto de explicacion uno...</p>
<p>Texto ...
Aplicando CSS
<body>
<p class="destacado">Texto Texto Texto...</p>
<p> Texto Texto Texto...</p>
<p>Class Texto Texto Texto...
Crear Archivo CSS
A continuación, se crea en el archivo CSS una nueva regla
llamada destacado con todos los estilos que se...
Selectores de ID
El selector de ID permite seleccionar un elemento de la
página a través del valor de su atributo id. Este...
Ejemplos
#hdr {
background: url(/images/ds.gif)
repeat-x;
width: 100%;
text-align: center;
}
.wide #content-secondary {
width: 272px;
margin: 13px 0 0 0;
position: relative;
margin-left: -8px;
background: url(./grap...
Próxima SlideShare
Cargando en…5
×

Introducción a CSS

510 visualizaciones

Publicado el

Introducción a CSS

Publicado en: Educación
0 comentarios
0 recomendaciones
Estadísticas
Notas
  • Sé el primero en comentar

  • Sé el primero en recomendar esto

Sin descargas
Visualizaciones
Visualizaciones totales
510
En SlideShare
0
De insertados
0
Número de insertados
28
Acciones
Compartido
0
Descargas
19
Comentarios
0
Recomendaciones
0
Insertados 0
No insertados

No hay notas en la diapositiva.

Introducción a CSS

  1. 1. Introducción a CSS Joaquin Lara Sierra Introducción a CSS por Joaquín Lara Sierra se encuentra bajo una Licencia Creative Commons Atribución-NoComercial-CompartirIgual 2.5 Colombia. Basada en una obra enhttp://librosweb.es/css/pdf/introduccion_css.pdf. Permisos que vayan más allá de lo cubierto por esta licencia pueden encontrarse enhttp://librosweb.es/css/pdf/introduccion_css.pdf. Joaquín Lara Sierra Docente Facilitador
  2. 2. Estructura
  3. 3. Los diferentes términos se definen a continuación • Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla está compuesta de una parte de "selectores", un símbolo de "llave de apertura" ({), otra parte denominada "declaraciones" y por último, un símbolo de "llave de cierre" (}). • Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
  4. 4. Los diferentes términos se definen a continuación • Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS. • Propiedad: permite modificar el aspecto de una característica del elemento. • Valor: indica el nuevo valor de la característica modificada en el elemento
  5. 5. CSS Indirectas o dentro del Documento HTML <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de estilos CSS en el propio documento</title> <style type="text/css"> p { color: black; font-family: Verdana; } </style> </head> <body> <p>Un párrafo de texto.</p> </body> </html>
  6. 6. Definir CSS en un archivo externo Un archivo de tipo CSS no es más que un archivo simple de texto cuya extensión es .css las páginas HTML enlazan el archivo CSS, mediante la etiqueta <link>. Ejemplo. Archivo estilo.css tiene p { color: black; font-family: Verdana; } <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de estilos CSS en un archivo externo</title> <link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" /> </head>
  7. 7. Etiqueta <Link> Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS: • rel: indica el tipo de relación que tiene el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet • type: indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/css.
  8. 8. Etiqueta <Link> Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo CSS: • href: indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. • media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Más adelante se explican en detalle los medios CSS y su funcionamiento.
  9. 9. Comentarios /* Este es un comentario en CSS */ /* Este es un comentario CSS de varias líneas */ <!-- Este es un comentario en HTML --> <!-- Este es un comentario HTML de varias líneas --> CSS HTML
  10. 10. Selectores básicos * { margin: 0; padding: 0; } p { ... } Selector universal Selector de tipo o etiqueta
  11. 11. Ejemplo h1 { color: red; } h2 { color: blue; } p { color: black; }
  12. 12. Ejemplo h1 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h2 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } En el siguiente ejemplo, los títulos de sección h1, h2 y h3 comparten los mismos estilos:
  13. 13. Ejemplo h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; } En este caso, CSS permite agrupar todas las reglas individuales en una sola regla con un selector múltiple. Para ello, se incluyen todos los selectores separados por una coma (,) y el resultado es que la siguiente regla CSS es equivalente a las tres reglas anteriores:
  14. 14. Selector de clase Si se considera el siguiente código HTML de ejemplo: <body> <p>Texto de explicacion uno...</p> <p>Texto de explication dos…</p> <p>Texto de explicación tres …</p> </body>
  15. 15. Aplicando CSS <body> <p class="destacado">Texto Texto Texto...</p> <p> Texto Texto Texto...</p> <p>Class Texto Texto Texto...</p> </body>
  16. 16. Crear Archivo CSS A continuación, se crea en el archivo CSS una nueva regla llamada destacado con todos los estilos que se van a aplicar al elemento. Para que el navegador no confunda este selector con los otros tipos de selectores, se prefija el valor del atributo class con un punto (.) tal y como muestra el siguiente ejemplo: .destacado { color: red; }
  17. 17. Selectores de ID El selector de ID permite seleccionar un elemento de la página a través del valor de su atributo id. Este tipo de selectores sólo seleccionan un elemento de la página porque el valor del atributo id no se puede repetir en dos elementos diferentes de una misma página. #destacado { color: red; } <p>Primer párrafo</p> <p id="destacado">Segundo párrafo</p> <p>Tercer párrafo</p>
  18. 18. Ejemplos #hdr { background: url(/images/ds.gif) repeat-x; width: 100%; text-align: center; }
  19. 19. .wide #content-secondary { width: 272px; margin: 13px 0 0 0; position: relative; margin-left: -8px; background: url(./graphics/wide/bg- content-secondary.gif) repeat-y; }

×