033.3 Lección 1
Certificación: |
Conceptos básicos de desarrollo web |
---|---|
Versión: |
1.0 |
Tema: |
033 Estilo de contenido CSS |
Objetivo: |
033.3 Estilo CSS |
Lección: |
1 de 1 |
Introducción
CSS proporciona cientos de propiedades que se pueden utilizar para modificar la apariencia de los elementos HTML. Solo los diseñadores experimentados logran recordar la mayoría de ellos. Sin embargo, es práctico conocer las propiedades básicas que son aplicables a cualquier elemento, así como algunas propiedades específicas del elemento. Este capítulo cubre algunas propiedades populares que probablemente utilizará.
Valores y propiedades comunes de CSS
Muchas propiedades CSS tienen el mismo tipo de valor. Los colores, por ejemplo, tienen el mismo formato numérico, ya sea que cambie el color de fuente o el color de fondo. Del mismo modo, las unidades disponibles para cambiar el tamaño de la fuente también se utilizan para cambiar el grosor de un borde. Sin embargo, el formato del valor no siempre es único. Los colores, por ejemplo, se pueden introducir en varios formatos diferentes, como veremos a continuación.
Colores
Cambiar el color de un elemento es probablemente una de las primeras cosas que los diseñadores aprenden a hacer con CSS. Puede cambiar el color del texto, el color de fondo, el color del borde de los elementos y más.
El valor de un color en CSS se puede escribir como una palabra clave de color (es decir, un nombre de color) o como un valor numérico que representa cada componente de color. Todos los nombres de colores comunes, como black
, white
, red
, purple
, green
, yellow
y blue
, se aceptan como palabras claves de colores. La lista completa de palabras clave de color aceptadas por CSS está disponible en la página web de la W3C. Pero para tener un control más preciso sobre el color, puede utilizar el valor numérico.
Palabras claves de colores
Primero usaremos la palabra clave color, porque es más simple. La propiedad color
cambia el color del texto en el elemento correspondiente. Entonces, para poner todo el texto de la página en violeta, puede escribir la siguiente regla CSS:
* {
color: purple;
}
Valores numéricos de colores
Aunque son intuitivas, las palabras claves de colores no ofrecen la gama completa de colores posibles en las pantallas modernas. Los diseñadores web suelen desarrollar una paleta que emplea colores personalizados, asignando valores específicos a los componentes rojo, verde y azul.
Cada componente de color es un número binario de ocho bits, que va de 0 a 255. Los tres componentes deben especificarse en la mezcla de colores y su orden es siempre rojo, verde y azul. Por lo tanto, para cambiar el color de todo el texto de la página a rojo usando notación RGB, use rgb (255,0,0)
:
* {
color: rgb(255,0,0);
}
Un componente establecido en 0
significa que el color básico correspondiente no se utiliza en la mezcla de colores. También se pueden utilizar porcentajes en lugar de números:
* {
color: rgb(100%,0%,0%);
}
La notación RGB rara vez se ve si usa una aplicación de dibujo para crear diseños o simplemente para elegir sus colores. Más bien, es más común ver colores en CSS expresados como valores hexadecimales. Los componentes de color en notación hexadecimal también van de 0 a 255, pero de una manera más sucinta, comenzando con un símbolo de almohadilla #
y usando una longitud fija de dos dígitos para todos los componentes. El valor mínimo 0
es 00
y el valor máximo 255
es FF
, por lo que el color rojo
es #FF0000
.
Tip
|
Si los dígitos de cada componente de un color hexadecimal se repiten, se puede omitir el segundo dígito. El color |
La siguiente lista muestra la notación RGB y hexadecimal para algunos colores básicos:
Palabra clave de color | Notación RGB | Valor hexadecimal |
---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Las palabras claves de colores y las letras en valores de color hexadecimales no distinguen entre mayúsculas y minúsculas.
Opacidad de color
Además de los colores opacos, es posible rellenar los elementos de la página con colores semitransparentes. La opacidad de un color se puede establecer utilizando un cuarto componente en el valor del color. A diferencia de los otros componentes de color, donde los valores son números enteros que van de 0 a 255, la opacidad es una fracción que va de 0
a 1
.
El valor más bajo, 0
, da como resultado un color completamente transparente, lo que lo hace indistinguible de cualquier otro color completamente transparente. El valor más alto, 1
, da como resultado un color completamente opaco, que es el mismo que el color original sin ninguna transparencia.
Cuando utilice la notación RGB, especifique colores con un componente de opacidad mediante el prefijo rgba
en lugar de rgb
. Por lo tanto, para hacer que el color rojo sea semitransparente, use rgba (255,0,0,0.5)
. El caracter a
significa alpha channel, un término comúnmente utilizado para especificar el componente de opacidad en la jerga de los gráficos digitales.
La opacidad también se puede establecer en notación hexadecimal. Aquí, al igual que los otros componentes de color, la opacidad varía de 00
a FF
. Por lo tanto, para hacer que el color rojo
sea semitransparente usando notación hexadecimal, use #FF000080
.
Fondo
El color de fondo de los elementos individuales o de toda la página se establece con la propiedad background-color
. Toma los mismos valores que la propiedad color
, ya sea como palabras claves o usando la notación RGB/hexadecimal.
Sin embargo, el fondo de los elementos HTML no se limita a los colores. Con la propiedad background-image
es posible utilizar una imagen como fondo. Los formatos de imagen aceptados son todos los convencionales aceptados por el navegador, como JPEG y PNG.
La ruta a la imagen debe especificarse usando un designador url()
. Si la imagen que desea usar está en la misma carpeta que el archivo HTML, es suficiente con usar solo su nombre de archivo:
body {
background-image: url("background.jpg");
}
En este ejemplo, el archivo de imagen background.jpg
se utilizará como imagen de fondo para todo el cuerpo de la página. De forma predeterminada, la imagen de fondo se repite si su tamaño no cubre toda la página, comenzando desde la esquina superior izquierda del área correspondiente al elemento que deseamos aplicar las reglas. Este comportamiento se puede modificar con la propiedad background-repeat
. Si desea que la imagen de fondo se coloque en el área del elemento sin repetirla, use el valor no-repeat
:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
}
También puede hacer que la imagen se repita solo en la dirección horizontal (background-repeat: repeat-x
) o solo en la dirección vertical (background-repeat: repeat-y
).
background-repeat
.
Tip
|
Se pueden combinar dos o más propiedades CSS en una sola propiedad, denominada propiedad background shorthand. Las propiedades |
Una imagen de fondo también se puede colocar en una posición específica en el área del elemento usando la propiedad background-position
. Las cinco posiciones básicas son top
, bottom
, left
, right
y center
, pero la posición superior izquierda de la imagen también se puede ajustar con porcentajes:
body {
background-image: url("background.jpg");
background-repeat: no-repeat;
background-position: 30% 10%;
}
El porcentaje de cada posición es relativo al tamaño correspondiente del elemento. En el ejemplo, el lado izquierdo de la imagen de fondo estará al 30% del ancho del cuerpo (generalmente el cuerpo es todo el documento visible) y el lado superior de la imagen estará al 10% de la altura del cuerpo.
Bordes
Cambiar el borde de un elemento también es una personalización de diseño común realizada con CSS. El borde se refiere a la línea que forma un rectángulo alrededor del elemento y tiene tres propiedades básicas: color
, style
y width
.
El color del borde, definido con border-color
, sigue el mismo formato que vimos para las otras propiedades de color.
Los bordes se pueden trazar con un estilo que no sea una línea continua. Por ejemplo, podría utilizar guiones para el borde con la propiedad border-style: dashed
. Los otros valores de estilo posibles son:
dotted
-
Una secuencia de puntos redondeados
double
-
Dos líneas rectas
groove
-
Una línea con apariencia tallada
ridge
-
Una línea con apariencia extruida
inset
-
Un elemento que parece incrustado
outset
-
Un elemento que aparece en relieve
La propiedad border-width
establece el grosor del borde. Su valor puede ser una palabra clave (thin
, medium
o thick
) o un valor numérico específico. Si prefiere utilizar un valor numérico, también deberá especificar su unidad correspondiente. Esto se describe a continuación.
Valores unitarios
Los tamaños y distancias en CSS se pueden definir de varias formas. Las unidades absolutas se basan en un número fijo de píxeles de la pantalla, por lo que no son tan diferentes de los tamaños y dimensiones fijos utilizados en los medios impresos. También hay unidades relativas, que se calculan dinámicamente a partir de alguna medida dada por el medio donde se representa la página, como el espacio disponible u otro tamaño escrito en unidades absolutas.
Unidades absolutas
Las unidades absolutas son equivalentes a sus contrapartes físicas, como centímetros o pulgadas. En las pantallas de ordenador convencionales, una pulgada tendrá 96 píxeles de ancho. Las siguientes unidades absolutas se utilizan comúnmente:
in
(inch)-
1 pulgada equivale a 2,54 cm o 96 px.
cm
(centimeter)-
1 cm equivale a 96 px / 2,54.
mm
(millimeter)-
1 mm equivale a 1 cm / 10.
px
(pixel)-
1 px equivale a 1/96 de pulgada.
pt
(point)-
1 pt equivale a 1/72 de pulgada.
Tenga en cuenta que la proporción de píxeles por pulgada puede variar. En pantallas de alta resolución, donde los píxeles están más densamente empaquetados, una pulgada corresponderá a más de 96 píxeles.
Unidades relativas
Las unidades relativas varían según otras medidas o las dimensiones de la ventana gráfica. La ventana gráfica es el área del documento actualmente visible en su ventana. En el modo de pantalla completa, la ventana gráfica corresponde a la pantalla del dispositivo. Las siguientes unidades relativas se utilizan comúnmente:
%
-
Porcentaje: es relativo al elemento principal.
em
-
El tamaño de la fuente utilizada en el elemento.
rem
-
El tamaño de la fuente utilizada en el elemento raíz.
vw
-
1% del ancho de la ventana gráfica.
vh
-
1% de la altura de la ventana gráfica.
La ventaja de usar unidades relativas es que puede crear diseños que se pueden ajustar cambiando solo algunos tamaños de clave. Por ejemplo, puede usar la unidad pt
para establecer el tamaño de fuente en el elemento del cuerpo y la unidad rem
para las fuentes en otros elementos. Una vez que cambie el tamaño de fuente para el cuerpo, todos los demás tamaños de fuente se ajustarán en consecuencia. Además, el uso de vw
y vh
para establecer las dimensiones de las secciones de la página las hace ajustables a pantallas con diferentes tamaños.
Propiedades de fuentes y texto
La tipografía, o el estudio de los tipos de fuentes, es un tema de diseño muy amplio, y la tipografía CSS no se queda atrás. Sin embargo, existen algunas propiedades de fuente básicas que satisfarán las necesidades de la mayoría de los usuarios que aprenden CSS.
La propiedad font-family
establece el nombre de la fuente que se utilizará. No hay garantía de que la fuente elegida esté disponible en el sistema donde se verá la página, por lo que esta propiedad puede no tener ningún efecto en el documento. Aunque es posible hacer que el navegador descargue y use el archivo de fuente especificado, la mayoría de los diseñadores web están felices de usar una familia de fuentes genérica en sus documentos.
Las tres familias de fuentes genéricas más comunes son serif
, sans-serif
y monospace
. Serif es la familia de fuentes predeterminada en la mayoría de los navegadores. Si prefiere usar sans-serif
para toda la página, agregue la siguiente regla a su hoja de estilos:
* {
font-family: sans-serif;
}
Opcionalmente, primero puede establecer un nombre de familia de fuentes específico, seguido del nombre de familia genérico:
* {
font-family: "DejaVu Sans", sans-serif;
}
Si el dispositivo que representa la página tiene esa familia de fuentes específica, el navegador la utilizará. De lo contrario, utilizará su fuente predeterminada que coincida con el apellido genérico. Los navegadores buscan fuentes en el orden en que se especifican en la propiedad.
Cualquiera que haya utilizado una aplicación de procesamiento de texto también estará familiarizado con otros tres ajustes de fuente: tamaño, peso y estilo. Estos tres ajustes tienen contrapartes en las propiedades de CSS: font-size
, font-weight
y font-style
.
La propiedad font-size
acepta tamaños de palabras claves como xx-small
, x-small
, small
, medium
, large
, x-large
, xx-large
, xxx -grande
. Estas palabras claves son relativas al tamaño de fuente predeterminado que utiliza el navegador. Las palabras claves larger
y smaller
cambian el tamaño de la fuente en relación con el tamaño de la fuente del elemento principal. También puede expresar el tamaño de fuente con valores numéricos, incluida la unidad después del valor, o con porcentajes.
Si no desea cambiar el tamaño de la fuente, sino la distancia entre líneas, use la propiedad line-height
. Un line-height
de 1
hará que la altura de la línea sea del mismo tamaño que la fuente del elemento, lo que puede hacer que las líneas de texto estén demasiado juntas. Por tanto, un valor superior a 1 es más apropiado para textos. Al igual que la propiedad font-size
, se pueden usar otras unidades junto con el valor numérico.
El font-weight
establece el grosor de la fuente con las conocidas palabras claves normal
o bold
. Las palabras claves lighter
y bold
cambian el peso de la fuente del elemento en relación con el peso de la fuente de su elemento principal.
La propiedad font-style
se puede establecer en italic
para seleccionar la versión en cursiva de la familia de fuentes actual. El valor oblique
selecciona la versión oblicua de la fuente. Estas dos opciones son casi idénticas, pero la versión en cursiva de una fuente suele ser un poco más estrecha que la versión oblicua. Si no existen versiones de la fuente en cursiva ni oblicua, el navegador la inclinará artificialmente.
Hay otras propiedades que cambian la forma en que se representa el texto en el documento. Puede, por ejemplo, agregar un subrayado a algunas partes del texto que desee enfatizar. Primero, use una etiqueta <span>
para delimitar el texto:
<p>CSS is the <span class="under">proper mechanism</span> to style HTML documents.</p>
Luego puede usar el selector .under
para cambiar la propiedad text-decoration
:
.under {
text-decoration: underline;
}
De forma predeterminada, todos los elementos a
(enlace) están subrayados. Si desea eliminarlo, use el valor none
para el text-decoration
de todos los elementos a
:
a {
text-decoration: none;
}
Al revisar el contenido, a algunos autores les gusta tachar partes incorrectas o desactualizadas del texto, para que el lector sepa que el texto se ha actualizado y lo que se ha eliminado. Para hacerlo, use el valor line-through
de la propiedad text-decoration
:
.disregard {
text-decoration: line-through;
}
Nuevamente, se puede usar una etiqueta <span>
para aplicar el estilo:
<p>Netscape Navigator <span class="disregard">is</span> was one of the most popular Web browsers.</p>
Otras decoraciones pueden ser específicas de un elemento. Los círculos en las listas de viñetas se pueden personalizar usando la propiedad list-style-type
. Para cambiarlos a cuadrados, por ejemplo, use list-style-type: square
. Para simplemente eliminarlos, establezca el valor de list-style-type
en none
.
Ejercicios guiados
-
¿Cómo podría agregar semitransparencia al color azul (notación RGB
rgb (0,0,255)
) para usarlo en la propiedad CSScolor
? -
¿Qué color corresponde al valor hexadecimal
#000
? -
Dado que
Times New Roman
es una fuenteserif
y que no estará disponible en todos los dispositivos, ¿cómo podría escribir una regla CSS para solicitarTimes New Roman
mientras configura la familia de fuentes genéricasserif
como alternativa? -
¿Cómo podría utilizar una palabra clave de tamaño relativo para establecer el tamaño de fuente del elemento
<p class="disclaimer">
más pequeño en relación con su elemento principal?
Ejercicios de exploración
-
La propiedad
background
es una abreviatura para establecer más de una propiedadbackground-*
a la vez. Reescriba la siguiente regla CSS como una única propiedad abreviadabackground
.body { background-image: url("background.jpg"); background-repeat: repeat-x; }
-
Escriba una regla CSS para el elemento
<div id="header"></div>
que cambie solamente el ancho del borde inferior a4px
. -
Escriba una propiedad
font-size
que duplique el tamaño de fuente utilizado en el elemento raíz de la página. -
Double-spacing es una característica común de formato de texto en los procesadores de texto. ¿Cómo podrías establecer un formato similar usando CSS?
Resumen
Esta lección cubre la aplicación de estilos simples a elementos de un documento HTML. CSS proporciona cientos de propiedades y la mayoría de los diseñadores web necesitarán recurrir a manuales de referencia para recordarlas todas. No obstante, la mayor parte del tiempo se utiliza un conjunto relativamente pequeño de propiedades y valores, y es importante conocerlos de memoria. La lección abarca los siguientes conceptos y procedimientos:
-
Propiedades CSS fundamentales relacionadas con colores, fondos y fuentes.
-
Las unidades absolutas y relativas que CSS puede usar para establecer tamaños y distancias, como
px
,em
,rem
,vw
,vh
, etc.
Respuestas a los ejercicios guiados
-
¿Cómo podría agregar semitransparencia al color azul (notación RGB
rgb (0,0,255)
) para usarlo en la propiedad CSScolor
?Utilice el prefijo
rgba
y agregue0.5
como cuarto valor:rgba (0,0,0,0,5)
. -
¿Qué color corresponde al valor hexadecimal
#000
?El color
negro
. El valor hexadecimal#000
es una abreviatura de#000000
. -
Dado que
Times New Roman
es una fuenteserif
y que no estará disponible en todos los dispositivos, ¿cómo podría escribir una regla CSS para solicitarTimes New Roman
mientras configura la familia de fuentes genéricasserif
como reserva?* { font-family: "Times New Roman", serif; }
-
¿Cómo podría usar una palabra clave de tamaño relativo para establecer el tamaño de fuente del elemento
<p class="disclaimer">
más pequeño en relación con su elemento principal?Usando la palabra clave
smaller
:p.disclaimer { font-size: smaller; }
Respuestas a los ejercicios de exploración
-
La propiedad
background
es una forma abreviada de establecer más de una propiedadbackground-*
a la vez. Reescriba la siguiente regla CSS como una propiedad abreviada única debackground
.body { background-image: url("background.jpg"); background-repeat: repeat-x; }
body { background: repeat-x url("background.jpg"); }
-
Escriba una regla CSS para el elemento
<div id="header"></div>
que cambie solamente el ancho del borde inferior a4px
.#header { border-bottom-width: 4px; }
-
Escriba una propiedad
font-size
que duplique el tamaño de fuente utilizado en el elemento raíz de la página.La unidad
rem
corresponde al tamaño de fuente utilizado en el elemento raíz, por lo que la propiedad debe serfont-size: 2rem
. -
Double-spacing es una característica común de formato de texto en los procesadores de texto. ¿Cómo podrías establecer un formato similar usando CSS?
Establezca la propiedad
line-height
en el valor2em
, porque la unidadem
corresponde al tamaño de fuente del elemento actual.