Listas de declaraciones CSS

Las propiedades se definen como listas de declaraciones CSS, son muy hetereogéneas y no pueden aplicarse a todas las etiquetas HTML

Podemos encontrar ejemplos en w3schools o en MDN Web Docs Mozilla

A continuación vamos a tratar algunas de las principales listas de declaraciones

Unidades de medida

Muchas propiedades aceptan como valor una unidad de medida

En general, es recomendable utilizar medidas relativas en vez de absolutas

Por ejemplo, para una página para la web podríamos indicar que queremos 20 píxeles de alto, sin embargo, si nuestros usuarios cambian de dispositivo, como por ejemplo a un móvil o a una tablet, ese tamaño seria o muy grande o el contenido aparecería desproporcionado

Para evitar ese problema u otros similares, las declaraciones CSS admiten las siguientes unidades:

Porcentaje: establece el tamaño en un tanto por ciento con respecto al valor heredado
```
* {
    font-size: 80%;
}
```
em: establece el tamaño de acuerdo a la fuente actual (o de la fuente heredada, si no se ha definido un tamaño de fuente)
```
* {
    font-size: 2em;
}
```
px: establece el tamaño en píxeles (un píxel representa un punto concreto de la pantalla que muestra nuestra página), siendo una medida absoluta, como puede generar problemas, deberíamos limitar su uso a casos concretos
```
* {
    font-size: 12px;
}
```

Podemos utilizar las declaraciones CSS para indicar la apariencia visual de la página web en distintos dispositivos, como por ejemplo una impresora. Para esos casos podemos utilizar otro tipo de medidas:

cm, mm, in: el tamaño se establece en una de las unidades internacionales (cm para centímetros, mm para milímetros e in para pulgadas)
```
header {
    font-size: 12cm;
}

body {
    font-size: 30mm;
}

p {
    font-size: 10in;
}
```
pt: el tamaño se establece en puntos (un punto equivale a \frac{1}{72} de pulgada)
```
* {
    font-size: 12pt;
}
```

El uso de medidas relativas (porcentajes o em) permiten que nuestra página se visualice correctamente en cualquier dispositivo. A esta práctica se la denomina diseño adaptativo o responsive, es decir, nuestro diseño se adaptará al dispositivo en el cual sea visualizado (un navegador, un móvil, una tablet, etc)

Colores

Otro de los elementos fundamentales para una página web es el tratamiento de los colores

Hay una lista de 140 colores básicos que podemos encontrar predefinidos, también podemos definirlos manualmente utilizando la notación RGB (Red, Green, Blue) para indicar la cantidad de rojo, verde y azul que componen ese color

Para definir el color usaremos un valor entre 0 y 255 (en su valor hexadecimal), iniciando la codificación con el simbolo ‘#’ seguido de un número hexadecimal de 6 cifras

Podemos definir el color de las siguientes maneras:

color: valor dónde valor es uno de los colores predefinidos
```
h1 {
    color: red;
}
```
color: codigo dónde código es un valor que empieza por el símbolo ‘#’ seguido de un número hexadecimal de 6 cifras
```
h1 {
    color: #FF0000;
}
```
color: RGB(entero, entero, entero): dónde RGB es una función que admite 3 valores entre 0 y 255 que corresponden a la cantidad de rojo, verde y azul que componen ese color
```
h1 {
    color: RGB(255, 0, 0);
}
```
color: RGB(entero%, entero%, entero%): igual que la anterior, pero el valor entero es un porcentaje
```
h1 {
    color: RGB(100%, 0%, 0%);
}
```
color: transparent: el color transparente también es un color válido en CSS3
```
h1 {
    color: transparent;
}
```

Propiedades de texto

Las principales propiedades que se pueden utilizar en los elementos de texto son:

color

indica el color de la fuente. Su valor es un color, ya lo hemos descrito en el párrafo anterior
```
p {
    color: #FF0000;
}
```
font-size

representa el tamaño de la fuente, como ya se ha descrito en el párrafo anterior es recomendable usar valores relativos
```
p {
    font-size: 80%;
}
```
font-style

