Conceptos básicos y selectores de CSS

Introducción

¡Bienvenido al CSS!

En este laboratorio, nos pondremos en los zapatos de Alex, un joven desarrollador web encargado de crear un sitio web atractivo y elegante para un nuevo servicio de mascotas. El objetivo es mostrar los servicios ofrecidos, presentar al equipo y proporcionar una forma fácil para que los posibles clientes se pongan en contacto. La escena se desarrolla en una ciudad bulliciosa donde la tenencia de mascotas está en aumento y la demanda de servicios de calidad para el cuidado de mascotas está en ascenso. La misión de Alex es diseñar un sitio web que se destaque en este mercado competitivo utilizando técnicas fundamentales de CSS y selectores para crear una experiencia visualmente atractiva y fácil de usar.

A continuación, pasaremos por 5 laboratorios para completar el CSS de "Pet's House".

Skills Graph

Selectores CSS

Abrimos una página web, presionamos F12 en el teclado para abrir las herramientas de desarrollador, y podemos ver dos partes: Elementos y Estilos.

Si has estudiado HTML, debes saber que los elementos son las diferentes etiquetas HTML utilizadas para el diseño de la página, mientras que los estilos son el CSS de la página.

Podemos usar CSS para cambiar el color, el tamaño, la forma, etc. de los elementos HTML, así como para animarlos.

Conociendo la utilidad de CSS, entonces debemos pensar en un problema: la página tiene tantos elementos, ¿cómo agregamos un estilo específico a una ubicación específica de un elemento?

Podemos usar selectores CSS para seleccionar los elementos que queremos estilizar y luego usar las propiedades CSS para especificar el estilo que queremos aplicar.

Comencemos con el selector CSS más básico.

Un selector CSS es la primera parte de una regla CSS. Es un patrón de elementos y otros términos que le indican al navegador qué elementos HTML deben seleccionarse para que se les apliquen los valores de propiedad CSS dentro de la regla. El o los elementos que son seleccionados por el selector se denominan el sujeto del selector.

Hay muchos tipos de selectores CSS, y los más básicos son:

• Selectores de tipo
• Selectores de clase
• Selectores de ID
• Selector de descendientes
• Selector universal

Selectores de tipo

Si necesitas establecer un estilo uniforme para un cierto tipo de etiqueta en una página, debes usar un selector de etiqueta, donde la palabra clave del selector de etiqueta se nombra según la etiqueta.

Por ejemplo, si quieres establecer el color de fuente de todas las etiquetas <p> en una página en rojo, usarías la siguiente regla CSS:

Selectores de clase

Al definir un selector de clase, debes definirlo con un punto y un nombre de clase, y al usar ese selector de clase, debes agregar el atributo class="nombre-de-clase" a la etiqueta del elemento que usa ese selector de clase (sin el punto) para indicar que la etiqueta usa el selector de clase especificado.

Por ejemplo, si quieres establecer el tamaño de fuente de un elemento HTML con class="text-paragraph" en 50 píxeles, usarías la siguiente regla CSS:

Selectores de ID

El selector de ID especifica un estilo particular para los elementos HTML marcados con un ID particular.

Al definir un selector de ID, debes definir el selector con un signo "#" y un nombre de ID, y al usar el selector de ID, debes agregar el atributo id="nombre-de-id" (sin el signo "#") al elemento de etiqueta HTML para especificar el ID de ese elemento HTML, que es único en el documento HTML.

Por ejemplo, si quieres establecer el color de fuente de un elemento HTML con id="list-option" en azul, usarías la siguiente regla CSS:

Selector de descendientes

El selector de descendientes selecciona todos los elementos de una etiqueta dentro de otra etiqueta, incluyendo hijos y otros descendientes.

Al usar selectores de descendientes, el nombre de la etiqueta padre y el nombre de la etiqueta descendiente deben estar separados por un espacio para identificar los elementos descendientes dentro de una etiqueta.

Por ejemplo, establecemos el color de texto en turquesa para <span>, un hijo del elemento <div>.

Selector universal

El selector universal selecciona todos los elementos en un documento HTML. Al usar selectores universales, debes usar un signo "*".

Por ejemplo, establezcamos el tamaño de texto en 50 píxeles para todos los elementos.

Ahora que sabemos cómo usar selectores, aprendamos cómo usar diferentes atributos de estilo.

Color de fondo y color de texto

Como puedes ver, diferentes partes de la página tienen diferentes colores de fondo. En CSS, puedes establecer el color de fondo de un elemento utilizando background-color.

