HOJAS DE ESTILO EN CASCADA

Tamaño: px

Comenzar la demostración a partir de la página:

Download "HOJAS DE ESTILO EN CASCADA"

Clara San Segundo Valverde
hace 7 años
Vistas:

1 HOJAS DE ESTILO EN CASCADA Introducción Permiten definir las páginas con aspecto homogéneo sin tanto esfuerzo. Forma de definir los estilos Como atributo de una etiqueta afecta a esa etiqueta Sintaxis: <etiqueta style= propiedad:valor; propiedad:valor;... > Texto sobre el que se aplica </etiqueta> <p style= color:blue >Párrafo en color azul Como parte de la cabecera dentro de la etiqueta <style> afecta a todo el documento Sintaxis: etiqueta1,etiqueta2,...,etiquetan{ propiedad:valor; propiedad:valor;...} h1,p{ color:blue; font-family:comic sans ms} <h1>cabecera de primer nivel en azul y comic</h1> <p>párrafo en azul y comic Se puede incluir un estilo en una zona del texto sin necesidad de haberlo definido antes afecta a esa parte del texto <span style= propiedad:valor; propiedad:valor;... > Texto </span> h1,p{ color:blue; font-family:comic sans ms} <h1>cabecera de primer nivel en azul y comic</h1> <p>párrafo en azul y comic <span style= font-size:12pt > y esta parte en distinto tamaño</span >

2 Estructura básica de una regla CSS Selector { declaración } Selector: elementos html o seudoelementos permite definir estilos a partes de un elemento first-line primera línea de un texto first-letter primera letra de un texto <head><style type= text/css > p{ color:red;} p:first-line{ color:blue;} <p>párrafo en color rojo pero la primera línea en color azul, muestro un poco mas de texto para provocar mas de una línea </p> clases o seudoclases permite definir estilos a determinadas situaciones de una página link enlaces según se cargan en el documento visited enlaces visitados hover elementos sobre los que se ha situado puntero el ratón active. elementos activos por el usuario (momento que transcurre entre presionar y soltar el ratón). <head><style type= text/css > a:link{ color:red;} a:visited{ color:blue;} <a href= enlace.htm >Enlace rojo cuando se carga la página y azul cuando sea bisitado</a> Identificadores Declaración : lista de propiedad:valor separados por punto y coma.

3 Propiedades De tipo de letra font-size tamaño de letra en entero o porcentaje. font-weight peso de la letra en entro ó normal=400, bold=700, font-family familia de tipo de letra genérica; serif, sans-serif, cursive, fantasy o monoespace. font-style estilo del tipo de letra; normal, italic u oblique. font-variant normal o small-caps (versalita). La Versalita de una fuente consiste en convertir las letras minúsculas en mayúsculas, con una peculiaridad, su tamaño no se corresponde con la mayúscula normal, sino que su altura queda entre la altura de una mayúscula normal y la altura de la x de la fuente. font forma reducida de combinar varios de estas propiedades en una sola regla, primero se asignan los valores para el estilo, variante y el peso, luego el tamaño y por último la fuente. De color color color del elemento html. background-color color de fondo de un elemento html. background-image imagen de fondo de un elemento html. background-image: url( trayectoria de fichero ) background-repeat tipo de repetición que presentará la imagen especificada en la propiedad anterior: repeat, no-repeat, repeat-x o repeat-y. background-position posición inicial de la imagen especificada en la propiedad background-imagen: top, center, bottom, left, right. De te background-attachment para indicar si la imagen que se ha escogido de fonodo se deslice o no conjuntamente con el documento: scroll o fixed. De texto word-spacing espaciado entre palabras del texto letter-spacing espaciado entre letras text-decoration estilo especial para el texto; none, underline, overline,... vertical-align alineación vertical; baseline, sub, super, top, text-top, middle, bottom. text-transform efectos sobre un grupo de texto; conversión a mayúsculas,... text-align alineación horizontal del elemento de texto; left, right, center, justify text-indent sangrado del texo en entero. white-space comportamiento de los espacios en blanco: normal, pre o wrap (el navegador no provoca saltos de línea de forma automática). direction dirección del texto: ltr ó rtl. line-height altura de la caja de línea: normal, <medida> ó <porcentaje>

