Diseñ web - unidad 3 css
Páginas: 24 (5935 palabras)
Publicado: 16 de noviembre de 2009
UNIDAD 3. CSS (Hojas de estilo en cascada)
3.3.1 Definición
CSS es un lenguaje de hojas de estilos que separa los contenidos y su presentación y es imprescindible para la creación de páginas web complejas. Si el lenguaje HTML se utiliza para marcar los contenidos, es decir, para designar lo que es un párrafo, lo que es un titular o lo que es una lista de elementos, el lenguaje CSS se utilizapara definir el aspecto de todos los contenidos, es decir, el color, tamaño y tipo de letra de los párrafos de texto, la separación entre titulares y párrafos, la tabulación con la que se muestran los elementos de una lista, etc.
3.3.2 Funcionamiento básico de CSS
Antes de la adopción de CSS, los diseñadores de páginas HTML debían definir el estilo y el aspecto de los elementos HTML en el propiodocumento.
<p> <font color="grey" face="Verdana" size="2"> Un párrafo de texto no muy largo </font></p>
El problema de esta forma de definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. Si el sitio web dispone de 10000 páginas diferentes, habríaque definir 500000 etiquetas <font>. Como cada etiqueta <font> tiene 3 atributos, habría que definir 1.5 millones de atributos.
La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
<style type="text/css">
p { color: grey; font-family: Verdana; font-size: medium; }
</style>
<p>Un párrafo de texto no muy largo.</p>
3.3.3Inclusión de CSS en documentos HTML
Dentro de un documento HTML
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> y solamente se pueden incluir en la cabecera del documento (<head>).
Ejemplo:
<html>
<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>
Como un archivo externo utilizando <link>
Todos los estilos CSS se pueden incluir en un archivo de tipo CSS que los documentos HTML enlazan mediante la etiqueta <link>. Se pueden crear todos los archivos CSS que sean necesarios y cada documento HTMLpuede enlazar tantos archivos CSS como necesite.
Ejemplo:
Archivo estilos.css
p { color: black; font-family: Verdana; }
Documento HTML
<html>
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen">
</head>
<body>
<p>Un párrafo de texto.</p>
</body></html>
* El atributo opcional MEDIA, especifica el medio en el que se verá la información: screen, braille, handheld, print, projection, etc.
* El atributo REL (REL=stylesheet) es para indicar que el enlace es con una hoja de estilos.
* El atributo opcional TYPE (text/css) es por que el archivo es de texto, en sintaxis CSS.
* HREF especifica la ubicación del archivo quecontiene los estilos.
Como un archivo externo utilizando <style>
Una hoja de estilo puede ser importada con la sentencia @import de CSS. Esta sentencia puede usarse en un archivo CSS o dentro del elemento STYLE:
<html>
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style></head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
De las 3 formas de aplicar CSS a los documentos HTML, esta es la más utilizada. La principal razón por la que es el método más utilizado es que es el más sencillo de mantener, ya que un solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todos los documentos HTML que...
3.3.1 Definición
CSS es un lenguaje de hojas de estilos que separa los contenidos y su presentación y es imprescindible para la creación de páginas web complejas. Si el lenguaje HTML se utiliza para marcar los contenidos, es decir, para designar lo que es un párrafo, lo que es un titular o lo que es una lista de elementos, el lenguaje CSS se utilizapara definir el aspecto de todos los contenidos, es decir, el color, tamaño y tipo de letra de los párrafos de texto, la separación entre titulares y párrafos, la tabulación con la que se muestran los elementos de una lista, etc.
3.3.2 Funcionamiento básico de CSS
Antes de la adopción de CSS, los diseñadores de páginas HTML debían definir el estilo y el aspecto de los elementos HTML en el propiodocumento.
<p> <font color="grey" face="Verdana" size="2"> Un párrafo de texto no muy largo </font></p>
El problema de esta forma de definir el aspecto de los elementos se puede ver claramente con el siguiente ejemplo: si la página tuviera 50 elementos diferentes, habría que insertar 50 etiquetas <font>. Si el sitio web dispone de 10000 páginas diferentes, habríaque definir 500000 etiquetas <font>. Como cada etiqueta <font> tiene 3 atributos, habría que definir 1.5 millones de atributos.
La solución que propone CSS es mucho mejor, como se puede ver en el siguiente ejemplo:
<style type="text/css">
p { color: grey; font-family: Verdana; font-size: medium; }
</style>
<p>Un párrafo de texto no muy largo.</p>
3.3.3Inclusión de CSS en documentos HTML
Dentro de un documento HTML
Los estilos se definen en una zona específica del propio documento HTML. Se emplea la etiqueta <style> y solamente se pueden incluir en la cabecera del documento (<head>).
Ejemplo:
<html>
<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>
Como un archivo externo utilizando <link>
Todos los estilos CSS se pueden incluir en un archivo de tipo CSS que los documentos HTML enlazan mediante la etiqueta <link>. Se pueden crear todos los archivos CSS que sean necesarios y cada documento HTMLpuede enlazar tantos archivos CSS como necesite.
Ejemplo:
Archivo estilos.css
p { color: black; font-family: Verdana; }
Documento HTML
<html>
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen">
</head>
<body>
<p>Un párrafo de texto.</p>
</body></html>
* El atributo opcional MEDIA, especifica el medio en el que se verá la información: screen, braille, handheld, print, projection, etc.
* El atributo REL (REL=stylesheet) es para indicar que el enlace es con una hoja de estilos.
* El atributo opcional TYPE (text/css) es por que el archivo es de texto, en sintaxis CSS.
* HREF especifica la ubicación del archivo quecontiene los estilos.
Como un archivo externo utilizando <style>
Una hoja de estilo puede ser importada con la sentencia @import de CSS. Esta sentencia puede usarse en un archivo CSS o dentro del elemento STYLE:
<html>
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style></head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
De las 3 formas de aplicar CSS a los documentos HTML, esta es la más utilizada. La principal razón por la que es el método más utilizado es que es el más sencillo de mantener, ya que un solo cambio en un solo archivo CSS permite variar de forma instantánea los estilos de todos los documentos HTML que...
Leer documento completo
Regístrate para leer el documento completo.