Definición de CSS

2017
Definicin de CSS
TRES MTODOS DE INSERCIN DECSS EN UNA PGINA WEB
NELSON CARRILLO A-4
Teacher: Jorge avalos
CCGK
SSFT
Definicin de CSS - Qu son las hojas de estilo o cascading style sheets?
CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que
describe la presentacin de los documentos estructurados en hojas de estilo para diferentes
mtodos de interpretacin, es decir, describe como se va a mostrar un documento en pantalla, por
impresora, por voz (cuando la informacin es pronunciada a travs de un dispositivo de lectura) o
en dispositivos tctiles basados en Braille.
Para que sirve?
CSS es una especificacin desarrollada por el W3C (World Wide Web Consortium) para permitir la
separacin de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la
presentacin del documento con las hojas de estilo, incluyendo elementos tales como los colores,
fondos, mrgenes, bordes, tipos de letra..., modificando as la apariencia de una pgina web de una
forma ms sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus
documentos.
Cmo funciona?
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos
estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y
una declaracin, esta ltima va entre corchetes y consiste en una propiedad o atributo, y un valor
separados por dos puntos.
Incluir CSS en el mismo documento HTML

Los estilos se definen en una zona especfica del propio documento HTML. Se emplea la
etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (slo dentro
de la seccin <head>).
Ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<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>
Este mtodo se emplea cuando se define un nmero pequeo de estilos o cuando se quieren incluir
estilos especficos en una determinada pgina HTML que completen los estilos que se incluyen por
defecto en todas las pginas del sitio web.
El principal inconveniente es que si se quiere hacer una modificacin en los estilos definidos, es
necesario modificar todas las pginas que incluyen el estilo que se va a modificar.
Los ejemplos mostrados en este libro utilizan este mtodo para aplicar CSS al contenido HTML de
las pginas. De esta forma el cdigo de los ejemplos es ms conciso y se aprovecha mejor el espacio.
Definir CSS en un archivo externo

En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las pginas HTML
enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es ms que un archivo simple de
texto cuya extensin es .css Se pueden crear todos los archivos CSS que sean necesarios y cada
pgina HTML puede enlazar tantos archivos CSS como necesite.
Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben seguir los
siguientes pasos:
1) Se crea un archivo de texto y se le aade solamente el siguiente contenido:
p { color: black; font-family: Verdana; }

2) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial atencin a que el
archivo tenga extensin .css y no .txt
3) En la pgina HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>

<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>
<body>
</body>
</html>
Cuando el navegador carga la pgina HTML anterior, antes de mostrar sus contenidos tambin
descarga los archivos CSS externos enlazados mediante la etiqueta <link> y aplica los estilos a los
contenidos de la pgina.
Normalmente, 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. 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. Ms adelante se
explican en detalle los medios CSS y su funcionamiento.
De todas las formas de incluir CSS en las pginas HTML, esta es la ms utilizada con mucha diferencia.
La principal ventaja es que se puede incluir un mismo archivo CSS en multitud de pginas HTML, por
lo que se garantiza la aplicacin homognea de los mismos estilos a todas las pginas que forman
un sitio web.
Con este mtodo, el mantenimiento del sitio web se simplifica al mximo, ya que un solo cambio en
un solo archivo CSS permite variar de forma instantnea los estilos de todas las pginas HTML que
enlazan ese archivo.
Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS externos, tambin
se puede utilizar la etiqueta <style>. La forma alternativa de incluir un archivo CSS externo se
muestra a continuacin:
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>
<body>
</body>
</html>
En este caso, para incluir en la pgina HTML los estilos definidos en archivos CSS externos se utiliza
una regla especial de tipo @import. Las reglas de tipo @import siempre preceden a cualquier otra
regla CSS (con la nica excepcin de la regla @charset).
La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con comillas
simples o dobles o mediante la palabra reservada url(). De esta forma, las siguientes
reglas @import son equivalentes:
@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");
Incluir CSS en los elementos HTML

El ltimo mtodo para incluir estilos CSS en documentos HTML es el peor y el menos utilizado, ya
que tiene los mismos problemas que la utilizacin de las etiquetas <font>.
Ejemplo:
<head>
<title>Ejemplo de estilos CSS en el propio documento</title>
</head>
<body>
<p style="color: black; font-family: Verdana;">Un prrafo de texto.</p>
</body>
</html>
Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas
situaciones en las que se debe incluir un estilo muy especfico para un solo elemento concreto.

Definición de CSS

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Definición de CSS

Загружено:

Авторское право:

Доступные форматы

2017

Teacher: Jorge avalos

Incluir CSS en el mismo documento HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos CSS en el propio documento</title>

p { color: black; font-family: Verdana; }

<p>Un prrafo de texto.</p>

Definir CSS en un archivo externo

1) Se crea un archivo de texto y se le aade solamente el siguiente contenido:

p { color: black; font-family: Verdana; }

3) En la pgina HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos CSS en un archivo externo</title>

<p>Un prrafo de texto.</p>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos CSS en un archivo externo</title>

<style type="text/css" media="screen">

<p>Un prrafo de texto.</p>

Incluir CSS en los elementos HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>Ejemplo de estilos CSS en el propio documento</title>

<p style="color: black; font-family: Verdana;">Un prrafo de texto.</p>

Вам также может понравиться