Unidad 02 Introducci N A CSS Parte 01

ELECTIVA PROFESIONAL I
DESARROLLO DE APLICACIONES WEB

INTRODUCCIN A CSS
La WEB el
imn de los
negocios
Agenda
Que es CSS
Historia CSS
Soporte de CSS en los navegadores
Justificacin 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 presentacin de los
documentos electrnicos definidos con HTML y
XHTML
Cascading
S
Style
S Sheets
Qu es CSS
HTML/XHTML para marcar los

contenidos, es decir, para designar la funcin de
cada elemento dentro de la pgina: prrafo, titular,
texto destacado, tabla, lista de elementos, etc.
El
lenguaje
El lenguaje CSS para definir el aspecto de

cada elemento: color, tamao y tipo de letra del
texto, separacin horizontal y vertical entre
elementos, posicin de cada elemento dentro de la
pgina, etc.
Historia de CSS
Fecha
Versin
1970
Caractersticas
Con la aparicin de SGML(Standard Generalized Markup
Language o "Estndar de Lenguaje de Marcado), surge la
necesidad de contar con un mecanismo que permitiera aplicar
de forma consistente diferentes estilos a los documentos
electrnicos
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 Hkon Wium Lie y SSP fue
propuesto por Bert Bos
19941995
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 estandarizacin de CSS

y lo aadi a su grupo de trabajo de HTML
1996
1997
CSS
nivel 1
El W3C public la primera recomendacin oficial, conocida

como "CSS nivel 1"
el W3C decide separar los trabajos del grupo de HTML en tres
secciones: el grupo de trabajo de HTML, el grupo de trabajo de
Historia de CSS
Fecha
Versin
Caractersticas
1998
CSS
nivel 2
El grupo de trabajo de CSS publica su segunda recomendacin

oficial, conocida como "CSS nivel 2".
CSS 2.1
Versin de CSS que utilizan todos los navegadores de hoy en

da
CSS
nivel 3
Soporte de CSS en los navegadores

Navegador
Motor
CSS 1
CSS 2.1
CSS 3
Completo
Todos los selectores,

pseudo-clases y
muchas propiedades
Trident
Completo desde la
versin 7.0 del
navegador
Completo

pseudo-clases y
muchas propiedades
a partir de la versin
10.0 del navegador
Firefox
Gecko
Completo desde la
versin 1.0 del
navegador
Completo

pseudo-clases y
muchas propiedades
Safari
WebKit
Completo desde la
versin 85 del motor
Completo

pseudo-clases y
muchas propiedades
Opera
Presto
Completo desde la
versin 1.0 del
navegador
Completo

pseudo-clases y
muchas propiedades
WebKit
Completo desde la
versin 85 del motor
Internet Explorer
Google Chrome

<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 alegras
</body>
</html>

<html>
<head>
<title>Segundo documento HTML</title>
</head>
<body style="color:#888866; background-color:#116600;
font-size:x-large;
font-family:Arial, helvetica">
</body>
</html>

<html>
<head>
<title>Sin CSS</title>
</head>
<body bgcolor="#550000" text="#ff00ff"
font face="Time New Roman" font size="4">

</body>
</html>
Si el sitio WEB consta de 50

pginas y cada pagina debe tener
el mismo diseo:
Cuntas veces se debe escribir
lo que esta en rojo, para obtener
que todas las paginas del sitio
mantengan el mismo diseo?
En un elemento
En el mismo documento
En archivo externo

<html>
<head>
<title>Pagina con CSS en pequeas partes</title>
</head>
<body>
Colombia es un pais de <span style="color:green;backgroundcolor:black">
contrastes </span> entre alegras y tristezas
</body>
</html>
En un elemento

<html>
<head>
<title> Pagina con CSS en etiqueta </title>
</head>
<body>
<p style="color:blue; background-color:yellow">
</p>
</body>
</html>
En un elemento

<html>
<head>
<title>Pagina con CSS en etiqueta</title>
</head>
<body style="background-color:#ff00ff">
<p style="color:blue; background-color:yellow">
</p>
</body>
</html>
En un elemento

<html>
<head>
<title>Pagina
con CSS en segmento</title>
</head>
<body>
<div style="color:cyan; background-color:yellow; fontweight">
<h1> La realidad de colombia </h1>
<p> Colombia es un pais de contrastes entre alegras y tristezas. Esto se ve
reflejado en que mientras unas regiones disfrutan de enormes fiestas, otras
viven pesadillas por el fenmeno de la violencia </p>
<p> Que hacer ante esta problemtica. La solucin 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

<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 prrafo de texto.
</p>
</body>
</html>
En el mismo
documento

estilos.css
p{
color: black;
font-family: Verdana;
}
<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 prrafo de texto.</p>
</body>
</html>
En un archivo
externo

estilos.css
p{
color: black;
font-family: Verdana;
}
<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 prrafo de texto.</p> </body>
</html>
En un archivo
externo
rel
indica el tipo de relacin que existe entre el recurso

enlazado (en este caso, el archivo CSS) y la pgina
HTML. Para los archivos CSS, siempre se utiliza el
valor stylesheet
type
indica el tipo de recurso enlazado. Sus valores estn

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

varias lneas */

Sintaxis
Regla: cada uno de los estilos que componen

una hoja de estilos CSS. Cada regla est
compuesta de una parte de "selectores", un
smbolo de "llave de apertura" ({), otra parte
denominada "declaracin" y por ltimo, un
smbolo de "llave de cierre" (}).
Selector: indica el elemento o elementos

HTML a los que se aplica la regla CSS.
Declaracin: especifica los estilos que se

aplican a los elementos. Est compuesta por
una o ms propiedades CSS.
Propiedad: caracterstica que se modifica en

el elemento seleccionado, como por ejemplo
su tamao de letra, su color de fondo, etc.
Valor: establece el nuevo valor de

caracterstica modificada en el elemento
la
Sintaxis
Anotacin:
Sintaxis
Unidades
Selectores
Selectores
Bsicos
UNIVERSAL
DE TIPO
ETIQUETA
Descripcin
Ejemplo
Se utiliza para aplicrselo a * {

todos los elementos de la
margin: 0;
pagina
padding: 0;
}
Se le aplican a todos los p {
elementos de la pgina
...
cuya etiqueta coincida con }
el valor del selector
h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial,
Helvetica,
sans-serif;
}
Selectores
Selectores
Bsicos
DESCENDEN
TE
Descripcin
Ejemplo
Se utiliza para dar estilo a p span {

todos los elementos que se
color: red;
encuentran dentro de otro }
elemento
p a span em {
text-decoration:
underline;
}
Selectores
Selectores
Bsicos
Descripcin
Ejemplo
Aplica
al
elemento .destacado {
referenciado por atributo
color: red;
class, el estilo definido en }
selector
de
clase
establecido en la archivo
CSS
<body>
DE CLASE
<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
Bsicos
Descripcin
Ejemplo
Aplica
al
elemento .destacado {
color: red;
class, el estilo definido en }
selector
de
clase
<body>
establecido en la archivo <p class="destacado">Lorem
CSS
ipsum dolor sit amet...
DE CLASE
</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
Bsicos
Descripcin
Aplica
al
elemento
class, el estilo definido en
selector
de
clase
establecido en la archivo
CSS
DE CLASE
Ejemplo
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
Bsicos
Descripcin
Ejemplo
Permite
seleccionar
un #destacado {
color: red;
elemento de la pgina a
}
travs del valor de su
atributo id
ID
<p>Primer prrafo</p>
<p
id="destacado">Segundo
prrafo</p>
<p>Tercer prrafo</p>
Selectores
Cul es la diferencia entre selectores de
clase y selectores id?
http://
www.desarrolloweb.com/faq/diferencia-selector-class-id-css.htm
l
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 estn dentro de cualquier elemento de tipo
"p" */
p .aviso { ... }
/* Todos los elementos "p" de la pgina y todos los
elementos con atributo class="aviso" de la pgina
*/
p, .aviso { ... }
Selectores
/* Todos los elementos de tipo "p" con

atributo id="aviso" */
p#aviso { ... }
/* Todos los elementos con atributo
id="aviso" que estn dentro de cualquier
elemento de tipo "p" */
p #aviso { ... }
/* Todos los elementos "p" de la pgina y
todos los elementos con atributo id="aviso"
de la pgina */ p, #aviso { ... }
Ejercicio 006
A partir del cdigo 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
DE HIJOS
Descripcin
Se
utiliza
para
seleccionar
un
elemento que es hijo
directo
de
otro
elemento y se indica
mediante el "signo de
mayor que" (>):
Ejemplo
p > span {
color: blue;
}
<p>
<span>Texto1</span>
</p>
<p>
<a
Href="#"><span>Texto2</span></a
>
</p>
Selectores
Selectores
avanzados
ADYACENTE
Descripcin
Se
emplea
para
seleccionar elementos
que en el cdigo HTML
de
la
pgina
se
encuentran
justo
a
continuacin de otros
elementos
Ejemplo
h2 { color: green; }
h1 + h2 { color: red }
<body>
<h1>Titulo1</h1>
<h2>Subttulo</h2> ...
<h2>Otro subttulo</h2> ...
</body>
p + p { text-indent: 1.5em; }
Selectores
Selectores
avanzados
Descripcin
permiten seleccionar elementos HTML en funcin de sus
atributos y/o valores de esos atributos.
DE 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
los enlaces que tengan un atributo "class", independientemente de
con valor. Este tipo de selector slo es til para los atributos de
tipo lang que indican el idioma del contenido del elemento.
/* Se muestran de color azul todos

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

Unidad 02 Introducci N A CSS Parte 01

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Unidad 02 Introducci N A CSS Parte 01

Transféré par

Droits d'auteur :

Formats disponibles

ELECTIVA PROFESIONAL I

DESARROLLO DE APLICACIONES WEB

CSS es un lenguaje de hojas de estilos creado

HTML/XHTML para marcar los

El lenguaje CSS para definir el aspecto de

Lie y Bos se unieron para definir un nuevo lenguaje que

W3C decidi apostar por el desarrollo y estandarizacin de CSS

El W3C public la primera recomendacin oficial, conocida

El grupo de trabajo de CSS publica su segunda recomendacin

Versin de CSS que utilizan todos los navegadores de hoy en

Soporte de CSS en los navegadores

Todos los selectores,

Todos los selectores,

Todos los selectores,

Todos los selectores,

Todos los selectores,

Justificacin del uso de CSS

font face="Time New Roman" font size="4">

Justificacin del uso de CSS

Justificacin del uso de CSS

font face="Time New Roman" font size="4">

Si el sitio WEB consta de 50

Incluir CSS en documentos HTML/XHTML

Incluir CSS en documentos HTML/XHTML

Incluir CSS en documentos HTML/XHTML

Incluir CSS en documentos HTML/XHTML

Incluir CSS en documentos HTML/XHTML

con CSS en segmento</title>

Incluir CSS en documentos HTML/XHTML

Incluir CSS en documentos HTML/XHTML

Incluir CSS en documentos HTML/XHTML

Incluir CSS en documentos HTML/XHTML

indica el tipo de relacin que existe entre el recurso

indica el tipo de recurso enlazado. Sus valores estn

indica la URL del archivo CSS que contiene los

indica el medio en el que se van a aplicar los estilos

/* Este es un comentario en CSS

<!-- Este es un comentario en

/* Este es un comentario CSS de

<!-- Este es un comentario HTML

Regla: cada uno de los estilos que componen

Selector: indica el elemento o elementos

Declaracin: especifica los estilos que se

Propiedad: caracterstica que se modifica en

Valor: establece el nuevo valor de

Se utiliza para aplicrselo a * {

Se utiliza para dar estilo a p span {

/* Todos los elementos de tipo "p" con atributo

/* Todos los elementos de tipo "p" con

A partir del cdigo HTML y CSS que se

/* Se muestran de color azul todos

Vous aimerez peut-être aussi