Manual CSS.pdf

Hojas de estilo CSS 1/21

HOJAS DE ESTILOS 1. Introducción 2. Localización de las hojas de estilo 3. Sintaxis de las hojas de estilo 3.1. Selectores de tipos 3.2. Selectores de clase 3.3. Selectores de contexto 3.4. Selectores ID

3.5. Selectores agrupados 3.6. Selectores de atributos 3.7. Selector universal 3.8. Reglas CSS sin selector 4. Pseudoclases y pseudoelementos 5. Cascada y herencia 6. Estilos: propiedades 6.1. Unidades de medida 6.2. Propiedades del texto 6.3. Propiedades de las fuentes 6.4. Propiedades background y color 6.2. Propiedades de clasificación 7. Otros elementos de las hojas de estilo 7.1. El cursor o ratón 7.2. La barra de desplazamiento 8. Cuadros 8.1. Posicionamiento y visualización 8.2. Otras propiedades de los cuadros 8.3. Capas 8.4. Filtros 9. Uso de estilos según su funcionalidad 1. Introducción Las hojas de estilo en cascada (Cascading Style Sheets) ofrecen grandes posibilidades a la hora de crear páginas Web. CSS permitirá añadir sutiles refinamientos a las páginas sin necesidad de comprender complejas técnicas de código. La mayoría de los lenguajes informáticos son estructurados, lo que significa que el orden en que se incluyen las sentencias es vital. HTML es estructurado porque cada elemento que contiene se procesa y se muestra en orden. CSS no es estructural, es declarativo. En las hojas de estilo todo se expresa en reglas que no tienen necesariamente que estar en orden. Para crear un estilo lo que hay que decidir es qué normas se quieren poner, de tal modo que las páginas Web las cumplan.


2. Localización de las hojas de estilo Las hojas de estilo se pueden introducir en distintas posiciones. Atendiendo al lugar donde se definen los estilos tenemos los siguientes tipos de hojas de estilo.

• En otro fichero: Se define el estilo en un fichero separado. Se emplea la etiqueta link dentro de la cabecera del documento para hacer referencia a dicho archivo. Se utilizan tres parámetros:

o rel: Se especifica el tipo de contenido; en este caso hay que decirle que es una hoja de estilo mediante el valor stylesheet.

o type: Se especifica el tipo mime para las hojas de estilo; en este caso el valor es text/css.

o href: Se especifica la ubicación del fichero que contiene los estilos.

Ejemplo: <link rel=”stylesheet” type=”text/css” href=”estilo.css”>

• En el mismo fichero: Se define el estilo dentro del propio documento

web. A la hora de hacer esto tenemos dos opciones:

o De cabecera: Esta etiqueta se cierra. Se suele situar dentro de la cabecera del documento. Es conveniente emplear el parámetro type con el mismo valor que en la etiqueta LINK.

Ejemplo: <style> Definición de estilos. </style>

o En las etiquetas html: Empleando el estilo dentro de una etiqueta

de html con el atributo style.

Ejemplo: <h1 style=”color:red”>

• Definidas en el navegador : Se emplean modificando las propiedades

del navegador. Todas las páginas Web se ajustarán a ese estilo. En internet explorer hay que seleccionar. Herramientas à Opciones de internet à Ficha General à Botón Accesibilidad


Según esto podemos clasificar las hojas de estilo en:

• Externas: Las que se definen empleando otro fichero. • Internas: Las que se definen en la cabecera del documento html. • Locales: Las que se definen dentro de las etiquetas html de la página

Web. • De usuario: Las que se definen mediante las propiedades del

navegador. 3. Sintaxis de las hojas de estilo En el uso de las hojas de estilos hay que diferenciar entre la definición de los propios estilos y el uso de los mismos. Los estilos CSS se definen mediante reglas. Podemos escribir todas las reglas que deseemos. La sintaxis para definir las reglas CSS es la siguiente:

