Bueno no soy un programador, pero si tengo ciertas habilidades en el CSS, no me considero experto pero si con los conocimientos suficientes, y bueno este lenguaje que en mi opinión tonta y personal no considero muy de programación sino de estrategia y sobre todo paciencia.
Primero lo básico para dar estilos es importante saber a quien se lo estamos dando vale?… Es un poco tedio pero es fácil si tienes paciencia y un poco de razonamiento.
Cuando damos un estilo es necesario saber si es a una etiqueta HTML o una clase o bien a una ID. Y en castellano se traduce a:
Etiqueta HTML o bien
La siguiente propiedad CSS le dará el estilo a todas las etiquetas “div” de nuestro sitio,
(esta propiedad se le puede dar a otras etiquetas, table, span, h1, etc..)
1 2 | /* Esto le dará un margen en la parte superior de 15px*/ div{ margin-top:15px; } /*el html es: <div></div>*/ |
Estilo a una clase “.miclase”
Esta propiedad CSS le dará el estilo a una o varias clases en nuestro sitio dependiendo a que elementos le hayamos asignado en nuestro código HTML.
(no importa si la etiqueta HTML es un “div”, “table”, “h1” o cualquier otro, ya que tendrá el estilo que le demos en el siguiente código, aquí lo importante es la clase y no su etiqueta.)
1 2 3 4 5 6 7 8 9 10 | /* Esto le dará un margen en la parte superior de 15px a todos los elementos que contengan esta clase sin importar si es un “div”, o cualquier otra etiqueta HTML*/ .miclase{ margin-top:15px; } /*el html es: <div class=”miclase”></div>*/ /*De igual manera podemos personalizarla a un nivel “semi-avanzado en CSS*/ div.miclase{ margin-top:15px; } /*le dará el margen de 15px solo a los “div’s” que tengan esta clase ejemplo:<div class=”miclase”></div>*/ span.miclase{ margin-top:14px; } /* le dará el margen de 14px solo a los “span’s” que tengan esta clase ejemplo:<span class=”miclase”></span>*/ h3.miclase{ margin-top:13px; } /* le dará el margen de 13px solo a los “h3’s” que tengan esta clase ejemplo:<h3 class=”miclase”></h3>*/ /*todas las anteriores tuvieron asignada la misma clase, pero fue variando su margen dependiendo de su etiqueta HTML*/ |
Estilo a una ID #ESTILO
Esta propiedad CSS le dará el estilo a nuestra ID que por reglas HTML no se debe repetir en nuestro documento, es muy util para ahorrar codigo… cuando a nuestras ID’s les asignamos eventos en JS… y de paso le damos estilos… pero igual se pueden usar las 2.
(a veces sin querer se repite nuestra id, para estos casos se debe asignar una clase ya que un ID debe ser único. )
1 2 3 4 5 | /* Esto le dará un margen en la parte superior de 15px*/ #ESTILO{ margin-top:15px; } /*De igual manera se puede asignar el elemento HTML para tenerlo ordenado o bien para que no olvidemos que etiqueta era… enfin*/ div#ESTILO{ margin-top:15px; } |
El punto es que cuando es una etiqueta HTML se escribe tal cual es, si es un “div” en el CSS es “div { }”, cuando es una clase lleva un punto antes
“.miclase { }” y cuando es una ID lleva un signo de gato antes “#ESTILO”.
Esto fue una extencion de un “manual” que tenia para hacer templates y mejor explicado chao!…
