Compartir tecnología

Tres formas en que se utiliza CSS en las páginas: estilos en línea, hojas de estilo incrustadas y hojas de estilo vinculadas

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

La forma en que se utilizan los estilos CSS en las páginas incluye tres métodos: estilos en línea, hojas de estilo incrustadas y hojas de estilo vinculadas.

1. Estilo en línea

El estilo en línea es un estilo relativamente directo, definido directamente dentro de la etiqueta HTML e implementado mediante el atributo de estilo. Este método es más fácil de aprender, pero no muy flexible.

【Ejemplo】Aplique estilos en línea para controlar la página.

  1. <!-- 在页面元素中定义CSS样式 -->
  2. <p style="font-size: 36px; color:red">您好，欢迎访问 pan_junbiao的博客</p>
  3. <p style="font-size: 24px; font-weight: bold;">您好，欢迎访问 pan_junbiao的博客</p>
  4. <p style="font-size: 18px; font-style: italic">您好，欢迎访问 pan_junbiao的博客</p>
  5. <p style="font-size: 14px; text-decoration: line-through;">您好，欢迎访问 pan_junbiao的博客</p>

Resultados de:

2. Hoja de estilo integrada

Uso de hojas de estilo integradas <style>...</style> Las etiquetas incluyen estilos CSS en la página. La forma de las hojas de estilos en línea no es tan directa como los estilos en línea, pero la página será más regular.

【Ejemplo】Utilice hojas de estilo integradas para diseñar sus páginas.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="author" content="pan_junbiao的博客">
  6.     <title>CSS在页面中使用的三种方式</title>
  7.     
  8.     <!-- 内嵌式样式表 -->
  9.     <style type="text/css">
  10.         h1, h2, h3{
  11.             font-family: Tahoma, Geneva, sans-serif; /*定义字体*/
  12.             color: blue; /*文字颜色*/
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <h1>大风起兮云飞扬</h1>
  18.     <h2>威加海内兮归故乡</h2>
  19.     <h3>安得猛士兮守四方</h3>
  20. </body>
  21. </html>

Resultados de:

3. Hoja de estilo vinculada

Vincular a una hoja de estilo CSS externa es la forma más común de hacer referencia a una hoja de estilo.Primero defina el estilo CSS en un archivo separado y luego páselo en la página HTML<link> Etiquetas para hacer referencia a ellos, esta es la forma más eficiente de utilizar estilos CSS.

<link>La estructura de sintaxis de la etiqueta es la siguiente:

<link rel='stylesheet' href='path' type='text/css'>

rel: la relación entre el documento externo y el documento de llamada.

href: ruta absoluta o relativa al documento CSS.

tipo: tipo MIME de archivo externo

【Ejemplo】Haga referencia a estilos CSS en la página.

(1) Cree un directorio css y luego cree un archivo de estilo css.css en el directorio.

  1. /*定义CSS样式 */
  2. h1,h2,h3{								
  3.     color:#6CFF;
  4.     font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
  5. }
  6.  
  7. p{
  8.     color:#F0CC;	/*定义颜色*/
  9.     font-weight:200;
  10.     font-size:24px;	 /*设置字体大小*/
  11. }

(2) Pase en la página<link> Las etiquetas introducen archivos de estilo CSS en la página.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="author" content="pan_junbiao的博客">
  6.     <title>CSS在页面中使用的三种方式</title>
  7.  
  8.     <!--页面引入CSS样式表-->
  9.     <link rel="stylesheet" type="text/css" href="/css/css.css">		
  10. </head>
  11. <body>
  12.     <h2>春夜喜雨</h2>
  13.     <p>好雨知时节，当春乃发生。</p>
  14. </body>
  15. </html>

Resultados de:

 

4. Prioridad de las llamadas a hojas de estilo

El orden de prioridad de las llamadas a hojas de estilo sigue los siguientes principios:

(1) El estilo definido en el estilo en línea tiene la máxima prioridad.

(2) Otros estilos siguen el principio de proximidad en el orden en que aparecen o se hace referencia en el archivo HTML. Cuanto más cerca del texto, mayor será la prioridad.

(3) El orden de prioridad de los selectores es selector descendiente, selector de clase, selector de ID y la prioridad disminuye en orden.

(4) Los estilos no definidos en ningún archivo seguirán el estilo predeterminado del navegador.

Perfil personal

Se ha dedicado a la investigación de tecnología durante más de 30 años y domina varios lenguajes como java, linux, javascript, php, css, etc. Ha realizado muchas contribuciones en el campo del código abierto. Estación de documentación para desarrolladores para compartir algunos problemas en el desarrollo de tecnología para referencia futura.

Mi informacion de contacto

Correo