Está en la página 1de 8

CSS > CASCADING STYLESHEETS

<style="color: red;">: puede ir dentro de cualquier elemento ya sea h1-h6, p, head,


body, a, etc.*

selector *es lo que queremos cambiar* {


propiedad: valor;
^
color, tamaño, ancho, alto, posicion, sombra, etc.
}
EJ:

<style>
h2 {
color: red;
}
</style>

clases: estilos reutilizables que se agregan a los elementos HTML ya sea h1-h6, p,
head, body, a, etc.*
en tu elemento CSS style, los nombres de clase comienzan con un punto. En el
atributo "class" de tus
elementos HTML, el nombre de la clase no lleva punto delante.
<h2 class="blue-text">Hola</h2> EJ:

<style>
.blue-text(clase) {
color: blue;
}
</style>

font-size: cambia el tamaño de la fuente. EJ:


h1 {
font-size: 30px;
}

font-family: establece una fuente que debe usar un elemento HTML ya sea...* tambien
se puede especificar fuentes
web no standar y personalizadas para usarlas en nuestro sitio web como por ejemplo
en Google Fonts:
"Nombre-de-la-fuente" es opcional, y es el modo de especificar una fuente de
reserva o "fallback font" en caso de que la
otra fuente especificada no esté disponible. Cuando una fuente no está disponible
en el sistema, puedes indicarle
al navegador que "degrade" a otra fuente alternativa (Nombre-de-la-fuente vendria a
ser la alternativa)

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet"


type="text/css">
<style>
h2 {
font-family: Lobster, Nombre-de-la-fuente;
}
</style>

width: ancho de un elemento HTML ya sea...* Por ejemplo, si queremos crear una
clase CSS llamada larger-image que
le asigne a los elementos HTML un ancho de 500 píxeles, usamos el siguiente código:
<style>
.larger-image {
width: 500px;
}
</style>

bordes: tienen propiedades como style, color y width:


border-radius: redondea los bordes de un elemento HTML...* Además de los píxeles,
también puedes especificar el
border-radius usando un porcentaje.
<style>
.thin-red-border {
border-color: red;
border-width: 5px;
border-style: solid;
border-radius: 10px;
}
</style>

background-color: establecer color de fondo de un elemento HTML...*

.green-background {
background-color: green;
}

id: Además de las clases, cada elemento HTML también puede tener un atributo id.
Puedes usar un id para dar
estilo a un elemento específico. Los atributos id deben ser únicos, por lo tanto no
son reutilizables.
Los id's utilizan # para asignarle propiedades a comparacion de las clases que
utilizan . para signarles propiedades.
EJ:

#nombre-del-id {
background-color: green;
}
<h2 id="nombre-del-id" (en este caso, el h2 que tiene el id tendria un background
verde)

padding(relleno), border(borde), margin(margen): espacio que rodea cada elemento.


El padding controla la cantidad de
espacio entre su contenido y su border. El margin de un elemento controla la
cantidad de espacio entre su border
y los elementos que lo rodean. Si estableces el margin de un elemento a un valor
negativo, el elemento crecerá de tamaño.

.ejemplo-padding-border-margin {
background-color: crimson;
color: #fff;
padding: 20px;
margin: -15px;
}

padding-top, padding-right, padding-bottom y padding-left: En ocasiones, querrás


personalizar un elemento para que tenga
un padding o relleno diferente en cada uno de sus lados.

.ejemplo-padding {
background-color: crimson;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}

margin-top, margin-right, margin-bottom y margin-left: En ocasiones, querrás


personalizar un elemento para que tenga
un margin diferente en cada uno de sus lados.

.ejemplo-margin {
background-color: blue;
color: #fff;
margin-top: 40px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 40px;
}

clockwise rotation para padding y margin: En lugar de especificar las propiedades


padding-top/margin-top, padding-right/
margin-right, padding-bottom/margin-bottom, y padding-left/margin-left
individualmente, puedes especificarlas todas
en una sola línea. Estos cuatro valores se leen en el sentido de las agujas del
reloj: arriba, derecha, abajo, izquierda

.ejemplo-padding-margin {
background-color: crimson;
color: #fff;
padding: 10px 20px 10px 20px;
margin: 10px 20px 10px 20px;
}

Selector de atributos [attr=value]: Este selector busca estilos que tengan un valor
de atributo específico.
Por ejemplo, el código a continuación cambia los márgenes de todos los elementos
que tengan el atributo type
con el valor radio:

[type='radio'] {
margin: 20px 0px 20px 0px;
}

Unidades absolutas y relativas de medida: Las unidades absolutas están relacionadas


con unidades físicas de longitud.
Por ejemplo, in y mm se refieren a pulgadas y milímetros, respectivamente. Las
unidades relativas, como em o rem son
relativas a otro valor de longitud. Por ejemplo, em se basa en el tamaño de fuente
de un elemento. Si la utilizas
para establecer la propiedad font-size, es relativa al font-size del elemento
padre.

