Identificación del lenguaje de css

IDENTIFICACIÓN DEL
LENGUAJE DE CSS

DEFINICIÓN DE CSS Y ESPECIFICACIÓN
DE CSS
• Hojas de Estilo en Cascada (Cascading Style Sheets) es
el lenguaje de hojas de estilo utilizado para describir el
aspecto y el formato de un documento escrito en un
lenguaje de marcas, esto incluye varios lenguajes
basados en XML como son XHTML o SVG.
• La información de estilo puede ser adjuntada como un
documento separado o en el mismo documento HTML.
En este último caso podrían definirse estilos generales en
la cabecera del documento o en cada etiqueta
particular mediante el atributo "<style>".

EJEMPLO
Selector [, selector2, ...] [:pseudo-class][::pseudo-
element] { propiedad: valor; [propiedad2: valor2; ...] }

FUNCIONAMIENTO BÁSICO Y FORMAS
DE INCLUSIÓN DE CSS EN XHTML
Los estilos se definen en una zona específica del
propio documento HTML. Se emplea la
etiqueta <style> de HTML y solamente se pueden
incluir en la cabecera del documento (sólo dentro
de la sección <head>).
CSS permite separar los contenidos de la página y la
información sobre su aspecto. En el ejemplo anterior,
dentro de la propia página HTML se crea una zona
especial en la que se incluye toda la información
relacionada con los estilos de la página.

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 estilos CSS en
el propio documento</title> <style
type="text/css"> p { color: black; font-family:
Verdana; } </style> </head> <body> <p>Un párrafo
de texto.</p> </body> </html>

USO DE COMENTARIOS Y SINTAXIS DE
LA DEFINICION DE CADA PROPIEDAD
Está claro que cada vez más se está separando el
diseño de la estructura y que por ello se está
convirtiendo en un lenguaje independiente y que
debería estar comentado, lejos quedan ya
aquellos <h1 style="color:red;"> a los que les sobra
cualquier tipo de comentario. Ahora las estructuras
complejas y que sin la posibilidad de acceder a la
estructura HTML pueden hacer muy dificil de
mantener.

EJEMPLO
#header {}
#header h1{
color: red;
}

SELECTORES, AGRUPACIÓN DE REGLAS
Y HERENCIA
• Al diseñar CSS, la brevedad era el objetivo.
Estimamos que si podíamos reducir el tamaño de
las hojas de estilo, podíamos permitir a los
diseñadores escribir y editar hojas de estilo "a
mano". Además, las hojas de estilo cortas se
cargan más rápido que las más largas. Por lo tanto,
CSS incluye varios mecanismos para acortar hojas
de estilo por medio de la agrupación de selectores
y declaraciones.

• Estas tres reglas tienen exactamente la misma
declaración; configuran la fuente en negrita. (Esto
se realiza con la propiedad font-weight, que
analizamos en Consultar Fuentes. .) Dado que estas
tres declaraciones son idénticas, podemos agrupar
los selectores en una lista separada por comas y
únicamente enumerar la declaración una vez,
como se detalla a continuación:
• H1, H2, H3 { font-style: bold }

EJEMPLO
• Por ejemplo, considere estas tres reglas:
• H1 { font-weight: bold }

COLISIONES DE ESTILO, 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.

EJEMPLO
/* 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 }

COLORES
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.

EJEMPLO
p { color: rgb(71,
98, 176); }
p { color:
rgb(27%, 38%,
69%); }
p { color: #4762B0; }

Identificación del lenguaje de css

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Destacado

Destacado (7)

Similar a Identificación del lenguaje de css

Similar a Identificación del lenguaje de css (20)

Identificación del lenguaje de css