admite un estilo de letra para el texto, podemos elegir entre uno de los siguientes estilos:
- normal es el estilo por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    font-style: normal;
}
```
- italic es el estilo por defecto del navegador para la letra en cursiva
```
p {
    font-style: italic;
}
```
- oblique es el estilo por defecto del navegador para la letra oblique, es similar a la cursiva, si la fuente no permite el tipo oblique tomará el estilo como italic
```
p {
    font-style: oblique;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    font-style: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    font-style: inherit;
}
```
font-weight

admite un estilo de letra en negrita para el texto, podemos elegir entre uno de los siguientes tipos de negrita:
- normal es la negrita por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    font-weight: normal;
}
```
- bold define la negrita con caracteres gruesos
```
p {
    font-weight: bold;
}
```
- bolder define la negrita con los caracteres más gruesos
```
p {
    font-weight: bolder;
}
```
- lighter define la negrita con los caracteres más finos
```
p {
    font-weight: lighter;
}
```
- entero define la negrita con un valor múltiplo de 100, con el valor 400 por defecto y el 700 para bold
```
p {
    font-weight: 600;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    font-weight: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    font-weight: inherit;
}
```
text-decoration-line

establece el tipo de decoración del texto para el subrayado, podemos elegir entre uno de los siguientes tipos de decoración:
- none valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    text-decoration-line: none;
}
```
- underline el subrayado será debajo del texto
```
p {
    text-decoration-line: underline;
}
```
- overline el subrayado será sobre el texto
```
p {
    text-decoration-line: overline;
}
```
- line-through el subrayado será a través del texto
```
p {
    text-decoration-line: line-through;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-decoration-line: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-decoration-line: inherit;
}
```
text-decoration-color

establece el color para la decoración del texto, podemos elegir entre uno de los siguientes tipos de decoración:
- color donde color es uno de los valores vistos en el párrafo anterior
```
p {
    text-decoration-color: #FF0000;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-decoration-color: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-decoration-color: inherit;
}
```
text-decoration-style

establece el tipo de decoración del texto, podemos elegir entre uno de los siguientes tipos de decoración:
- solid valor por defecto del navegador, si no se especifica, se tomará este valor. Mostrará la línea en una única línea
```
p {
    text-decoration-style: solid;
}
```
- double mostrará la línea con una doble línea
```
p {
    text-decoration-style: double;
}
```
- dotted mostrará la línea como una línea de puntos
```
p {
    text-decoration-style: dotted;
}
```
- dashed mostrará la línea como una línea discontinua
```
p {
    text-decoration-style: dashed;
}
```
- wavy mostrará la línea como una línea ondulada
```
p {
    text-decoration-style: wavy;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-decoration-style: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-decoration-style: inherit;
}
```
text-transform

establece el texto en letras minúsculas o mayúsculas, podemos elegir entre uno de los siguientes tipos de transformación:
- none valor por defecto del navegador, si no se especifica, se tomará este valor. No se tomarán letras mayúsculas
```
p {
    text-transform: none;
}
```
- capitalize se transforma la primera letra de cada palabra a mayúscula
```
p {
    text-transform: capitalize;
}
```
- uppercase se transforman todas las letras a mayúsculas
```
p {
    text-transform: uppercase;
}
```
- lowercase se transforman todas las letras a minúsculas
```
p {
    text-transform: lowercase;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-transform: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-transform: inherit;
}
```
letter-spacing

aumenta o disminuye el espacio entre caracteres en un texto, podemos elegir entre uno de los siguientes:
- normal valor por defecto del navegador, si no se especifica, se tomará este valor. No hay espacios extra
```
p {
    letter-spacing: normal;
}
```
- length dónde lenghth es la cantidad de espacios extra entre caracteres (también están permitidos valores negativos)
```
p {
    letter-spacing: 5px;
}
```
- initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    letter-spacing: initial;
}
```
- inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    letter-spacing: inherit;
}
```
- word-spacing
  
  aumenta o disminuye el espacio entre las palabras en un texto, podemos elegir entre uno de los siguientes:
  - normal valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    word-spacing: normal;
}
```
  - length dónde length es la cantidad de espacios extra entre palabras (también están permitidos valores negativos)
