Si un documento incluye o se enlaza con una hoja de estilo, todos los estilos definidos en dicha hoja podrán utilizarse en cualquier punto del documento. Si la hoja de estilo especifica el estilo de una etiqueta HTML, entonces todos las etiquetas de ese tipo en el documento utilizarán dicho estilo.
Puede haber casos en que interese aplicar un estilo selectivamente. Por ejemplo, se puede querer que los párrafos de un documento sean unas veces rojos y otras veces azules. En este caso definir un estilo que se aplique a todos los párrafos no será la solucion correcta. Podemos obtener el efecto deseado definiendo una clase de estilo y especificando cuando queremos que sea utilizada.
Para aplicar una clase de estilo a un elemento HTML, primero se debe definir la clase en la hoja de estilo, y después se utilizará empleando el atributo class en cualquier elemento.
Sintaxis CSS
Sintaxis JavaScript
Uso de la hoja de estilo
Este titulo es muy verde
Este párrafo usa la clase de estilo GREENBOLD. Se puede
utilizar el atributo class para especificar una clase de estilo
para cualquier elemento HTML.
Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es
verde y está en negrita. Puede ser útil para hacer que los bloques
resalten del resto de la página.
Resultado del ejemplo
Este titulo es muy verde
Este párrafo usa la clase de estilo GREENBOLD. Se puede utilizar el atributo class para especificar una clase de estilo para cualquier elemento HTML.
Este bloque usa la clase de estilo GREENBOLD. En consecuencia, es verde y está en negrita. Puede ser útil para hacer que los bloques resalten del resto de la página.
Con sintaxis JavaScript no se pueden utilizar guiones "-". La razón es que el guión es un operador de JavaScript. Los nombres de clases no pueden contener tampoco operadores como: -, +, *, /, %, ...
Cuando se definen clases de estilo se puede especificar a que elementos se podrán aplicar dicha clase, o usaremos la palabra clave all para indicar que todos los elementos podrán utilizarla.
En el siguiente ejemplo se crea una clase de estilo naranja que podrá utilizar cualquier elemento HTML. También se crea una clase rojo que sólo podrán utilizar párrafos y bloques.
Sintaxis CSS
Sintaxis JavaScript
Uso de la hoja de estilo
Este párrafo es rojo.
Este párrafo es del color por defecto,
porque no utiliza la clase rojo
Este bloque usa la clase rojo.
Este titulo intenta usar la clase rojo, pero no le está permitido
Este párrafo es amarilo
Este titulo es naranja porque usa la clase naranja
Resultado del ejemplo
Este párrafo es rojo.
Este párrafo es del color por defecto, porque no utiliza la clase rojo
Este bloque usa la clase rojo.
Este titulo intenta usar la clase rojo, pero no le está permitido
Este párrafo es amarilo
Este titulo es naranja porque usa la clase naranja
Un elemento HTML sólo puede utilizar una clase de estilo. Si se especifican dos o más clases, se utilizaran la primera. Por ejemplo, en el siguiente código un párrafo intenta usar las clases rojo y naranja. Como resultado final se acaba empleando la clase rojo que es la primera que se especifica.
Ejemplo:
Otro párrafo rojo.
Resultado:
Otro párrafo rojo.
________________________________________
Definición de Estilos Individuales con Nombre
Se pueden crear estilos individuales con nombre. Los elementos HTML pueden utilizar un clase de estilo y un estilo individual con nombre. Normalmente estos se utilizan para expresar excepciones de estilo. Por ejemplo, si un párrafo utiliza la clase de estilo PRINCIPAL, podemos usar el estilo con nombre AZUL1 para expresar alguna diferencia respecto a la clase PRINCIPAL.
También son útiles para definir capas de contenidos HTML posicionadas de forma precisa.
Parar definir estilos con nombre, en sintaxis CSS, se precede el nombre con el signo #. En JavaScript se utiliza la propiedad ids.
Para aplicar el estilo a un elemento, se utiliza el nombre de estilo individual como valor del atributo ID.
En el siguiente código se define una clase de estilo PRINCIPAL. Esta clase especifica una fuente de 15 puntos, negrita y de color rojo, y una interlínea de 20 puntos. También se define un estilo con nombre llamado AZUL1 cuyo color es azul.
Sintaxis CSS
Sintaxis JavaScript
Uso de la hoja de estilo
AquÍ se puede ver un texto rojo y en negrita. En este
párrafo la interlínea y el tamaño de la fuente
son mayores de lo habitual.
Este párrafo es casi igual al anterior. Está en
negrita y su fuente es mayor de lo habitual. Aunque usa la clase
PRINCIPAL es azul porque se utiliza el estilo con nombre AZUL1.
Resultado del ejemplo
Aquí se puede ver un texto rojo y en negrita. En este párrafo la interlínea y el tamaño de la fuente son mayores de lo habitual.
Este párrafo es casi igual al anterior. Esta en negrita y su fuente es mayor de lo habitual. Aunque usa la clase PRINCIPAL es azul porque se utiliza el estilo con nombre AZUL1.
________________________________________
Uso de Criterios de Selección Contextual
Se pueden definir estilos para utilizarse con todos los elementos HTML de una clase particular. Si se necesita un mayor control sobre el uso de estilos podemos hacer que estos se apliquen selectivamente. Podriamos, por ejemplo, querer que el texto enfatizado sea de color verde, pero sólo si este está en el interior de un título de tamaño 4.
Se puede conseguir este nivel control sobre la aplicacion de estilos usando los criterios de selección contextual. Estos, en general, permiten especificar que un estilo se aplicara sólo si un elemento se encuentra anidado dentro de un elemento de otro cierto tipo.
Mediante la sintaxis, CSS esto se consigue listando ordenadamente los elementos HTML antes de las llaves. Con sintaxis JavaScript es necesario utilizar el método contextual().
Sintaxis CSS
Sintaxis JavaScript
Uso de la hoja de estilo
El texto enfatizado de este titulo es verde.
En cambio este texto enfatizado no es verde.
Resultado del ejemplo
El texto enfatizado de este titulo es verde.
En cambio este texto enfatizado no es verde.
Ahora veremos otro ejemplo que hace que las marcas los elementos de lista que hereden de al menos dos listas desordenadas sean de color azul.
Sintaxis CSS
ul ul li {color: blue;}
Sintaxis JavaScript
contextual(tags.ul, tags.ul, tags.li).color = "blue";
Se pueden utilizar los criterios de selección contextual para buscar etiquetas, clases, ids o combinaciones de estos. En el siguiente ejemplo se crea la clase MAGENTA que lo colorea todo de magenta. Todos los párrafos MAGENTA que estén dentro de un
Sintaxis CSS
Sintaxis JavaScript
Uso de la hoja de estilo
Titulo h4 en MAGENTA
Este párrafo deberia ser magenta y cursivo. Ahora
viene un texto grande. Conseguimos este efecto con
selección contextual
Este párrafo todavia es MAGENTA, pero
como no esta dentro de un bloque
Resultado del ejemplo
Titulo h4 en MAGENTA
Este párrafo deberia ser magenta y cursivo. Ahora viene un texto grande. Conseguimos este efecto con selección contextual
Este párrafo todavia es MAGENTA, pero como no esta dentro de un bloque
________________________________________
Especificacion de Estilos para Elementos Individuales
De igual forma que se puden definir hojas de estilo, podemos utilizar el atributo style de cualquier etiqueta HTML para definir un estilo que le será aplicado solamente a ella. Esta aproximación puede ser útil en situaciones en que necesitemos utilizar un estilo en un sitio y no sea necesario volver a utilizarlo.
Sin embargo, en general, es mejor definir todos los estilo usados en un documento en un único lugar. Asi es más fácil realizar modificaciones en su estilo sin tener que recorrerlo. Si se necesita hacer algun cambio sólo es necesario hacerlos una vez y el cambio automáticamente se aplica a todo el documento.
A veces, sin embargo, se necesita especificar el estilo de un elemento y la forma más fácil de hacerlo es mediante el atributo style. En el ejemplo se especifica un estilo para el elemento
. También se muestra el uso de para aplicar un estilo a varios elementos.
Tal y como debería ser este párrafo es de color
Este otro párrafo no es de color
son elementos de bloque, pero no lo es.
Los bordes se usan muy a menudo. Por ejemplo, si un bloque
Este es otro párrafo con borde. Ten cuidado con los
Sintaxis CSS
Este párrafo, y sólo este párrafo, es verde,
esta en negrita y tiene unos grandes margenes.
Este párrafo es del color habitual, pero esta palabra es
diferente al resto.
Sintaxis JavaScript
Este párrafo, y sólo este párrafo, es verde,
esta en negrita tiene unos grandes márgenes.
Este párrafo es del color habitual, pero esta palabra
es diferente al resto.
Resultado del ejemplo
Este párrafo, y sólo este párrafo, es verde, esta en negrita y tiene unos grandes márgenes.
Este párrafo es del color habitual, pero esta palabra es diferente al resto.
________________________________________
Combinando Hojas de Estilo
Se puede utilizar más de una hoja de estilo para fijar las características de un documento. Esto es deseable si se tienen varias hojas de estilos parciales, de forma que cada una de ellas define diferentes estilos.
Supongamos, por ejemplo, que estamos escribiendo un informe sobre los beneficios de un producto de red de una compañia llamada AlpargataNet. Puede que se necesite usar tres hojas de estilo: una definiendo el estilo habitual de los informes, otra que defina el estilo de los productos de red, y otra que defina el estilo de la compañia SneakerNet.
El siguiente ejemplo muestra el uso de varias hojas de estilo en un mismo documento.
h1 {color: red;} /* tiene preferencia sobre las hojas externas */
Entre las hojas de estilo externas, la última tiene precedencia sobre las demás. Asi, en caso de conflicto, se escoge el estilo de la última hoja de estilo especificada.
Los estilos definidos para elementos individuales tienen precedencia sobre los definidos en el elemento
Sintaxis JavaScript
Uso de la hoja de estilo
azul, y esta parte en negrita es de color verde
azul, ni esta parte en negrita es de color
verde, porque se ha usado style para cambiarles el color.
Resultado del ejemplo
Tal y como debería ser este párrafo es de color azul, y esta parte en negrita es de color verde
Este otro párrafo no es de color azul, ni esta parte en negrita es de color verde, porque se ha usado style para cambiarles el color.
________________________________________
Propiedades de Formato de Elementos de Bloque
En esta sección se exponen las opciones de formato de los elementos de bloque. Los elementos de bloque comienzan en una nueva línea. Por ejemplo, y
Comenzaremos presentando unos ejemplos que muestren las posibilidades de formato de los elementos de bloque. Despues se discutirá cada opción de formato en detalle. Para finalizar se echará un vistazo a su comportamiento respecto a la herencia de propiedades.
________________________________________
Formato de Bloques: Introducción y Ejemplos
Las hojas de estilo tratan a cada elemento de bloque como si estuviera rodeado de una caja. Cada caja puede tener características de estilo propias tales como márgenes, bordes, relleno y una imagen o color de fondo.
Los márgenes indican la separación entre el borde de la caja y el borde del documento. Estos bordes pueden tener apariencia plana o tridimensional. El relleno ("padding") indican la separación entre el borde de los elementos y el contenido de los mismos.
También se puede fijar la anchura de los elementos de bloque, bien mediante un valor especifico, o bien mediante un porcentaje de la anchura total del documento. En este caso es redundante fijar los márgenes derecho o izquierdo y la anchura.
Si se especifican la anchura y los dos márgenes, el valor de del margen izquierdo tiene prioridad sobre los demás valores en caso de conflicto. En este caso el valor del margen derecho especifica la distancia máxima desde el borde derecho de elemento que lo contiene. El valor del anchura es utilizado sólo si no sobrepasa los limites de anchura del elemento que lo contiene.
El alineación horizontal puede a izquierda, derecha o centrado. Esto se consige usando la propiedad float en CSS o la propiedad align en JavaScript.
En los siguientes ejemplos se muestra el uso de márgenes, relleno, bordes, fondos y alineación.
Sintaxis CSS
Sintaxis JavaScript
Uso de la hoja de estilo
Titulo h3 con borde sólido y fondo
tiene borde resalta mucho más que si no lo tiene.
bordes, no los hagas demasiado anchos, pues de lo contrario ocuparan
demasido espacio.
Resultado del ejemplo
Titulo h3 con borde sólido y fondo
Los bordes se usan muy a menudo. Por ejemplo, si un bloque tiene borde resalta mucho más que si no lo tiene.
Este es otro párrafo con borde. Ten cuidado con los bordes, no los hagas demasiado anchos, pues de lo contrario ocuparan demasido espacio.
________________________________________
Márgenes
Los márgenes indican la separación entre el borde del bloque y el borde del documento, o elemento padre. Se pueden fijar los márgenes derecho, izquierdo, superior e inferior. Para ello se deben utilizar las siguientes nombres de propiedad:
Sintaxis CSS
• margin-top
• margin-bottom
• margin-left
• margin-right
• margin
Sintaxis JavaScript
• marginTop
• marginBottom
• marginLeft
• marginRight
• margins()
En vez de especificar los dos márgenes se puede utilizar la propiedad width. Se pueden utilizar valores específicos, como 200 puntos, o valores relativos, como el 50% de la anchura del elemento padre. Es redundante fijar los dos márgenes y la anchura, pues dos de estos tres valores implican el tercero.
Para especificar los márgenes por defecto para un documento se deben especificar para la etiqueta . En el siguiente ejemplo se fijan dichos márgenes en 20 puntos a derecha e izquierda.
Sintaxis CSS
Sintaxis JavaScript
Ejercicio: intente replicar el modelo de márgenes que puede objservar en la siguiente imagen:
________________________________________
Bordes
Los bordes se pueden utilizar para muchas cosas, como por ejemplo, separar elementos o destacar ciertas partes de un documento. Para que un borde se muestre es necesario darle anchura y color. A continuación describimos como hacerlo. Se puede fijar la anchura del borde que rodea un elemento de bloque usando las siguientes propiedades:
Sintaxis CSS
• border-top-width
• border-bottom-width
• border-left-width
• border-right-width
• border-width
Sintaxis JavaScript
• borderTopWidth
• borderBottomWidth
• borderLeftWidth
• borderRightWidth
• borderWidths()
Los valores que pueden tomar son tanto numéricos como palabras reservadas como thin, medium y thick. Vea una muestra:
Se puede fijar el estilo del borde usando la propiedad border-style de CSS o la propiedad borderStyle de JavaScript. Los valores que pueden tomar son dotted, dashed, solid, double, groove, ridge, inset y outset.
dotted dashed solid double
groove ridge inset outset
Las propiedades de borde se puede expresar de dos formas, por separado como hasta ahora, o combinadas como se muestra en el siguiente ejemplo:
Por separado:
p
{
border-width: 1px;
border-style: solid;
border-color: blue;
}
Combinadas:
p { border: 1px solid blue; }
________________________________________
Relleno
El relleno indican la distancia entre el borde de un elemento y su contenido. El relleno se muestra incluso si el borde del elemento no lo hace.
Se puede fijar el tamaño del relleno de un elemento de bloque utilizando las siguientes propiedades.
Sintaxis CSS
• padding-top
• padding-bottom
• padding-left
• padding-right
Sintaxis JavaScript
• paddingTop
• paddingBottom
• paddingLeft
• paddingRight
Ejercicio: cree un estilo que aplicado a una tabla consiga que los elementos en el interior de las celdas tengan un relleno de 16 pixels a izquierda y derecha y 8 pixels arriba y abajo.
________________________________________
Herencia de Propiedades de Formato de Bloque
La características de anchura, márgenes, bordes y relleno de los elementos padre no son heredadas por sus hijos. Sin embargo, a primera vista, a veces puede parecer que si son heredados, pues los valores los elementos padre afectan a sus elementos hijos.
Supongamos que a un elemento
Pensemos en que ocurriria si los hijos heredasen estas características de sus padres. El bloque
Algo parecido ocurriría con una imagen de fondo. Si se heredase esta propiedad en vez de ver una sola copia de la imagen de fondo, normalmente apliacada a body, veriamos muchas copias de la esquina superior izquierda si no se cambia la alineación por defecto de la imagen.
________________________________________
Fuentes Descargables
Las fuentes cargables consisten en la posibilidad de incluir en el documento HTML la definición de las fuentes empleadas por si éstas no se encontraran disponibles en el sistema de destino. Dicha definición consiste en un fichero que se debe colocar en la máquina servidora, al igual que el documento o las imágenes.
Los ficheros de fuentes, como otros muchos recursos, se pueden conseguir en Internet, pero el usuario no las puede grabar en disco (como puede hacer con el documento o las imágenes). Por otro lado, hay que tener en cuenta que las fuentes están sujetas a las "leyes de derechos de autor", por lo que, antes de utilizarlas dentro de nuestras páginas deberemos asegurarnos de tener permiso para hacerlo.
Para que todo funcione correctamente, al servidor habrá que añadirle un nuevo tipo MIME para que reconozca este tipo de archivos. El nuevo tipo es application/font-tdpfr, asociado a la extensión .pfr.
________________________________________
Cómo Usar Fuentes Descargables.
Una vez se dispone del fichero de definición de fuentes, por ejemplo, fuente.pfr, se pueden asociar al documento a través de un estilo, por medio de la palabra fontdef, por ejemplo:
o también con la etiqueta :
Una vez que el fichero ha sido cargado desde el servidor donde están las páginas, imágenes, fuentes, etc., para utilizar estas fuentes, modificaremos el valor del atributo face de la etiqueta , por ejemplo:
Vamos a probar el tipo de letra Gutemberg
o bien definiendo un estilo CSS, utilizando la propiedad font-family:
...
...
________________________________________
Características del Contexto
Otros métodos
No hay comentarios:
Publicar un comentario