Hojas de estilo (1)

Guía de estudio

Cascading Style Sheets CSS

Edwin Mamani LópezProfesor de Informática

Edwin Mamani Lopez 2

ContenidosIntroducción a las hojas de estilo◦Anatomía de una regla.◦Anatomía de una declaración◦Reglas y Selectores◦Enlace de la hoja de estilo al

documentoSelectores de CSS


Introducción: ¿Qué es CSS?CSS es un lenguaje de hojas de

estilos creado para controlar el aspecto o presentación de documentos electrónicos definidos con HTML y XHTML.

Al crear una página web, se utiliza el lenguaje HTML/XHTML para marcar los contenidos, el lenguaje CSS para definir el aspecto de cada elemento: color, tamaño, separación horizontal, vertical, posición...


Anatomía de una reglaUna regla consta de dos partes:◦Selector.- Es el enlace entre el

documento HTML y el estilo.◦Declaración.- Especifica qué efecto

tendrá (es decir, el estilo).

h1 { color : silver; }

Regla CSS

Declaración

Selector Propiedad valor


Anatomía de una declaraciónUna declaración tiene dos

partes:◦Propiedad.- Cualidad o

característica que algún elemento HTML/XHTML posee.

◦Valor.- Es la especificación de la propiedad.

h1 { color : silver; }

Regla CSS

Declaración

Selector Propiedad valor


Definición de términosCada uno de los estilos que componen una hoja

de estilos CSS.

Indica el(los) elemento(s) HTML a los que se aplica

la regla CSS.

Específica los estilos que se aplican a los

elementos (HTML).Permite modificar el

aspecto de una característica del

elemento.Indica el nuevo valor de la característica modificada en el

elemento.

• Regla

• Selector• Declarac

ión• Propiedad

• Valor


Reglas y hojas de estiloUna regla define algún aspecto

del estilo de uno o varios elementos

h1 { color: navy; }Una hoja de estilo es un conjunto

de reglas que se aplican a un documento HTML/XHTML.


Agrupando reglas y selectoresUna de las metas de CSS era la

brevedad◦Facilita escribir la hoja de estilo “a mano”◦Reduce el tiempo de carga

Por ejemplo, sean las siguientes reglas:h1 { font-weight: bold; }

h2 { font-weight: bold; }

h3 { font-weight: bold; }

Como las declaraciones son idénticas, se pueden agrupar:

h1, h2, h3 { font-weight: bold; }


Agrupando reglas y selectoresUn selector puede tener más de

una declaración:h1 {font-weight: bold;}

h1 {color: green;}

Podemos agrupar las declaraciones en una lista separada por puntos y comas:

h1 {font-weight: bold;

color: green;

}


Incluir CSS en HTML/XHTML

Una de las principales características de CSS es su flexibilidad y las diferentes opciones que ofrece para realizar una misma tarea.

En el mismo documento HTML.

Definir CSS en un archivo externo.

Incluir CSS en los elementos HTML.

Elemento <style>

Elemento <link>

Atributo style


Incluir CSS en el mismo documento HTML/XHTMLLos estilos se definen en la

cabecera del documento (sólo dentro de la sección <head>) y se emplea el elemento <style>.

<style> type="text/css"

p {color:black;

font family:Verdana;

}

</style>


Definir CSS en un archivo externoEn este caso, todos los estilos se

incluyen en un archivo de tipo CSS que las páginas HTML enlazan mediante la etiqueta <link>.

Un archivo CSS no es más que un archivo simple de texto cuya extensión es .css

Se puede crear todos los archivos CSS que sean necesarios y cada página HTML puede enlazar tantos archivos CSS como requiera.


El archivo CSS se enlaza mediante la etiqueta <link><html>

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

<p>Un párrafo de texto.</p>

</body>

</html>


Cuatro atributos, cuando se enlaza un archivo CSSrel: indica el tipo de relación que

tiene el recurso enlazado. Para los archivos CSS, siempre se utiliza el valor stylesheet.

type: Indica el tipo de recurso enlazado, su valor siempre es: text/css

href: Indica la URL del archivo CSS que contiene los estilos (relativa o absoluta).

media: Indica el medio en el que se van a aplicar los estilos del archivo CSS.


Ventajas de las hojas de estilo externasReutilización◦Poner toda la información de estilo en un sitio

permite que sea referenciada por muchos documentos

◦Facilita mantener un sitio Web grande consistentemente Información de estilo corporativa

Rendimiento◦Una vez que se descarga la hoja de estilo la

primera vez, el browser ya la guarda en cachéSelección por parte del usuario◦Un documento puede enlazar a varias hojas de

estilo; idealmente, el usuario podría seleccionar una de ellas


Incluir CSS en los elementos HTMLEste método se considera como

el "peor y el menos utilizado«.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 específico para un solo elemento concreto.

<p style="color:black;">Un texto</p>


Desventajas del atributo styleNo se puede reutilizar el estilo

aplicado a un elemento (habría que repetirlo en todos los sitios)

Si luego se cambia el estilo, hay que buscar todos los atributos style y cambiar su valor

Suele ser mejor emplear identificadores (id)

Sólo tendría sentido para algo muy concreto y que no queramos cambiar la hoja de estilo sólo para eso

Documents

Hojas de estilo (1)