selector { atributo1 : valor1 ; atributo : valor2 .....} El selector puede ser distintas cosas: una etiqueta de html, varias etiquetas, una combinación de las mismas, una clase, etc. El selector hace referencia a qué elemento se le aplicará la regla CSS. Entre corchetes viene una serie de pares atributo-valor separados por puntos y comas. Los pares atributos-valor determinan qué características (valor) poseerá una determinada propiedad (atributo). Entre ellos no se inserta el carácter de igual, sino que se utilizan el carácter de dos puntos. Se pueden poner tantos pares atributos valor como deseemos. Todos estos pares atributo-valor se aplicarán al selector especificado en la regla CSS. El uso de estas reglas se especifica dentro de la página Web, insertando las etiquetas html correspondientes. En las reglas CSS tenemos varios tipos de selectores.

3.1. Selectores de tipo El estilo se aplicará a todas las etiquetas html para las que se ha definido el estilo. El selector en este caso es una etiqueta de html. La regla CSS se aplicará siempre que aparezca la etiqueta html en el documento Web.

Ejemplo: p { font : bold } Indica poner la fuente en negrita en los párrafos. <p> esto es un párrafo </p> Este párrafo aparecerá en negrita. Siempre que se escriba una etiqueta p.

Como podemos ver, por un lado está la definición de la regla. En este caso en un fichero de estilos o en la cabecera de la página Web. Por otro lado está el


uso de la propia regla simplemente al insertar la etiqueta correspondiente de html. 3.2 Selectores de clase Se define el estilo para su posterior uso. No va asociado a una etiqueta concreta, sino que se puede emplear en todas las etiquetas. La regla se define indicando el nombre de una clase; este nombre puede ser el que nosotros deseemos, poniéndole un punto delante. Posteriormente este nombre sin el punto se utilizará más adelante a la hora de utilizar la regla CSS. En cuanto al uso de la regla, se emplea el atributo class en la etiqueta de html a la que se aplica la regla. El valor de este atributo class es el nombre de la clase que pusimos en la definición de la regla. El punto del nombre de la clase únicamente aparece en la definición de la regla.

Ejemplo: .clase { font : bold } <h1 class=”clase”> Esto es una cabecera </p> <p class=”clase”> Esto es un párrafo </p> Ambos textos aparecerán en negrita. Esta cabecera y este párrafo aparecerán en negrita. El efecto del estilo es únicamente para estos dos elementos.

Si escribimos un párrafo o cabecera sin el atributo class no se empleará el estilo.

Ejemplo: .clase { font : bold } <p> Esto es un párrafo </p> Este texto no aparecerá en negrita porque no se ha empleado el atributo class con el valor clase.

3.3 Selectores de contexto En este caso el selector es un conjunto de etiquetas de html. Son cadenas de dos o más selectores simples separados por espacios en blanco. El efecto de este tipo de reglas viene cuando en el documento Web aparece la combinación de etiqueta en el orden en que aparecen en la misma regla CSS.

Ejemplo: P B { color : red } <B>Primera linea</B> <P><B>Segunda linea</B></P>


En este ejemplo, “primera línea” aparecerá en negrita pero no en rojo. El texto “segunda línea” aparece en rojo negrita.

3.4 Selectores ID Los selectores ID son asignados individualmente con el propósito de una definición en términos “por elemento”. Se emplea el indicador “#”. El funcionamiento es como el de los selectores de clase, que empleaba el punto. En el caso de los selectores ID, en la definición de la regla se indica un nombre precedido del carácter #. Se usará en las etiquetas html que deseemos con el atributo id. El valor de este atributo es el nombre que pusimos en la definición de la regla pero sin poner el carácter #.

Ejemplo #nombre {color:red}

<p id=”nombre”>Hola</p>

En general, se usa un selector ID en lugar de un selector de clase si la regla que estamos definiendo solamente se utilizará una vez. La ventaja es que JavaScript reconoce el campo id de html. 3.5 Agrupamiento Para definir el mismo estilo para varias etiquetas. Se escriben los selectores de estas etiquetas separadas por comas. La regla se aplicará a cada una de las etiquetas por separado. Esto evita tener que escribir la misma regla varias veces.

Ejemplo Queremos que todas las cabeceras tengan el color azul. h1, h1, h3, h4, h5, h6 {color:blue} Esto sería lo mismo que escribir

