jueves, 10 de diciembre de 2020

CSS Atributos 1

Atributos

Para todos

Width        Anchura de elemento.
height        Altura de elemnto.
visibility    Visibilidad.

Para fuentes

color                 Color de texto.
font-size           Tamaño de la fuente.
font family        Familia de tipo de texto.
font-weight       Ancho de los caracteres.
font-style          Estilo de fuente.

Para parrafos

line-height                Alto de línea.
text-decoration         Decoración de texto.
text-aling                  Justificación de texto.
vertical-aling            Determina la alineación vertical.
text-indent                Sangrado o margen del texto.
text-transform          Transforman el texto.
letter.spacing            Pone espacio entre letras.
word-spacing           Pone espacio entre palabras.

Para fondos de un elemento

background-color                    Color de fondo
background-image                   Pone una imagen de fondo que se muestra detreas del contenido.
background-repeat                   Repite la imagen de fondo horizontal mente y vertical mente.
background-attachment           Determina si una imagen de fondo ha de moverse con el scroll.
background-position                Determina la posición del fondo.
background                              Propiedades del fondo.

Otros atributos

display                                Modo de mostrar la información de un bloque.
white-space                         Determina como se tratan los espacios en blanco.
list-style-type                      Especifica el tipo de marcador o viñeta de cada ítem de la lista.
list-stye-image                    Especifica la imagen que se mostrara como viñeta en cada ítem de la lisa.
list-style-position                Determina donde se posicionara la viñeta con respecto al ítem de la lista.
list-style                              Especifica de manera rápida todas o algunas de las propiedades anteriores.
cursor 

Unidades de medida

Las unidades de medida definen el tamaño de los elementos y sus márgenes. Se indican con un valor numérico entero o decimal seguido de una unidad de medida.
Existen de dos tipos:

Absolutas

in            pulgadas 2.54cm
cm          centímetros
mm        milimetros
pt           puntos                0,35cm aprox              172 pulgadas
pc           picas                  4,23 mm aprox           12 puntos

Relativas

em relativa respecto al tamaño de letra del elemento seleccionado.
ex relativa respecto a la altura de la letra x del elemento seleccionado.
px relativa a la resolución de pantalla

Porcentajes (es una etiqueta relativa)

Respecto a un valor inicial  hace un porcentaje.

Colores

Los colores se pueden indicar de 5 formas diferentes.

Palabras clave

aqua, black, blue, fuchsia etc...

Colores del sistema

RGB hexadecimal   p{ color: #1234A2;    }
RGB numérico        p{ color: reg(71, 25, 30);    }
RGB porcentual      p{ color: reg(71%, 25%, 30%);    }

Selectores

Son unas reglas de CSS que que se forman por un selector que define a quien se la aplicara la declaración que indica que hay que hacer.

Selector universal

selecciona a todos los elementos.

*{ margin: opx;}

Selector de etiqueta

sirve para seleccionar todos los elementos que coincidan con la etiqueta.

etiqueta{propiedad: valor;}

Selector descendiente

Sirve para los elementos m que son descendientes de E siendo la forma E M.

p a {propiedad: valor;} Se aplicara a los link en los párrafos únicamente.

descendiente continuado
Si no quisiesemos aplicar la selecccion a los hijos y si a partir de los nietos en adelante, lo combinariamos con el universal.

p * a {propiedad: valor;}

Selector hijo


Selector adyacente


Selector de atributos

Se usa para seleccionar elementos con un atributo de manera concreto.

[atributo]

Selector de clase

se aplica sobre el atributo class 

<p class= "ejem">texto</p>

p.grandote {propiedad: valor;}
.grandote   {propiedad: valor;}

Selector ID

Se aplica sobre un ID

#pequenia {font-size: 50px;}

<p id="pequenia">texto</p>



No hay comentarios:

Publicar un comentario