Três maneiras pelas quais o CSS é usado nas páginas: estilos embutidos, folhas de estilo incorporadas e folhas de estilo vinculadas

2024-07-12

O modo como os estilos CSS são usados nas páginas inclui três métodos: estilos embutidos, folhas de estilo incorporadas e folhas de estilo vinculadas.

1. Estilo embutido

O estilo embutido é um estilo relativamente direto, definido diretamente na tag HTML e implementado por meio do atributo style. Este método é mais fácil de aprender, mas não é muito flexível.

【Exemplo】Aplique estilos embutidos para controlar a página.


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

Resultados do:

2. Folha de estilo incorporada

Uso de folhas de estilo incorporadas <style>...</style> As tags incluem estilos CSS na página. A forma das folhas de estilo inline não é tão direta quanto os estilos inline, mas a página será mais regular.

【Exemplo】Use folhas de estilo incorporadas para estilizar suas páginas.


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

Resultados do:

3. Folha de estilo vinculada

Vincular a uma folha de estilos CSS externa é a maneira mais comum de fazer referência a uma folha de estilos.Primeiro defina o estilo CSS em um arquivo separado e depois passe-o na página HTML<link> Tags para referenciá-los, esta é a maneira mais eficiente de usar estilos CSS.

<link>A estrutura sintática da tag é a seguinte:

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

rel: O relacionamento entre o documento externo e o documento de chamada.

href: caminho absoluto ou relativo para o documento CSS.

type: tipo MIME de arquivo externo

【Exemplo】Faça referência a estilos CSS na página.

(1) Crie um diretório css e, em seguida, crie um arquivo de estilo css.css no diretório.


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

(2) Passe na página<link> Tags introduzem arquivos de estilo CSS na página.


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

Resultados do:

4. Prioridade de chamadas de folhas de estilo

A ordem de prioridade das chamadas de folhas de estilo segue os seguintes princípios:

(1) O estilo definido no estilo embutido tem a prioridade mais alta.

(2) Outros estilos seguem o princípio da proximidade na ordem em que aparecem ou são referenciados no arquivo HTML. Quanto mais próximo do texto, maior será a prioridade.

(3) A ordem de prioridade dos seletores é seletor descendente, seletor de classe, seletor de ID e a prioridade diminui em ordem.

(4) Os estilos não definidos em nenhum arquivo seguirão o estilo padrão do navegador.

Compartilhamento de tecnologia