English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Los archivos CSS son archivos de texto puro guardados con la extensión .css.
En este tutorial, aprenderás cómo es fácil agregar estilos y configuraciones de formato a las páginas web utilizando CSS. Pero, antes de empezar, asegúrate de tener algunos conocimientos básicos de HTML.
Si acabas de entrar en el campo del desarrollo web, por favorDesde aquí comenzamos a aprender»
Sin más preámbulos, comencemos a usar las hojas de estilo en cascada (CSS).
CSS se puede adjuntar como un documento separado o integrarse en el documento HTML mismo. Hay tres formas de incluir CSS en el documento HTML:
Estilos en línea -UsarstyleAtributos en la etiqueta de inicio de HTML.
Estilos incrustados -Usar<style>El elemento en la cabecera del documento.
Hojas de estilo externas -Usar<link>El elemento, apunta a un archivo CSS externo.
En este tutorial, presentaremos una por una todas las tres formas de insertar CSS.
Nota:La prioridad de los estilos en línea es la más alta, mientras que la de las hojas de estilo externas es la más baja. Esto significa que si enIncrustadoLas hojas de estilo yHojas de estilo externasSi se especifican estilos para el elemento en ambosIncrustadoLas reglas de estilo en conflicto en las hojas de estilo se sobrescriben en las hojas de estilo externas.
Estilos en línea se utilizan para aplicar reglas de estilo únicas a los elementos mediante la inserción directa de reglas CSS en la etiqueta de inicio. Puede usarstyleLa propiedad adjunta al elemento.
ElstyleLas propiedades incluyen una serie de pares de atributos CSS y valores. Cada"property: value"对之间用分号（对之间用分号（}};
<h1 ）separados por puntos y comas, al igual que escribe en una hoja de estilo en línea o externa. Pero debe estar todo en una línea, es decir, sin saltos de línea después del punto y coma, como se muestra a continuación:-tamaño:3style="color:red; font/h1> 0px;">Este es un encabezado<-tamaño:22<p style="color:green; font/px;">Este es un párrafo.< p>-tamaño:14<div style="color:blue; font/px;">Este es algún contenido de texto.<Prueba a ver‹/›
div>
Nota:Estilos en línea generalmente se considera una mala práctica. Dado que las reglas de estilo se insertan directamente en los marcadores HTML, esto hace que el código sea difícil de mantener y anula el propósito del uso de CSS.estilos en líneayelementos pseudoclases de estiloHojas de estilo externashan vuelto a ser imposibles. Por lo tanto, debe evitar usar propiedades de estilo en el código. Utilice
Estilos en línea solo afectan el documento en el que se insertan. Los estilos en línea son el método preferido para agregar estilos a un documento HTML.
estilos en línea en<cabecera>estilos en línea en<style>usar en la sección de<style>definición de elemento. Puede<cabecera>y</En un documento HTML, defina una cantidad arbitraria de elementos, pero deben aparecerhead>
<!DOCTYPE html><html lang="en"><cabecera><cuerpo>
<título>Mi documento HTML</título>
<style>
marca entre. Veamos un ejemplo:-body { background
color: YellowGreen; }
</p { color: #fff; }/cabecera><cuerpo>
<h1>Este es un encabezado</h1>
<p>Este es un párrafo de texto.</p></cuerpo></html>Prueba a ver‹/›Consejo:style><y etiquetas deltype5es el lenguaje de estilo estándar y el lenguaje de hoja de estilo predeterminado, por lo que puede ignorar esta configuración. La propiedad (es decir) define el lenguaje de la hoja de estilo. Esta propiedad es puramente informativa. Dado que CSS es el lenguaje de estilo<style><link>type="text/css"
Cuando los estilos se aplican a muchas páginas del sitio, las hojas de estilo externas son la opción ideal.
Las hojas de estilo externas almacenan todas las reglas de estilo en un documento separado, por lo que puede enlazarlas desde cualquier archivo HTML en el sitio web. Las hojas de estilo externas son las más flexibles, ya que con una hoja de estilo externa, solo necesita cambiar un archivo para modificar la apariencia completa del sitio web.
Puede enlazar hojas de estilo externas de dos formas- EnlazaryImportar.
Antes de enlazar estilos, primero necesitamos crear una hoja de estilo. Abra su editor de código preferido y cree un nuevo archivo. Ahora, escriba el siguiente código CSS en este archivo y guárdelo como "style.css".
body {
background: lightyellow;
font: 18px Arial, sans-serif;}h1 {'}}
color: naranja;}se puede usar<link>etiqueta enlaza una hoja de estilo externa al documento HTML. La<link>etiqueta entrar en<cabecera>Parte, puede verla en el siguiente ejemplo:
<!DOCTYPE html><html lang="en"><cabecera><cuerpo> <título>Mi documento HTML</título> <link rel="stylesheet" href="css/<link rel="stylesheet" href="css/cabecera><cuerpo> <h1>Este es un encabezado</h1> <p>Este es un párrafo de texto.</p></cuerpo></html>Prueba a ver‹/›
Consejo:En estos tres métodos, usar hojas de estilo externas es la mejor manera de definir estilos y aplicarlos a un documento HTML. Desde las hojas de estilo externas, se puede ver claramente que los archivos HTML afectados requieren el menor cambio en la marca.
El@importRegla es otra forma de cargar una hoja de estilo externa.@importinstrucción indica al navegador que cargue una hoja de estilo externa y utilice sus estilos.
Puede usarlo de dos formas. Lo más simple es en el título del documento. Tenga en cuenta que otras reglas CSS pueden estar incluidas en<style>elemento. Este es un ejemplo:
<style>
@import url("css/style.css");
p {
color: azul;
fuente-tamaño: 16px;
}
</style>Prueba a ver‹/›Del mismo modo, puede usar@importReglas que importan hojas de estilo desde otra hoja de estilo.
@import url("css/layout.css");
@import url("css/color.css");cuerpo {
color: azul;
fuente-tamaño: 14px;}Prueba a ver‹/›Nota:Todos@importTodas las reglas deben aparecer al inicio de la hoja de estilo. Cualquier regla de estilo definida en la hoja de estilo también cubrirá reglas conflictivas en la hoja de estilo importada. Sin embargo, debido a problemas de rendimiento, no se recomienda importar estilos de otra hoja de estilo.