Clases en CSS

Clases

Es muy posible que no queramos todos lo párrafos exactamente iguales, o que un encabezado en particular tenga una regla estilística diferente. Para ello, es posible definir clases dentro de los selectores para poder tratar estas excepciones de manera correcta.

¡A esto se le llama flexibilidad!

P {font-size: 11pt} p.cita { font-size: 10pt; font-style: italic }

En una primera definición del selector p, el cuerpo asignado es de 11 puntos tipográficos, sin embargo si el párrafo en cuestión es de la clase “cita”, éste adoptaría la segunda regla como suya, poniendo el cuerpo algo más pequeño, y en cursiva.

Una vez declarada esta excepción hay que indicar su uso. La clave está en el atributo class Aquí se muestra: <p class=”cita”> xxxxxxxxxx </p>

¿Estilos personales?

Es posible querer definir una clase en particular pero no aplicársela a un selector concreto. Sea:

.grande {font-size: 36pt}

Así le podemos aplicar la clase a cualquier etiqueta, simplemente indicándolo en su atributo class:

<ul class=”grande”>

Muchos programas de creación web tratan a estos estilos como “estilos personales” (Dreamweaver), pero en realidad son simplemente clases de uso genérico.

Bloque o carácter

Es posible que queramos aplicar un estilo a una selección de caracteres más que a un bloque delimitado por etiquetas HTML estándares como <p>, <h1> o <ul>.

Para ello tenemos la estupenda etiqueta <span>.

<p> Esto es <span class=”grande”> grande </span> y el resto no. </p>

Como se puede adivinar, las clases genéricas tienen aquí una de sus principales aplicaciones.

Selectores contextuales

Una curiosa aplicación es la de aplicar estilos a una determinada etiqueta siempre que esté dentro de los dominios de otra. Veamos.

strong {color: blue} h1 strong {color: green}

Tenemos una etiqueta como <strong>, que habitualmente pone los textos en negrita. Mediante la primera regla indicamos que ponga el texto en azul, además de su comportamiento habitual. Pero además le indicamos que en el caso que tenga como etiqueta padre a <h1> es decir, que el texto en negrita esté dentro de un encabezado de este tipo, el texto se escriba en verde.

plantilla css 3 columnas

Popularity: 6% [?]

Posted in CSS | No comments

CSS en cascada

CSS terminó imponiéndose, gracias a una premisa que abre muchas puertas: la flexibilidad.
El desarrollador puede incluir una hoja de estilos aplicada a sus documentos, pero el usuario puede sumar sus propios estilos, o incluso sustituirlos.
Esta capacidad del lenguaje para acumular diferentes fuentes de estilo hizo acuñar el termino “en cascada”.

La idea original era que el CSS fuera un lenguaje de estilo de propósito general, aplicable a otros formatos como el XML, el cual se extenderá masivamente en un futuro no muy lejano.

EL principal uso hoy en día es la vinculación con el formato inmortal HTML. Veremos como indicarle al explorador de la existencia una hoja de estilos

La etiqueta <style>

Dentro de la sección del encabezado, podemos declarar una hoja de estilos entre estas etiquetas:

<style>
<!—-
p {font-size: 11pt}
h1 {
color: green;
font-size: 18pt
}
–>
</style>

Esta hoja de estilos se compone de dos reglas, con dos selectores habituales: la etiqueta para los párrafos y la de encabezados de primer nivel.

El hecho de incluir la hoja entre comentarios estándar de HTML es para que navegadores antiguos que no reconozcan la etiqueta <style> no incluyan las reglas como contenido del cuerpo de la página, es decir, que simplemente la ignoren.

<link> o la hoja vinculada

En el ejemplo anterior la hoja está embebida o incrustada en el propio documento HTML, sin embargo, la auténtica potencia de los estilos CSS es la posibilidad de vincular los mismos estilos a múltiples páginas. Se indicaría así:

<link href="estilos.css" rel="stylesheet" type="text/css">

Siendo “estilos.css” el archivo que contiene exclusivamente las reglas que constituyen la hoja de estilos.
El uso de la etiqueta <link> también debe indicarse antes de que se cierre la etiqueta <head>.

Estilos sobre la marcha

Una práctica poco aconsejable, pero posible, es definir estilos en el propio cuerpo del documento, tal como se indica:

<h1 style=”color: red”>Primera parte</h1>

La auténtica potencia de los estilos reside en una premisa básica del mundo de la informática: sacar factor común de situaciones similares, por lo que definir un estilos para un sólo uso tiene escasas ventajas.

Bueno pues además de explicar éstos conceptos fundamentales sobre CSS aquí te dejo una plantilla diseñada con dos columnas.

Popularity: 7% [?]

Posted in CSS | No comments

Plantilla CSS

Comenzamos una nueva sección que pienso que puede ser de interés y que vamos a dedicar al diseño de páginas web mediante CSS, para enriquecer ésta información conceptual iremos incluyendo en cada post una plantilla que pueda ser descargada y utilizada de forma inmediata.

Mediante sucesivas entradas iremos desglosando diferentes conceptos acerca de CSS, que podemos definirlo como (Cascade Style Sheet) Hoja de Estilo en Cascada conjunto de instrucciones escritas en HTML que definen las apariencias de una página web. El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirá de estándar para los navegadores.

Por lo tanto CSS es un lenguaje, y como tal es un conjunto de símbolos descritos junto a una gramática. A continuación se muestra el esquema básico de una regla CSS, elemento indivisible, y la definición de algunos términos básicos.

sintaxis css

 
selector: cadena de caracteres que identifica a qué elemento del lenguaje se aplica la regla.
propiedad: un elemento del lenguaje CSS que representa una unidad estilística como el color (en la figura) o el interlineado. Hay unas cincuenta.
valor: el dato que indica la cantidad en la que se dimensiona la propiedad. Éste dependerá de la naturaleza de la ésta.
declaración: es un par propiedad-valor separado por dos puntos.,
regla: es la unidad básica del CSS y se compone de selector más declaración. La declaración/es se enmarca entre llaves.
Una regla puede contener más de una declaración, las cuales irían separadas por punto y coma:

p {
color: green;
font-size: 18pt;
 }

La plantilla de esta entrada, haz clik sobre la imagen y bájate la página a tu ordenador, el estilo está incrustado en la cabecera de la misma.

plantilla css

Popularity: 8% [?]

Posted in CSS | No comments