CSS = Estilos y colores
¿Qué es CSS?
Las hojas de estilo en cascada (CSS) se utilizan para dar formato al diseño de una página web.
Con CSS, puede controlar el color, la fuente, el tamaño del texto, el espaciado entre los elementos, cómo se colocan y diseñan 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!
CSS se puede agregar a los documentos HTML de 3 maneras:
styleInterno: mediante el uso de un elemento en la sección
<style><head>Externo: mediante el uso de un elemento para vincular a un archivo CSS externo
<link>CSS en línea
Un CSS en línea se utiliza para aplicar un estilo único a un único elemento HTML.
Un CSS en línea utiliza el atributo de un elemento HTML.style
En el ejemplo siguiente se establece el color del texto del elemento en azul y el color del texto del elemento en rojo:<h1><p>
Ejemplo
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>CSS interno
- Un CSS interno se utiliza para definir un estilo para una sola página HTML.
- Un CSS interno se define en la sección de una página HTML, dentro de un elemento.
<head><style> - En el ejemplo siguiente se establece el color del texto de TODOS los elementos (de esa página) en azul y el color del texto de TODOS los elementos en rojo. Además, la página se mostrará con un color de fondo "powderblue":
<h1><p>
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>CSS externo
Se utiliza una hoja de estilos externa para definir el estilo de muchas páginas HTML.
Para usar una hoja de estilos externa, agréguele un enlace en la sección de cada página HTML:<head>
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>Así es como se ve el archivo "styles.css":
"estilos.css":
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}Colores, fuentes y tamaños CSS
Aquí, demostraremos algunas propiedades CSS de uso común. Aprenderá más sobre ellos más adelante.
La propiedad CSS define el color del texto que se va a utilizar.color
La propiedad CSS define la fuente que se va a utilizar.font-family
La propiedad CSS define el tamaño del texto que se va a utilizar.font-size
Ejemplo
Uso de propiedades css de color, familia de fuentes y tamaño de fuente:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>Borde CSS
La propiedad CSS define un borde alrededor de un elemento HTML.border
Ejemplo
Uso de la propiedad de borde CSS:
p {
border: 2px solid powderblue;
}Relleno CSS
La propiedad CSS define un relleno (espacio) entre el texto y el borde.padding
Ejemplo
Uso de las propiedades de borde y relleno CSS:
p {
border: 2px solid powderblue;
padding: 30px;
}Margen CSS
La propiedad CSS define un margen (espacio) fuera del borde.margin
Ejemplo
Uso de las propiedades de borde y margen CSS:
p {
border: 2px solid powderblue;
margin: 50px;
}Enlace a CSS externo
Se puede hacer referencia a las hojas de estilos externas con una dirección URL completa o con una ruta relativa a la página web actual.
Ejemplo
En este ejemplo se utiliza una dirección URL completa para vincular a una hoja de estilos:
<link rel="stylesheet" href="https://todoinfoinfo.blogspot.com/html/styles.css">Ejemplo
En este ejemplo se vincula a una hoja de estilos ubicada en la carpeta html del sitio Web actual:
<link rel="stylesheet" href="/html/styles.css">Ejemplo
En este ejemplo se vincula a una hoja de estilos ubicada en la misma carpeta que la página actual:
<link rel="stylesheet" href="styles.css">Resumen del capítulo
styleUsar el elemento HTML para definir CSS interno
<style>Usar el elemento HTML para hacer referencia a un archivo CSS externo
<link>Utilice el elemento HTML para almacenar elementos <style> y <link>
<head>Usar la propiedad CSS para los colores de texto
colorUsar la propiedad CSS para fuentes de texto
font-familyUsar la propiedad CSS para tamaños de texto
font-sizeUsar la propiedad CSS para bordes
borderUsar la propiedad CSS para el espacio dentro del borde
paddingUsar la propiedad CSS para el espacio fuera del borde
marginEtiquetas de estilo HTML
Tag Description
<style> Defines style information for an HTML document
<link> Defines a link between a document and an external resource
No hay comentarios:
Publicar un comentario