CSS
Colocar el link del css en el <head>
<link rel=”stylesheet” type=”text/css” href=”estilo.css”> ; donde href es el link de la hoja de estilos.
Forma de colocar las propiedades en CSS:
selector{
propiedad: valor;
}
Donde selector es el elemento que seleccionamos para editar, propiedad es la característica que deseamos
agregar y el valor es para indicar el tamaño, color, entre otros detalles.
Selector para coger todos los elementos: Ejemplo: * { color: #f00;}
Selector por tipo de elemento: Ejemplo: h1 { color: #f00;}
Selector por clases: agregar el atributo “class” al elemento y en CSS se coloca con un punto (.):
<h1 class=”titulo”>Hola</h1>
En CSS:
.titulo { color: red;}
Se puede agrupar dos clases para darle las mismas propiedades:
.titulo1, .titulo2 {
color: red;
}
Selector por ID: agregar el atributo “id” al elemento y en CSS se coloca con un punto (#):
<h1 id=”titulo”>Hola</h1>
En CSS:
#titulo { color: red;}
Selector por atributo: se coloca un atributo dentro de la etiqueta html.
En HTML:
<h1 atributo=”si”>Hola</h1>
En CSS:
[atributo=”si”] {
color: red;
}
Selector por descendiente: se elige un elemento dentro de otro elemento
En HTML:
<h1 atributo=”si”> <p>Hola</p> </h1>
En CSS:
h1 p {
color: red;
}
Si fuera una clase, también se puede hacer así:
.titulo p {
color: red;
}
Selector con pseudoclase: Sirve para hacer que el elemento tenga estilo al pasar el cursor sobre él.
b:hover {
color: red
}
Nivel de jerarquías en CSS:
CSS tomará el estilo indicado según el nivel de jerarquía, teniendo como prioridad los Important hacia abajo.
--
Metodología BEM
Para modificar los elementos dentro de una clase, se debe colocar dos guiones bajos luego de la clase padre:
Ejemplo
HTML:
<div class: “contact-form”>{
<h2 class:”contact-form__h2”>Titulo</h2>
</div>
En CSS:
.contact-form{}
.contact-form__h2{}
--
Medidas relativas:
REM y EM
Veremos EM:
La medida EM vale 16 px (pixeles). Sin embargo, si en la clase padre le damos un valor en pixeles, EM valdrá
el valor el pixeles que le demos. Ejem.:
.contact-form{
Font-size: 25px;
}
.contact-form__h2 {
Font-size: 1em;
}
Aquí EM vale 25 px. Si fuera cualquier otra medida, EM hereda esa medida de la clase padre.
Viewport Widht (vw): Es una medida que se coloca en base al tamaño de largo de la pantalla. Si se coloca
100 llenará toda la pantalla en largo. Si se coloca 50, será la mitad; etc.
Viewport Height (vh): Es una medida que se coloca en base al tamaño del alto de la pantalla. Si se coloca 100
llenará toda la pantalla en alto. Si se coloca 50, será la mitad; etc.
Propiedades de texto:
Font-size: 2em; = Tamaño de texto.
Font-family: Georgia; = Tipo de letra.
Line-weight: 2; = Tamaño de interlineado del texto.
Font-weight: normal; = grosor del texto.
color: red; = color del texto.
Normalizar el estilo:
Se descarga el archivo normalize.css de Google. Este archivo se añade a la página web y sirve para que todos
los estilos añadidos por el navegador por defecto se eliminen.
Propiedades de las cajas donde están los elementos:
Display: inline; = para poner las cajas en horizontal (o en línea). A los elementos en línea no se les puede dar
height ni width.
Background-color: red; = color de fondo
Padding: 10px 10px 10px 10px; = es el espacio que hay entre el borde de la caja y el elemento dentro de esa
caja.
Orden del padding: TOP px RIGTH px BOTTOM px LEFT px.
Margin: espacio que hay entre dos cajas. El espacio se distancia de todos los lados de la caja. Se puede
colocar el tamaño del espacio tal como se hace con el padding.
Text-align: center; = para colocar la alineación del texto.
Border-radius: 10px; = para colocar las puntas de los bordes redondeadas.
Border: 4px solid blue; = para colocar el borde de la caja, tamaño, estilo y color respectivamente.
Box-shadow: 1px (eje x) 2 px (eje y) 15px (tamaño de desenfoque) 0px (borde) #000 (color). = esto sirve para
colocar sombra de una caja.
Text-shadow: 1px (eje x) 2 px (eje y) 15px (tamaño de desenfoque) #000 (color). = Esto sirve para colocar
sombra en el texto.
Transform: rotate(90deg); = sirve para rotar el objeto, donde “deg” es el grado (°).
Outline: 5px solid red; = sirve para colocar alguna propiedad sin modificar nada mas que solo el elemento
que tiene la propiedad.
Position
Propiedad para colocar una posición al elemento.
Position: relative; = mantiene su espacio por defecto. Sí se le coloca top, botoom, right o left aumentará o su
posición pero mantendrá las medidas por defecto, es decir se moverá dentro de la posición por defecto.
z-index: 1; = posiciona la caja por encima de las demás. El valor por defecto es 0. Al colocarle 1 en adelante,
la caja con el mayor numero de z-index se sobrepondrá a las demás. Solo funciona cuando el objeto tiene un
valor en el atributo “position”.
Position: absolute;
