identificacion del lenguaje css
TRANSCRIPT
IDENTIFICACION DEL
LENGUAJE «CSS»
Margarita Simoney Llamas Tafoya
Definición de CSS y Especificación
oficial de CSS.
Es un lenguaje de hojas de estilos creados para darle
presentación a documentos creados como HTML y
XHTML.
CSS es un lenguaje muy imprescindible para la
creación de paginas web complejas.}
Este lenguaje modifica en tanto a cuestiones de
colores, márgenes, líneas, cuadros, imágenes, altura y
anchura, imágenes de fondo y posiciones. Además de
que este lenguaje cuenta con el soporte de todos los
software.
Control de la presentación de muchos documentos
desde una única hoja de estilo;
Control más preciso de la presentación;
Aplicación de diferentes presentaciones a diferentes
tipos de medios (pantalla, impresión, etc.);
Numerosas técnicas avanzadas y sofisticadas.
BENEFICIOS DE CSS..
La especificación o norma oficial que se utiliza
actualmente para diseñar páginas web con CSS es la
versión CSS 2.1, actualizada por última vez el 23 de
abril de 2009.
Desde hace varios años, el organismo W3C trabaja en
la elaboración de la próxima versión de CSS, conocida
como CSS 3. Esta nueva versión incluye multitud de
cambios importantes en todos los niveles y es mucho
más avanzada y compleja que CSS 2.
ESPECIFICACION OFICIAL DE
CSS..
No obstante, pasarán muchos años hasta que
se publique la versión definitiva completa
de CSS 3 y hasta que los principales
navegadores del mercado incluyan la mayor
parte del nuevo estándar.
Funcionamiento básico y Formas de
inclusión de CSS en XHTML
Para poder visualizar un concepto de su operabilidad, es bueno recordar como lo hace normalmente el código HTML. En el caso de las tags (etiquetas)que le brinda una información correspondiente al contenido de la pagina y su acción sobre elementos en particular.
En el caso de las Hoja de Estilo no manejan el formato de la pagina al contrario usan archivos con extensiones .CSS para asócialos posteriormente a la pagina.
H1 { font-family: Arial, Sans-serif; font-size: 19pt; color: #0000FF; text-align: center; }
COMO INCRUSTAR CSS EN HTML..
Nos permite al manejar archivos externos mayor
flexibilidad sin alterar el código HTML y vincularlas con
mas páginas.
Podemos adicionar a su utilización externa,
incluirla dentro de una página usando el
comando STYLE
<HTML> <HEAD> <TITLE>CSS incrustada</TITLE> <STYLE
type="text/css"> H1 { color: blue } </STYLE> </HEAD> <BODY>
<H1>Título color azul</H1> <P>Un párrafo cualquiera... </BODY>
</HTML>
Al incluirla en la página nos restringe su utilización pues solo
será utilizada en la que fue incluida. Si bien no es
funcional como usar un archivo .CSS externa, resulta útil
cuando necesitamos en algunas páginas usar un formato
distinto.
En algunos casos tendremos que hacer uso de estos
métodos simultáneamente: La utilización del link a una hoja
externa como estilo general y luego crear una hoja
incrustada es en la cual definiríamos las reglas a trabajar
solo en dicha pagina. Las leyes de cascada de las CSS, en la
mayoría de los casos las reglas definidas en la hoja
incrustada tendrá prioridad.
Esto nos permite también crear Hojas de estilo en línea
aplicables directamente a la etiqueta HTML
<P STYLE="text-align: left; text-indent: 1em">
Aunque no es la manera mas optima del uso de hojas de
estilo pueden ser utilizados en ciertos casos. En este caso no
se declaran en el encabezado el tipo de CSS trabajado.
La utilización directa en la etiqueta es comparada con la
hecha en el código HTML, pero que la diferencian dos
elementos:
1. Las propiedades que se pueden aplicar es muchas mas.
2. Los estilos de una hoja de estilo tienen prioridad sobre los
aplicados con HTML.
Uso de comentarios y Sintaxis de la
definición de cada propiedad
Uso de comentarios y Sintaxis de la definicion de cada
propiendad.
Si el valor permitido se indica como una sucesión de valores
separados por una barra simple (carácter |) el valor de la
propiedad debe tomar uno y sólo uno de los valores
indicados. Por ejemplo, la notación <porcentaje> | <medida>
| inherit indica que la propiedad solamente puede tomar
como valor la palabra reservada inherit o un porcentaje o una
medida.
Si el valor permitido se indica como una sucesión de valores
separados por una barra doble (símbolo ||) el valor de la
propiedad puede tomar uno o más valores de los indicados y
en cualquier orden.
Por ejemplo, la notación <color> || <estilo> || <medida> indica que
la propiedad puede tomar como valor cualquier combinación de los
valores indicados y en cualquier orden. Se podría establecer un
color y un estilo, solamente una medida o una medida y un estilo.
Además, el orden en el que se indican los valores es indiferente.
El carácter * indica que el valor ocurre cero o más veces; el
carácter + indica que el valor ocurre una o más veces; el
carácter ? indica que el valor es opcional y por último, el
carácter {número_1, número_2} indica que el valor ocurre al menos
tantas veces como el valor indicado en número_1 y como máximo
tantas veces como el valor indicado en número_2.
Por ejemplo, el valor [<family-name> , ]* indica que el valor
de tipo <family_name> seguido por una coma se puede
incluir cero o más veces. El valor <url>? <color> significa que
la URL es opcional y el color obligatorio y en el orden
indicado. Por último, el valor [<medida> | thick | thin]
{1,4} indica que se pueden escribir entre 1 y 4 veces un valor
que sea o una medida o la palabrathick o la palabra thin.
Selectores, Agrupación de reglas y
Herencia
Para crear diseños web profesionales, es imprescindible
conocer y dominar los selectores de CSS. Como se vio en el
capítulo anterior, una regla de CSS está formada por una
parte llamada "selector" y otra parte llamada "declaración".
La declaración indica "qué hay que hacer" y el selector
indica "a quién hay que hacérselo". Por lo tanto, los
selectores son imprescindibles para aplicar de forma correcta
los estilos CSS en una página.
A un mismo elemento HTML se le pueden aplicar varias
reglas CSS y cada regla CSS puede aplicarse a un número
ilimitado de elementos. En otras palabras, una misma regla
puede aplicarse sobre varios selectores y un mismo selector
se puede utilizar en varias reglas.
El estándar de CSS 2.1 incluye una docena de tipos
diferentes de selectores, que permiten seleccionar de forma
muy precisa elementos individuales o conjuntos de
elementos dentro de una página web.
Cuando se crean archivos CSS complejos con decenas o cientos de reglas, es habitual que los estilos que se aplican a un mismo selector se definan en diferentes reglas:
h1 { color: red; } ... h1 { font-size: 2em; } ... h1 { font-family: Verdana; }
Las tres reglas anteriores establecen el valor de tres propiedades diferentes de los elementos <h1>. Antes de que el navegador muestre la página, procesa todas las reglas CSS de la página para tener en cuenta todos los estilos definidos para cada elemento.
Cuando el selector de dos o más reglas CSS es idéntico, se pueden agrupar las declaraciones de las reglas para hacer las hojas de estilos más eficientes:
h1 { color: red; font-size: 2em; font-family: Verdana; }
AGRUPACION DE REGLAS ..
El ejemplo anterior tiene el mismo efecto que las tres reglas
anteriores, pero es más eficiente y es más fácil de modificar y
mantener por parte de los diseñadores. Como CSS ignora los
espacios en blanco y las nuevas líneas, también se pueden
agrupar las reglas de la siguiente forma:
h1 { color: red; font-size: 2em; font-family: Verdana; }
Si se quiere reducir al máximo el tamaño del archivo CSS para
mejorar ligeramente el tiempo de carga de la página web,
también es posible indicar la regla anterior de la siguiente
forma:
h1 {color:red;font-size:2em;font-family:Verdana;}
Una de las características principales de CSS es la herencia
de los estilos definidos para los elementos. Cuando se
establece el valor de una propiedad CSS en un elemento,
sus elementos descendientes heredan de forma automática
el valor de esa propiedad. Si se considera el siguiente
ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-
Type" content="text/html; charset=iso-8859-1" /> <title>Ejemplo de herencia
de estilos</title> <style type="text/css"> body { color: blue; } </style>
</head> <body> <h1>Titular de la página</h1> <p>Un párrafo de texto no
muy largo.</p> </body> </html>
HERENCIA..
De esta forma, los elementos <h1> de la página se muestran
con el tipo de letra Verdana establecido por el selector h1 y
se muestran de color negro que es el valor heredado del
elemento <body>. Igualmente, los elementos <p> de la
página se muestran del color rojo establecido por el
selector p y con un tipo de letra Arial heredado del
elemento <body>.
La mayoría de propiedades CSS aplican la herencia de
estilos de forma automática. Además, para aquellas
propiedades que no se heredan automáticamente, CSS
incluye un mecanismo para forzar a que se hereden sus
valores, tal y como se verá más adelante.
Por último, aunque la herencia automática de estilos puede
parecer complicada, simplifica en gran medida la creación de
hojas de estilos complejas. Como se ha visto en los ejemplos
anteriores, si se quiere establecer por ejemplo la tipografía
base de la página, simplemente se debe establecer en el
elemento <body> de la página y el resto de elementos la
heredarán de forma automática.
En las hojas de estilos complejas, es habitual que varias
reglas CSS se apliquen a un mismo elemento HTML. El
problema de estas reglas múltiples es que se pueden dar
colisiones como la del siguiente ejemplo:
p { color: red; } p { color: blue; } <p>...</p>
CSS tiene un mecanismo de resolución de colisiones muy
complejo y que tiene en cuenta el tipo de hoja de estilo que
se trate (de navegador, de usuario o de diseñador), la
importancia de cada regla y lo específico que sea el selector.
Colisiones de estilos, Unidades de
medida y colores
El método seguido por CSS para resolver las colisiones deestilos se muestra a continuación:
1. Determinar todas las declaraciones que se aplican alelemento para el medio CSS seleccionado.
2. Ordenar las declaraciones según su origen (CSS denavegador, de usuario o de diseñador) y su prioridad(palabra clave !important).
3. Ordenar las declaraciones según lo específico que sea elselector. Cuanto más genérico es un selector, menosimportancia tienen sus declaraciones.
4. Si después de aplicar las normas anteriores existen doso más reglas con la misma prioridad, se aplica la que seindicó en último lugar.
Hasta que no se expliquen más adelante los conceptos detipo de hoja de estilo y la prioridad, el mecanismosimplificado que se puede aplicar es el siguiente:
1. Cuanto más específico sea un selector, más importanciatiene su regla asociada.
2. A igual especificidad, se considera la última regla indicada.
Como en el ejemplo anterior los dos selectores son idénticos,las dos reglas tienen la misma prioridad y prevalece la quese indicó en último lugar, por lo que el párrafo se muestra decolor azul.
En el siguiente ejemplo, la regla CSS que prevalece sedecide por lo específico que es cada selector:
p { color: red; } p#especial { color: green; } * { color: blue; } <p id="especial">...</p>
Al elemento <p> se le aplican las tres declaraciones. Como
su origen y su importancia es la misma, decide la
especificidad del selector. El selector * es el menos
específico, ya que se refiere a "todos los elementos de la
página". El selector p es poco específico porque se refiere
a "todos los párrafos de la página". Por último, el
selector p#especial sólo hace referencia a "el párrafo de la
página cuyo atributo id sea igual a especial". Como el
selector p#especial es el más específico, su declaración es la
que se tiene en cuenta y por tanto el párrafo se muestra de
color verde.
Muchas de las propiedades de CSS que se ven en los
próximos capítulos permiten indicar medidas y colores en
sus valores. Además, CSS es tan flexible que permite
indicar las medidas y colores de muchas formas
diferentes.
Por este motivo, se presentan a continuación todas las
alternativas disponibles en CSS para indicar las medidas y
los colores. En los siguientes capítulos, cuando una
propiedad pueda tomar como valor una medida o un color,
no se volverán a explicar todas estas alternativas.
UNIDADES DE MEDIDA Y COLORES..
Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y para establecer el tamaño de letra del texto. Todas las medidas se indican como un valor numérico entero o decimal seguido de una unidad de medida (sin ningún espacio en blanco entre el número y la unidad de medida).
CSS divide las unidades de medida en dos grupos: absolutas y relativas. Las medidas relativas definen su valor en relación con otra medida, por lo que para obtener su valor real, se debe realizar alguna operación con el valor indicado. Las unidades absolutas establecen de forma completa el valor de una medida, por lo que su valor real es directamente el valor indicado.
Si el valor es 0, la unidad de medida es opcional. Si el valor es distinto a 0 y no se indica ninguna unidad, la medida se ignora completamente, lo que suele ser uno de los errores más habituales de los diseñadores que empiezan con CSS. Algunas propiedades permiten indicar medidas negativas, aunque habitualmente sus valores son positivos. Si el valor decimal de una medida es inferior a 1, se puede omitir el 0 de la izquierda (0.5em es equivalente a .5em).
UNIDADES..
Una medida indicada mediante unidades absolutas está completamente definida, ya que su valor no depende de otro valor de referencia. A continuación se muestra la lista completa de unidades absolutas definidas por CSS y su significado:
in, pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 centímetros.
cm, centímetros.
mm, milímetros.
pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros.
pc, picas. Una pica equivale a 12 puntos, es decir, unos 4.23 milímetros.
A continuación se muestran ejemplos de utilización de unidades absolutas:
UNIDADES
ABSOLUTAS..
/* El cuerpo de la página debe mostrar un margen de media pulgada */ body { margin: 0.5in; } /* Los elementos <h1> deben mostrar un interlineado de 2 centímetros */ h1 { line-height: 2cm; } /* Las palabras de todos los párrafos deben estar separadas 4 milímetros entre si */ p { word-spacing: 4mm; } /* Los enlaces se deben mostrar con un tamaño de letra de 12 puntos */ a { font-size: 12pt } /* Los elementos <span> deben tener un tamaño de letra de 1 pica */ span { font-size: 1pc }
La principal ventaja de las unidades absolutas es que su valor es directamente el valor que se debe utilizar, sin necesidad de realizar cálculos intermedios. Su principal desventaja es que son muy poco flexibles y no se adaptan fácilmente a los diferentes medios.
De todas las unidades absolutas, la única que suele utilizarse es el punto (pt). Se trata de la unidad de medida preferida para establecer el tamaño del texto en los documentos que se van a imprimir, es decir, para el medio print de CSS, tal y como se verá más adelante.
La unidades relativas, a diferencia de las absolutas, no están
completamente definidas, ya que su valor siempre está
referenciado respecto a otro valor. A pesar de su aparente
dificultad, son las más utilizadas en el diseño web por la flexibilidad
con la que se adaptan a los diferentes medios.
A continuación se muestran las tres unidades de medida relativas
definidas por CSS y la referencia que toma cada una para
determinar su valor real:
em, (no confundir con la etiqueta <em> de HTML) relativa respecto
del tamaño de letra del elemento.
ex, relativa respecto de la altura de la letra x ("equis minúscula") del
tipo y tamaño de letra del elemento.
px, (píxel) relativa respecto de la resolución de la pantalla del
dispositivo en el que se visualiza la página HTML.
UNIDADES RELATIVAS..
Las unidades em y ex no han sido creadas por CSS, sino que
llevan décadas utilizándose en el campo de la tipografía. Aunque
no es una definición exacta, la unidad 1em equivale a la anchura de
la letra M ("eme mayúscula") del tipo y tamaño de letra del
elemento.
La unidad em hace referencia al tamaño en puntos de la letra que
se está utilizando. Si se utiliza una tipografía de 12
puntos, 1em equivale a 12 puntos. El valor de 1ex se puede
aproximar por 0.5 em.
Si se considera el siguiente ejemplo:
p { margin: 1em; }
La regla CSS anterior indica que los párrafos deben mostrar un
margen de anchura igual a 1em. Como se trata de una unidad de
medida relativa, es necesario realizar un cálculo matemático para
determinar la anchura real de ese margen.
Los colores en CSS se pueden indicar de
cinco formas diferentes: palabras clave,
colores del sistema, RGB hexadecimal, RGB
numérico y RGB porcentual. Aunque el
método más habitual es el del RGB
hexadecimal, a continuación se muestran
todas las alternativas que ofrece CSS.
COLORES..
CSS define 17 palabras clave para referirse a los colores básicos.
Las palabras se corresponden con el nombre en inglés de cada
color:
aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, oran
ge, purple, red, silver, teal,white, yellow
COLORES EN CLAVE..
Este es el método más complicado para definir un color, se trata del
método que utilizan la inmensa mayoría de sitios web, por lo que es
imprescindible dominarlo. Afortunadamente, todos los programas
de diseño gráfico convierten de forma automática los valores RGB
decimales a sus valores RGB hexadecimales, por lo que no tienes
que hacer ninguna operación matemática:
METODO RGB..
GRACIAS!