TRABAJO EN GRUPO

INTEGRANTES: Medina Jonathan, Tacuri Edwin, España Nicole, Salazar Jordán, Illescas
Pablo, Gallegos Romina, Arévalo Kimberly, Chirtala Doménica y Ochoa Danny.
CURSO: 3ro BTI “K”.
FECHA: Lunes, 30 de Octubre del 2023.
TEMA: Introducción y primeras etiquetas en CSS.
DOCENTE: Lic. Carlos Flores.
ASIGNATURA: Diseño Web.

¿QUÉ ES CSS?
INTRODUCCIÓN
El diseño de una página web necesita un
lenguaje para que los navegadores puedan
interpretarlo y mostrarlo a las personas.
Uno de estos lenguajes es el CSS, un gran
aliado del HTML que transforma la
experiencia de tus visitantes.
 Es la abreviatura de “hojas de estilo en cascada” que
significa (Cascading Style Sheets). Es aquel lenguaje que
maneja el diseño y presentación de las páginas web.
Funciona junto con el lenguaje HTML que se encarga del
contenido básico de los sitios.
 Se les llama hojas de estilo «en cascada» porque se
puede tener varias y una de ellas con las propiedades
heredadas de otras.
 ¿PARA QUÉ SIRVE CSS?

Con CSS, se puede añadir ciertas “reglas” para poder decirle a nuestro
sitio web cómo queremos mostrar la información y guardar los
comandos para elementos de estilo de la misma, como sería los
colores, fuentes de letra, tamaños, y entre otras.
Además de eso, podemos crear varios formatos específicos, los cuales
servirán para que podamos comunicar nuestras ideas y con ello,
producir experiencias más agradables, en el aspecto visual, para los
usuarios del sitio web.
 VENTAJAS Y DESVENTAJAS
DE USAR CSS
VENTAJAS
 SEPARACIÓN DE LA ESTRUCTURA Y LA PRESENTACIÓN: CSS permite
separar nuestro contenido HTML de su presentación visual. Con ello, nos permite
mantener el código HTML estructurado, mientras que el estilo se define en un archivo
CSS separado.
 CONSISTENCIA Y MANTENIBILIDAD: Con CSS podemos aplicar estilos de
manera consistente a un sitio web. Los estilos se definen una vez y se aplican a
múltiples elementos en las páginas.
 EFICIENCIA EN EL RENDIMIENTO: Con CSS podemos cargar estilos externos en
un archivo separado y el navegador almacenará en caché los estilos, lo que mejora el
rendimiento al reducir la cantidad de datos que deben transferirse entre el servidor y
el cliente.
DESVENTAJAS
 CURVA DE APRENDIZAJE: Con CSS podemos tener una curva de aprendizaje complicada
para los principiantes; porque para entender por completo todas las propiedades, selectores y
conceptos avanzados puede llevar tiempo y práctica.
 COMPATIBILIDAD ENTRE NAVEGADORES: Algunos navegadores podrían interpretar los
estilos de manera diferente y erróneas. Esto puede resultar en inconsistencias visuales y requerir
pruebas para garantizar la compatibilidad entre plataformas.
 LIMITACIONES EN LA MAQUETACIÓN: CSS ofrece una amplia gama de propiedades para
el diseño, sin embargo, puede presentar limitaciones en ciertos casos más complejos, por lo que
un diseño difícil pueden requerir soluciones adicionales para lograr el resultado deseado.
 1. ESCRIBE REGLAS PARA LA APARIENCIA DE TU
SITIO.
 Como nosotros ya sabemos, al ocupar HTML notamos
¿CÓMO USAR CSS? que la sintaxis de CSS es un poco distinta, porque CSS
utiliza las reglas asignadas a elementos HTML. Una
1. Escribe reglas para la apariencia de tu regla en CSS luce así:
sitio.
2. Conoce los componentes de la regla.
3. Utiliza comentarios para probar tu
código.
4. Añade CSS a tu HTML.
2. CONOCE LOS COMPONENTES DE LA REGLA.
 SELECTOR CSS: todas las reglas CSS comienzan con un selector. Este indica la parte del
documento donde se aplica la regla. A este le siguen una o más declaraciones dentro de
corchetes.

 Pero también puedes señalar los elementos por su clase o atributo.

3. UTILIZA COMENTARIOS PARA PROBAR TU CÓDIGO.
 Al igual que con HTML podemos escribir comentarios, en CSS los comentarios son ignorados
por el navegador, por lo que no son visibles para el visitante de la página.
 Para comentar en CSS se lo escribe de la siguiente manera: /*texto con tu comentario*/
