CSS - SINTAXIS Y VALIDACION

En esta sesión detallamos la sintaxis básica de CSS y cómo realizar su validación.

Cargando video...

NOTA: Solo puedes ver una versión limitada del video a baja resolución, si quieres ver la versión completa por favor regístrate y obtén alguno de nuestros planes!

Descripción del Vídeo

CSS se compone de una serie de reglas, formadas por:
Un selector (especificación de cuáles etiquetas/elementos son afectados, por ejemplo, según su tipo o etiqueta, su #ID o su clase, entre otros) 
Un bloque de estilos (propiedades clave/valor que se aplican). 

Un elemento puede ser afectado por varios selectores (incluso indirectamente por sus elementos padres, mediante la herencia), de allí el término "en cascada".

También existen varias versiones de CSS, la actual es CSS3, cuyo grado de implementación varía en distintos navegadores.

Podemos utilizar herramientas de validación CSS de manera similar a HTML.


Referencias:
Servicio de validación CSS (W3C):
http://jigsaw.w3.org/css-validator/
Referencia CSS de Mozilla:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Mostrar aplicación en cascada, utilizar Firebug / Inspector
-- 09-css-sintaxis.html
<!DOCTYPE html>
<html lang="es">
<head>
<title>Ejemplo de CSS</title>
<meta charset="UTF-8">
<!-- Incluimos una hoja de estilo externa, con la etiqueta "link", y el
atributo rel="stylesheet" -->
<link rel="stylesheet" href="sintaxis.css">
<style>
/* Estas reglas tendrán mayor prioridad que las especificadas en el
archivo CSS, en caso de conflicto, ya que se incluyeron después.
Nótese que el resultado sería distinto si el archivo se incluye
después de las reglas locales */
h2 { color: red }
/* Los nombres de clases comienzan con punto */
.negrillas { font-weight: bold }
/* Las reglas con ID comienzan con numeral */
#nota { font-style: italic; }
#nota a { color: green }
#nota a:hover { color: red }
</style>
</head>
<body>
<h1>Encabezado 1</h1>
<h2>Encabezado 2</h2>
<p>Este es un párrafo normal</p>
<!-- En el siguiente encabezado, se han especificado propiedades de estilo
locales en el mismo elemento -->
<h2 style="color:green;">Otro Encabezado Nivel 2</h2>
<p style="background-color: black; color: white;">Y aquí otro párrafo
con estilo local</p>
<p class="negrillas">Este es un párrafo en negrillas</p>
<a href="#">Éste es un enlace predeterminado</a>
<p id="nota">
Este párrafo es referenciado directamente por su ID en el estilo.
Contiene un <a href="#">enlace con estilo personalizado</a>
</p>
</body>
</html>

-- sintaxis.css
/*
* Colocamos un color de fondo al documento para contrastar estilos
*/
body {
background-color: lightgrey;
}
/* Los comentarios pueden ser de una sola o varias líneas */
h1 {
color: white;
font-size: 28pt;
text-align: center;
font-weight: bold;
}
/* Colocamos un color principal azul a los encabezados nivel 2,
pero esta regla puede ser ignorada si hay otra de mayor prioridad */
h2 {
color:blue /* Si no hay otra propiedad en el bloque, el punto y coma es opcional */
}
p {
background-color: white;
}

Rating

Global

Ver video en playlist

comments powered by Disqus

Headshot of Juan Paredes

Juan Paredes

Ingeniero de Sistemas con amplia experiencia, especializado en el desarrollo y arquitectura de software.