View
234
Download
0
Category
Preview:
DESCRIPTION
CSS3
Citation preview
La WEB el imán de los negocios
ELECTIVA PROFESIONAL I“DESARROLLO DE APLICACIONES WEB”
INTRODUCCIÓN A CSS
Agenda
Que es CSS Historia CSS Soporte de CSS en los navegadores Justificación del uso de CSS Incluir CSS en documentos HTML/XHTML Comentarios Sintaxis Selectores
¿Qué es CSS
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML
C Cascading S StyleS Sheets
¿Qué es CSS
El lenguaje HTML/XHTML para marcar los contenidos, es decir, para designar la función de cada elemento dentro de la página: párrafo, titular, texto destacado, tabla, lista de elementos, etc.
El lenguaje CSS para definir el aspecto de cada elemento: color, tamaño y tipo de letra del texto, separación horizontal y vertical entre elementos, posición de cada elemento dentro de la página, etc.
Historia de CSS
Fecha Versión Características
1970 Con la aparición de SGML(Standard Generalized Markup Language o "Estándar de Lenguaje de Marcado), surge la necesidad de contar con un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos electrónicos
Las propuestas iniciales sobre CSS, que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal).
La propuesta CHSS fue realizada por Håkon Wium Lie y SSP fue propuesto por Bert Bos
1994-1995
Lie y Bos se unieron para definir un nuevo lenguaje que tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets).
1995 W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de HTML
1996 CSS nivel 1
El W3C publicó la primera recomendación oficial, conocida como "CSS nivel 1"
1997 el W3C decide separar los trabajos del grupo de HTML en tres secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y el grupo de trabajo de CSS
Historia de CSS
Fecha Versión Características
1998 CSS nivel 2
El grupo de trabajo de CSS publica su segunda recomendación oficial, conocida como "CSS nivel 2".
CSS 2.1 Versión de CSS que utilizan todos los navegadores de hoy en día
CSS nivel 3
Soporte de CSS en los navegadores
Navegador Motor CSS 1 CSS 2.1 CSS 3
Google Chrome WebKit Completo desde la versión 85 del motor
CompletoTodos los selectores, pseudo-clases y muchas propiedades
Internet Explorer TridentCompleto desde la versión 7.0 del navegador
Completo
Todos los selectores, pseudo-clases y muchas propiedades a partir de la versión 10.0 del navegador
Firefox GeckoCompleto desde la versión 1.0 del navegador
CompletoTodos los selectores, pseudo-clases y muchas propiedades
Safari WebKit Completo desde la versión 85 del motor
CompletoTodos los selectores, pseudo-clases y muchas propiedades
Opera PrestoCompleto desde la versión 1.0 del navegador
CompletoTodos los selectores, pseudo-clases y muchas propiedades
Justificación del uso de CSS
<html> <head>
<title>Sin CSS</title></head>
<body bgcolor="#550000" text="#ff00ff" font face="Time New Roman" font size="4">
Colombia es un pais lleno de alegrías</body>
</html>
Justificación del uso de CSS
<html><head>
<title>Segundo documento HTML</title></head><body style="color:#888866; background-color:#116600; font-size:x-large;
font-family:Arial, helvetica">Colombia es un pais lleno de alegrías
</body></html>
Justificación del uso de CSS
<html> <head>
<title>Sin CSS</title></head>
<body bgcolor="#550000" text="#ff00ff" font face="Time New Roman" font size="4">
Colombia es un pais lleno de alegrías</body>
</html>
Si el sitio WEB consta de 50 páginas y cada pagina debe tener el mismo diseño:
¿Cuántas veces se debe escribir lo que esta en rojo, para obtener que todas las paginas del sitio mantengan el mismo diseño?
Incluir CSS en documentos HTML/XHTML
En un elemento
En el mismo documento
En archivo externo
Incluir CSS en documentos HTML/XHTML
<html><head>
<title>Pagina con CSS en pequeñas partes</title></head> <body>
Colombia es un pais de <span style="color:green;background-color:black"> contrastes </span> entre alegrías y tristezas
</body></html>
En un elemento
Incluir CSS en documentos HTML/XHTML
<html>
<head>
<title> Pagina con CSS en etiqueta </title>
</head>
<body>
<p style="color:blue; background-color:yellow">
Colombia es un pais de <span style="color:green;background-color:black">
contrastes </span> entre alegrías y tristezas
</p>
</body>
</html>
En un elemento
Incluir CSS en documentos HTML/XHTML
<html>
<head>
<title>Pagina con CSS en etiqueta</title>
</head>
<body style="background-color:#ff00ff">
<p style="color:blue; background-color:yellow">
Colombia es un pais de <span style="color:green;background-color:black">
contrastes </span> entre alegrías y tristezas
</p>
</body>
</html>
En un elemento
Incluir CSS en documentos HTML/XHTML
<html>
<head>
<title>Pagina con CSS en segmento</title>
</head>
<body>
<div style="color:cyan; background-color:yellow; font-weight">
<h1> La realidad de colombia </h1>
<p> Colombia es un pais de contrastes entre alegrías y tristezas. Esto se ve reflejado en que mientras unas regiones disfrutan de enormes fiestas, otras viven pesadillas por el fenómeno de la violencia </p>
<p> ¿Que hacer ante esta problemática. ¿La solución está entre los humanos y la misma es tan facil, sencilla y obvia, que no la queremos ver. </p>
</div>
</body>
</html>
En un elemento
Incluir CSS en documentos HTML/XHTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
En el mismo documento
Incluir CSS en documentos HTML/XHTML
<html>
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="estilos.css" media="screen" />
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
En un archivo externo
p {color: black; font-family: Verdana;
}
estilos.css
Incluir CSS en documentos HTML/XHTML
<html >
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import 'estilos.css';
</style>
</head>
<body> <p>Un párrafo de texto.</p> </body>
</html> En un archivo externo
p {color: black; font-family: Verdana;
}
estilos.css
Incluir CSS en documentos HTML/XHTML
rel
indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet
typeindica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre es text/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.
Comentarios
CSS HTML
/* Este es un comentario en CSS */
<!-- Este es un comentario en HTML -->
/* Este es un comentario CSS de varias líneas */
<!-- Este es un comentario HTML de varias líneas -->
Sintaxis
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 "declaración" 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.
Declaración: especifica los estilos que se aplican a los elementos. Está compuesta por una o más propiedades CSS.
Propiedad: característica que se modifica en el elemento seleccionado, como por ejemplo su tamaño de letra, su color de fondo, etc.
Valor: establece el nuevo valor de la característica modificada en el elemento
Sintaxis
Anotación:
Sintaxis
Unidades
Selectores
Selectores Básicos
Descripción Ejemplo
UNIVERSAL
Se utiliza para aplicárselo a todos los elementos de la pagina
* { margin: 0; padding: 0; }
DE TIPO ETIQUETA
Se le aplican a todos los elementos de la página cuya etiqueta coincida con el valor del selector
p { ... }
h1, h2, h3 { color: #8A8E27; font-weight: normal; font-family: Arial, Helvetica, sans-serif; }
Selectores
Selectores Básicos
Descripción Ejemplo
DESCENDENTE
Se utiliza para dar estilo a todos los elementos que se encuentran dentro de otro elemento
p span { color: red; }
p a span em { text-decoration: underline; }
Selectores
Selectores Básicos
Descripción Ejemplo
DE CLASE
Aplica al elemento referenciado por atributo class, el estilo definido en selector de clase establecido en la archivo CSS
.destacado { color: red; }
<body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et est adipiscing accumsan...</p> <p>Class aptent taciti sociosqu ad litora...</p> </body>
Selectores
Selectores Básicos
Descripción Ejemplo
DE CLASE
Aplica al elemento referenciado por atributo class, el estilo definido en selector de clase establecido en la archivo CSS
.destacado { color: red; }
<body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p> <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p> </body>
Selectores
Selectores
Selectores Básicos
Descripción Ejemplo
DE CLASE
Aplica al elemento referenciado por atributo class, el estilo definido en selector de clase establecido en la archivo CSS
p.destacado { color: red; }
<body> <p class="destacado">Lorem ipsum dolor sit amet...</p> <p>Nunc sed lacus et <a href="#" class="destacado">est adipiscing</a> accumsan...</p> <p>Class aptent taciti <em class="destacado">sociosqu ad</em> litora...</p> </body>
Selectores
Selectores
Selectores Básicos
Descripción Ejemplo
ID
Permite seleccionar un elemento de la página a través del valor de su atributo id
#destacado { color: red; }
<p>Primer párrafo</p>
<p id="destacado">Segundo párrafo</p>
<p>Tercer párrafo</p>
Selectores
¿Cuál es la diferencia entre selectores de clase y selectores id?
http://www.desarrolloweb.com/faq/diferencia-selector-class-id-css.html
http://www.chuidiang.com/css/sintaxis-css.php
Selectores
/* Todos los elementos de tipo "p" con atributo class="aviso" */
p.aviso { ... } /* Todos los elementos con atributo
class="aviso" que estén dentro de cualquier elemento de tipo "p" */
p .aviso { ... } /* Todos los elementos "p" de la página y todos
los elementos con atributo class="aviso" de la página */
p, .aviso { ... }
Selectores
/* Todos los elementos de tipo "p" con atributo id="aviso" */
p#aviso { ... } /* Todos los elementos con atributo
id="aviso" que estén dentro de cualquier elemento de tipo "p" */
p #aviso { ... } /* Todos los elementos "p" de la página y
todos los elementos con atributo id="aviso" de la página */ p, #aviso { ... }
Ejercicio 006
A partir del código HTML y CSS que se encuentra en el archivo de texto ejercicio006, agregar los selectores CSS que faltan para aplicar los estilos deseados. Cada regla CSS incluye un comentario en el que se explica los elementos a los que debe aplicarse
Selectores
Selectores avanzados
Descripción Ejemplo
DE HIJOS
Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el "signo de mayor que" (>):
p > span { color: blue; }
<p><span>Texto1</span></p>
<p><a Href="#"><span>Texto2</span></a></p>
Selectores
Selectores avanzados
Descripción Ejemplo
ADYACENTE
Se emplea para seleccionar elementos que en el código HTML de la página se encuentran justo a continuación de otros elementos
h2 { color: green; } h1 + h2 { color: red }
<body> <h1>Titulo1</h1><h2>Subtítulo</h2> ... <h2>Otro subtítulo</h2> ... </body>
p + p { text-indent: 1.5em; }
Selectores
Selectores avanzados
Descripción
DE ATRIBUTOS
permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos.
• [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor.
• [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor.
• [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor.
• [nombre_atributo|=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y cuyo valor es una serie de palabras separadas con guiones, pero que comienza con valor. Este tipo de selector sólo es útil para los atributos de tipo lang que indican el idioma del contenido del elemento.
/* Se muestran de color azul todos los enlaces que tengan un atributo "class", independientemente de su valor */
a[class] { color: blue; } /* Se muestran de color azul todos los enlaces que tengan un atributo "class" con el valor "externo" */
a[class="externo"] { color: blue; } /* Se muestran de color azul todos los enlaces que apunten al sitio "http://www.ejemplo.com" */
a[href="http://www.ejemplo.com"] { color: blue; } /* Se muestran de color azul todos los enlaces que tengan un atributo "class" en el que al menos uno de sus valores sea "externo" */
a[class~="externo"] { color: blue; }
Recommended