CSS-40

+
CSS
MTI GABRIELA ERANDI RUIZ MORENO
CSS
Cascade Style Sheets
Hojas de Estilo en Cascada, son un
mecanismo simple que describe como
se va a presentar un documento.
Por qu trabajar con CSS?
La manera correcta de trabajar es separando

el contenido de cada pgina, del diseo de
la misma.
CSS: Caractersticas
nTipos:
n Internas: en
pginas html (en head)

n Externas: en hojas .css
nVentajas:
n Pginas
fcilmente modificables
n Varios estilos para una pgina
n Fcil consistencia de sitios web
CSS Desventajas
n
Si hay problemas de compatibilidades, el navegador

aplicar el formato predeterminado y nuestro trabajo de
composicin habr sido intil.
Algunas propiedades de las CSS pueden provocar que una

parte del contenido de nuestra pgina resulte inaccesible
desde algunos navegadores.
Soporte de CSS en los

navegadores
Elementos CSS
n
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 la caracterstica modificada en el

elemento.
CSS: Sintaxis
n Selector
propiedad1: valor1;
propiedad2: valor2;
}
n Selector
= elemento html
n Propiedad
= atributo que quieres cambiar
CSS: Sintaxis
Comentarios
n
El comienzo de un comentario se indica mediante los

caracteres /* y el final del comentario se indica mediante */,
tal y como se muestra en el siguiente ejemplo:
/* Este es un comentario en CSS */
Los comentarios pueden ocupar tantas lneas como sea

necesario, pero no se puede incluir un comentario dentro de
otro comentario:
/* Este es un
comentario CSS de varias
lineas */
Un archivo CSS puede contener un nmero

ilimitado de reglas CSS, cada regla se puede
aplicar a varios selectores diferentes y cada
declaracin puede incluir tantos pares
propiedad/valor como se desee.
+ CSS interno
n
Ejemplo de un CSS interno:

<head>
<style type="text/css"> <!
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/fondo.gif")}
--> </style>
</head>
+ EJEMPLO CSS
<html>
<head>
<title>Programacin Web</title>
<style type="text/css">
body {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
</style>
</head>
<body>
<h1>EJEMPLO CSS</h1>
<p>PROGRAMACIN WEB </p>
</body>
</html>
CSS externo
PASOS A SEGUIR:
1)
Crear un archivo de texto, agregar el estilo que se va a

aplicar:
Ejemplo:
body {
font-family: "Gill Sans", sans-serif;
font-size: 12pt;
margin: 3em;
}
p {
color: black; font-family: Verdana; }
2) Guardar el archivo de texto con el nombre estilos.css
CSS externo
3) En la pgina HTML enlazar el archivo CSS externo mediante
la etiqueta <link>, dentro de la etiqueta <head>:
<html>
<head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="estilos.css"
media="screen" />
</head>
<body>
</body>
</html>
CSS externo
n
La etiqueta <link> incluye cuatro atributos cuando enlaza un

archivo CSS:
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.
media: indica el medio en el que se van a aplicar los estilos del

archivo CSS.
CSS externo
Aunque generalmente se emplea la etiqueta <link> para enlazar los
archivos CSS externos, tambin se puede utilizar la etiqueta <style>.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css" media="screen">
@import 'estilos.css';
</style>
</head>
<body>
</body>
</html>

CSS-40

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

CSS-40

Diunggah oleh

Hak Cipta:

Format Tersedia

+

Por qu trabajar con CSS?

La manera correcta de trabajar es separando

pginas html (en head)

Si hay problemas de compatibilidades, el navegador

Algunas propiedades de las CSS pueden provocar que una

Soporte de CSS en los

Selector: indica el elemento o elementos HTML a los que se aplica la

Declaracin: especifica los estilos que se aplican a los elementos. Est

Propiedad: caracterstica que se modifica en el elemento seleccionado,

Valor: establece el nuevo valor de la caracterstica modificada en el

= atributo que quieres cambiar

El comienzo de un comentario se indica mediante los

/* Este es un comentario en CSS */

Los comentarios pueden ocupar tantas lneas como sea

comentario CSS de varias

Un archivo CSS puede contener un nmero

Ejemplo de un CSS interno:

Crear un archivo de texto, agregar el estilo que se va a

2) Guardar el archivo de texto con el nombre estilos.css

La etiqueta <link> incluye cuatro atributos cuando enlaza un

rel: indica el tipo de relacin que existe entre el recurso

type: indica el tipo de recurso enlazado.

media: indica el medio en el que se van a aplicar los estilos del

Anda mungkin juga menyukai