Cores e fondos en CSS

Color

A propiedade color describe a cor do texto dun elemento. Unha cor pódese identificar polo seu nome estándar ou polo valor RGB segundo se explicou no apartado cores.

Exemplo de regras de estilo:

.textoVermello  { color:red;}
.textoAzul      { color:#0000CD;}

Exemplo de código:

<p class="textoVermello"> Texto escrito en vermello </p>
<p class="textoAzul"> Texto escrito en azul </p>

Visualización:

Texto escrito en vermello

Texto escrito en azul

background-color

A propiedade background-color permite controlar a cor de fondo de calquera elemento HTML. Os valores que acepta background-color é a cor ou ven o valor transparent, de forma que a cor de fondo será transparente, é dicir collerá a do elemento no que está contido.

Exemplo de regras de estilo:

p     { background-color: #40E0D0;}
.fondoTransparente { background-color: transparent;}

Exemplo de código:

<p>Paragráfo con fondo en cor esmeralda </p>
<p class="fondoTransparente"> A cor do fondo e a cor do elemento pai </p>

Visualización:

Parágrafo con fondo en cor esmeralda

A cor do fondo e a cor do elemento pai

background-image

A propiedade background-image permítenos poñer unha imaxe de fondo, indicando como valor a súa dirección por medio dunha URL ou indicar que non ten ningunha (none)
Se un elemento ten unha imaxe de fondo e unha cor de fondo sempre prevalecerá a imaxe de fondo a menos que non se encontre o arquivo que contén o fondo.

Exemplo de regras de estilo:

.titulo {
  background-image: url(fondo.jpg);
  color: blue;
}
.descripcion {background-image: url(descrip.jpg); }

Exemplo de código:

<p class="titulo">< Este texto ten como fondo a imaxe fondo.jpg</p>
<p class="descripcion"> Descripción del apartado </p>

Visualización:

Este texto ten como fondo a imaxe fondo.jpg

Este texto ten como fondo a imaxe descrip.jpg

background-repeat

A propiedade background-repeat permite repetir unha imaxe no caso de que non ocupe toda a pantalla. Por defecto a imaxe repítese horizontal e verticalmente. Adminte os valores:

Exemplo de regras de estilo:

.descripcionRY {
  background-image: url(descrip.jpg); 
  background-repeat: repeat-y;
}

Exemplo de código:

<p class="descripcionRY"> ...Existe pouca preocupación por non ter unha pequena inversión inicial e viaxar con pouco equipaxe. A razón é que os proxectos de código aberto están dirixidos por desarrolladores menos inclinados a emplear siglos na <q>parálisis del análisis</q> ou en producir documentación inútil. Raymond concentra a súa atención en probar que se require pouco traballo previo:<br />Cuando empiezas a construír una comunidad, lo que necesitas es ser capaz de presentar una promesa plausible. Tu programa no tiene que funcionar especialmente bien. Puede ser primitivo, plagado de errores, incompleto o pobremente documentado. Lo que se tiene que hacer sin falta es ejecutarlo y convencer al resto de potenciales desarrolladores de que puede evolucionar hasta convertirse en algo realmente bueno en un futuro previsible.<br /> Xogar a ganar...</p>

Visualización:

...Existe pouca preocupación por non ter unha pequena inversión inicial e viaxar con pouco equipaxe. A razón é que os proxectos de código aberto están dirixidos por desarrolladores menos inclinados a emplear siglos na parálisis del análisis ou en producir documentación inútil. Raymond concentra a súa atención en probar que se require pouco traballo previo:
Cuando empiezas a construír una comunidad, lo que necesitas es ser capaz de presentar una promesa plausible. Tu programa no tiene que funcionar especialmente bien. Puede ser primitivo, plagado de errores, incompleto o pobremente documentado. Lo que se tiene que hacer sin falta es ejecutarlo y convencer al resto de potenciales desarrolladores de que puede evolucionar hasta convertirse en algo realmente bueno en un futuro previsible.
Xogar a ganar...

background-attachment

A propiedade background-attachment permite indicar se a imaxe permanecerá fixa ou acompañará o contido se deslizamos a páxina coa barra de scroll. Os posibles valores son:

Exemplo de regra de estilo:

#fijo {
  font-size:40px;
  background-image: url(viaje.gif);
  background-attachment: fixed;
}

Exemplo de código:

<p id="fijo"> ...Existe pouca preocupación por non ter unha pequena inversión inicial e viaxar con pouco equipaxe. A razón é que os proxectos de código aberto están dirixidos por desarrolladores menos inclinados a emplear siglos na <q>parálisis del análisis</q> ou en producir documentación inútil. Raymond concentra a súa atención en probar que se require pouco traballo previo:<br />Cuando empiezas a construír una comunidad, lo que necesitas es ser capaz de presentar una promesa plausible. Tu programa no tiene que funcionar especialmente bien. Puede ser primitivo, plagado de errores, incompleto o pobremente documentado. Lo que se tiene que hacer sin falta es ejecutarlo y convencer al resto de potenciales desarrolladores de que puede evolucionar hasta convertirse en algo realmente bueno en un futuro previsible.<br /> Xogar a ganar...</p>

Visualización:

ver

background-position

A propiedade background-position controla a colocación inicial da imaxe. Admite os valores top, left, right, bottom, center para colocar a imaxe a esquerda, arriba, dereita, abaixo e centro respectivamente. Tamén admite valores absolutos e porcentaxes. Se usa porcentaxes ou lonxitudes a posición horizontal especifícase primeiro seguida da posición vertical

.descripcion_dereita {
  background-image: url(descrip.jpg);
  background-position: right;
  background-repeat: repeat-y;
}

Exemplo de código:

<p class="descripcion_dereita"> ...Existe pouca preocupación por non ter unha pequena inversión inicial e viaxar con pouco equipaxe. A razón é que os proxectos de código aberto están dirixidos por desarrolladores menos inclinados a emplear siglos na <q>parálisis del análisis</q> ou en producir documentación inútil. Raymond concentra a súa atención en probar que se require pouco traballo previo:<br />Cuando empiezas a construír una comunidad, lo que necesitas es ser capaz de presentar una promesa plausible. Tu programa no tiene que funcionar especialmente bien. Puede ser primitivo, plagado de errores, incompleto o pobremente documentado. Lo que se tiene que hacer sin falta es ejecutarlo y convencer al resto de potenciales desarrolladores de que puede evolucionar hasta convertirse en algo realmente bueno en un futuro previsible.<br /> Xogar a ganar...</p>

Visualización:

...Existe pouca preocupación por non ter unha pequena inversión inicial e viaxar con pouco equipaxe. A razón é que os proxectos de código aberto están dirixidos por desarrolladores menos inclinados a emplear siglos na parálisis del análisis ou en producir documentación inútil. Raymond concentra a súa atención en probar que se require pouco traballo previo:
Cuando empiezas a construír una comunidad, lo que necesitas es ser capaz de presentar una promesa plausible. Tu programa no tiene que funcionar especialmente bien. Puede ser primitivo, plagado de errores, incompleto o pobremente documentado. Lo que se tiene que hacer sin falta es ejecutarlo y convencer al resto de potenciales desarrolladores de que puede evolucionar hasta convertirse en algo realmente bueno en un futuro previsible.
Xogar a ganar...

NOTA: As propiedades background non se herdan.

Anterior Seguinte