```
p {
    word-spacing: 5px;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    word-spacing: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    word-spacing: inherit;
}
```
- line-height
  
  especifica la altura de una línea, podemos elegir entre uno de los siguientes:
  - normal valor por defecto del navegador, si no se especifica, se tomará este valor
```
p {
    line-height: normal;
}
```
  - number dónde number es un valor que se multiplicará por el tamaño de la fuente actual para establecer la altura de la línea
```
p {
    line-height: 2;
}
```
  - length dónde length es la altura para esa línea (también están permitidos valores negativos)
```
p {
    line-height: 5px;
}
```
  - % es la altura para esa línea en porcentaje del tamaño de la fuente actual
```
p {
    line-height: 15%;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    line-height: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    line-height: inherit;
}
```
- text-align
  
  especifica la alineación horizontal del texto en un elemento, podemos elegir entre uno de los siguientes:
  - left el texto se alinea a la izquierda
```
p {
    text-align: left;
}
```
  - right el texto se alinea a la derecha
```
p {
    text-align: right;
}
```
  - center el texto se alinea centrado
```
p {
    text-align: center;
}
```
  - justify el texto las líneas son estiradas para que cada línea tenga el mismo ancho (como en los periódicos y las revistas)
```
p {
    text-align: justify;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-align: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-align: inherit;
}
```
- text-indent
  
  especifica la sangría de la primera línea en un bloque de texto, podemos elegir entre uno de los siguientes:
  - length dónde length es la sangría de la primera línea en un bloque de texto (también están permitidos valores negativos, en ese caso se usará una sangría a la izquierda)
```
p {
    text-indent: 5px;
}
```
  - % es la sangría de la primera línea en un bloque de texto en porcentaje del tamaño del elemento padre
```
p {
    text-indent: 15%;
}
```
  - initial se utiliza para establecer una propiedad CSS a su valor por defecto
```
p {
    text-indent: initial;
}
```
  - inherit se utiliza para heredar una propiedad del valor desde su elemento padre
```
p {
    text-indent: inherit;
}
```
Es muy importante definir una fuente que sea coherente con el estilo de nuestra web. Para ello se dispone de la propiedad font-family, en la cual especificaremos la fuente (verdana, arial, time new roman, etc) que será usada para ese texto

Sin embargo nos encontraremos con un problema si esa fuente en concreto no está definida en el navegador, por eso es recomendable especificar varias fuentes en caso de que no existiera alguna de ellas

Otra de las limitaciones es que sólo podremos usar fuentes que cumplan los estándares permitidos por los navegadores

Para solucionar los problemas relacionados con las fuentes existen servidores de fuentes de texto que ofrecen la posibilidad de cargar la fuente que necesitamos de ese servidor
```
<!DOCTYPE html>
<html>
    <head>

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-7294310421616689" crossorigin="anonymous"></script>
<script type='text/javascript' src='https://ads.vidoomy.com/miarroba_23335.js' async></script>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-T2VG59');</script>

        
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="https://fonts.google.com/css?family=Roboto" />
    </head>

    <body>

<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-T2VG59" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>

    
</script></noframes></noembed></noscript><script type="text/javascript" src="/hosting__contador__visitas__unicas.php?h=1579157&t=1732178286&k=1cf82815f207280a26c0176d67ecd838&__muid="></script>

</body>
</html>
```
En el ejemplo anterior hemos utilizado una de las fuentes de referencia de Google llamada Roboto y la hemos añadido a nuestra cabecera

Propiedades de fondo

Para establecer el fondo de un elemento utilizaremos la propiedad background-color

También puede utilizarse como fondo una imagen utilizando la propiedad background-image, que se repetirá vertical y horizontalmente para cubrir todo el elemento

Podemos limitar la forma en que se repite esa imagen con las propiedades background-repeat: repeat-y y background-repeat: repeat-x
```
body {
    background-image: url('fondo.png');
    background-repeat: no-repeat;
    background-position: right bottom;
    background-attachment: fixed;
}
```
En el ejemplo anterior hemos utilizado la propiedad background-repeat: no-repeat para desactivar la repetición de la imagen, estableciendo además una posición fija, en la esquina inferior derecha, con la propiedad background-position: right bottom

