Diapo03

Cascading Style Sheets

CSS

Francisco Ibáñez

Hojas de Estilo en Cascada

–Es una metodología para dar uniformidad al uso de tags en documentos HTML / XHTML , el agregar atributos a cada etiqueta HTML / XHTML puede ser un proceso mecánico.

• CSS nos permite:– Separar presentación de contenido– Mayor flexibilidad, escalabilidad, y posibilidades en

la presentación de contenidos web– Dinamismo (junto a JScript y DOM)– Correctamente utilizado reduce el peso de las

páginas

Francisco Ibáñez

Hojas de Estilo en Cascada

–Imagínese que para centrar todas las celdas (<td> ) de un documento o de todo un sitio, tuviera que agregar el atributo align="center" a todos sus elementos, es esta facilidad la que precisamente otorga CSS .

Selector { propiedad: valor; ...}

Declaración

H1 {color:#CC9900;}Ejemplo:

Francisco Ibáñez

Cascading (En Cascada)El nombre tiene sus raíces en el funcionamiento de las

mismas, ya que es posible definir uniformidades en tres distintos puntos de un documento :

•Uniformidad en Varios Documentos (Archivo CSS)

•Uniformidad en Documento (Tags <style> y <span> )

•Uniformidad en Tag ( Clases y en Linea )

Francisco Ibáñez

Cascading (En Cascada)

El efecto en Cascada se debe al nivel de precedencia que se toma al ser interpretadas las diversas uniformidades en un documento.

Si en los atributos de los tags <style> existen varias definiciones traslapadas con aquellas definidas en un archivo CSS, entonces las últimas tomarán precedencia.

De igual manera, aquellas definiciones por Tag ( Clases y en Linea) tomarán precedencia sobre aquellas de Documento (Tags <style> y <span>) y archivos CSS.

Nota.- en dado caso de no definirse ninguna funcionalidad para algún tag el Navegador utiliza sus valores "defaults".

Francisco Ibáñez

• En la Cabecera (<HEAD>)<STYLE TYPE="text/css">  </STYLE>

• Estilo como atributo<P STYLE="text-align: right">Estilo propio</P>

• Hoja de estilo externa

<LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">

Aplicar CSS

Francisco Ibáñez

Uniformidad en Varios Documentos

• Esta implementación es aquella utilizada a lo largo de varios documentos y su funcionamiento depende de un archivo que es llamado dentro del documento HTML / XHTML , este tipo de declaración es similar a la de una imagen, y existen dos posibilidades para ser incorporada a un documento :

<html><head><title> Documento de CSS </title><link rel="stylesheet" type="text/css" href="/css/estilo.css"><style type="text/css"><!— @import url(http://www.osmosislatina.com/css/estilo.css)--></style></head><body> ........ ........</body></html>

(Archivo CSS)

Francisco Ibáñez

Uniformidad en Varios Documentos

Ambas definiciones para importar el archivo CSS son anidadas dentro del Tag <head> del documento y tienen el mismo funcionamiento.

•la primer declaración importa el archivo CSS mediante el elemento link con sus respectivos atributos.•la segunda declaración hace uso de los Tags <style> para importar el mismo archivo CSS; a pesar de las diferencias en sintaxis,

La utilización de comentarios  antes y después de los tags <style> se hace con la intención de evitar errores en los Navegadores que no reconocen el tag <style> y/o tienen desactivado el uso de CSS.

(Archivo CSS)

Francisco Ibáñez

composición de una hoja de estilo para ser incorporda a un documento HTML / XHTML :

/* css/estilo.css */

/* Definir el Color de Fondo */ body { background-color: #FFFFFF; }

/* Para definir una Imagen de Fondo */ body { background: url(imagenes/logo.gif) */

/* Definir Tipo de Letra para una gran mayoria de Tags */ h1, h2, h3, h4, h5, h6, body, a, p, ul, ol, td, th, blockquote, textarea, input, select, form {font-family: arial, helvetica, sans-serif }

Francisco Ibáñez

composición de una hoja de estilo para ser incorporda a un documento HTML / XHTML :

/* Definir tipos de letras para tags especiales */ pre, code { font-family: monospace }

/* Definir Sangría para cada salto de párrafo */ p {text-indent: 3em } p.sinsangria {text-indent: 0em}

/* Definir tamaño de letra para Títulos */ h1 { font-size: 18pt } h2 { font-size: 14pt }h3 { font-size: 14pt }h4 { font-size: 12pt }h5 { font-size: 10pt } h6 { font-size: 8pt }

Francisco Ibáñez

Uniformidad en Documento (Tags <style> y <span> ).

• Dentro de los tag <style> también es posible definir el comportamiento de tags que afectarán un documento en particular, dichas declaraciones son idénticas a aquellas empleadas en una hoja de estilo (CSS), con la diferencia que estas solo tomaran efecto en solo documento.

<head><title> Documento de CSS </title><style type="text/css"><!–

body { background-color:black }h1,h3,h4 {text-align: center}h2 {text-align: right}p b {color: yellow} a:link { color: blue } a:active { color: red; font-weight: bold} a:visited { color: green } span { color: red } span.negrita { font-weight: bold }

--></style></head>

Francisco Ibáñez

Uniformidad en Documento (Tags <style> y <span> ).

• body { background-color: black } : Cualquier contenido dentro de los Tags <body> (todo el documento en sí) tendrá fondo negro.

• h1,h3,h4 {text-align: center} : Cualquier contenido dentro de los Tags <h1> , <h3> , <h4> será alineado en el centro.

• h2 {text-align: right} : Cualquier contenido dentro de los Tags <h2> será alineado hacia la derecha.

• p b {color: yellow} : Después de cualquier salto de renglón ( tags <p> ) si precedía de letras negritas ( tags <b> ) el contenido será de color amarillo; aquí es importante mencionar que si existen letras negritas no será asignado el color amarillo salvo estas se encuentren dentro de un salto de renglón, lo anterior se debe a la omisión de comas (",") entre los elementos que genera un comportamiento anidado.

• a:link { color: red } : Todos los links de la página ( tags <a> ) estarán en rojo.

• a:active { color: blue; font-weight: bold} : Al momento de oprimir el Link, la letras aparecerán azules y la letra se tornará negrita.

• a:visited { color: green } : Si el usuario observa un Link que ya visito, éste aparecerá de color verde.

Los parámetros definidos dentro de los tags <style> indican lo siguiente:

Francisco Ibáñez

span

Al utilizarse las diversas definiciones mencionadas anteriormente, estas toman un efecto sobre todas las declaraciones del documento, esto correspondería a que el comportamiento de todos los tags <h2> o <a> (links) seria idéntico.

Sin embargo, existen ocasiones en las que este comportamiento no es deseado para todos los elementos de un documento, para este tipo de situaciones se utiliza el Tag <span>

Las definiciones que inician con span tienen un comportamiento especifico ya que forman parte de CSS.

Francisco Ibáñez

span

La siguiente declaración permite que únicamente una sección del contenido sea afectada:

<span> este contenido será desplegado en colo rojo </span>

Para que el tag <span> pueda ser utilizado en diversas circunstancias, es posible generar clases de la siguiente manera:

<span class="negrita"> este contenido será desplegado en letras negritas </span>

Además del uso de clases, el Tag <span> también puede contener declaraciones en linea a través del atributo style.

Francisco Ibáñez

el uso de Clases y declaraciones en linea forma parte de las definiciones más refinadas en CSS.

• Uniformidad en Tag ( Clases y en Linea ) – existe la posibilidad de definir el funcionamiento de

cualquier tag HTML / XHTML al mismo nivel de tags , esto es, el funcionamiento solo tendrá efecto dentro del tag y ningún otro tag del mismo tipo será afectado en el documento, para esto existen dos posibilidades:

• Definir Clases ("Classes") – Para realizar este comportamiento es necesario definir

clases dentro de los parámetros definidos en <style> , o bien, que sean incluidas estas definiciones en un archivo CSS:

Francisco Ibáñez

el uso de Clases y declaraciones en linea forma parte de las definiciones más refinadas en CSS.

<head><title> Documento de CSS </title><style type="text/css">



</style></head>

Los siguientes parámetros definen tres funcionamientos para títulos con tags <h2> , esto otorga la flexibilidad de emplear títulos con diferentes colores.

Francisco Ibáñez

Para utilizar la funcionalidad los tags son llamados con el parámetro class :

– <h2 class="azul"> Titulo en Azul </h2> (Desplegaría el titulo en azul)– <h2 class="verde"> Titulo centrado Verde </h2> (Desplegaría el titulo

centrado en verde)

La clase genérica .cursiva puede ser utilizada para cualquier tipo de tag , esto es :

– <p class="cursiva"> despues del salto letra cursiva ...o

– <b class="cursiva"> estas son negritas cursivas ...

El uso de clases ( class ) no esta limitado a colores y alineación , esta metodología puede ser empleada para cualquier tipo de funcionalidad que sea apoyada por CSS.

Francisco Ibáñez

Para utilizar la funcionalidad los tags son llamados con el parámetro class :

Definir en Linea

Aunque muy similar a la metodología utilizada en clases ( class ) esta se especifica dentro del tag de la siguiente manera:– <h1 style="color:blue ; font-style: italic"> Titulo definido con

parametros en Linea </h1>

Esta última metodología también garantiza que solo tags individuales sean afectados.

Nota .-el usuario final puede desactivar sus formatos.

Francisco Ibáñez

• Elementos

H1 {font-family: Arial, Helvetica, sans-serif; font size: 10pt; font-style: italic;}

• Elementos agrupados

H1, P, B {font-color: blue;}• Clases para elementos

P.enfatizada {font-weight: bold;}• Clases generales

.enfatizada {font-weight: bold;}• Selectores ID

#enfatizada {font-weight: bold;}

Selectores

Diapo03

Education

Transcript of Diapo03