h1 {color:blue} h2 {color:blue} h3 {color:blue} h4 {color:blue} h5 {color:blue} h6 {color:blue}

3.6 Selectores de atributos

Los selectores de atributos permiten seleccionar elementos de la página según sus propiedades o el valor asignado a estas propiedades. Supongamos que hemos creado varias clases de párrafos y queremos identificar a todos aquellos que tengan especificado el atributo CLASS (cualquiera sea el valor de ese atributo) para darle un margen izquierdo de 1 cm:

P[CLASS] {margin-left: 1cm}


Ahora, si queremos seleccionar solamente aquellos párrafos que tengan el atributo CLASS="pregunta", debemos usar:

P[CLASS="pregunta"] {margin-left: 1cm}

Los selectores de atributos no funcionan en Internet Explorer pero si en FireFox. Realizan la misma función que los selectores de clase. 3.7 Selector universal El selector universal permite establecer una regla para todos los elementos. Se emplea el asterisco. Todos los elementos del documento Web recibirán el efecto de dicha regla.

Ejemplo * {color:red} Todos los elementos serán de color rojo

3.8 Reglas CSS sin selector Se pueden emplear reglas CSS sin usar un selector. En este caso la definición de las reglas es absolutamente igual pero el selector no se indica. Para usar este tipo de reglas, se escribe la misma dentro de la etiqueta de html, concretamente usando el atributo style.

Ejemplo: <h1 style=”color:red”>

Es una forma rápida de darle una serie de propiedades a un elemento concreto de la página, cuando queremos que únicamente se aplique cuando aparece en una determinada posición y no en el resto 4. Pseudos-clases y pseudos-elementos Las pseudos-clases y los pseudos-elementos permiten definir estilos para estados o partes de un elemento concreto. La sintaxis de ambos es igual. Al selector al que se va a aplicar (etiqueta html) se le pone un punto al final y a continuación va la pseudo-clase o el pseudo-elemento.

• Pseudos-clase: Se define un estilo para una variedad de la etiqueta. Existen muy pocas pseudo-clases. Las más comunes son las de los enlaces. Se escribe la etiqueta para la que queremos que tenga efecto, junto con su particularidad (pseudo-clase) separadas por un punto. El resto de la regla es igual.

Ejemplo a.visited { color : red }

<a href=http://www.google.es> Entra en google </a>


Una vez que ya se ha entrado en google, el enlace será de color rojo.

Las pseudos-clases se emplean fundamentalmente para el color de los enlaces aunque se pueden definir otras propiedades. Las pseudos-clases de los enlaces serían las siguientes:

a.link à Enlace a.visited à Enlace visitado a.active à Enlace activo a.hover à Enlace cuando el ratón está sobre él.

• Pseudoelemento: Son igual que las pseudo-clases pero se han

denominado distinto porque hacen referencia a determinados elementos sobre el que se va a aplicar el estilo. Hay dos: primera línea y primera letra. Ejemplos de pseudoelementos son first-line y first-letter que permiten definir un estilo propio.

En el caso de first-line, se refiere a la primera línea de un elemento, típicamente un párrafo.

En el caso de first-letter, se refiere a la primera letra de un elemento; párrafo, encabezado, etc.

5. Cascada y herencia La cascada es la propiedad de las hojas de estilo que determina qué tipo de hoja de estilo se aplica. Como sabemos, podemos colocar los estilos en diferentes posiciones: hojas externas, internas (en la cabecera o en las etiquetas html) y de usuario. Un sistema sencillo para aclarar el tema sería: la última regla que se lee tiene preferencia. Esto es importante cuando existen varias reglas que se contradicen. Podemos usar las siguientes dos reglas:

• Una hoja local tiene prioridad sobre una interna o externa.

• Si hay conflicto entre una interna y una externa tiene prioridad la última declarada.

Ejemplo: En una hoja externa se especifica un color de texto azul en parrafos. En la interna se especifica un color de texto rojo en parrafos.


• pc: picas; 1pc = 12pt Las medidas relativas son:

• em: la altura de la fuente de los elementos • px : píxeles, relativa a la resolución de la pantalla • %: el tamaño como porcentaje de un tamaño de fuente definido

