La propiedad CSS se puede incluir en la página HTML de varias maneras diferentes. Los documentos HTML se formatean de acuerdo con la información de la hoja de estilo que se va a incluir.
Hay muchas maneras de incluir un archivo CSS que se enumeran a continuación:
- Hoja de estilo externa (usando la etiqueta HTML <link>): el CSS externo contiene un archivo CSS separado que contiene solo propiedades de estilo con la ayuda de atributos de etiqueta (por ejemplo, clase, id, encabezado, etc.). Propiedad CSS escrita en un archivo separado con extensión .css y debe vincularse al documento HTML mediante la etiqueta de enlace. Esto significa que para cada elemento, el estilo se puede establecer solo una vez y se aplicará a todas las páginas web. La etiqueta de enlace se utiliza para vincular la hoja de estilo externa con la página web html.
<link rel="stylesheet" href="style.css">
- Hoja de estilo externa (usando @import At-Rule): el método de la regla At debe incluirse dentro de la etiqueta <style> o dentro de la hoja de estilo.
<style> @import url(style.css); </style>
- Hoja de estilo interna (usando el elemento <style>): Esto se puede usar cuando un solo documento HTML debe tener un estilo único. El conjunto de reglas CSS debe estar dentro del archivo HTML en la sección principal, es decir, el CSS está incrustado dentro del archivo HTML.
<style>
element {
// CSS property
}
</style>
- Estilo en línea El CSS en línea contiene la propiedad CSS en la sección del cuerpo adjunta con el elemento que se conoce como CSS en línea. Este tipo de estilo se especifica dentro de una etiqueta HTML usando el atributo de estilo. Se utiliza para aplicar un estilo único para un solo elemento.
<h1 style="style property">Geeksforgeeks</h1>
Mejor enfoque: la hoja de estilo externa (usando la etiqueta HTML <link>) es el mejor método que se utiliza para vincular el elemento. Mantener y reutilizar el archivo CSS en diferentes páginas es fácil y eficiente. La etiqueta <link> se coloca en el elemento HTML <head>. Para especificar un tipo de medio = «texto/css» para un atributo de hoja de estilo en cascada <tipo> que se utiliza para ignorar los tipos de hoja de estilo que no son compatibles con un navegador.
Ejemplo 1: el archivo que se proporciona a continuación contiene la propiedad CSS. Este archivo se guarda con la extensión .css. Por ejemplo: geeks.css
body {
background-color:powderblue;
}
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
#geeks {
font-style:bold;
font-size:20px;
}
html
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="geeks.css"/> </head> <body> <div class = "main"> <div class ="GFG">GeeksForGeeks</div> <div id ="geeks">A computer science portal for geeks</p> </div> </body> </html>
Producción:
Ejemplo 2: este ejemplo describe el CSS interno o integrado.
html
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
.main {
text-align:center;
}
.GFG {
color:#009900;
font-size:50px;
font-weight:bold;
}
.geeks {
font-style:bold;
font-size:20px;
}
</style>
</head>
<body>
<div class = "main">
<div class ="GFG">GeeksForGeeks</div>
<div class ="geeks">A computer science portal for geeks</p>
</div>
</body>
</html>
Producción:
Ejemplo 3: Este ejemplo describe el CSS en línea.
html
<!DOCTYPE html> <html> <head> <title>Inline CSS</title> </head> <body> <p style = "color:#009900; font-size:50px; font-style:italic; text-align:center;"> GeeksForGeeks</p> </body> </html>
Producción:
Regla @import: la regla @import se usa para importar una hoja de estilo a otra hoja de estilo. Esta regla también admite consultas de medios para que el usuario pueda importar la hoja de estilo dependiente de los medios. La regla @import debe declararse en la parte superior del documento después de cualquier declaración @charset.
Características de @import:
- La regla @import se utiliza para importar una hoja de estilo a una página HTML oa otra hoja de estilo.
- La regla at @import también se usa para agregar consultas de medios, por lo tanto, la importación depende de los medios.
- Siempre debe declararse en la parte superior del documento.
Sintaxis:
@import url|string list-of-mediaqueries;
Valores de propiedad:
- url|string: una url o una string representa la ubicación del recurso que se va a importar. La url puede ser relativa o absoluta.
- list-of-mediaqueries: La lista de consultas de medios condiciona la aplicación de las reglas CSS definidas en la URL enlazada.
Ejemplo 1: Considere los dos archivos CSS como se muestra a continuación.
- icss.css
@import url("i1css.css");
h1 {
color: #00ff00;
}
- i1css.css
h1 {
text-decoration: underline;
font-size:60px;
}
p {
padding-left: 20px;
font-size: 60px;
}
html
<!DOCTYPE html> <html> <head> <title>WebPage</title> <link href="icss.css" rel="stylesheet"> </head> <body> <h1>GeeksforGeeks</h1> <p>A computer science portal for geeks</p> </body> </html>
Producción:
Ejemplo 2:
html
<!DOCTYPE html> <html> <head> <title>@import property</title> <style type="text/css"> @import url( "https://media.geeksforgeeks.org/wp-content/uploads/imp.css"); </style> </head> <body> <div id = "Geeks"> <h1>GeeksforGeeks</h1> <h2>External style sheet (Using @import At-rule)</h2> </div> </body> </html>
Producción:
Navegador compatible:
- Google Chrome 1.0
- Internet Explorer 5.5
- Firefox 1.0
- Ópera 3.5
- Safari 1.0
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA