CSSNC

Ing.
Narcisa Crespo
CSS
Significado de la sigla CSS
tyle
heet
Ing. Narcisa Crespo
ascade
CSS es un lenguaje de hojas de estilos

creado para controlar el aspecto o
presentacin de los documentos
electrnicos definidos con HTML.
Ing. Narcisa Crespo
CSS
W3C
Es un consorcio internacional que
genera
recomendaciones
y estndares que aseguran el
crecimiento de la World Wide Web a
largo plazo.
Ing. Narcisa Crespo
HISTORIA DE CSS
Ing. Narcisa Crespo
CSS es un lenguaje cuya definicin ha sido

creada por el World Wide Web Consortium,
cuyas siglas son W3C. Se trata de un consorcio
internacional que produce especificaciones,
recomendaciones, manuales y herramientas en
relacin
al desarrollo de internet
.
Logotipo del Consorcio
WWW (World Wide Web
Consortium).
Las versiones de CSS a lo largo de la historia han sido:

CSS 1: publicada en 1996
CSS 2: publicada en 1998.
CSS 2.1: publicada en 2004.
CSS 4: se estima que pueda ser especificacin oficial en 2019.
Ing. Narcisa Crespo
VERSIONES
6
caracteristicas
La primera especificacin oficial de CSS, recomendada por la W3C

fue CSS1 , publicada en diciembre 1996. Incorporaba algunas de las
funcionalidades como:
Propiedades de las fuentes, como tipo, tamao y nfasis.
Color de texto, fondos, bordes u otros elementos.
Atributos del texto, como espaciado entre palabras, letras, lneas,
etctera.
Alineacin de textos, imgenes, tablas u otros.
Propiedades de caja, como margen, borde, relleno o espaciado.
Propiedades de identificacin y presentacin de listas.
A principios de 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.
VERSIONES
Ing. Narcisa Crespo
CSS 1: publicada en 1996
La especificacin CSS2 fue desarrollada por la W3C y publicada

como recomendacin en mayo de 1998. Como ampliacin de
CSS1, se ofrecieron, entre otras:
Las funcionalidades propias de las capas (<div>) como de
posicionamiento relativo/absoluto/fijo.
El concepto de "media types.
Soporte para las hojas de estilo auditivas
Texto bidireccional, sombras.
Ing. Narcisa Crespo
8
VERSIONES
La especificacin CSS 2.1 elimina

funcionalidades poco soportadas o
inoperables en los navegadores y aade
alguna nueva especificacin.
Fue candidata desde 2005 pero no fue
definitivamente aprobada hasta el 7 de
junio de 2011.
Ing. Narcisa Crespo
CSS 2.1: publicada en 2004
9
VERSIONES
CSS3, est dividida en varios documentos separados, llamados:

mdulos,
Selectores
Espacios de nombres" y "Color".
Algunos mdulos, como "Fondos y colores", "Consultas de
medios" o "Diseos multicolumna" estn en fase de
"candidatos".
Ing. Narcisa Crespo
10
VERSIONES
CARACTERISTICAS
presentacin de contenido.
Mayor
flexibilidad,
escalabilidad,
y
posibilidades en la presentacin de
contenidos web.
Dinamismo (junto a JScript y DOM) .
Correctamente utilizado reduce el peso de
las pginas.
Ing. Narcisa Crespo
Separar
11
FORMAS DE USO
En la Cabecera (<HEAD>)
Estilo como atributo

<P STYLE="text-align: right">Estilo propio</P>
Ing. Narcisa Crespo
<STYLE TYPE="text/css">
P {text-align:right}
</STYLE>
Hoja de estilo externa

<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
12
13
Ing. Narcisa Crespo
Estructura bsica de CSS
Los diferentes trminos se definen a continuacin:

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: permite modificar el aspecto de una caracterstica del elemento.
Valor: indica el nuevo valor de la caracterstica modificada en el elemento.
Ing. Narcisa Crespo
CSS define una serie de trminos que permiten describir cada una de las partes que
componen los estilos CSS. El siguiente esquema muestra las partes que forman un
estilo CSS muy bsico:
14
Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener
infinitos selectores y cada declaracin puede estar formada por un nmero
infinito de pares propiedad/valor.
Digamos que queremos un bonito color rojo como fondo de nuestra pgina
web:
Con CSS el mismo resultado puede lograrse as:

