Diapositivas - CSS. Introdución, aplicación, reglas PDF

Preview

Summary

Download Diapositivas - CSS. Introdución, aplicación, reglas PDF

Description

Programación IV Grado en Ingeniería Informática JCRdP y JDGD

CSS 





Introducción

El dar una apariencia y estética homogénea a un conjunto de páginas usando sólo HTML es complejo Las CSS (Cascading Style Sheets) u hojas de estilo en cascada permiten controlar el aspecto de páginas HTML con facilidad Por ejemplo, permiten especificar: el espacio entre las líneas, el tipo y el tamaño de las letras, el tamaño de los márgenes, el color del texto o del fondo, etc.

JCRdP y JDGD 2

CSS 







Introducción

El lenguaje de las hojas de estilo está estandarizado (CSS1 1996, CSS2 1998, CSS3 ...) por el World Wide Web Consortium. Casi todos los navegadores (últimas versiones) son capaces de cumplir con los estándares. Permiten separar el contenido en las páginas HTML de la forma en que se reproduce. Las hojas de estilo no sólo establecen cómo se muestra una página web en un navegador, sino que, también, permiten definir su reproducción en otros medios como impresoras, reproducción sonora, etc. JCRdP y JDGD 3

CSS 



Cómo se aplican

Las hojas de estilo se plasman en una serie de especificaciones que alteran la forma de mostrado/reproducción de la información afectada por una etiqueta HTML. Las hojas de estilo se pueden aplicar de cuatro formas: 1. Afectando a una única y específica etiqueta 2. Definiéndose para una página y afectando a todas las etiquetas correspondientes de la página 3. Definiéndose en un fichero externo y afectando al conjunto de páginas que hacen referencia a éste 4. Programáticamente JCRdP y JDGD 4

CSS 



Cómo se aplican

Para afectar a una etiqueta concreta se establece la modificación mediante el atributo style de esta. Ejemplo: Ejemplo de CSS para etiqueta



Este atributo permite controlar el formato de presentación de la etiqueta, pero no se usa como medio general para cambiar la estética de las páginas. JCRdP y JDGD 5

CSS 

 

Cómo se aplican

Para afectar a las etiquetas de una página se escribe el texto del estilo en una etiqueta styl style e dentro de la etiqueta head ead. Se establece en formato de hoja de estilo la estética normal de las etiquetas que se desea modificar Ejemplo:



Este formato se usa cuando el estilo se aplica a una sola página JCRdP y JDGD 6

CSS 







Cómo se aplican

La forma más versátil de usar las hojas de estilo es cuando éstas se construyen independientes de las páginas HTML. En este caso la especificación de formato se almacena en un fichero de texto, normalmente con extensión “css”. La forma de aplicar una de estas hojas de estilo a una página es con la etiqueta lin link k dentro de head ead. Formato de etiqueta lin link k:

JCRdP y JDGD 7

CSS 

 





Sintaxis

La sintaxis de las hojas de estilo es sensible a mayúsculas y minúsculas Los comentarios se escriben entre "/*" y "*/" Los identificadores no deben comenzar por un dígito y pueden contener "-" (guiones) y "_" (underscore) Las hojas de estilo están compuestas de instrucciones que son de dos tipos: reglas y @reglas Las @reglas deben aparecer antes de ninguna regla y no pueden estar dentro de un bloque JCRdP y JDGD 8

CSS 







Reglas

Cada regl egla a se compone de dos partes: un selector y una declaración El selector define a qué elemento o elementos se aplica la declaración (p.e. h1) dec claraci laración ón es una propiedad (parámetro La de de estilo) ":" (dos puntos) y un valor (ejemplo: font-size: 12pt) La regla se escribe como un selector y un bloque de declaración entre llaves "{}" h1 {font-size: 12pt}

JCRdP y JDGD 9

CSS 



Reglas

Es posible agrupar declaraciones escribiéndolas en el mismo bloque separadas por ";" h1 { font-size: 12pt; color: white; } Los selectores se pueden agrupar separados por ",", en la parte izquierda de la regla. h1, h2, h3, h4 { font-size: 110%; color: white; } JCRdP y JDGD 10

CSS    

Referencias

Cascading Style Sheets home page Wikipedia Cascading Style Sheets CS CSS S Validatio Validation n Serv rviice http://www.barelyfitz.com/screencast/htmltraining/css/positioning/

JCRdP y JDGD 11...