.ejemplo-padding-em {
background-color: red;
margin: 20px 40px 20px 40px;
padding: 1.5em;
}
Para aplicar múltiples atributos de clase a un elemento HTML debes dejar un espacio
entre ellos, como se muestra a
continuación:

class="class1 class2"

No importa el orden en que las clases estén enlistadas dentro del elemento HTML.

Sin embargo, lo importante es el orden de las declaraciones de class clases en la


sección <style>.
La segunda declaración siempre tendrá prioridad sobre la primera. Debido a que
.blue-text ha sido declarada en
segundo lugar, sobrescribirá los atributos de .pink-text. Hay otras formas de
sobreescribir CSS usando los
atributos id* (#, que sobreescriben a las clases .ejemplo) o inline styles
(style="color: green;", que sobreescriben
a los id) y por ultimo !important, que sobreescribe a todas las anteriores.
*No importa si declaras este CSS arriba o debajo de la clase pink-text, ya que el
atributo id siempre tendrá precedencia.

<style>
body {
background-color: black;
font-family: monospace;
color: green;
}
#orange-text {
color: orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 class="pink-text blue-text" style="color: white">Hello World!</h1>

En código hexadecimal se utilizan 6 dígitos hexadecimales para representar los


colores, dos para el
componente rojo (R), verde (G) y azul (B). Afortunadamente, puedes abreviar gran
parte de ellos. Esto reduce el
número total de colores posibles a alrededor de 4.000. Sin embargo, los navegadores
interpretarán que
#FF0000 y #F00 son exactamente el mismo color.

Color Hex Code Color Hex code abreviado


Dodger Blue (azul dodger) #1E90FF Cyan (cian) #0FF
Green (verde) #00FF00 Green (verde) #0F0
Orange (naranja) #FFA500 Red (rojo) #F00
Red (rojo) #FF0000 Fuchsia (fucsia) #F0F

Otra forma de representar colores en CSS es utilizar valores RGB.


rgb(0, 0, 0) color negro, rgb(255, 255, 255) color blanco.

Color RGB
Blue (azul) rgb(0, 0, 255)
Red (rojo) rgb(255, 0, 0)
Orchid (color orquídea) rgb(218, 112, 214)
Sienna (siena) rgb(160, 82, 45)

body {
background-color: rgb(255, 165, 0);
}

Las Variables CSS son una manera poderosa de modificar varias propiedades de
estilos CSS a la vez,
cambiando su valor en un único sitio. Para crear una variable CSS, solo tienes que
darle un nombre
que comience con dos guiones (--) y asignarle un valor

<style>
.ejemplo {
--ejemplo-variable1: black;
--ejemplo-variable2: gray;
--ejemplo-variable3: yellow;
}
</style>

Luego de crear tu variable, puedes asignar su valor a otras propiedades CSS


haciendo referencia a su nombre.

background: var(--ejemplo-variable);

Esto cambiará el fondo de cualquier elemento que utilice esta variable a "gray"
(gris) porque ese es el
valor de la variable --ejemplo-variable.

<style>
.penguin {
--ejemplo-variable: gray;
position: relative;
margin: auto;
display: block;
margin-top: 5%;
width: 300px;
height: 300px;
</style>

Cuando utilices tu variable como valor de una propiedad CSS, puedes adjuntar un
valor de respaldo o "fallback",
que será utilizado por el navegador si la variable dada no es válida.

background: var(--ejemplo-variable, black);

Esto establecerá el "background" (color de fondo) a black (negro) si tu variable no


está establecida.
Fíjate que esto puede ser útil para la depuración de errores.

Para hacer uso de la herencia, las variables CSS suelen ser definidas en el
elemento :root.

:root es un "pseudo-class selector" (selector de pseudo-clase) que corresponde al


elemento raíz o "root"
del documento, que generalmente es el elemento html. Cuando creas tus variables
en :root, el valor de esa variable
quedará establecido para toda la página. Luego podrás sobreescribir estas
variables, configurándolas de
nuevo dentro de un elemento específico. :root se declara al principio de la hoja

<style>
:root {
--ejemplo-variable1: gray;
--ejemplo-variable2: pink;
--ejemplo-variable3: orange;
}
</style>

CSS tiene múltiples opciones para alinearlo con la propiedad text-align.

text-align: justify; hace que todas las líneas de texto, excepto la última línea,
se encuentren con los lados
izquierdo y derecho de la caja.
text-align: center; centra el texto
text-align: right; alinea el texto hacia la derecha
text-align: left; (opción por defecto) alinea el texto hacia la izquierda.

shordhand: propiedad recortada


-Outline: propiedad que genera un borde pero no afecta a las demas cajas, no ocupa
un espacio real en el
DOM (document object model). La diferencia entre border y outline es que el border
ocupa un espacio real
mientras que el outline no. ej:

.ejemplo {
outline: 2px solid blue;
}

Position: posiciona los elementos. Al estar posicionado obtiene nuevas propiedades


y va a afectar el flujo HTML, el orden en el que ponemos los elementos.
-Static: no está posicionado
-Relative: el espacio se sigue conservando y adquiere nuevas propiedades (top,
right, bottom y left*)
*Top: se mueve determinados px hacia abajo. Bottom: se mueve hacia arriba. Right:
Se mueve hacia la izquierda, etc.
(top y left son las más importantes, por ende bottom y right no funcionarian si ya
están top y left presentes)
Z-index: Se adquiere cuando el elemento está posicionado. Ordena los elementos en Z
en base al orden de los elementos.
Se recomienda usar valores empezando desde el 100 en z-index para que haya espacio
entre elementos, minimo 50. Z-index
tiene conflictos con contenedors padre/hijo, para que el hijo esté posicionado por
debajo del padre hay que darle un
valor negativo (-1), no hace falta darle z-index al padre en este caso.
-Absolute: no reserva su elemento que ocupa en el flujo, el punto de referencia va
a ser el viewport o el contenedor si
es que está posicionado. El tamaño del bloque se va a ajustar al contenido.
opacity: valor del 0 hasta el 1 (0,1 0,2 etc.)
viewport: es todo lo que se puede ver en la pantalla de la página, no incluyendo
barras del navegador.
-Fixed: es igual a absolute pero queda fijado, como por ejemplo publicidades que al
scrollear se quedan en pantalla.
-Sticky: es una mezcla entre el relative y fixed. Se comporta como un fixed hasta
donde llegamos a un punto que le
especificamos.

Display: es una propiedad que modifica el comportamiento de las cajas.


-block: son los elementos que recubren todo el espacio
-inline: ocupan solamente el espacio que el contenido les da. Se usa generalmente
para textos.
-inline-block: se pueden modificar las dimensiones de la caja y tambien se puede
colocar un elemento al lado del otro.

Overflow: es un shorthand. Especifica si recortar contenido, dibujar scrolls o


mostrar contenido excedente de un
elemento a nivel de bloque.
-overflow: visible: Valor por defecto. El contenido no es recortado, podria ser
dibujado fuera de la caja contenedora.
-overflow: hidden: El contenido es recortado y no se muestran barras de posición.
-overflow: scroll: El contenido es recortado y el navegador usa el scroll.

Float: ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo


al texto aparecer al costado.
-Float: left y right: posiciona, por ej, una imagen para el lado izquierdo o
derecho.

Pseudo-elementos: no forman parte del DOM pero se pueden ver cambios visuales. Los
pseudo-elementos se aplican
a los elementos.

Sintaxis

selector::pseudo-elemento { propiedad: valor; }

-::first-line: se refiere a la primera linea de texto. No importa el tamaño,


siempre será la que cambia.
-::first-letter: Lo mismo que first-line pero solamente que con la primera letra
del texto.
*en este caso first-line y first-letter forman parte del DOM. Los pseudo-elementos
que requieran de la etiqueta
content, como por ejemplo after y before, no forman parte del DOM.
-::placeholder: se puede cambiar el estilo ya sea color o tamaño de lo que se
escribe dentro del placeholder.
-::selection: se puede cambiar el color de la seleccion de como por ejemplo un
texto.
-::before y ::after: no son parte del DOM por ende no se pueden seleccionar.
Insertan contenido antes (before) y
despues (after) de un elemento, puede ser texto por ejemplo. Los pseudo-elementos
tienen que tener un contenido
aunque sea solo una cadena de texto vacía ("").

Pseudo-clases: se trabaja de la misma forma que un pseudo-elemento, se aplica a un


tag/selector y demas. Las pseudo-clases sirven
para escuchar un evento. Son elementos en linea.

Sintaxis

selector:pseudoclase { propiedad: valor; }

-:hover: escucha al elemento cuando el mouse está encima. Funciona en cualquier


elemento, excepto pseudo-elementos. Generalmente
se aplica para los Navs, como enlaces por ejemplo.
-:link: se cambia el color u otras propiedades de un enlace si es visitado por
primera vez.
-:visited: cambia el color u otras propiedades de un enlace ya visitado.
-:active: cambiar color o propiedad de un elemento cuando se mantiene apretado el
click.
-:focus: se aplica a los inputs. Cuando se le da click al elemento y esté
seleccionado, el estilo se va a cambiar en base a lo que
se haya puesto dentro de la pseudo-clase :focus.
-:lang: es una función (selector:lang(en) detecta a los selectores por idioma.

Object-fit: se usa para imagenes. indica cómo el contenido de un elemento


reemplazado, por ejemplo un <img> o <video>,
debería redimensionarse para ajustarse a su contenedor.

También podría gustarte