Sintaxis reglas de CSS
Sintaxis CSS
Un conjunto de reglas CSS consta de un selector y un bloque de declaración:
Los puntos selector para el elemento HTML que desea estilo.
El bloque de declaración contiene uno o más declaraciones separados por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados por dos puntos.
Una declaración CSS siempre termina con un punto y coma, y los bloques de declaraciones están rodeados por llaves.
Ejemplo
p {
color: red;
text-align: center;}
Los selectores CSS
selectores CSS se utilizan para "encontrar" (o seleccionar) elementos HTML en función de su nombre del elemento, ID, clase, atributo, y mucho más.
El selector de elementos
El selector de elementos selecciona elementos basados en el nombre del elemento.
Puede seleccionar todos los elementos <p> en una página como esta (en este caso, todos los elementos <p> serán centro alineado, con un color rojo texto):
Ejemplo
p {
text-align: center;
color: red;}
El selector de ID
El selector de ID utiliza el atributo id de un elemento HTML para seleccionar un elemento específico.
La identificación de un elemento debe ser único dentro de una página, por lo que el selector de ID se utiliza para seleccionar un elemento único!
Para seleccionar un elemento con un ID específico, escribe un carácter almohadilla (#), seguido por el id del elemento.
La regla de estilo a continuación se aplica al elemento HTML con id = "párrafo1":
Ejemplo
#parrafo 1 {
text-align: center;
color: red;}
Nota: Un nombre de ID no puede comenzar con un número!
El selector de clase
El selector de clase selecciona elementos con un atributo de clase específica.
Para seleccionar elementos con una clase específica, escriba un punto (.) Carácter, seguido del nombre de la clase.
En el siguiente ejemplo, todos los elementos HTML con class = "centro" serán rojo y alineado al centro:
Ejemplo
.center {
text-align: center;
color: red;}
También puede especificar que los elementos HTML específicos solamente deben verse afectadas por una clase.
En el siguiente ejemplo, solamente <p> elementos con class = "centro" serán-centro alineado:
Ejemplo
p.center {
text-align: center;
color: red;}
elementos HTML también puede referirse a más de una clase.
En el ejemplo siguiente, el elemento <p> será labrado de acuerdo con class = "centro" y a class = "grande":
Ejemplo
<p class="center large">This paragraph refers to two classes.</p>
Nota: Un nombre de clase no puede comenzar con un número!
La agrupación de selectores
Si tiene elementos con las mismas definiciones de estilo, como este:
h1 {
text-align: center;
color: red;}
h2 {
text-align: center;
color: red;}
p {
text-align: center;
color: red;}
Será mejor para agrupar los selectores, para minimizar el código.
Para selectores de grupo, separar cada selector con una coma.
En el siguiente ejemplo hemos agrupado los selectores en el código anterior:
Ejemplo
h1, h2, p {
text-align: center;
color: red;}
Comentarios CSS
Los comentarios se utilizan para explicar el código, y puede ayudar al editar el código fuente en una fecha posterior.
Los comentarios son ignorados por los navegadores.
Un comentario comienza con CSS / * y termina con * /. Los comentarios también pueden abarcar varias líneas:
Ejemplo
p {
color: red;
/* This is a single-line comment */
text-align: center;}
/* This is
a multi-line
comment */
¿Por qué usar CSS?
CSS se utiliza para definir estilos para sus páginas web, incluyendo el diseño, la disposición y las variaciones en la pantalla para diferentes dispositivos y tamaños de pantalla.
CSS ha resuelto un gran problema.
HTML fue creado para describir el contenido de una página web, como:
<H1> Este es un encabezado </ H1>
<P> Esto es un párrafo. </ P>
Cuando se añaden etiquetas como <font> y los atributos de color a la especificación HTML 3.2, que comenzó una pesadilla para los desarrolladores web.
Desarrollo de grandes sitios web, que se han añadido fuentes y color de información para cada página, se convirtió en un proceso largo y costoso.
Para resolver este problema, el World Wide Web Consortium (W3C) creado CSS.
CSS elimina el estilo de formato de la página HTML!
Unidades en CSS
CSS tiene varias unidades diferentes para expresar una longitud.
Muchas de las propiedades CSS toman valores "longitud", tales como el ancho, margen, relleno, tamaño de fuente, border-width, etc.
La longitud es un número seguido de una unidad de longitud, tal como 10px, 2em, etc.
Un espacio en blanco no puede aparecer entre el número y la unidad.
Sin embargo, si el valor es 0, la unidad se puede omitir.
Para algunas propiedades CSS, se permiten longitudes negativas.
Hay dos tipos de unidades de longitud: absolutos y relativos.
Las longitudes relativas
unidades de longitud relativas especifican una longitud relativa a otra propiedad de longitud. unidades de longitud relativa escala mejor entre diferentes medios de representación. Ej:
2em (2 veces el tamaño base)
Longitudes absolutas
Las unidades de longitud absolutos son fijos y una longitud expresan en cualquiera de estos aparecerá como exactamente ese tamaño.
unidades de longitud absolutas no se recomiendan para su uso en la pantalla, ya que los tamaños de pantalla pueden ser muy variadas. Sin embargo, pueden utilizarse si se conoce el medio de salida, tal como para la disposición de impresión. Ej:
In (Inches/pulgadas / 1in = 96px = 2.54cm),
cm (Centímetros)
mm (Milímetros)
px* (pixels 1px = 1/96 parte de 1in),
pt (puntos 1pt = 1/72 de 1in)
pc (picas 1pc = 12 pt)
*Los píxeles (px) son en relación con el dispositivo de visualización.
Para dispositivos de bajo dpi, 1 píxel es un píxel dispositivo (punto) de la pantalla. Para las impresoras y pantallas de alta resolución 1px implica múltiples píxeles de dispositivo.
Comentarios
Publicar un comentario