codigos css
1) A la hora de usar css hay 3 variables importantes:
selector:
Para aplicar estilos a un documento HTML utilizamos los selectores CSS. Un selector CSS se puede definir
como el código que identifica a uno o varios elementos HTML para aplicarle estilos de color, tamaño,
separación, etc. Esto se da por cascada en caso de que los comandos sean de la misma jerarquia o por
rango osea un codigo de mayor rango determina el pigmento
Los codigos de selctor son:
a) "* (selector universal)" : selecciona todo
b) "de tipo ( selector por elemento )": selecciona un elemento en especifico, ejemplo si quiero cambiar el
h1 solo tengo que poner h1 {propiedad : valor}
c) "." (por clases): selecciona solamente una clase asignada a un comando por ejemplo, quiero pintar los
codigos que tengan asignada la clase "titulo-h2" entonces <input class = "titulo-h2"> va a pintarse. Para
activar el selector por clase tengo que hacer lo siguiente.
".clase que corresponda{propiedad:valor}
d) "#" (por elemento): ordenar por elemento es como ordenar por clase, solo que en ves de usar el
comando "class", se usa "id" (<h1 id = "nombre del id que deses" >). se recomienda usar solo un tipo de
"id" por html
e) "por atributo": lo explico con un ejemplo <etiqueta atributo = "valor"> esta es la forma general si lo
quiero de forma especifica deberia poner <h1(es la etiqueta) muerto="si" >
´para seleccionarlo se hace lo siguiente: (importante el uso de llaves) [muerto="si"]
f) "por decendientes"
g) "por pseudo clases": en un evento se genera una seleccion por ej. si yo quiero que cuando pase el
mouse sobre un hipervinculo este se ponga de determinado color, lo que debo hacer en css es. a:hover
{color: green;}
h) "por !important":
los rangos de mayor a menor importancia son:
!important: las reglas CSS se aplican en cascada, de arriba hacia abajo. Lo que hace !important es sobre-
escribir cualquier regla anterior, rompiendo la cascada
estilos en linea: Los estilos en línea son declaraciones CSS que se integran en las etiquetas HTML
mediante el atributo style. Este método tan solo afecta al elemento en el que se integra el código
identificadores: Los identificadores hacen referencia a un único elemento o etiqueta de nuestra página
web. En la página web utilizaremos el atributo id para identificar la etiqueta y en la hoja de estilos
utilizaremos el símbolo # para aplicarle hojas de estilo.
clases: Hojas de estilos CSS: Clases. Una clase es una definición de un estilo que en principio no está
asociado a alguna etiqueta HTML, pero que podemos asociar a etiquetas concretas.
pseudo-clases:
atributos:
elementos
pseudo-elementos
propiedad: son las caracteristicas que buscamos retocar, color, tamaño, etc
valor: son el valor que va tomar la etiqueta, dependiendo de la propiedad que se quiera alterar, ej: si la
propiedad es el color, el valor es un color, si la propiedad es el tamaño el valor seran pixeles de ancho y
largo
metodologia BEM
BEM (Bloque, Elemento, Modificador) es una metodología de nomenclatura de clases en CSS que busca
estructurar y organizar el código de manera más modular y mantenible evitando porblemas a la hora de
usar el selector
ejemplo:
<div class="form">
<input type="text" class="form__input--active">
<input type="password" class="form__input">
</div>
pasos 1: usar la etiqueta "div" y asignarle una clase, en este caso se uso "class=form"
paso 2: entre los "div" usar una etiqueta y asignarle una clase, como vemos arriba se uso input