En esta ocasión, vamos a preparar una guía sobre CSS, un lenguaje imprescindible para dar estilo a los sitios web. Esta guía ofrece una visión general de las propiedades CSS necesarias para el desarrollo y el diseño web, y presenta tanto los conceptos básicos como las funciones avanzadas para dar estilo a un sitio web.
Las propiedades CSS son una herramienta clave para ajustar el diseño y la disposición de un sitio web. Permiten controlar el estilo de la fuente, el color, el tamaño, los márgenes, los bordes y los fondos, entre otros aspectos.
Si entiendes cómo se usa cada propiedad y cómo aprovecharla, podrás dar a tu sitio web un aspecto más atractivo.
Panorama de las propiedades CSS y conceptos básicos para dar estilo a sitios web
Conceptos básicos de CSS
Las propiedades CSS se utilizan para aplicar estilos a los elementos HTML. Las reglas de estilo CSS constan de un selector y un bloque de declaraciones, y cada declaración contiene una propiedad y un valor.
Esto permite controlar el estilo de la fuente, el color, el tamaño, los márgenes, los bordes y los fondos, entre otros aspectos.
선택자 {
속성: 값;
속성: 값;
}
Por lo general, CSS se organiza en selectores y bloques de declaraciones. El selector identifica los elementos HTML a los que se aplicará el estilo.
- El selector de ID tiene la forma #idname y coincide con el valor del atributo id del elemento HTML.
- El selector de clase tiene la forma .classname y coincide con el valor del atributo class del elemento HTML.
- El selector de tipo utiliza directamente etiquetas HTML como p, h1 o div.
CSS sigue una jerarquía y, según ciertas condiciones, determina qué estilos tienen prioridad. Esto permite a los desarrolladores crear diseños web variados y complejos.
Selectores y reglas de estilo para seleccionar elementos y asignar propiedades
En CSS, los selectores permiten seleccionar elementos web y las reglas de estilo permiten asignar estilos a los elementos seleccionados.
En esta sección veremos los distintos tipos de selectores y reglas de estilo y cómo usarlos. Los selectores pueden seleccionar elementos según su tipo, clase, ID o atributos, entre otros criterios.
1. Tipos de selectores
* Selectores de tipo (Type Selectors)
p {
color: red;
}
Se utiliza el nombre del elemento HTML para aplicar el estilo. En el ejemplo anterior, se establece en rojo el color del texto de todos los elementos <p>.
* Selectores de clase (Class Selectors)
.my-class {
font-size: 16px;
}
Para aplicar un estilo, se escribe el nombre de la clase después de un punto (.). En el ejemplo anterior, el estilo se aplica a todos los elementos con el atributo class="my-class".
* Selectores de ID (ID Selectors)
#my-id {
border: 1px solid black;
}
Para aplicar un estilo, se escribe el nombre del ID después del signo de numeral (#). En el ejemplo anterior, el estilo se aplica al elemento con el atributo id="my-id".
* Selectores de descendientes (Descendant Selectors)
div p {
color: blue;
}
Se usa un espacio para aplicar el estilo solo a los elementos descendientes de un elemento determinado. En el ejemplo anterior, el estilo se aplica a todos los elementos <p> descendientes de un elemento <div>.
* Selectores de atributos (Attribute Selectors)
input[type="text"] {
background-color: lightgray;
}
Para aplicar un estilo, se escribe entre corchetes ([]) el atributo y su valor, o solo el nombre del atributo. En el ejemplo anterior, el estilo se aplica a todos los elementos <input> cuyo atributo type tiene el valor text.
2. Reglas de estilo (Style Rules)
selector {
property: value;
property: value;
}
Las reglas de estilo utilizan selectores para definir los estilos que se aplican a los elementos HTML seleccionados. Las reglas se escriben entre llaves {} y cada declaración de estilo consta de una propiedad y un valor.
3. Especificidad (Specificity)
A veces, varias reglas de estilo pueden aplicarse a un mismo elemento. En esos casos, la especificidad determina qué regla tiene prioridad.
Por lo general, los selectores de ID tienen mayor especificidad que los de clase, y los de clase tienen mayor especificidad que los de tipo.
En términos sencillos, el orden de prioridad es ID > clase > tipo.
4. Herencia (Inheritance)
Algunas propiedades CSS se heredan del elemento padre a los elementos hijos. Por ejemplo, los elementos hijos heredan la propiedad font-family aplicada al elemento padre, por lo que usan la misma fuente.
Comprender y utilizar los selectores y las reglas de estilo de esta manera permite crear diseños de páginas web variados y complejos.
Estilos de texto y propiedades de fuente, color y tamaño
La forma de dar estilo al texto con CSS es un factor importante que determina el aspecto y el carácter general del sitio web. Además, el texto tiene un gran impacto en el diseño y la legibilidad.
En esta sección veremos propiedades relacionadas con el texto, como la fuente, el color y el tamaño, y explicaremos cómo dar estilo al texto de manera eficaz.
1. Propiedades de estilo de fuente
p {
font-family: "Arial", sans-serif;
}
font-family especifica la fuente que se aplicará a la página web.
h1 {
font-size: 32px;
}
font-size especifica el tamaño de la fuente.
strong {
font-weight: bold;
}
font-weight especifica el grosor de los caracteres (normal, bold, bolder, lighter, 100-900).
em {
font-style: italic;
}
font-style especifica el estilo de los caracteres (normal, italic, oblique).
2. Propiedades de color y fondo del texto
p {
color: #333333;
}
color especifica el color del texto.
span {
background-color: yellow;
}
background-color especifica el color de fondo del texto.
3. Propiedades de alineación e interlineado
p {
text-align: center;
}
text-align especifica la alineación del texto (left, right, center, justify).
p {
line-height: 1.6;
}
line-height especifica el interlineado.
p {
text-indent: 20px;
}
text-indent especifica la sangría de la primera línea del texto.
4. Propiedades de transformación del texto
h2 {
text-transform: uppercase;
}
text-transform cambia el uso de mayúsculas y minúsculas en el texto (none, uppercase, lowercase, capitalize).
a {
text-decoration: none;
}
text-decoration añade o elimina líneas decorativas en el texto (none, underline, overline, line-through).
p {
letter-spacing: 1px;
}
letter-spacing especifica el espacio entre caracteres.
5. Espaciado y márgenes de párrafo
p {
margin: 10px;
}
margin especifica el margen exterior del párrafo.
p {
padding: 5px;
}
padding especifica el espacio interior del párrafo.
Al combinar estas propiedades, puedes dar estilo al texto de una página web de distintas maneras.
Fondos y degradados. Cómo configurar imágenes y colores de fondo
El fondo de un sitio web es un elemento importante que determina su efecto visual general.
En esta sección veremos cómo configurar las imágenes y los colores de fondo y cómo utilizar degradados para añadir efectos visuales interesantes a un sitio web.
Puedes dar estilo al fondo de un sitio web mediante propiedades que controlan, entre otros aspectos, el tamaño, la repetición y la posición de las imágenes de fondo, así como los degradados.
1. Propiedad de color de fondo
div {
background-color: #ffcc00;
}
background-color especifica el color de fondo del elemento.
2. Propiedades de imagen de fondo
div {
background-image: url('image.jpg');
}
background-image establece una imagen como fondo del elemento.
div {
background-repeat: no-repeat;
}
background-repeat especifica cómo se repite la imagen de fondo (no-repeat, repeat-x, repeat-y, repeat).
div {
background-position: center center;
}
background-position especifica la posición de la imagen de fondo.
div {
background-size: cover;
}
background-size especifica el tamaño de la imagen de fondo (auto, cover, contain, <length>, <percentage>).
3. Propiedades de degradado
Un degradado es un efecto de fondo en el que dos o más colores cambian gradualmente.
div {
background-image: linear-gradient(to right, red, yellow);
}
En Linear Gradient, los colores cambian a lo largo de una línea recta.
div {
background-image: radial-gradient(circle, red, yellow);
}
En Radial Gradient, los colores cambian de forma circular a partir de un punto.
4. Propiedad abreviada de fondo
div {
background: #ffcc00 url('image.jpg') no-repeat center center / cover;
}
Puedes expresar varias propiedades de fondo en una sola línea.
Estas propiedades de fondo y degradado permiten diseñar páginas web de distintas maneras.
Si las combinas y las utilizas adecuadamente, puedes mejorar la calidad general del diseño de tu sitio web.
Propiedades de disposición. Modelo de caja, posicionamiento, Flexbox y más
La disposición de un sitio web es un elemento importante que influye directamente en su estructura y en la experiencia del usuario.
En esta sección veremos las propiedades relacionadas con la disposición, como el modelo de caja, el posicionamiento y Flexbox, y explicaremos cómo diseñar eficazmente la estructura de un sitio web.
Las propiedades de disposición abarcan el modelo de caja, position y flexbox, entre otros, y definen la estructura y la distribución de la página web. Con estas propiedades se pueden crear diseños adaptables.
1. Modelo de caja (Box Model)
Todos los elementos de una página web se consideran cajas. El modelo de caja se compone de margin, border, padding y content.
div {
margin: 10px;
border: 2px solid black;
padding: 20px;
}
margin es el espacio exterior de la caja.
border es el borde de la caja.
padding es el espacio interior de la caja.
content es el área donde se encuentra el contenido propiamente dicho.
2. Posicionamiento (Positioning)
div {
position: relative;
top: 10px;
left: 20px;
}
static es el posicionamiento predeterminado. Las propiedades top, right, bottom y left no se aplican.
relative desplaza el elemento con respecto a su posición predeterminada.
absolute sitúa el elemento con respecto al ancestro posicionado más cercano.
fixed sitúa el elemento con respecto al área de visualización.
sticky adopta un posicionamiento relative o fixed según la posición de desplazamiento.
3. Modelo de caja flexible (Flexbox)
Flexbox es un modelo que permite resolver problemas complejos de disposición y alineación.
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
La declaración display: flex convierte el elemento en un contenedor flexible.
flex-direction define la dirección del eje principal (row, column).
justify-content define la alineación en el eje principal.
align-items define la alineación en el eje transversal.
4. Diseño en cuadrícula (Grid Layout)
El diseño en cuadrícula es un sistema de disposición de 2 dimensiones que utiliza filas y columnas para crear diseños.
.container {
display: grid;
grid-template-columns: auto auto auto;
}
La declaración display: grid convierte el elemento en un contenedor de cuadrícula.
grid-template-columns / grid-template-rows definen el tamaño de las columnas y las filas.
Con estas propiedades puedes crear diversos diseños y estructuras web. Si las utilizas adecuadamente, también puedes mejorar la experiencia del usuario.
Animaciones y transiciones. Propiedades para el movimiento y los cambios dinámicos de los elementos
Las animaciones y transiciones de un sitio web son una forma eficaz de captar la atención del usuario y fomentar la interacción.
En esta sección veremos las propiedades CSS relacionadas con el movimiento y los cambios dinámicos de los elementos, y explicaremos cómo añadir efectos de animación interesantes a un sitio web.
Las propiedades CSS permiten crear distintos efectos de animación, como desplazar elementos o cambiar su color o tamaño.
1. Transiciones (Transitions)
Las transiciones se usan para que los cambios en las propiedades CSS se produzcan suavemente durante un intervalo de tiempo. En esencia, transition permite pasar de un estado inicial a un estado final.
div {
transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
transition-delay: 1s;
}
transition-property especifica la propiedad a la que se aplicará la transición.
transition-duration especifica cuánto dura la transición.
transition-timing-function especifica la curva de velocidad de la transición.
transition-delay especifica el tiempo de espera antes de que comience la transición.
2. Animaciones (Animations)
Las animaciones pueden usar keyframes para crear cambios de estilo en varias etapas. A diferencia de las transiciones, permiten definir estados intermedios además de los estados inicial y final.
@keyframes move {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
div {
animation-name: move;
animation-duration: 2s;
animation-timing-function: ease-in;
animation-delay: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes define cada etapa de la animación.
animation-name especifica el nombre de la regla @keyframes.
animation-duration especifica cuánto dura la animación.
animation-timing-function especifica la curva de velocidad de la animación.
animation-delay especifica el tiempo de espera antes de que comience la animación.
animation-iteration-count especifica cuántas veces se repite la animación.
animation-direction especifica la dirección en la que se reproduce la animación.
Estas funciones de animación y transición permiten captar la atención del usuario o crear sitios web interactivos.
Diseño web adaptable con consultas de medios y ajustes del área de visualización
El diseño web adaptable es un concepto importante que permite que un sitio web se muestre de forma óptima en distintos dispositivos.
En esta sección veremos las consultas de medios y los ajustes del área de visualización, y explicaremos cómo adaptar un sitio web a distintos tamaños de pantalla.
Las consultas de medios permiten aplicar estilos diferentes según el tamaño de la pantalla. Ajustar el área de visualización permite que el sitio se muestre de forma óptima en dispositivos móviles.
1. Consultas de medios (Media Queries)
Las consultas de medios permiten aplicar distintas reglas de estilo según el tamaño, la resolución o la orientación de la pantalla, entre otros criterios. De este modo, puedes cambiar dinámicamente la disposición o el estilo del sitio web.
@media screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
El código del ejemplo anterior cambia el color de fondo de body a lightblue cuando el ancho máximo de la pantalla es de 600px o menos.
2. Área de visualización (Viewport)
El área de visualización es la parte del sitio web que el usuario está viendo. Para que el sitio se muestre correctamente en un teléfono móvil o una tableta, es necesario configurar bien esta área.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
La metaetiqueta del área de visualización del ejemplo anterior ajusta su ancho al del dispositivo y establece el factor de ampliación inicial en 1.0.
3. Sistema de cuadrícula fluida (Fluid Grid System)
En el diseño adaptable, se utiliza un sistema de cuadrícula fluida para especificar el ancho de los elementos en porcentajes (%) en lugar de píxeles (px).
.container {
width: 100%;
}
.element {
width: 50%;
}
Así, el ancho de los elementos puede variar dinámicamente según el tamaño de la pantalla.
Al combinar estas técnicas, puedes ofrecer a los usuarios un sitio web optimizado para distintos entornos y dispositivos.
Transformaciones y propiedades para ajustar el tamaño, la rotación y la inclinación de los elementos
Usar CSS para ajustar las transformaciones de los elementos es una forma importante de mejorar los efectos visuales de un sitio web.
En esta sección veremos las propiedades de transformación que permiten ajustar aspectos como el tamaño, la rotación y la inclinación, y explicaremos cómo añadir elementos visuales distintivos a un sitio web.
Las propiedades CSS permiten crear diversos efectos de transformación, como desplazamientos, rotaciones, inclinaciones y cambios de tamaño.
1. Propiedad Transform
La propiedad transform admite distintos valores para crear diversos efectos de transformación.
div {
transform: scale(1.5, 1.5); /* 요소를 1.5배 확대 */
}
scale(x, y) amplía o reduce el tamaño del elemento a lo largo de los ejes x e y.
rotate(angle) gira el elemento el ángulo especificado.
translate(x, y) desplaza el elemento a lo largo de los ejes x e y.
skew(x-angle, y-angle) inclina el elemento con respecto a los ejes x e y.
2. Propiedad Transform Origin
La propiedad transform-origin permite establecer el punto de referencia de una transformación. Por ejemplo, permite cambiar el centro de rotación.
div {
transform: rotate(45deg); /* 45도 회전 */
transform-origin: top left;
/* 회전의 기준점을 왼쪽 상단으로 설정 */
}
El valor predeterminado es 50% 50%, que corresponde al centro del elemento.
3. Transformación Matrix
Con la transformación matrix puedes aplicar simultáneamente varias transformaciones como scale, translate, rotate y skew.
Como obtener el valor de matrix implica un proceso complejo de combinación de varias transformaciones, por lo general se utiliza la propiedad correspondiente a cada transformación.
div {
transform: matrix(a, b, c, d, tx, ty);
}
Estas funciones de transformación permiten aplicar efectos de diseño dinámicos y variados a una página web.
Sombras y bordes. Cómo añadirlos a los elementos
Las sombras y los bordes son elementos importantes que hacen más interesante el diseño de un sitio web.
En esta sección veremos cómo añadir sombras y bordes a los elementos y cómo aplicar distintos estilos de sombras y bordes.
Con las propiedades CSS puedes configurar efectos de sombra, como su tipo, posición, tamaño y color, además del estilo, el grosor y el color de los bordes de los elementos.
1. Box Shadow
La propiedad box-shadow permite añadir una sombra a la caja de un elemento. Con ella puedes dar una sensación de profundidad al elemento o destacarlo visualmente.
div {
box-shadow: offset-x offset-y blur-radius spread-radius color;
}
div {
box-shadow: 5px 5px 10px 2px #000000;
/* x축 5px, y축 5px 거리에, 흐림 정도 10px,
확장 정도 2px, 색상은 검정색인 그림자 적용 */
}
offset-x y offset-y especifican la posición de la sombra.
blur-radius especifica el grado de desenfoque de la sombra.
spread-radius especifica cuánto se extiende la sombra.
color especifica el color de la sombra.
2. Border
La propiedad border permite añadir un borde a un elemento. Puedes especificar el grosor, el estilo y el color del borde.
div {
border: width style color;
}
div {
border: 2px solid #000000;
/* 굵기 2px, 스타일은 실선, 색상은 검정색인 테두리 적용 */
}
width especifica el grosor del borde.
style especifica el estilo del borde (por ejemplo, solid, dashed o dotted).
color especifica el color del borde.
3. Border Radius
div {
border-radius: 10px; /* 모든 모서리를 10px 둥글게 */
}
La propiedad border-radius permite redondear las esquinas de un elemento. También puedes especificar por separado cuánto se redondea cada esquina.
Si utilizas adecuadamente estos efectos de sombra y borde, puedes enriquecer el diseño de una página web y darle más dinamismo.
Consejos para diseñar sitios web eficaces con propiedades CSS
Consejos y reglas de CSS
En esta sección veremos consejos y reglas para usar eficazmente las propiedades CSS y mejorar el diseño de un sitio web.
Puedes hacer que tu sitio web sea más atractivo con distintas técnicas de diseño, como combinar bien los colores, aprovechar los espacios, distribuir el texto y las imágenes, y aplicar efectos de animación.
El diseño de un sitio web tiene un impacto importante en la experiencia del usuario, por lo que conviene comprender y aplicar técnicas y principios eficaces de diseño web.
1. Coherencia de estilo
Un estilo coherente facilita que los usuarios comprendan y utilicen el sitio web. Los elementos del mismo tipo deben mantener un estilo coherente. Para ello, es importante aprovechar bien las clases y los ID de CSS.
2. Color y contraste
Una buena elección de colores y contrastes puede mejorar la legibilidad del sitio web y despertar el interés de los usuarios. Aumenta el contraste entre el fondo y el texto para facilitar la lectura y procura que los colores sean coherentes con la imagen de marca.
3. Diseño adaptable
Hoy en día es imprescindible que el diseño se adapte adecuadamente a distintos dispositivos y tamaños de pantalla. Puedes usar consultas de medios para ajustar los estilos a distintos tamaños de pantalla.
4. Diseño centrado en el usuario
Diseña pensando en las necesidades y la experiencia del usuario. Para optimizar su experiencia, ten en cuenta su comportamiento, sus preferencias y sus comentarios, entre otros factores.
5. Distribución y uso del espacio
La alineación y el uso de espacios como los márgenes y el relleno influyen mucho en el aspecto general del sitio web. Para lograr una disposición limpia y fácil de leer, deja suficiente espacio entre los elementos y evita desperdiciarlo en exceso.
6. Tipografía eficaz
El texto es uno de los elementos principales de un sitio web, por lo que debes elegir y ajustar con cuidado aspectos tipográficos como el tamaño de la fuente, la altura de línea y la familia tipográfica.
7. Estructura eficiente del código
Un código CSS limpio y bien estructurado facilita el mantenimiento y reduce la probabilidad de que aparezcan errores. Para organizar el código CSS, utiliza comentarios y agrupa los estilos relacionados.
Con esto hemos presentado una visión general de las propiedades CSS y sus distintos tipos. Hemos tratado en detalle los selectores y las reglas de estilo, los estilos de texto, los fondos y degradados, las propiedades de disposición, las animaciones y transiciones, el diseño web adaptable, las transformaciones, las sombras y los bordes, y las propiedades relacionadas con el diseño eficaz de sitios web.
Las propiedades CSS son una herramienta clave para dar estilo a un sitio web. Si las utilizas correctamente, puedes hacer que tu sitio web sea más atractivo. Esta guía te ayudará a comprender en conjunto los conceptos y las funciones de las propiedades CSS y a aprender distintas maneras de dar estilo a un sitio web.
Las propiedades CSS influyen mucho en el diseño de un sitio web y en la experiencia del usuario. Empieza por familiarizarte con las propiedades básicas y sigue estudiando y experimentando para aplicar técnicas de estilo más avanzadas.
