CSS = Estilos y Colores
El estilo de HTML con CSS
CSS significa Cascading Style Sheets
El estilo se puede agregar a los elementos HTML en 3 maneras:
- Inline - utilizando un atributo de estilo en los elementos HTML
- Interna - utilizando un <style> elemento en el código HTML <head> sección
- Externa - con ayuda de uno o más archivos CSS externos
La forma más común para agregar estilo, es mantener los estilos CSS en archivos separados. Pero, en este tutorial, usamos un estilo interno, porque es más fácil de demostrar, y más fácil para que lo pruebe usted mismo.
Usted puede aprender mucho más acerca de CSS en nuestro Tutorial CSS .
Styling en línea (Inline CSS)
Estilo en línea se utiliza para aplicar un estilo único a un solo elemento HTML:
Estilo en línea utiliza el style atributo.
En este ejemplo se cambia el color del texto de la <h1> elemento a azul:
Styling interna (Internal CSS)
estilo interna se utiliza para definir un estilo para una página HTML.
Estilo interno se define en el <head> sección de una página HTML, dentro de un <style> elemento:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1 {color:blue;}
p {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html> Inténtalo tú mismo " Styling externa (External CSS)
Una hoja de estilo externa se utiliza para definir el estilo de muchas páginas.
Con una hoja de estilo externa, puede cambiar el aspecto de un sitio web completo, cambiando un archivo!
Para utilizar una hoja de estilos externa, añadir un enlace a ella en el <head> sección de la 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> Inténtalo tú mismo " Una hoja de estilo externa puede estar escrito en cualquier editor de texto. El archivo no debe contener ninguna etiqueta HTML. El archivo de hoja de estilo debe ser salvado con una .css extensión.
Así es como el " styles.css " se ve:
body {
background-color: lightgrey;
}
h1 {
color: blue;
}
p {
color:green;
}Fuentes CSS
El CSS color propiedad define el color del texto que se utilizará para el elemento HTML.
El CSS font-family propiedad define el tipo de letra que se utilizará para el elemento HTML.
El CSS font-size propiedad define el tamaño de la letra que se utilizará para el elemento HTML.
Ejemplo
<!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> Inténtalo tú mismo " El modelo de caja CSS
Cada elemento HTML tiene un cuadro a su alrededor, incluso si usted no puede verlo.
El CSS border propiedad define un borde visible alrededor de un elemento HTML:
El CSS padding propiedad define un acolchado (space) dentro de la frontera:
El CSS margin propiedad define un margen (space) fuera de la frontera:
Los ejemplos anteriores usan CSS px a la definición del tamaño en píxeles.
La id Atributo
Todos los ejemplos anteriores el uso de CSS para el estilo de los elementos HTML de una manera general.
Para definir un estilo especial para un elemento especial, agregar primero un atributo id al elemento:
<p id="p01">I am different</p>a continuación, definir un estilo para el elemento con la específica id :
La class Atributo
Para definir un estilo para un tipo especial ( class ) de los elementos, añadir una class atributo al elemento:
<p class="error">I am different</p>Ahora se puede definir un estilo diferente para elementos con la clase específica:
Utilice id para hacer frente a un single elemento. Utilice class para hacer frente a groups de elementos.
Resumen del capítulo
- Utilice el código HTML style atributo para el estilo en línea
- Utilice el código HTML <style> elemento para definir CSS interna
- Utilice el código HTML <link> elemento para referirse a un archivo CSS externo
- Utilice el código HTML <head> elemento para guardarlos <style> y <link> elementos
- Utilizar el CSS color propiedad de los colores del texto
- Utilizar el CSS font-family propiedad de las fuentes de texto
- Utilizar el CSS font-size propiedad de tamaños de texto
- Utilizar el CSS border viviendas en las fronteras de elementos visibles
- Utilizar el CSS padding viviendas en el espacio dentro de la frontera
- Utilizar el CSS margin viviendas en el espacio fuera de la frontera
Ponte a prueba con los ejercicios!
Ejercicio 1 » Ejercicio 2» Ejercicio 3 » Ejercicio 4» Ejercicio 5 » Ejercicio 6»
Etiquetas HTML Estilo
| Etiqueta | Descripción |
|---|---|
| <style> | Define información de estilo para un documento HTML |
| <link> | Define un vínculo entre un documento y un recurso externo |