DISEÑO WEB
CORPORATIVA Y PUBLICITARIA
SEMANA 05 – CSS
CORREO: LQUIROZ@[Link]
➢Conceptos básicos sobre estilos
➢Modelo de caja tradicional
➢Referencia Rápida
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o
presentación de los documentos electrónicos definidos con HTML y
XHTML.
Aplicar estilos a los elementos HTML cambia la forma en que estos son
presentados en pantalla. Los navegadores proveen estilos por defecto
que en la mayoría de los casos no son suficientes para satisfacer las
necesidades de los diseñadores. Para cambiar esto, podemos
sobrescribir estos estilos con los nuestros usando diferentes técnicas.
4 INSTITUTO SISE 2022
5 INSTITUTO SISE 2022
<!DOCTYPE html>
<html lang="es">
Estilos en línea: <head> Archivos externos:
<title>Este es el título del documento</title>
<!DOCTYPE html>
</head>
<html lang="es">
<body>
<head>
<p style=”font-size: 20px”>Mi texto</p>
<title>Este texto es el título del documento</title>
</body>
<link rel="stylesheet" href="[Link]">
</html>
</head>
<!DOCTYPE html> <body>
<html lang="es"> <p>Mi texto</p>
<head> </body>
<title>Este texto es el título del documento</title> </html>
Estilos embebidos: <style>
p { font-size: 20px }
</style>
</head>
<body>
<p>Mi texto</p>
</body>
</html>
6 INSTITUTO SISE 2022
Selectores de Tipo:
Los selectores de tipo en CSS se refieren a los electores que apuntan a un tipo de
elemento HTML como puede ser:
Los títulos: h1
Los subtítulos: h2
Párrafos: p
Los enlaces: a
Tablas: table
Selectores de id y clase:
Este tipo de selectores en CSS apuntan a un elemento HTML identificado, es decir a
un elemento HTML que tenga el atributo id o class.
7 INSTITUTO SISE 2022
Tanto el selector de tipo id y class funcionan de la misma manera; única diferencia es que para
los selectores de tipo id se le antepone el signo de numeral (#) y a los de tipo class un punto (.)
No utilices solo números para identificar un elemento HTML, tampoco inicies con números.
Selectores descendientes:
Los selectores descendientes en CSS sirven para apuntar elementos que se encuentran dentro
otros elementos mayores, de esta manera se puede colocar un estilo específico a un elemento
que se encuentra contenido en otro elemento HTML mayor.
8 INSTITUTO SISE 2022
9 INSTITUTO SISE 2022
Para indicar el ancho de un elemento simplemente establecemos la propiedad CSS width y
para determinar la altura establecemos la propiedad height.
10 INSTITUTO SISE 2022
Cada elemento se
representa como una caja
rectangular, con su
contenido, padding (margen
interno), border (borde) y
margin (margen externo).
11 INSTITUTO SISE 2022
12 INSTITUTO SISE 2022
13 INSTITUTO SISE 2022
Colocar un relleno uniforme con padding CSS:
Para establecer un relleno uniforme en todo el alrededor del contenido o elemento,
simplemente establecemos la propiedad padding y su valor indicamos el deseado.
Dimensión de rellenos independientes en CSS:
También existe la posibilidad de establecer una medida específica solo para un lado,
puede ser útil en ciertas ocasiones. Para ello utilizaremos las siguientes propiedades:
padding-top: margen superior
padding-bottom: margen inferior
padding-left: margen izquierdo
padding-right: margen derecho
14 INSTITUTO SISE 2022
Elementos en línea (inline): Respetan el flujo de los demás elementos, pero no
respetan el alto y el ancho a excepción de IMG que solo ocupa solo su espacio
horizontal y vertical y si respeta el width y el height..
Elementos bloque (block): Utilizan toda la línea, no respetan el flujo y respeta el width
y el height.
Elementos inline-block: Son una combinación de ambos, estos si respetan el
width y el height y también el flujo de los demás elementos.
15 INSTITUTO SISE 2022
• <a>.- etiqueta de enlace.
• <code>.- para fragmentos de código.
• <em>.- Texto importante (se ve en cursiva, por defecto, • <div>.- elemento contenedor.
texto con énfasis).
• <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>.- párrafos y
• <i>.- etiqueta para texto en cursiva (texto en cursiva sin textos encabezados.
énfasis). • <ul>, <ol>, <li>.- los elementos de lista.
• <img>.- para imagenes. • <table>, <tr>, <td>.- elementos de tabla.
• <input>.- campos de formulario. • <dl>, <dd>, <dt>.- los elementos de definiciones.
• <span>.- fragmentes de contenido. • Form, etc.
• <strong>.- texto fuerte.
• <sub>.- para texto subíndice.
• <sup>.- texto superíndice.
Inline y Block
• <u>.- para subrayar texto.
• Label, select, textarea.
16 INSTITUTO SISE 2022
17 INSTITUTO SISE 2022
GRACIAS
La edad no es barrera. Es una
limitación que pones en tu mente
- Jackie Joyner-
