CSS样式核心技术点

逃离我推掉我的手 2021-07-24 11:57 385阅读 0赞

# 一 样式分类 #

行内样式，内部样式，外部样式。

# 二 优先级 #

采用就近原则。

行内样式最近，它的优先级最高。

内部样式或外部样式，看谁离标签近，谁的优先级就高。

# 三 外部样式导入方式 #

1 使用 @import url("resource/css/style.css"); 语法导入外部样式

2 使用 <link rel="stylesheet" href="resource/css/style.css"> 导入外部样式

# 四 实战 #

1 HTML代码

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            h2 {
                color: green;
            }
        </style>
        <link rel="stylesheet" href="resource/css/style.css">
        <style>
            h3 {
                color: green;
            }
        </style>
    </head>
    <body>
    <h1 style="color: red">我是标题一，采用行内样式，因为我的优先级最高</h1>
    <h2>我是标题二，因为外部样式离我近，所以我显示为蓝色</h2>
    <h3>我是标题三，因为内部样式离我近，所有我显示为绿色</h3>
    </body>
    </html>

2 CSS代码

h3 {
        color: blue;
    }
    
    h2 {
        color: blue;
    }

# 五 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 六 基本选择器 #

1 标签选择器

标签 \{

样式:值;

2 类选择器

.class名 \{

样式:值;

3 id选择器

\#id名 \{

样式:值;

# 七 实战 #

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选择器</title>
        <style>
            h1 {
                color: red;
            }
    
            h3 {
                color: yellow;
            }
    
            .cakin {
                color: green;
            }
    
            #cakin1 {
                color: blue;
            }
    
            #cakin2 {
                color: coral;
            }
        </style>
    </head>
    <body>
    <h1>我用的是标签选择器，我显示红色</h1>
    <h2 class="cakin">我用的是类选择器，我显示绿色</h2>
    <h3 id="cakin1">我用的是id选择器，我显示蓝色</h3>
    
    <h3 id="cakin2" class="cakin">因为id选择器的优先级高于类选择器，所以我用的是id选择器，我显示桔色</h3>
    <h3 class="cakin">因为类选择器优先级高于标签选择器，所以我用的是类选择器，我显示绿色</h3>
    </body>
    </html>

# 八 效果 #

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/a0152d3f51a14b3eb4d935cd1613fbf8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/51fafe57835c40d6bf46579d316145f5.png