Lenguaje CSS

Lenguaje CSS

Introducción

Este trabajo es sobre conceptos del lenguaje de CSS, sus funciones y como podemos plicarlos para que nos sea más facil la programación.

Selectores

01

Básicos

Selector universal

El selector universal viene representado con un asterisco (*):Selecciona todos los elementos de la página, algo útil cuando queremos aplicar el mismo estilo a todos ellos.

Selector de elemento, etiqueta o tipo

El selector de elemento selecciona aquellos elementos cuya etiqueta HTML coincide con el del selector. Útil cuando se quiere aplicar el mismo formato a un elemento determinado de la página

Selector de identificador

El selector de identificador se representa con un numeral (#).Selecciona aquellos elementos cuyo atributo id coincide con el indicado en el selector.zSelecciona aquellos elementos cuyo atributo id coincide con el indicado en el selector.

Selector de clase

El selector de clase se representa con un punto (.).Selecciona aquellos elementos cuyo atributo class coincide con el indicado en el selector.

Selector descendiente

El selector descendiente se representa concatenando dos selectores seguidos, separados por algún espacio.Selecciona aquellos elementos que se encuentran dentro de otros elementos.

02

Selectores avanzados

Selector de hijo

El selector de hijo viene representado por el signo de mayor que (>). Es similar al selector descendiente, pero en este caso selecciona aquellos elementos que son hijos directos de otro elemento.

Selector adyacente

El selector adyacente viene representado por el signo de suma (+). Selecciona aquellos elementos que son adyacentes a otro elemento; es decir, aquel elemento que es hermano y se encuentra a continuación.

En el siguiente ejemplo: Solo pondrá el texto Subtítulo en rojo, dejando a Otro subtítulo sin modificar su estilo.

Selector hermano

El selector hermano viene representado por el signo virgulilla (~). En un selector menos restrictivo que el selector adyacente porque selecciona todos los elementos que son hermanos a otro.

En el ejemplo anterior, pondría en rojo tanto Subtítulo como Otro subtítulo.

Selector de atributo

El selector de atributo viene representado por corchetes ([]). Selecciona aquellos elementos que tienen un atributo con el nombre indicado.

Unidades de medida

Pixels en CSS: px

Las medidas se miden en pixels. Se escribe de la siguiente manera:

Inches o pulgadas en CSS: in

Las medidas se miden en pulgadas. Se escribe de la siguiente manera:

Milímetros en CSS: mm

Las medidas se miden en milímetros. Se escribe de la siguiente manera:

Centímetros en CSS: cm

Las medidas se miden en centímetros. Se escribe de la siguiente manera:

Picas en CSS: pc

Las medidas se miden en picas. Se escribe de la siguiente manera:

Puntos en CSS: pt

Las medidas se miden en puntos. Se escribe de la siguiente manera:

Colores

background-color

Background-color es un propiedad de CSS que define el color de fondo de un elemento, puede ser el valor de un color o la palabra clave

Valores

Opacidad (transparencia): opacityopacity

Color del texto: color

La propiedad opacity permite hacer que un elemento sea parcialmente transparente. El valor de esta propiedad debe ser un valor decimal entre 0 y 1 (el valor 0 hace que el elemento sea completamente transparente y el valor 1 hace que el elemento sea completamente opaco).

La propiedad color permite establecer el color del texto.

Códigos de colores RGB

Las pantallas de ordenador consiguen los colores mezclando tres colores básicos (rojo, verde y azul). Cada color admite 256 niveles de intensidad, lo que hace un total de 256 x 256 x 256 = 16.777.216 colores distintos. Para hacer referencia a un color concreto, basta con indicar las intensidades de cada uno de los tres colores básicos.

Códigos de colores HSL

En el modelo de color HSL el color se define mediante tres valores: Hue (Matiz) es un entero entre 0 y 360 y recorre todos los colores Saturation (Saturación) es un porcentaje que define la intensidad del color Lightness (Luminosidad) es un porcentaje que indica la claridad u oscuridad del colo

Códigos de colores HWBcolores HWB

En el modelo de color HWB el color se define mediante tres valores: Hue (Matiz) es un entero entre 0 y 360 y recorre todos los colores Whiteness (Blanco) es un porcentaje que indica la cantidad de blanco que se añade al color Blackness (Negro) es un porcentaje que indica la cantidad de negro que se añade al color

Transparencia alfa

El canal alfa se escribe como porcentaje o como valor decimal entre 0 y 1, en el que el 0 significa completamente transparente y el 1 completamente opaco.

Anchura y Altura

Anchura

Altura

La propiedad CSS que controla la anchura de la caja de los elementos se denomina width.

La propiedad CSS que controla la altura de los elementos se denomina height.

Margen y Relleno

La propiedad margin (márgenes)

Los márgenes (margin) son los espacios que hay entre los bordes del elemento en cuestión y los bordes de otros elementos (parte exterior).

Relleno

Los rellenos (padding) son los espacios que hay entre los bordes del elemento en cuestión y el contenido del elemento

Bordes

Estilo CSS border-style

Estilo CSS border-color

Este estilo nos permite indicar el color del borde del elemento al que se lo aplicamos. Este color se le indica con el modo RGB o con el nombre del color.

Este estilo nos permite indicar el estilo del borde del elemento al que se lo aplicamos.

Estilo CSS border

Estilo CSS border-width

El estilo border utilizado sólo, sirve para establecer los atributos que le indiquemos a los cuatro bordes del elemento al que se lo aplicamos.

Este estilo nos permite indicar el tamaño del borde del elemento al que se lo aplicamos. El tamaño se lo debemos indicar con alguna de las unidades CSS.

CSS border-collapse

Este estilo admite dos valores: collapse y separate.

Texto

Estilo CSS text-decoration

Este estilo lo utilizaremos para darle un aspecto diferente al párrafo. Así podremos subrayarlo (underline), sobrerayarlo (overline) o tacharlo (line-through).

Resultado:

Estilo CSS text-align

Gracias al siguiente estilo podemos alinear el texto a la izquierda (left), a la derecha (right), al centro (center) o justificarlo (justify).

Resueltado:

Estilo CSS text-indent

Este estilo es muy práctico. Gracias a él podemos hacer sangrados o márgenes en los párrafos. Para ello debemos indicarle un valor numérico que será el tamaño del sangrado.

Resultado:

Estilo CSS text-transform

Este estilo nos permite cambiar la apariencia del párrafo. Gracias a él podemos cambiar todo el texto a mayúsculas (uppercase), todo el texto a minúsculas (lowercase) o hacer que todas las primeras letras del párrafo se conviertan en mayúsculas (capitalize).

Resultado:

Enlaces

Visited:

Link (no visitado):

El estado predeterminado que presenta un enlace cuando no está en ningún otro estado. Se puede especificar usando la pseudoclase :link

n enlace cuando ya se ha visitado (está grabado en el historial del navegador); se le aplica otro formato con la pseudoclase :visited.

Focus:

Hover:

Un enlace cuando tiene el foco (por ejemplo, se salta a este con la tecla Tab del teclado o se le da el foco mediante programación usando HTMLElement.focus()); se le aplica un formato diferente con la pseudoclase :focus.

Un enlace cuando se le pasa el cursor por encima; se le aplica otro formato con la pseudoclase :hover.

Active:

Un enlace cuando se activa (por ejemplo, se hace clic encima); se le aplica un formato diferente con la pseudoclase :active.

Conclusión

Las herramientas son multiples pero ya sabemos cual es la función de cada una de ellas, dandonos varias alternativas a las que más nos favorezca a nosotros a la hora de pogramar.

Referencia Bibliográfica

• https://www.davidvalverde.com/blog/selectores-basicos-css/
• https://www.davidvalverde.com/blog/selectores-avanzados-css/
• https://www.hazunaweb.com/curso-de-css/unidades-de-medida/
• https://www.mclibre.org/consultar/htmlcss/css/css-color.html
• https://developer.mozilla.org/es/docs/Web/CSS/background-color
• https://uniwebsidad.com/libros/css/capitulo-4/anchura-y-altura
• https://lenguajecss.com/css/modelo-de-cajas/margenes-y-rellenos/#:~:text=Los%20rellenos%20%28padding%29%20son%20los%20espacios%20que%20hay,y%20los%20bordes%20de%20otros%20elementos%20%28parte%20exterior%29
• https://www.hazunaweb.com/curso-de-css/estilos-de-bordes/
• https://www.hazunaweb.com/curso-de-css/estilos-de-parrafos-texto/
• https://developer.mozilla.org/es/docs/Learn/CSS/Styling_text/Styling_links