anteriormente. Los colores en CSS se pueden especificar, al igual que con html, mediante un nombre (en inglés) o mediante una especificación numérica RGB. Esta especificación se puede realizar de alguna de estas cuatro formas:

• #rrggbb à Igual que en html • #rgb à Empleando un dígito hexadecimal para cada número en lugar

de dos. • rgb(X,X,X) à Donde X es un número entre 0 y 255. • rgb(Y%,Y%,Y%) à Donde Y es un número entre 0.0 y 100.0

Un valor URL (para indicar una dirección web, una imagen, etc.) viene dado por URL(valor), donde valor puede ir opcionalmente entrecomilladas (con comillas simples o dobles). 6.2. Propiedades del texto word-spacing: Espacio entre palabras.

Valores posibles: normal | <longitud> Valor por defecto: normal

letter-spacing: Espacio entre letras.

Valores posibles: normal | <longitud> Valor por defecto: normal

text-decoration: Decoración del texto. Valores posibles: none | underline (subrayado) | overline (línea por encima) | line-through (tachado) |blink (parpadeo, sólo en FireFox) Valor por defecto: none

vertical-align: Alineación vertical del texto.

Valores posibles: baseline (normal) | sub (subíndice) | sup (superíndice) | top (alinea la parte superior del elemento con el elemento más alto de la línea) | middle (alinea el punto medio vertical del elemento con la línea base más la mitad de la altura de la letra x del elemento padre)| bottom (alinea la parte inferior del elemento con el elemento más bajo de la línea) Valor por defecto: baseline


text-transform: Transformación del texto Valores posibles: none (ninguna transformación) | capitalize (escribe en mayúsculas el primer carácter de cada palabra) |uppercase (escribe en mayúsculas todos los caracteres) | lowercase (escribe en minúsculas todos los caracteres) Valor por defecto: none

text-align: Alineación del texto.

Valores posibles: left | right | center | justify (alineado a la derecha y a la izquierda). Valor por defecto: Determinado por el navegador

text-indent: Sangría de la primera línea.

Valores posibles: <longitud> | <porcentaje> Valor por defecto: 0

line-height: Espaciado entre líneas.

Valores posibles: normal | <longitud> | <porcentaje> Valor por defecto: normal

6.3. Propiedades de las fuentes font-family: Tipo de letra o fuente.

Valores posibles: <fuente> Se pueden poner varias separadas por comas. Valor por defecto: Determinado por el navegador

font-style: Determina si una fuente está o no en cursiva (inclinada).

Valores posibles: normal | italic (inclinada) | oblique (inclinada) Valor por defecto: normal

font-variant: Determina si la fuente se muestra en mayúsculas tipo normal o pequeñas SMALL-CAPS.

Valores posibles: normal |small-caps (mayúsculas pequeñas) Valor por defecto: normal

font-weight: Peso de la fuente.

Valores posibles: normal | bold (negrita) | bolder (más negrita que la anterior) | lighter (menos negrita que la anterior) | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 Valor por defecto: normal

font-size: Tamaño de la fuente.

Valores posibles: xx-small | x-small | small | médium | large | x-large | xx-large | <longitud> | <porcentaje> Valor por defecto: medium

font: Esta propiedad permite poner todas las características anteriores.


6.4. Propiedades background y color color: Especifica el color de un elemento.

Valores posibles: <color> Valor por defecto: Determinado por el navegador

background-color: Color de fondo.

Valores posibles: <color> | transparent Valor por defecto: transparent

background-image: Imagen de fondo.

Valores posibles: <url> |none (ninguna imagen) Valor por defecto: none

background-repeat: Determina cómo se repite la imagen de fondo.

Valores posibles: repeat (se repite a lo ancho y a lo alto) | repeat-x (se repite únicamente a lo ancho) | repeat-y (se repite únicamente a lo alto) | no-repeat (no se repite) Valor por defecto: repeat

background-attachment: Determina si la imagen de fondo se desplazará con el contenido o su contenido quedará fijo

Valores posibles: scroll (la imagen se desplaza con el contenido) | fixed (quedará fija) Valor por defecto: scroll