4. AÑADE CSS A TU HTML.
 El CSS no sirve de mucho si es que no está vinculado a un archivo HTML. Existen tres estilos
para llevar a cabo esta importante tarea: mediante un CSS externo (external), CSS interno
(internal) o CSS en línea (inline).
PRINCIPALES ETIQUETAS EN CSS
Selector Descripción

* Selecciona todos los elementos del DOM

etiqueta Selecciona todas las etiquetas indicadas

.class Selección de los elementos con la clase .class

#id Selección del elemento con id #id

Selección de los selectores sel2 que se encuentren dentro de los

sel1 sel2
selectores sel1

.class1.class2 Selección de los elementos con las dos clases: class1 y class2

sel1.class1 Selección de todos los selectores sel1 con clase class1

sel1, sel2 Selección de todos los selectores separados por comas

sel1 > sel2 Selección de los selectores sel2 cuando son hijos de sel1

Selección del selector sel2 cuando es hermano de sel1 (su elemento

sel1 + sel2
padre es el mismo)
 Longitudes relativas
px Píxeles (relativo al dispositivo)

Relativo al tamaño de la fuente del

em elemento ( 2em significa 2 veces el
tamaño de la fuente actual)

% Porcentaje (relativo al elemento padre)

Medidas relativas de acuerdo al viewport

vh y vw 1vh = 1% de la altura del viewport
100vh = altura del viewport

Longitudes absolutas
in Pulgadas (1pulgada = 2.54 cm)
cm Centímetros
mm Milímetros
pt Puntos (1pt = 1/72 pulgadas)
pc Picas (1pica = 12 puntos)
 Propiedad Descripción Valores

RGB | HSL | HEX | nombre

color Color del texto
del color | RGBA | HSLA

RGB | HSL | HEX | nombre

background-color Color de fondo
del color | RGBA | HSLA

background-image Imagen de fondo url(«…») | none

Repetición de la imagen de repeat | repeat-x | repeat-y |
background-repeat
fondo no-repeat
Desplazamiento de la imagen
background-attachment scroll | fixed
de fondo
Posición de la imagen de percentage | length | left |
background-position
fondo center | right
Tamaño de la imagen de
background-size auto | cover | contain | valor
fondo

[ 0 – 1 ] (0 → totalmente
Opacity Transparencia de un elemento
transparente)
 Propiedad Descripción Valores

Desplazamiento de la primera
text-indent longitud | porcentaje
línea del texto

text-align Alineamiento del texto left | right | center | justify

none | underline | overline | line-

text-decoration Efectos de subrayado y tachado
through

letter-spacing Espacio entre caracteres normal | longitud

word-spacing Espacio entre palabras normal | longitud

Transformación a mayúsculas / capitalize | uppercase | lowercase

text-transform
minúsculas | none

line-height Tamaño del espacio entre líneas longitud | porcentaje

top | middle | bottom

vertical-align Alineación vertical
baseline | sub | super | valor
Propiedad Descripción Valores

nombre-familia|nombre-familia-
font-family Familias de fuentes
genérica| *

font-style Estilo de la fuente normal | italic | oblique

Convierte a mayúsculas
font-variant normal | small-caps
manteniendo un tamaño inferior

normal | bold | bolder | lighter |

Anchura de los caracteres.
font-weight 100 | 200 | 300 | 400 | 500 | 600 |
Normal = 400, Negrita = 700
700 | 800 | 900

xx-small | x-small | small |

medium | large | x-large | xx-
font-size Tamaño de la fuente
large | larger | smaller | longitud |
porcentaje
 Propiedad Descripción Valores

disc | circle | square | decimal | decimal-leading-zero |

lower-roman | upper-roman | lower-greek | lower-latin
list-style-type Estilo aplicable a los marcadores visuales de las listas
| upper-latin | armenian | georgian | lower-alpha |
upper-alpha | none

list-style-image Imagen aplicable a los elementos de las listas url(«…») | none

Posición dentro de la lista de los elementos

list-style-position inside | outside
marcadores de las listas

Permite establecer el estilo de la lista, la imagen y/o

list-style list-style-type | list-style-position | list-style-image
la posición
 Propiedad Descripción Valores
Posición del título respecto la
caption-side top | bottom
tabla

Formato de las celdas, filas y

table-layout auto | fixed
columnas

Selección del modelo de los

border-collapse collapse | separate
bordes

Espaciado entre los bordes de

border-spacing longitud
celdas adyacentes

Visibilidad de los bordes de

empty-cells show | hide
celdas sin contenido