Para mantenerla fija y que haga scroll en la página, se ha utilizado la propiedad background-attachment: fixed

Dimensiones y bordes

Para indicar las dimensiones de un elemento usaremos las propiedades width y height (anchura y altura)

Debemos tener en cuenta si sus márgenes son internos o externos

Para ello primero definiremos el margen desde el borde hasta los otros elementos con la propiedad margin

En segundo lugar definiremos el margen interno hasta el propio borde del elemento con la propiedad padding

Podemos asignar un margen externo para los cuatro lados con la propiedad margin o podemos indicarle un margen externo en particular para cada lado utilizando margin-top, margin-bottom, margin-left o margin-right

De forma análoga, se puede realizar para los márgenes internos utilizando padding-top, padding-bottom, padding-left o padding-right

Una vez difinidos los márgenes externos e internos, podremos configurar la apariencia que tomará el borde

Primero estableceremos el estilo con la propiedad border-style, la cual admite los valores dotted (puntuado), dashed (discontinuo), solid (sólido) o double (doble)

También es posible usar valores para crear bordes biselados, pero las guías de estilo modernas desaconsejan su uso por estar «pasados de moda»

En segundo lugar podremos personalizar la anchura del trazo con la propiedad border-width y su color con border-color

Propiedades para listas

Podemos utilizar las siguientes propiedades para manejar elementos lista:
- list-style-type: representa el tipo de marcador que se utilizará en la lista
  Existen estos valores predefinidos:
  - circle
  - square
  - decimal
  - lower-roman
  - upper-roman
  - none
- list-style-position: indica si el marcador se incluirá dentro del texto (propiedad inside) o fuera (propiedad outside), siendo esta última la más habitual
- list-style-image: permite añadir una imagen como marcador
  Podremos usar los valores none o url(‘url de la imagen’)
Otras propiedades

Además de las propiedades anteriores vamos a destacar un par más que nos serán de especial utilidad a la hora de dar formato a nuestros elementos:
- visibility: indica si el elemento está visible o no
  Puede tomar uno de los siguientes valores:
  - visible: el elemento está visible
  - hidden: el elemento está no visible
  - collapse: solo podremos usarlo con los elementos de tablas para no visualizar una fila o una columna concreta
- display: cambia el tipo de caja del elemento, puede tener los valores:
  - block
  - inline
  - none

Cookie	Duración	Descripción
CookieLawInfoConsent	Hasta finalizar la sesión del navegador	Controla la visualización del consentimiento de Cookies, su gestión y visualización en la página web por parte del usuario
qtrans_admin_language	Hasta finalizar la sesión del navegador	Permite al administrador gestionar la traducción de la página web a varios idiomas
qtrans_edit_language	Hasta finalizar la sesión del navegador	Permite al administrador editar la traducción de la página web a varios idiomas
viewed_cookie_policy	Hasta finalizar la sesión del navegador	Controla si la visualización del consentimiento de Cookies es visible actualmente en la página web para el usuario o por el contrario está oculta

Web sobre Informática de Secarcam

Listas de declaraciones CSS

Listas de declaraciones CSS

Unidades de medida

Colores

Propiedades de texto

color

font-size

font-style

font-weight

text-decoration-line

text-decoration-color

text-decoration-style

text-transform

letter-spacing

word-spacing

line-height

text-align

text-indent

Propiedades de fondo

Dimensiones y bordes

Propiedades para listas

Otras propiedades

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Listas de declaraciones CSS

Unidades de medida

Colores

Propiedades de texto

color

font-size

font-style

font-weight

text-decoration-line

text-decoration-color

text-decoration-style

text-transform

letter-spacing

word-spacing

line-height

text-align

text-indent

Propiedades de fondo

Dimensiones y bordes

Propiedades para listas

Otras propiedades

Página web de Sergio Cárcamo García dedicada a la informática y temas relacionados como los lenguajes de programación, la estadística, las matemáticas, etc

Política de Cookies