background-position: Determina la posición inicial de la imagen de fondo.

Valores posibles: <longitud> | <porcentaje> Se indican dos valores sin comas por medio que indican distancia desde arriba y desde la izquierda. Valor por defecto: 0% 0%

background: Esta propiedad permite poner todas las características anteriores 6.5. Propiedades de clasificación list-style-type: Tipo de estilo de lista

Valores posibles: disc (disco) | circle (círculo) | square (cuadrado relleno) | decimal (números decimales) | lower-roman (números romanos en minúsculas) | upper-roman (números romanos en mayúsculas) | lower-alpha (letras en minúsculas) | upper-alpha (letras en mayúsculas) |none Valor por defecto: disc

list-style-image: Imagen de estilo de lista.

Valores posibles: <url> | none Valor por defecto: none


list-style-position: Posición de estilo de lista.

Valores posibles: inside (las líneas se ajustarán dejabo del marcador de lista) | outside (las líneas se ajustarán son sangría). Valor por defecto: outside

list-style: Esta propiedad permite poner todas las características anteriores. 7. Otros elementos de las hojas de estilo Otros elementos que podemos modificar mediante hojas de estilo son la barra de desplazamiento y el cursor del ratón.

7.1. El cursor del ratón Se trata de la propiedad que especifica el cursor del ratón cuando el elemento es apuntado por éste. El nombre de la propiedad es cursor. Los posibles valores son:

• auto: El que el browser tenga por defecto.

• crosshair: La flecha.

• default: El cursor por defecto de cada plataforma.

• hand: Una mano.

• move: Icono de movimiento.

• e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize y w-resize: Son los diferentes cursores de cambio de tamaño y apuntadores en diferentes direcciones.

• text: Cursor para el texto.

• wait: Cursor de espera.

• help: Cursor de ayuda.

Se aplica sobre el elemento sobre el que se desea que al pasar el ratón por encima del mismo, éste cambie.

Ejemplo: img { cursor : help } Sobre las imágenes aparecerá el ratón con la interrogación.

7.2. La barra de desplazamiento El aspecto de la barra de desplazamiento del navegador se puede modificar mediante las siguientes propiedades:

• scrollbar-face-color: el color de la parte movible de la barra. • scrollbar-highlight-color: el color del brillo (parte superior e izquierda

de los elementos).


• scrollbar-3dlight-color: parte clara del relieve. • scrollbar-darkshadow-color: parte oscura del relieve. • scrollbar-shadow-color: el color de la sombre (parte inferior y derecha

de los elementos). • scrollbar-arrow-color: color de las fechas. • scrollbar-track-color: color de la parte de la barra no movible.

Se aplican sobre el elemento BODY. Ejemplo:

body { scrollbar-face-color : red }

Pone la parte movable de la barra de desplazamiento de color rojo.

8. Cuadros, cajas o bloques

8.1. Posicionamiento y visualización

En las páginas Web los elementos van generando bloques o cajas según se van insertando. Este modelo de formato visual rige el comportamiento de las cajas generadas por los elementos de la página. Vamos a ver cómo se puede definir el tipo y dimensiones de esas cajas, su comportamiento y relación con las otras cajas en la estructura del documento. Tipos de elementos en html:

• Elementos de bloque: Son aquellos tratados visualmente como bloques separados de los elementos que le rodean. Podemos decir que son aquellos que comienzan con una nueva línea dentro del documento. Se separan del siguiente elemento con otra línea. Ejemplos de elementos de bloque son <P> y <DIV>. La imagen <IMG> no es un elemento de bloques. Una tabla <TABLE> si es un elemento de bloque.

• Elementos en línea: Son aquellos que no forman nuevos bloques de contenido; el contenido es distribuido a través de las líneas. Ejemplos: <B>

• Elementos de lista : Son elementos de bloque que generan una caja principal y otras cajas adicionales que se agregan al costado del documento.

Dos de las propiedades más importantes de los cuadros son display y position. Propiedad DISPLAY Cada elemento HTML tiene un valor de la propiedad display por defecto basado en la propia especificación de HTML.

• block: Este valor provoca que un elemento genere una caja de bloque principal, es decir, un salto de línea antes y después del elemento.


