encargo-04
trabajo previo
Template repositorio
barra de navegación superior estática
![imagen-1](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/captura-1.PNG)
2024-06-14 cuarto encargo
Template: portafolio
Esta plantilla, podría ser la base para los portafolios, no está terminada, pero es un primer acercamiento a una posible página web de un portafolio.
Manual para CSS
1. Sintaxis Básica
![captura-1](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-01.png)
- “h1”: Es un selector de etiqueta, existen muchos tipos de selectores.
- “font-size”: Este atributo se refiere al tamaño de la fuente o letra. Existen decenas de atributos para las más variadas necesidades de diseño.
- “16px”: Es el valor que estamos asignando, en este caso al atributo “font-size”.
2. Selectores
- Selector de elemento: Selecciona todos los elementos de ese tipo.
![captura-2](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-02.png)
- Selector de clase: Selecciona todos los elementos con una clase específica. Se usa un punto (.) antes del nombre de la clase.
![captura-3](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-03.png)
- Selector de ID: Selecciona un elemento único con un ID específico. Se usa una almohadilla (#) antes del nombre del ID.
![captura-4](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-04.png)
3. Tipografías y tamaños
-
Tipografía
Para definir la tiporafía de los textos debes de poner la propiedad “font-family:”. Aquí algunos ejemplos de cómo establecer diferentes fuentes:
![captura-05](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-05.png)
-
Fuente en Negrita y Cursiva
![captura-06](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-06.png)
-
Fuente con Peso Específico
![captura-07](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-07.png)
-
Tamaños
Para definir el tamaño de los textos debes de poner la propiedad “font-size:”. Los tamaños pueden especificarse en píxeles (px), ems (em), porcentajes (%) o puntos (pt). Recomiendo utilizar principalmente el pixel, ya que es una unidad fácil para comenzar a trabajar en CSS
![captura-08](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-08.png)
4. Colores
-
Colores de texto
La propiedad color define el color del texto. Puedes usar nombres de colores, valores hexadecimales, valores RGB o RGBA.
![captura-09](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-09.png)
-
Colores de fondo
La propiedad background-color define el color de fondo de un elemento.
![captura-10](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-10.png)
5. Configuracion tipografía avanzado
Importar Fuentes desde Google Fonts
Para usar una fuente de Google Fonts, primero debes incluir un enlace en el <head>
de tu HTML. Aquí tienes un ejemplo usando la fuente “Roboto”:
![captura-11](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-11.png)
![captura-12](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-12.png)
Recomendaciones de tipografías de Google Fonts
Fuentes Serif
- Roboto Slab: Designed by Christian Robertson
![captura-14](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-14.png)
Roboto Slab
- Merriweather: Designed by Sorkin Type
![captura-15](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-15.png)
Merriweather
- Playfair Display: Designed by Claus Eggers Sørensen
![captura-16](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-16.png)
Playfair Display
![captura-17](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-17.png)
Noto Serif
Fuentes Sans Serif
- Montserrat: Designed by Julieta Ulanovsky, Sol Matas, Juan Pablo del Peral, Jacques Le Bailly
![captura-18](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-18.png)
Montserrat
- Lato: Designed by Łukasz Dziedzic
![captura-19](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-19.png)
Lato
- Open Sans: Designed by Steve Matteson
![captura-20](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-20.png)
Open Sans
- Roboto: Designed by Christian Robertson
![captura-21](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-21.png)
Roboto
Fuentes Sans Serif
- Cinzel: Designed by Natanael Gama
![captura-22](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-22.png)
Cinzel
- Raleway: Designed by Matt McInerney, Pablo Impallari, Rodrigo Fuenzalida
![captura-23](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-23.png)
Raleway
- Alfa Slab One: Designed by JM Solé
![captura-24](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-24.png)
Alfa Slab One
- Abril Fatface: Designed by TypeTogether
![captura-25](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-25.png)
Abril Fatface
- Lobster: Designed by Impallari Type
![captura-26](/fad9100-2024-1/bitacoras/Tessbb/encargo-04/imagenes/captura-26.png)
Lobster