CSS: Selector de clase

CSS Selector de clase

Son los mas usados y se aplican en todos los elementos que tengan en atributo class que coincide con el nombre del Selector

.parrafoespecial { color: red; }
 
<_p>Hola Mundo!<_/p>
<_p class=""parrafoespecial">Hola Mundo en color rojo

En la aplicabilidad y la herencia hay que identificar 3 casos bien diferentes

Caso 1) Todos los elementos de tipo "p" con  class="parrafoespecial"

p.parrafoespecial{ propiedad:valor; }

Caso 2)
Todos los elementos con atributo class="parrafoespecial" que estén dentro de cualquier elemento de tipo "p" 
p .parrafoespecial { propiedad:valor;}

Caso 3)
Se aplica a todos los elementos "p" de la página y a todos los elementos con
el atributo class="parrafoespecial" de la página 
p, .aviso { propiedad:valor; }

CSS: Selector de Tipo Etiqueta

Se aplica a los elementos HTML que coinciden con esa etiqueta.
Simplemente se coloca el nombre y entre llaves la propiedad y el valor o los conjuntos de propiedad valor sin son varios

h1 {
margin: 0 0 0.5em;
font-size: 1.8em;
line-height: 1.2;
}

Los selectores se pueden separar por comas y unificar diferentes etiquetas

h1,h2,p {
margin: 0 0 0.5em;
font-size: 1.8em;
line-height: 1.2;
}
En

En la practica conviene agrupar distintas etiquetas con propiedades comunes y luego hacer las propiedades especificas para cada uno.

Por ejemplo:

h1, h2, h3 {
color: #8A8E27;
font-weight: normal;
font-family: Arial, Helvetica, sans-serif;
}

h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

Selector Universal CSS

CSS Selector Universal
El selector universal se escribe con un asterisco (*).
En la practica no se utiliza muy usado, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.
Se aplica a algunos "hacks" para IE o en combinacion con otros selectores

Una de las aplicaciones basica es eliminar el margen y el relleno de todos los elementos HTML como en este ejemplo

* {
margin: 0;
padding: 0;
}

Sintaxis y selectores CSS

Sintaxis y selectores CSS

Cada regla CSS dispone de Selector y de Declaracion

Selector: A quien se le aplica

Declaracion: Que se hace
5 selectores Basicos

1) SELECTOR UNIVERSAL: Se aplica a todos los elementos de la pagina
Se representa con el asterisco "*"
por ejemplo

*{margin:0;}

2) SELECTOR DE ETIQUETA: Se aplica a cualquier etiqueta HTML
(p, h1,table, tr,li....)

Por ejemplo

ol{ font-family:Arial;}

3) SELECTOR DESCENDENTE (hijo):
Se aplica a elemento dentro de otros elementos
por ejemplo:
p strong {color:red;}

4) SELECTOR DE CLASE : Se aplica a todos los elementos que tengan el mismo atributo class

La sintaxis se le antecede un punto "." por ejemplo: .destacado{color:green;}
y se usa de la siguiente manera

<_p class="destacado"> Hola Mundo <_/p>

5) SELECTOR DE ID :Se aplica de manera similar a los Selectores de Clase con la diferencia que los selectores de ID se usan una sola vez por pagina y en lugar de punto se usa el numeral "#"

por ejemplo: #menu: {color:red;}

Sintaxis de CSS

La Sintaxis de CSS esta definida de la siguiente manera:

Una Regla CSS:


Incluye un Selector en el que esta definida (empieza con llave "{") La Propiedad y el valor (separados por ":"), si en selector tiene diversas tuplas, Propiedad:Valor se separan entre ellas con ";" Finalizando con el cierre de la llave "}"
Todos los conjuntos de propiedad valor se denominan: Declaracion
Por ejemplo:

p {color:red;}

p {color:red; font-family:Arial}