4 De cuadro margin, margin-top, margin-right, margin-bottom, margin-left valores para los diferentes márgenes de la página. padding, padding-top, padding-right, padding-bottom, padding-left espacio entre el margen y el elemento. border-width anchura del borde en entero o porcentaje; thin, medium, thick. border-style estilo del borde del elemento; none, dotted, dashed, solid, double, groove, ridge. border-color color del borde width anchura de la zona del elemento height altura de la zona de elemento. Unidades de medida pt puntos pc picas mm milímetros cm centímetros in pulgadas px pixels 1 pulgada (in) equivale a 2.54 centímetros (cm) 1 punto (pt) equivale a 1/72 de pulgada (in) 1 pica (pc) equivale a 12 puntos (pt)

5 Estilos mediante clases Se definen en la etiqueta style de la cabecera y se utilizan para las siguientes situaciones: Cuando se quiera definir diferentes versiones de estilos para un mismo elemento Sintaxis: Definición etiqueta.nombrestilo{propiedad:valor; propiedad:valor;... } Uso <etiqueta class=nombrestilo> Texto perteneciente a la clase definida </etiqueta> p.estilop1{ color:blue; font-family:comic sans ms} <p class=estilop1>párrafo en azul y de tipo comic Cuando se quiera definir un mismo estilo para diferentes elementos. Sintaxis: Definición.nombrestilo{propiedad:valor; propiedad:valor;... } Uso <etiqueta class=nombrestilo> Texto perteneciente a la clase definida </etiqueta>.estilo1{ color:blue; font-family:comic sans ms} <h1 class=estilo1>cabecera de primer nivel en azul y comic</h1> <p class=estilo1>párrafo en azul y comic

6 Importación de las hojas de estilo 1. Primero se crea un fichero en formato ascii con la extensión.css con todas las definiciones de estilo que se vayan a usar 2. Después se importan desde los documentos, de una de las siguientes formas: Con la etiqueta link en la sección de la cabecera (no se pueden sustituir los estilos importados por otros definidos en el propio documento) <link rel= stylesheet href= estilos.css type= text/css > de la etiqueta style en la sección de la cabecera <style type= text/css url( estilos.css ); etiqueta1,etiqueta2,...,etiquetan{propiedad:valor; propiedad:valor;... } </style> La definición local sustituye a la importada del documento estilos.css. Posicionamiento Se puede utilizar una etiqueta div como un elemento contenedor de otros elementos y así poder aplicar a todos ellos un determinado estilo, por ejemplo una determinada posición. Esta etiqueta se puede identificar asignándole un nombre al atributo id dentro de la misma. Para posicionar un elemento en cualquier lugar de la pantalla se utilizan los atributos top y left, que permiten situar el elemento a una distancia de la parte superior (top) e izquierda (left) de la ventana activa. Sintaxis: style= position:absolute; top:entero px; left:entero px <div id= txt1 style= position:absolute; top:150; left:100 > Texto desplazado 150 pixels hacia abajo y 100 a la derecha </div> Capas Para crear capas primero definimos el posicionamiento de varios elementos superpuestos a través de las siguientes propiedades: position, top, left, width, height. Luego se define el plano en el que queremos que aparezcan los elementos a través de la propiedad zindex utilizando valores enteros del uno en adelante (el valor mas alto corresponde al primer plano). Se pueden ocultar elementos a través de la propiedad visibility y sus valores hidden y visible. Se puede desplazar texto dentro de un elemento a través de la propiedad overflow y su valor scroll. Estilos dinámicos En DHTML todos los elementos de un documento pueden tratarse de una forma independiente con solo añadirles una identificación con el atributo id. Para cambiar el estilo de un elemento Sintaxis: nombreid.style.propiedad=valor <p id= prf style= color:red onclick= prf.style.font-size=20pt >Este párrafo cambia de tamaño al pulsar sobre él. Notación estándar: [window].document.getelementbyid( ID_elemento ).style.nombre_propiedad= valor

Documentos relacionados

<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML>

<DOCTYPE HTML PUBLIC> <HTML> <HEAD>... </HEAD> <FRAMESET>... </FRAMESET> </HTML> ... ... Marcos en HTML