body {background-color: #FF0000;}
El cdigo usado es idntico para HTML y CSS. El ejemplo anterior muestra
adems el modelo CSS fundamental:
Ing. Narcisa Crespo
Usando HTML podramos haberlo conseguido as:

<body bgcolor="#FF0000">
15
Aplicando CSS a Documentos HTML

Podemos aplicar CSS a un documento HTML de tres maneras diferentes.
Mtodo 1: En lnea (el atributo style)
<html>
<head>
<title>Ejemplo</title>
</head>
<body style="background-color: #FF0000;">
<p>Esta es una pgina con fondo rojo</p>
</body>
</html>
Ing. Narcisa Crespo
Un modo de aplicar CSS a HTML es usando el atributo de HTML style.
16
Mtodo 2: Interno (la etiqueta style)

Otra forma es incluir el cdigo CSS usando la etiqueta HTML <style>.
<html>
head>
<title>practica1</title>
<style type="text/css">
P {text-align:right}
p { color:blue
</STYLE>
</style>
</head>
<body>
<body style="background-color: #FF0000;">
<p>Lorem ipsum dolor sit amet,Praesent blandit nibh at felis. Sed
nec diam in dolor vestibulum aliquet. Duis ullamcorper, nisi non
facilisis molestie, <em>lorem sem aliquam nullaid lacinia velit mi
vestibulum enim.</p>
</body>
</html>
<
Ing. Narcisa Crespo
17
Mtodo 3: Externo (enlace a una hoja de estilo)

El mtodo recomendado es enlazar con lo que se denomina hoja de estilo
externa. Una hoja de estilo externa es sencillamente un fichero de texto con la
extensin .css.
Como cualquier otro fichero, puedes colocar la hoja de estilo en el servidor
web o en el disco duro.
Consiste en crear un vnculo desde el documento HTML (por ejemplo,

index.htm) con la hoja de estilo (style.css). Dicho vnculo se puede crear con
una sencilla lnea de cdigo HTML:
<link rel="stylesheet" type="text/css" href="style/style.css" />
La etiqueta <LINK> le indica al navegador que debe buscar un documento
situado fuera de la pgina HTML.
El atributo rel="stylesheet" especifica que el documento en cuestin es una
hoja de estilo externa.
El atributo type="text/css" especifica el tipo de hoja de estilo.
El atributo href=" URL " muestra la URL de la hoja de estilo (su ubicacin en
Internet).
Ing. Narcisa Crespo
Por ejemplo, digamos que tu hoja de estilo se llama style.css y est localizada
en una carpeta que se llama estilos.
18
Ing. Narcisa Crespo
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
</style>
</head>
<body>
<p>Estudiantes quinto semestre</p>
<p>quedados</p>
</body>
</html>
19
Ing. Narcisa Crespo
Estudiantes quinto semestre

quedados
20
SELECTORES
Pseudo-Elementos
Pseudo-Clases
La etiqueta <div>
Ing. Narcisa Crespo
INVESTIGAR
21
Los selectores CSS
El selector de elemento
El selector de elementos selecciona elementos basados en el
nombre del elemento.
Puede seleccionar todos los elementos <p> en una pgina como esta
(en este caso, todos los elementos <p> estarn alineados-centro,
con un color rojo texto):
p{
text-align: center;
color: red;
}
Ing. Narcisa Crespo
selectores CSS se utilizan para "encontrar" (o seleccionar)

elementos HTML en funcin de su nombre de elemento, de la
identificacin, clase, atributo, etc.
22
El selector de ID utiliza el atributo id de un elemento HTML

para seleccionar un elemento especfico.
La identificacin de un elemento debe ser nico dentro de una
pgina, por lo que el selector de ID se utiliza para seleccionar
un elemento nico!
Para seleccionar un elemento con un ID especfico, escribe un
carcter almohadilla (#), seguido por el id del elemento.
La regla de estilo a continuacin se aplica al elemento HTML
con id = "prrafo1":
Nota: Un nombre de ID no puede comenzar con un nmero!
Ing. Narcisa Crespo
El selector de ID
23
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
Ing. Narcisa Crespo
Ejemplo
<p id="para1">Quinto semestre</p>

<p>Universidad Tcnica de Babahoyo</p>
</body>
</html>
24
25
Ing. Narcisa Crespo
El selector de clase selecciona los elementos con un atributo de

clase especfica.
Para seleccionar elementos con una clase especfica, escriba un
punto (.) Carcter, seguido del nombre de la clase.
.center {
text-align: center;
color: red;
}
Ing. Narcisa Crespo
El selector de clase
26
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
Ing. Narcisa Crespo
Ejemplo
<h1 class="center">Bienvenidos</h1>
<p class="center">Universidad Tnica de Babahoyo</p>
</body>
</html>
27
28
Ing. Narcisa Crespo
Tambin puede especificar que los elementos HTML especficos

solamente deben verse afectadas por una clase.
p.center {
text-align: center;
color: red;
}
Ing. Narcisa Crespo
En el siguiente ejemplo, solamente <p> elementos con class =

"centro" estarn alineados-centro:
29
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
Ing. Narcisa Crespo
Ejemplo
<h1 class="center">Hola</h1>
<p class="center">Quinto semestre</p>
</body>
</html>
30
31
Ing. Narcisa Crespo
Elementos HTML tambin puede referirse a ms de una clase.
Ejemplo
p.large {
font-size: 300%;
}
</style>
</head>
<body>
Ing. Narcisa Crespo
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
<p class="center">This paragraph will be red and center-aligned.</p>

<p class="center large">This paragraph will be red, center-aligned, and in a large font-size.</p>
</body>
</html>
32
Ing. Narcisa Crespo
Ejemplo
33
Si tiene elementos con las mismas definiciones de estilo, como este:

h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p{
text-align: center;
color: red;
}
Ing. Narcisa Crespo
La agrupacin de selectores
34
h1, h2, p {
text-align: center;
color: red;
}
Ing. Narcisa Crespo
Ser mejor al grupo de los selectores, para reducir al mnimo el

cdigo.
Para selectores de grupo, separar cada selector con una coma.
En el siguiente ejemplo, hemos agrupado los selectores del
cdigo anterior:
Ejemplo
35
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
Ing. Narcisa Crespo
Ejemplo
<h1>UTB</h1>
<h2>FAFI</h2>
<p>SISTEMAS.</p>
</body>
</html>
36
37
Ing. Narcisa Crespo
/* otro comentario */
</style>
</head>
<body>
Ing. Narcisa Crespo
Los comentarios se utilizan para explicar el cdigo, y pueden ayudar al editar el cdigo fuente
en una fecha posterior.
Los comentarios son ignorados por los navegadores.
Un comentario CSS comienza con / * y termina con * /.
Los comentarios tambin pueden abarcar varias lneas:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
/* Codigo de parrafo */
text-align: center;
}
<p>UTB</p>
<p>FAFI.</p>
<p>SISTEMAS</p>
</body>
</html>
38
39
Ing. Narcisa Crespo
Ejemplo de Hoja de estilos externa
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
Ing. Narcisa Crespo
Index.html
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
40
mystyle.css
h1 {
color: navy;
margin-left: 20px;
}
Nota: No agregue un espacio entre el valor de la propiedad y la
unidad (como margin-left: 20 px;).La forma correcta es:marginleft: 20px;
Ing. Narcisa Crespo
body {
background-color: lightblue;
}
41

CSSNC

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSSNC

Uploaded by

Copyright:

Available Formats

Ing.

Significado de la sigla CSS

Ing. Narcisa Crespo

CSS es un lenguaje de hojas de estilos

Ing. Narcisa Crespo

Ing. Narcisa Crespo

Ing. Narcisa Crespo

CSS es un lenguaje cuya definicin ha sido

Las versiones de CSS a lo largo de la historia han sido:

Ing. Narcisa Crespo

La primera especificacin oficial de CSS, recomendada por la W3C

Ing. Narcisa Crespo

CSS 1: publicada en 1996

La especificacin CSS2 fue desarrollada por la W3C y publicada

Ing. Narcisa Crespo

CSS 2: publicada en 1998.

La especificacin CSS 2.1 elimina

Ing. Narcisa Crespo

CSS 2.1: publicada en 2004

CSS3, est dividida en varios documentos separados, llamados:

Ing. Narcisa Crespo

CSS 3: publicada en 2011.

Ing. Narcisa Crespo

Estilo como atributo

Ing. Narcisa Crespo

Hoja de estilo externa

Ing. Narcisa Crespo

Estructura bsica de CSS

Los diferentes trminos se definen a continuacin:

Ing. Narcisa Crespo

Con CSS el mismo resultado puede lograrse as:

Ing. Narcisa Crespo

Usando HTML podramos haberlo conseguido as:

Aplicando CSS a Documentos HTML

Ing. Narcisa Crespo

Un modo de aplicar CSS a HTML es usando el atributo de HTML style.

Mtodo 2: Interno (la etiqueta style)

Ing. Narcisa Crespo

Mtodo 3: Externo (enlace a una hoja de estilo)

Consiste en crear un vnculo desde el documento HTML (por ejemplo,

Ing. Narcisa Crespo

Ing. Narcisa Crespo

Ing. Narcisa Crespo

Estudiantes quinto semestre

Ing. Narcisa Crespo

Los selectores CSS

Ing. Narcisa Crespo

selectores CSS se utilizan para "encontrar" (o seleccionar)

El selector de ID utiliza el atributo id de un elemento HTML

Ing. Narcisa Crespo

Ing. Narcisa Crespo

<p id="para1">Quinto semestre</p>

Ing. Narcisa Crespo

El selector de clase selecciona los elementos con un atributo de

Ing. Narcisa Crespo

Ing. Narcisa Crespo

Ing. Narcisa Crespo

Tambin puede especificar que los elementos HTML especficos

Ing. Narcisa Crespo

En el siguiente ejemplo, solamente <p> elementos con class =

Ing. Narcisa Crespo

Ing. Narcisa Crespo

Elementos HTML tambin puede referirse a ms de una clase.