Ejemplo: En un texto podemos hacer que una palabra sea un bloque haciendo que su display valga block y, en consecuencia, que aparezca sola en una línea.

• inline: Este valor provoca que un elemento genere una o más cajas de línea, es decir, no hay salto de línea antes ni después del elemento.

Ejemplo: Comprobar que una imagen es un elemento de línea de tal modo que si se inserta en una frase de texto, se verá como el texto aparece a la izquierda y a la derecha. Se podría hacer de bloque poniendo el valor display a block. En consecuencia, aparecería el texto por encima y por debajo de la imagen. Ejemplo: Juntar varios párrafos en un solo con la siguiente regla:

P { display : inline } • list-item: Este valor provoca que un elemento genere una caja de

bloque principal y una caja de línea list-item. Ejemplo: Insertar un párrafo dentro de una lista sin que aparezca entre las etiquetas <li> y </li>. El párrafo no tendrá item o dibujo de elemento de lista. Si añadimos la regla p {display : list-item} veremos como aparece el item o dibujo de lista.

• none: Este valor hace que el elemento no se visualice. Hasta ahora hemos empleado como principal elemento de bloque de HTML el párrafo, es decir, la etiqueta <P>. Sin embargo, ahora que ya queda algo más claro lo que es un bloque podemos introducir la etiqueta HTML para insertar un bloque de contenido. Se trata de la etiqueta DIV o división. Está muy relacionada con las hojas de estilo. Lo que venga dentro de un <DIV> y su cierre </DIV> será un elemento de bloque, por consiguiente, generará una línea por encima y otra por debajo del elemento.

Ejemplo: En este ejemplo podemos ver como estas dos frases aparecen una debajo de otra, es decir, en dos bloques de contenido distintos.

<DIV>Esto es un texto</DIV> <DIV>Estamos en clase de informática</DIV>

Propiedad POSITION Con la propiedad POSITION se pueden situar los elementos de una página donde se el autor desee.

• static: Esta es la posición predeterminada y la que conocemos en HTML. La caja se sitúa dentro del flujo normal de la página y las propiedades 'top', 'right', 'bottom' y 'left' no se aplican

• relative: La posición de la caja se ajusta en relación a su posición normal dentro de la página. Cuando una caja X se posiciona relativamente la caja siguiente se sitúa como si X no se hubiera desplazado.

• absolute: Las cajas son quitadas del flujo normal de la página y su posición se especifica con las propiedades 'left', 'right', 'top', y 'bottom'. Estas propiedades especifican los desplazamientos con respecto al bloque de contención de la caja por lo que los elementos posicionados


absolutamente no tienen ninguna influencia sobre la posición de las cajas siguientes. El bloque de contención para una caja posicionada es establecido por el antepasado posicionado más cercano o, si no existe, por el bloque de contención inicial (la esquina superior izquierda de la página).

• fixed: El posicionamiento fijo es una subcategoría del posicionamiento absoluto. La única diferencia es que para una caja posicionada de modo fijo, el bloque de contención es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento. Esto significa que cuando se hace un scroll en la página los elementos con position: fixed mantienen su posición en la pantalla. No funciona con Internet Explorer y si con FireFox.

Para las cajas con position:absolute, el desplazamiento es con respecto al bloque de contención de la caja. Para las cajas con position:relative, el desplazamiento es con respecto al borde externo de la propia caja (es decir, la caja se desplaza de su posición normal dentro de la página de acuerdo a estas propiedades). Cuando se quiera poner unas coordenadas respecto a un punto de la página debemos usar absolute y si queremos posicionar un elemento respecto a otro elemento contenedor, usaremos relative. Propiedades TOP, RIGHT, LEFT y BOTTOM

• Top: Esta propiedad especifica la distancia que se desplaza el elemento por debajo del borde superior del bloque de contención.

• Right: Esta propiedad especifica la distancia que se desplaza el elemento hacia la izquierda del borde derecho contención.

• Left: Esta propiedad especifica la distancia que se desplaza el elemento hacia la derecha del borde izquierdo del bloque de contención.

