Scribd
Cargar
11 vistas22 páginas

Módulo III - Desarrollo Web Con CSS - 24.09.2024

Cargado por

bycl30mary
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
11 vistas22 páginas

Módulo III - Desarrollo Web Con CSS - 24.09.2024

Cargado por

bycl30mary
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 22

Desarrollo Web con HTML y CSS

Curso de Desarrollo Web


UTPCH - II Semestre 2024
Facilitador: Mgtr. Ramón González Tribaldos
2
Fundamentos de CSS
Cascading Style Sheets

2
Hojas de Estilo CSS

▰ CSS es un lenguaje utilizando para definir el aspecto visual de


una página web o documento HTML.
▰ Fue creado en 1998 por la W3C, con el objetivo de separar el
contenido (estructura) de su presentación visual.
▰ En 2011 fueron lanzados los primeros módulos de CSS3.
▰ De acuerdo con la W3C, “reglas de estilo” se encargarían de
controlar los aspectos de presentación visual.
▰ Se denominan “hojas de estilo en cascada” porque los estilos
se aplican de arriba hacia abajo, de forma masiva.

3
Hojas de Estilo CSS

▰ Existen tres formas básicas de aplicar estilos CSS a nuestras páginas:


Formato Descripción Sintaxis

CSS externo El estilo se define en un archivo .css que enlaza en el <head> <link rel="stylesheet" href="main.css">

Bloque de estilos El estilo se define utilizando un bloque de etiquetas <style> <style> </style>

Estilos como atributo El estilo se define mediante el atributo style, en una etiqueta <etiqueta style="...">

El uso de archivos externos .css se recomienda para la definición de estilos en proyectos web

4
Sintaxis de CSS

▰ En CSS los estilos se generan mediante la creación de reglas de estilo.


Cada regla está formada por dos componentes básicos:
▻ Selector: Elemento HTML al que se aplicará la regla.
▻ Bloque de declaración: Especifica las propiedades de estilo que serán aplicadas.

5
Sintaxis de CSS

▰ Tome en cuenta las siguientes


recomendaciones de escritura:
▻ Escribir una declaración por línea,
finalizando en ;
▻ Utilizar la identación (sangría) al
inicio de una declaración para
facilitar la lectura de las reglas.

6
Tipos de Selectores CSS

▰ Selector de etiqueta: Selecciona todos los elementos que coincidan


con el nombre de la etiqueta. Ejemplo: h1, div, a, ul.
Sintaxis:
elementname { }

▰ Selector de ID: Selecciona aquel elemento que tenga definido el


atributo ID y coincida con su valor asignado. Ejemplo: #sinopsis1 {color:
blue}
Sintaxis:
#idname { }

7
Tipos de Selectores CSS

▰ Selector de clase: Selecciona aquel elemento que tenga definido el


atributo clase y coincida con su valor asignado. Ejemplo: .títulos

Sintaxis:
.classname { }

▰ Selector universal: Coincide con elementos de cualquier tipo; permite


seleccionar todos los elementos. Ejemplo: * {color: purple}
Sintaxis:
*{}

8
Atributos CSS Básicos

Atributo CSS Descripción Ejemplo


color Define el color del texto color: blue;
background-color Define el color de fondo background-color: linen;
font-family Define el tipo de letra font-family: Arial, sans-serif;
font-size Define el tamaño de la letra font-size: 16px;
font-weight Define el grosor de la letra font-weight: bold;
text-align Define la alineación del texto text-align: center;
width Define el ancho de un elemento width: 300px;
height Define la altura de un elemento height: 100px;
margin Define el margen exterior de un elemento margin: 10px;
padding Define el espacio interior de un elemento padding: 5px;
border Define el borde de un elemento border: 1px solid black;
display Define cómo se muestra un elemento display: block;

9
Atributos CSS – Desarrollo Web
Atributos CSS – Desarrollo Web
Atributos CSS – Desarrollo Web
Atributos CSS – Desarrollo Web

Selector{
background-color: valor;
background-image: valor;
width: valor;
height: valor;
margin:valor;
padding: valor;
border-radius:valor;
border:valor;
text-transform:valor;
font-weight:valor;
}
▪ Para crear diseños responsivos, CSS introduce una estructura
conocida como Cajas Flexibles o FlexBox.
▪ Permite adaptar los contenidos a varios tipos de pantalla.
▪ Dispone de un elemento principal llamado flex container y otros
elementos secundarios llamados flex ítems.
▪ Pasos para configurar un FlexBox:
Activar FlexBox.
Definir Dirección y desbordamiento.
Alineación de elementos en eje principal (horizontal).
Alineación de elementos en eje secundario (vertical).
Activar FlexBox

▪ Atributo: Display
▪ Ejemplo: header {display: flex;}
▪ Valores que puede asumir:
❑ flex: disposición en bloque (uno debajo del otro).
❑ Inline-flex: disposición de elementos en línea.
Definir Dirección

▪ Atributo: flex-direction
▪ Ejemplo: header {display: flex; flex-direction: column;}
▪ Valores que puede asumir:
❑ row: disposición de elementos en fila.
❑ column: disposición de elementos columna.
Definir Desbordamiento

▪ Atributo: flex-wrap
▪ Ejemplo: header {display: flex; flex-wrap: wrap;}
▪ Valores que puede asumir:
❑ wrap: permite desbordamiento de elementos.
❑ nowrap: no permite desbordamiento de elementos.
Alineación eje principal

▪ Atributo: justify-content
▪ Ejemplo: header {display: flex; justify-content: space-around;}
▪ Valores que puede asumir:
❑ flex-start: los elementos se alinean a la izquierda del eje.
❑ flex-end: los elementos se alinean a la derecha del eje.
❑ center: los elementos se alinean al centro del eje.
❑ space-around: distribuye los elementos dejando el
mismo espacio entre ellos
❑ space-between: distribución uniforme de los elementos.
Alineación eje secundario

▪ Atributo: align-items
▪ Ejemplo: header {display: flex; align-items: center;}
▪ Valores que puede asumir:
❑ flex-start: los elementos se alinean al inicio del eje transversal.
❑ flex-end: los elementos se alinean al final del eje transversal.
❑ center: los elementos se alinean al centro del eje.
❑ stretch: estira los elementos de modo que cubran desde el
inicio hasta el final del contenedor.
❑ baseline: los elementos se alinean según contenido base.
Query Media - @media

▰ Permite aplicar apropiadamente reglas de estilo,


acuerdo al dispositivo detectado.
▰ Sintaxis:
▰ Ejemplos:

21
Licenciatura en Ciberseguridad. Curso de Desarrollo Web. 2023-2024.

También podría gustarte