Pregunta: ¿como aplico un mismo estilo a varias partes del documento sin repetirlo cada vez?
Pregunta: ¿puedo aplicar un estilo a un elemento que este dentro de otro sin definirlo?
Pregunta: ¿que son y como funcionan las clases?¿y los elementos?
Respuesta: Si se puede, lee a continuacion
Elementos
Un elemento es cualquier identificativo html:
- table
- div
- p
- span
- b
- body
- ect
todos son elementos a los cuales se les puede aplicar propiedades, cualquier etiqueta html es subcestible de ser un elemento.
La forma correcta de aplicar propiedades a un elemento es la siguiente:
Código:
elemento { propiedad1: valor; propiedad2: valor; propiedadX: valor;}
Una clase no es mas que un identificativo que le ponemos a una etiqueta html (no confundir con #id) para situarla dentro de un grupo.
Las clases las definimos nosotros mismos, por ejemplo:
- .miclase
- .cabecera
- .comentario
- .wea
- .loquesea
y aplicarla a un elento es tan sencillo como incluir
class="clasequequeramos" en dicho elemento.
Ejemplo:
Código HTML:
<b class="miclase">texto</b>
<b class="otraclase">texto</b>
<b>texto</b>
esto haria que el primer <b> fuera de la clase
miclase, el segundo de
otraclase y el tercero no perteneciera a ninguna.Es preferible no usar numeros en las clases ya que pueden ocasionar conflictos en algunos navegadores.
La forma de aplicar las propiedades a una clase es identica a la de aplicarlas a un elemento.
Con una clase se pueden aplicar propiedades a elementos distintos.
Por ejemplo:
Código HTML:
.colorrojo { color: red; }
haria que esto
Código HTML:
<table class="colorrojo" >
<p class="colorrojo">
<a href="direccion" class="colorrojo"> saliera en todos los casos en color rojo
Mientras que
Código:
.colorverde { color: green;}
b.colorverde { color: red;}
haria que cualquier etiqueta con clase
.colorverde tuviera texto
verde excepto las
<b> que lo tendrian
rojo.
Tambien puedes poner elementos anidados
Por ejemplo tienes una tabla con
celdas azules y
texto rojo y
zeldas rojas y
texto azul (muy hortera lo se :P)
Las celdas son .roja y .azul (aqui valdria cualquier elemento table, p, span, div, tr.yoquese, ect)
Código HTML:
.rojo a {color: blue;}
.azul a {color: red;}
De esta forma cualquier elemento
.rojo que contuviera un enlace este seria
azul (hasta haverlo visitado, para eso esta a:hover y a:visited) y cualquier elemento
.azul contendria enlaces en
rojo
Otro ejemplo
Código HTML:
table div { color: lime;}
p div {color:black;}
haria que el texto dentro de un
div que estuviera en una
tabla fuera lima mientras que de estar dentro de un
<p>(parrafo) seria negro (en caso de estar dentro de un
<p> que estuviera dentro de una
tabla seguiria siendo negro puesto que el
div estaria subliminado al
<p> no al
table
Para mas informacion
http://html.conclase.net/w3c/css1-es.html
Espero haver ayudado