CSS (CASCADE STYLE SHEET)

Css es un lenguaje vivo en el que existen módulos de nivel 1, 2 (3y 4 corriendo en paralelo). Cascada (se lee de
arriba hacia abajo, significa q una propiedad que esta abajo va predominar).
Como se puede agregar estilos
 Dentro de una etiqueta <style>
 De forma lineal
 Desde un archivo externo
Link> define un vínculo entre un documento y un recurso externo
Enlazar css a html (rel= establecer la relación existente entre el documento web actual y un recurso externo
stylesheet= espeficicamos que es una hoja de estilos)
Sintaxis p { color:red;}
Cuatro cosas básicas que debes de conocer para dominar css(los selectores, la especificidad, la cascada y la
herencia). Cuando vas a un nivel mas avanzado ya debes de entender (box model, position, flexbox) con todo
esto vas a tener un nivel decente
LOS SELECTORES “son los pilares de CSS”
Los selectores indican que elemento del html reciben los estilos. (Sin los selectores no podemos construir
reglas CSS)
SELECTORES SIMPLES
Selectores de etiqueta o (s. de tipo).- usan el nombre de la etiqueta html
h1 {color:Green;}
Selectores de Id(Prohibido): (Porque un buen diseñador piensa en el rendimiento)los IDS se usan más para JS
Selectores de Clases
SELECTORES COMPUESTOS están formados por mas de una palabra
Selectores descendientes.- son selectores separados por un espacio (el primero es el padre y el segundo es un
hijo o descendiente de cualquier nivel)
Body p {color: yellow;} (hay cosas que no deberías decender) no debes hacer S.D siempre deberías hacer S de
un solo nivel
Selectores descendiente directo o (hijo directo) ul>li
Selectores hermano siguiente (Adyacente) selecciona al siguiente elemento h1 + p
Selectores hermanos siguientes h1 ~p
Combinar selectores no tiene espacios todo debe ser junto .titulo.first
Selectores de Pseudo Clases. Son selectores dinámicos, q responden a la interacción del usuario o algunas
propiedades de los elementos. Las Pseudoclases se caracterizan por usar (:)
Variables y Herencia En css las variales tienen Scope ”Es el espacio donde una variable existe” (el scope del
DOM)
Estilos por defecto del Navegador: Si tienes experiencia en CSS puedes resetear los estilos. Si no tienes
experiencia debes de utilizar librerías “Normalize”
ESPECIFICIDAD es un algoritmo de CSS que se usa para resolver los conflictos de estilos.
 S.tipo : 1
 S.Class : 10
 S.id: 100
 S.inline : 1000
UNIDADES DE MEDIDA
Las medidas en CSS se emplean, entre otras, para definir la altura, anchura y márgenes de los elementos y
para establecer el tamaño de letra del texto.
UNIDADES ABSOLUTAS Una medida indicada mediante unidades absolutas está completamente definida
 in, pulgadas ("inches", en inglés). Una pulgada equivale a 2.54 centímetros.
 cm, centímetros.
 mm, milímetros.
 pt, puntos. Un punto equivale a 1 pulgada/72, es decir, unos 0.35 milímetros.
 pc, picas. Una pica equivale a 12 puntos, es decir, unos 4.23 milímetros.
UNIDADES RELATIVAS Las unidades relativas, a diferencia de las absolutas, no están completamente
definidas, ya que su valor siempre está referenciado respecto a otro valor.
 em, (no confundir con la etiqueta <em> de HTML) relativa respecto del tamaño de letra del elemento.
 px, (píxel) relativa respecto de la resolución de la pantalla del dispositivo en el que se visualiza la página
HTML.
PORCENTAJES
El porcentaje también es una unidad de medida relativa, aunque por su importancia CSS la trata de forma
separada a em, ex y px.
div#contenido { width: 600px; }
div.principal { width: 80%; }
<div id="contenido">
<div class="principal">
...
</div>
</div>
COLORES EN CSS( Por palabra Clave, RGB decimal, RGB Porcentual, RGB Hexadecimal)
Red= es una palabra clave, Hsl(0,100%, 50%) es una función o rgb(255,0,0) o en hexadeciamal #ff0000
Selectores de Pseudo Clases. Son selectores dinámicos, q responden a la interacción del usuario o algunas
propiedades de los elementos. Las Pseudoclases se caracterizan por usar (:)en css 3 (::)
:hover, se activa cuando el usuario pasa el ratón o cualquier otro elemento apuntador por encima de un
elemento.
elemento:first-child y elemento:last-child, seleccionan los elementos indicados pero con la condición de que
sean respectivamente los primeros o últimos hijos de su elemento padre.
::first-line, selecciona la primera línea del texto de un elemento.
::first-letter, selecciona la primera letra del texto de un elemento.
::before, selecciona la parte anterior al contenido de un elemento para insertar nuevo contenido generado.
::after, selecciona la parte posterior al contenido de un elemento para insertar nuevo contenido generado.
CSS 3 añade además un nuevo pseudo-elemento:
::selection, selecciona el texto que ha seleccionado un usuario con su ratón o teclado.
li:nth-child(2n+1) { ... } /* selecciona todos los elementos impares de una lista */
li:nth-child(2n) { ... } /* selecciona todos los elementos pares de una lista */
 BOX –MODEL
El modelo de caja(todos los elementos de html son rectangulares)
Elementos internos de un box-model:
Contenido (todo lo que este dentro del elemento)
Padding(distancia que hay entre el espacio y el final de la caja),
border(es el trazo alrededor de la caja)
Elementos externos de un box-model:
Margin(La distancia que hay entre las cajas)
Elementos en línea (Inline) “Se ponen uno al lado del otro,y se ajusta según su contenido”
Elementos de bloque (block) “se dibujan de lado a lado de la pantalla no importa que su contenido ocupe o
no todo el contenido de la pantalla”
Dimensiones de un box model