HTML Css Guia

UNIVERSIDAD NACIONAL DE SAN ANTONIO ABAD DEL CUSCO
Estilos HTML – CSS

CSS significa hojas de estilo en cascada.
CSS ahorra mucho trabajo. Puede controlar el diseño de varias páginas web a la vez.
¿Qué es CSS?
Las hojas de estilo en cascada (CSS) se utilizan para formatear el diseño de una página
web.
Con CSS, se puede controlar el color, la fuente, el tamaño del texto, el espaciado entre
elementos, cómo se colocan y distribuyen los elementos, qué imágenes de fondo o
colores de fondo se utilizarán, diferentes pantallas para diferentes dispositivos y
tamaños de pantalla, y mucho más.
Sugerencia: La palabra en cascada significa que un estilo aplicado a un elemento
principal también se aplicará a todos los elementos secundarios dentro del elemento
principal. Por lo tanto, si establece el color del cuerpo del texto en "azul", todos los
encabezados, párrafos y otros elementos de texto dentro del cuerpo también obtendrán
el mismo color (a menos que especifique algo más).
Usando CSS
CSS se puede agregar a documentos HTML de 3 maneras:
• En línea: mediante el uso del style atributo dentro de los elementos HTML
• Interno: mediante el uso de un <style>elemento en la <head>sección
• Externo: mediante el uso de un <link> elemento para vincular a un archivo CSS
externo
La forma más común de agregar CSS es mantener los estilos en archivos CSS
externos. Sin embargo, en esta guía se usarán estilos en línea e internos, porque esto es
más fácil de demostrar y más fácil para probar.
CSS en línea
Se utiliza un CSS en línea para aplicar un estilo único a un único elemento HTML.
Un CSS en línea usa el style atributo de un elemento HTML.
El siguiente ejemplo establece el color del texto del <h1>elemento en azul y el color del
texto del <p>elemento en rojo:
Ejemplo
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
1
CSS interno
Se utiliza un CSS interno para definir un estilo para una sola página HTML.
Un CSS interno se define en la <head>sección de una página HTML, dentro de
un <style>elemento.
El siguiente ejemplo establece el color del texto de TODOS los <h1>elementos (en esa
página) en azul y el color del texto de TODOS los <p>elementos en rojo. Además, la
página se mostrará con un color de fondo "powderblue":
EJEMPLO
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
2
CSS externo
Se utiliza una hoja de estilo externa para definir el estilo de muchas páginas HTML.
Para usar una hoja de estilo externa, agregue un enlace en la <head>sección de cada
página HTML:
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
La hoja de estilo externa se puede escribir en cualquier editor de texto. El archivo no

debe contener ningún código HTML y debe guardarse con una extensión .css.
3
Así es como se ve el archivo "styles.css":

body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
Elementos de diseño HTML

HTML tiene varios elementos semánticos que definen las diferentes partes de una
página web:
Elementos semánticos de HTML5

<header>- Define un encabezado para un documento o una sección
<nav>- Define un conjunto de enlaces de navegación
<section>- Define una sección en un documento
<article>- Define un contenido independiente y autónomo
<aside>- Define el contenido aparte del contenido (como una barra lateral)
<footer>- Define un pie de página para un documento o una sección
<details>- Define detalles adicionales que el usuario puede abrir y cerrar a pedido
4
<summary>- Define un encabezado para el <details>elemento

Técnicas de diseño HTML
Hay cuatro técnicas diferentes para crear diseños de varias columnas. Cada técnica tiene
sus pros y sus contras:
• Marco CSS
• Propiedad flotante de CSS
• Caja flexible de CSS
• cuadrícula CSS
ACTIVIDAD
Investigar cada una de las técnicas y hacer un ejemplo en html:
1.- Marcos CSS
Si desea crear su diseño rápidamente, puede usar un marco CSS, como W3.CSS
o Bootstrap.
2.-Diseño flotante CSS
Es común hacer diseños web completos usando la float propiedad CSS. Float es fácil de
aprender: solo necesita recordar cómo funcionan las propiedades float y clear.
Desventajas: los elementos flotantes están vinculados al flujo de documentos, lo
que puede dañar la flexibilidad.
3.-Diseño de caja flexible CSS
El uso de flexbox garantiza que los elementos se comporten de manera
predecible cuando el diseño de la página deba adaptarse a diferentes tamaños de
pantalla y diferentes dispositivos de visualización.
4.-Diseño de cuadrícula CSS
El módulo de diseño de cuadrícula de CSS ofrece un sistema de diseño basado
en cuadrículas, con filas y columnas, lo que facilita el diseño de páginas web sin
tener que usar flotadores y posiciones.
5

HTML Css Guia

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML Css Guia

Cargado por

Copyright:

Formatos disponibles

UNIVERSIDAD NACIONAL DE SAN ANTONIO ABAD DEL CUSCO

Estilos HTML – CSS

<p style="color:red;">A red paragraph.</p>

La hoja de estilo externa se puede escribir en cualquier editor de texto. El archivo no

Así es como se ve el archivo "styles.css":

Elementos de diseño HTML

Elementos semánticos de HTML5

<summary>- Define un encabezado para el <details>elemento

También podría gustarte