En el sitio web de mascotas, los colores de fondo en el encabezado, la sección "Acerca de", la sección de contacto y el pie de página son rgb(233, 174, 87) y rgb(239, 206, 157), y el color de fuente en la sección "Acerca de", la sección de contacto y el pie de página es #fff, por lo que necesitamos establecer los colores de fondo y de fuente a continuación.

• background-color se utiliza para establecer el color de fondo.
• color se utiliza para establecer el color de fuente.

header {
  background-color: rgb(233, 174, 87);
}
.story-sect {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
.contact-section {
  background-color: rgb(233, 174, 87);
  color: #fff;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
}

Altura y ancho

Ahora puedes ver que algunos de los elementos son demasiado grandes, como el logotipo, y usamos height para establecer la altura del elemento y width para establecer el ancho del elemento.

.logo-section {
  width: 10%;
}
.logo {
  max-width: 60%;
}

.box-feature {
  width: 60%;
  max-height: auto;
}

.box-feature img {
  width: 100%;
}
.service {
  width: 100%;
  color: black;
}
.service img {
  max-width: 100%;
  max-height: auto;
}

La propiedad CSS max-width establece el ancho máximo de un elemento. Evita que el valor utilizado de la propiedad width sea mayor que el valor especificado por max-width.

La propiedad CSS max-height establece la altura máxima de un elemento. Evita que el valor utilizado de la propiedad height sea mayor que el valor especificado para max-height.

Estilo de lista

El estilo predeterminado de una lista desordenada es que cada elemento de la lista tiene un punto. Usamos la propiedad list-style (se asume que es un error en el texto original que dice list-type) para eliminar el punto antes del elemento de la lista.

ul {
  list-style: none;
}

Propiedades de texto

Decoración de texto

El elemento a está subrayado por defecto, y usamos la propiedad text-decoration para eliminar el subrayado.

a {
  color: grey;
  text-decoration: none;
}

Transformación de texto

La barra de navegación, el pie de página y el título de cada área en una página de mascotas están todos en mayúsculas, y usamos la propiedad text-transform para cambiar la capitalización del texto.

La propiedad CSS text-transform especifica cómo capitalizar el texto de un elemento. Puede usarse para hacer que el texto aparezca en mayúsculas, minúsculas o con cada palabra capitalizada.

h2 {
  text-transform: uppercase;
}
header {
  background-color: rgb(233, 174, 87);
  text-transform: uppercase;
}
footer {
  color: #fff;
  background-color: rgb(239, 206, 157);
  text-transform: uppercase;
}

Tamaño de texto

Usamos font-size para cambiar el tamaño del texto. Como puedes ver, el tamaño del texto es diferente al de la página de mascotas.

body {
  font-size: 1.2vw;
}
h1 {
  font-size: 4em;
}
h2 {
  font-size: 2.8vw;
  text-transform: uppercase;
}

Al establecer el tamaño de fuente, usamos diferentes unidades. Por lo general, hay cinco tipos de unidades, que son las siguientes:

Alineación de texto

En la página de mascotas, para centrar el texto del título, podemos usar la propiedad text-align para establecer la posición de visualización del texto.

h1 {
  text-align: center;
  font-size: 4em;
}
section h2 {
  text-align: center;
}
.title-text {
  width: 40%;
  text-align: center;
  color: black;
}
.section-text h2 {
  text-align: center;
}
.samples {
  text-align: center;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
}
footer span {
  text-align: center;
}

Grosor de texto

La propiedad font-weight se utiliza para establecer el grosor del texto.

body {
  font-weight: 400;
  font-size: 1.2vw;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
}

Espaciado entre letras

En la página de mascotas, podemos observar que hay una cierta cantidad de espacio entre los caracteres. Al usar la propiedad letter-spacing, podemos establecer el espaciado entre los caracteres del texto.

La propiedad CSS letter-spacing establece el comportamiento de espaciado horizontal entre los caracteres del texto. Este valor se suma al espaciado natural entre caracteres al renderizar el texto.

body {
  letter-spacing: 2px;
  font-weight: 400;
  font-size: 1.2vw;
}
form.btn {
  text-align: center;
  background-color: #e6e8e8;
  color: #000;
  font-weight: 700;
  letter-spacing: inherit;
}

Resumen

En este laboratorio, comenzaste el viaje de crear un sitio web para "Pet's House" con Alex. Configuraste el espacio de trabajo del proyecto, aplicaste estilos CSS fundamentales y experimentaste con varios selectores CSS para mejorar la navegación del sitio web. A través de estos pasos, has adquirido experiencia práctica con los conceptos básicos de CSS y los selectores, habilidades cruciales para cualquier aspirante a desarrollador web. Este laboratorio sentó las bases para conceptos y técnicas de desarrollo web más avanzados que explorarás en proyectos futuros.