HTML5知识点（第五节）

廖王八

于 2022-08-18 09:00:34 发布

阅读量413

点赞数 1

分类专栏： HTML 文章标签： html css 前端

本文链接：https://blog.csdn.net/ljl17880248619/article/details/126383661

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS3的基本语法，包括选择器的使用，如标签选择器、类选择器和ID选择器，以及组合选择器、包含选择器和交集选择器等扩展选择器。此外，还探讨了CSS3的继承性、层叠性和优先级，以及常见的伪类选择器。内容涵盖了外样式表、内嵌样式表和行内样式的应用场景，帮助读者全面理解CSS3的基础知识。

摘要由CSDN通过智能技术生成

CSS3基础

   CSS3基本语法
     样式表分类样式表分类样式表分类
      CSS选择器CSS选择器CSS选择器
     CSS的特性

CSS3基本语法

<style type="text/css">
            选择器{
                属性1:属性值1;
                属性2:属性值2;
                属性3:属性值3;
                color:black ;
                font-family: "微软雅黑";
                ...
            }
        </style>

样式表分类
1. 外样式表：多个页面可以重复使用

   步骤：1.新建一个css文件夹，在文件夹里新建css文件
               2.在新建的css文件中写需要的样式
               3.在<head></head>标签中，通过
               <link rel="stylesheet" type="text/css" href="路径"/>
               或
               <style type="text/css">
                @import url("路径");
              </style>
               引入

2. 内嵌样式表：可以在一个页面内重复使用

    <head>
        <style type="text/css">
            选择器{属性1:属性值1;...}
            选择器{属性1:属性值1;...}
        </style>
    </head>

3. 行内样式表：不能重复使用

<标签名 style="属性1:属性值1; 属性1:属性值1;  ...;"></标签名>
<a style="color: black; font-family: '微软雅黑'"></a>

一、基本选择器
1. 标签选择器：自动应用样式规则

<head>
        <style type="text/css">
            标签名{
                属性1:属性值1;
                属性1:属性值1; 
             }
             
            a{
               color: black;
              font-family: '微软雅黑'
             }
        </style>
</head>
<body>
    <a>标签选择器</h6>
</body>

2. 类(.)选择器：可以在不同类型直接的标签进行重用

<head>
        <style type="text/css">
            类名{
                属性1:属性值1;
                属性1:属性值1; 
             }
             
            .name{
              color: black;
              font-family: '微软雅黑'
             }
        </style>
</head>
<body>
    <ul class="name">类选择器</h6>
</body>

3. ID(#)选择器：不能重复使用

<head>
        <style type="text/css">
            ID名{
                属性1:属性值1;
                属性1:属性值1; 
             }
             
            #name{
              color: black;
              font-family: '微软雅黑'
             }
        </style>
</head>
<body>
    <ul id="name">类选择器</h6>
</body>

二、扩展选择器
1. 组合选择器:组合直接用，隔开

<head>
    <style type="text/css">
        p,.name,#tip{
                属性1:属性值1;
                属性2:属性值2;
                属性3:属性值3;
                color:black ;
                font-family: "微软雅黑";
            }
    </style>
</head>
表示：p标签下内容，类名为name下的内容，id为tip下的内容样式

2. 包含选择器：用空格隔开

<head>
    <style type="text/css">
        .tip ul li a{
                属性1:属性值1;
                属性2:属性值2;
                属性3:属性值3;
                color:black ;
                font-family: "微软雅黑";
            }
    </style>
</head>
表示：类名为tip下的ul下的li下的a下的内容样式

3. 交集选择器:第一个必须是标签选择器，第二个必须是类或id选择器，两个选择器直接不能有空格

<head>
    <style type="text/css">
        p.red{
                属性1:属性值1;
                属性2:属性值2;
                属性3:属性值3;
                color:black ;
                font-family: "微软雅黑";
            }
    </style>
</head>
表示：p标签中class值为red的所有元素的样式属性

12 4. 伪类选择器

<head>
    <style type="text/css">
        标签名:伪类名{
                属性1:属性值1;
                属性2:属性值2;
                属性3:属性值3;
                color:black ;
                font-family: "微软雅黑";
            }
    </style>
</head>

常用超链接伪类
:link：鼠标未点击时
:visited：鼠标点击后
:hover：鼠标悬浮在超链接上时
:active：鼠标点击为释放时

CSS的特性
1. CSS继承性：所有在元素中嵌套的元素都会继承外层指定的样式，有时会将很多样式叠加在一起

<head>
        <meta charset="utf-8" />
        <title></title>    
        <style type="text/css">
            body{
                font-size: 12px;
                font-style: italic;
            }
            #p1{
                font-size: 30px;
            }
        </style>
        
    </head>
    <body>
        <p>段落文字</p>
        <p id="p1">段落文字</p>
    </body>    

p元素包含在body中，因此p标签中的内容会继承body定义的属性，即示例中的段落文字都会以12px斜体显示，要想改变样式，除非重新定义新的属性

2. CSS层叠性和优先级
层叠性是指当有多个选择器都作用于同一元素时，即多个选择器中的样式发生了重叠，css会对其进行处理。

CSS的处理原则：

如果多个选择器定义的样式规则不发生冲突，则元素将应用所有选择器定义的样式
如果多个选择器定义的样式规则发生冲突，则css按照选择器的优先级来处理，元素将应用优先级高的选择器定义的样式
CSS规定选择器的优先级，从高到低
行内样式——id样式——类样式——标签样式
其总原则时：越特殊的样式，优先级越高

CSS的选择符优先级，从高到低：id选择符——类选择符——元素选择符
CSS的定义优先级依照后定义优先的原则：内嵌样式——内部样式表——外部样式表