• Bottom: Esta propiedad especifica la distancia que se desplaza el elemento por sobre de borde inferior del bloque de contención.

Propiedad OVERFLOW

Generalmente el contenido de un bloque se mantiene dentro de los límites del bloque, pero puede suceder que el contenido desborde esos límites y quede parcial o totalmente fuera del borde del mismo.

Esto puede suceder si especificamos un tamaño determinado para un elemento (con las propiedades 'width' y 'height', por ejemplo) y su contenido resulta demasiado grande para las medidas adjudicadas. Cuando se produce un desbordamiento, la propiedad overflow especifica si el bloque recortado y (en caso afirmativo) cómo será recortado. La propiedad overflow puede tomar lo siguientes valores:


• Visible: Este valor indica que el contenido no es recortado, es decir, puede ser procesado fuera de la caja de bloque.

• Hidden: Este valor indica que el contenido es recortado y los usuarios no tendrán acceso al contenido recortado. El tamaño y forma de la zona de recorte son especificados por la propiedad 'clip'.

• Scroll: Este valor indica que el contenido es recortado y el navegador debe proporcionar un mecanismo de desplazamiento que permanecerá siempre visible (aunque la caja no tenga parte de su contenido recortado).

• Auto: El comportamiento del valor 'auto' depende del navegador, pero significa que éste debe proporcionar un mecanismo de desplazamiento para las cajas desbordadas.

8.2. Otras propiedades de los cuadros margin-top: Margen superior. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten valores negativos.

Valores posibles: <longitud> |<porcentaje> | auto Valor inicial: Definido por el navegador

margin-right: Margen derecho. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten valores negativos.


margin-bottom: Margen inferior. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten valores negativos.


margin-left: Margen izquierdo. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten valores negativos.


margin: Márgenes del elemento. Los valores en porcentaje se refieren al ancho del elemento padre. Se permiten valores negativos. Si se dan cuatro valores se aplican a los márgenes superior, derecho, inferior e izquierdo respectivamente. Si se da un valor, se aplica a todos los márgenes. Si se dan dos o tres valores, los valores que faltan se toman de su lado opuesto.


padding-top: Relleno superior o espacio a colocar entre el borde superior y el contenido. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten valores negativos.

Valores posibles: <longitud> |<porcentaje> Valor inicial: 0


padding-right: Relleno derecho o espacio a colocar entre el borde derecho y el contenido. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten valores negativos.


padding-bottom: Relleno inferior o espacio a colocar entre el borde inferior y el contenido. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten valores negativos.


padding-left: Relleno izquierdo o espacio a colocar entre el borde izquierdo y el contenido. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten valores negativos.


padding: Relleno del elemento o espacio a colocar entre los bordes y el contenido. Los valores en porcentaje se refieren al ancho del elemento padre. No se permiten valores negativos. Si se dan cuatro valores se aplican a los lados superior, derecho, inferior e izquierdo respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores que faltan se toman de su lado opuesto.


border-top-width: Ancho del borde superior.

Valores posibles: thin | medium | thick |<longitud> Valor inicial: medium

border-right-width: Ancho del borde derecho.


border-bottom-width: Ancho del borde inferior.


border-left-width: Ancho del borde izquierdo.


border-width: Ancho del borde. Si se dan cuatro valores se aplican a los lados superior, derecho, inferior e izquierdo respectivamente. Si se da un valor, se aplica a todos los lados. Si se dan dos o tres valores, los valores que faltan se toman de su lado opuesto.



border-color: Color del vorde Valores posibles: <color> Valor inicial: Definido por el navegador border-style: Estilo del borde

Valores posibles: none (sin borde) | dotted (línea de puntos) | dashed (línea discontinua) | solid (sólido) | double (borde doble) | groove | ridge | inset | outset (estos cuatro últimos valores son distintos tipos de bordes con relieve). Valor inicial: none

border-top: Forma rápida de establecer el ancho, el estilo y el color del borde superior.

Valores posibles: Los de ancho, estilo y color de borde. Valor inicial: No definido.

border-right: Forma rápida de establecer el ancho, el estilo y el color del borde derecho.


