38
La WEB el imán de los negocios ELECTIVA PROFESIONAL I “DESARROLLO DE APLICACIONES WEB” INTRODUCCIÓN A CSS

Unidad 02 Introducci n a CSS Parte 01

Embed Size (px)

DESCRIPTION

CSS3

Citation preview

Page 2: Unidad 02 Introducci n a CSS Parte 01

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

Page 3: Unidad 02 Introducci n a CSS Parte 01

¿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

Page 4: Unidad 02 Introducci n a CSS Parte 01

¿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.

Page 5: Unidad 02 Introducci n a CSS Parte 01

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

Page 6: Unidad 02 Introducci n a CSS Parte 01

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

Page 7: Unidad 02 Introducci n a CSS Parte 01

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

Page 8: Unidad 02 Introducci n a CSS Parte 01

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>

Page 9: Unidad 02 Introducci n a CSS Parte 01

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>

Page 10: Unidad 02 Introducci n a CSS Parte 01

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?

Page 11: Unidad 02 Introducci n a CSS Parte 01

Incluir CSS en documentos HTML/XHTML

En un elemento

En el mismo documento

En archivo externo

Page 12: Unidad 02 Introducci n a CSS Parte 01

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

Page 13: Unidad 02 Introducci n a CSS Parte 01

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

Page 14: Unidad 02 Introducci n a CSS Parte 01

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

Page 15: Unidad 02 Introducci n a CSS Parte 01

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

Page 16: Unidad 02 Introducci n a CSS Parte 01

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

Page 17: Unidad 02 Introducci n a CSS Parte 01

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

Page 18: Unidad 02 Introducci n a CSS Parte 01

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

Page 19: Unidad 02 Introducci n a CSS Parte 01

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.

Page 20: Unidad 02 Introducci n a CSS Parte 01

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

Page 21: Unidad 02 Introducci n a CSS Parte 01

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

Page 22: Unidad 02 Introducci n a CSS Parte 01

Sintaxis

Anotación:

Page 23: Unidad 02 Introducci n a CSS Parte 01

Sintaxis

Unidades

Page 24: Unidad 02 Introducci n a CSS Parte 01

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; }

Page 25: Unidad 02 Introducci n a CSS Parte 01

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; }

Page 26: Unidad 02 Introducci n a CSS Parte 01

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>

Page 27: Unidad 02 Introducci n a CSS Parte 01

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>

Page 28: Unidad 02 Introducci n a CSS Parte 01

Selectores

Page 29: Unidad 02 Introducci n a CSS Parte 01

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>

Page 30: Unidad 02 Introducci n a CSS Parte 01

Selectores

Page 31: Unidad 02 Introducci n a CSS Parte 01

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>

Page 33: Unidad 02 Introducci n a CSS Parte 01

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 { ... }

Page 34: Unidad 02 Introducci n a CSS Parte 01

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 { ... }

Page 35: Unidad 02 Introducci n a CSS Parte 01

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

Page 36: Unidad 02 Introducci n a CSS Parte 01

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>

Page 37: Unidad 02 Introducci n a CSS Parte 01

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; }

Page 38: Unidad 02 Introducci n a CSS Parte 01

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; }