border-bottom: Forma rápida de establecer el ancho, el estilo y el color del borde inferior.


border-left: Forma rápida de establecer el ancho, el estilo y el color del borde izquierdo.


border: Forma rápida de establecer el ancho, el estilo y el color del borde. Esta propiedad sólo puede establecer todos los cuatro border, es decir, aplicar a los cuatros bordes el mismo ancho, estilo y color.


width: Ancho

Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: auto

height: Alto

Valores posibles: <longitud> | <porcentaje> | auto Valor inicial: auto


8.3. Capas

Como hemos visto, los elementos pueden ubicarse en posiciones precisas dentro de la página. Esta posibilidad puede provocar que, en algunos casos, ciertos elementos se superpongan visualmente con otros; en esas situaciones, ¿cuál queda por encima y cuál por debajo?

Por lo general, el navegador usa el mismo orden que los elementos tienen en la página para definir el orden en que son apilados. Este orden dentro de la pila de elementos puede adjudicarse explícitamente con la propiedad z-index utilizando un valor entero (cuanto más alto el entero, más cercano al lector o más arriba en la pila).

Para que la propiedad z-index tenga efecto debe especificarse con un valor de la propiedad position. 8.4. Filtros Los filtros en CSS permiten modificar y realizar distintos efectos sobre los cuadros. Se usa la propiedad filter. Reflejar contenido

Horizontal: filter:fliph() Vertical: filter:flipv()

Transparencia

filter:alpha(opacity=x) Donde x es un valor entre 0 (trasnparente) y 100 (totalmente opaca).

Transparencia de un color filter:chroma(color=x) Donde x es el color que queremos hacer transparente

Ondas filter:wave(freq=X) Donde x es un valor que indica el número de cortinillas que aparecerán. filter:wave(strength=X) Donde x es un valor que indica deformación, cuanto más grande más deformada aparecerá la imagen filter:wave(phase=X) Donde x es un valor (entre 0 y 100) que indica la posición de aparición de las cortinillas. filter:wave(lightstrength=X)


Donde x es un valor (entre 0 y 100) que indica la claridad u oscuridad de las cortinillas.

Inversión de colores

filter:invert() Los filtros se pueden combinar. 9. Uso de estilos según su funcionalidad Los estilos se pueden emplear con distinto ámbito según donde estén definidos. Para una etiqueta concreta: Se puede modificar el comportamiento de una etiqueta html definiendo un estilo propio para esa etiqueta. Se empleará un selector.

Ejemplo: Quiero que todas las cabeceras de tipo 1 sean de color rojo. H1 { color : red }

Para una etiqueta una sola vez : Se especifica qué estilo voy a emplear especificando la clase a utilizar dentro de la etiqueta. Se emplean las clases. Se empleará un selector de clase, un selector ID o una hoja local.

Ejemplo: Quiero una etiqueta concreta de tipo 1 sea de color rojo; el resto normales.

.rojo { color : red } à Un selector de clase <h1 class=”rojo”> Hola </h1> #colorado { color : red } à Un selector ID <h1 id=”colorado”> Hola </h1> <h1 style=”color:red”> Hola </h1> à Hoja de estilos local

Para la combinación de etiquetas: El estilo se aplica cuando se encuentra una combinación de dichas etiquetas. Se emplean selectores de contexto. (Ver ejemplo de los selectores de contexto). Para cualquier etiqueta: Se emplean clases.

Ejemplo: Quiero poner de color rojo lo que me de la gana. .rojo { color : red }

<p class=”rojo”> Párrafo </p> <h1 class=”rojo”> Cabecera </h1>

Estilo sin etiqueta: Se emplea para situar un estilo en cualquier lugar sin que tenga que hacer el efecto por la aparición de una etiqueta html. Se usa la etiqueta de html <SPAN> combinado con un selector de clase.


Ejemplo:

Estamos escribiendo <span class=”rojo”>un texto relativo</span> a un tema de informática

Nota: la cadena “un texto relativo” aparecerá en rojo sin más. Para una etiqueta con un determinado atributo con o sin un determinado valor: Se emplea un selector de atributo.

Manual CSS.pdf

Documents

Transcript of Manual CSS.pdf