CSS基础_引入+选择符+样式继承+优先级

最新推荐文章于 2025-07-24 10:20:26 发布

原创最新推荐文章于 2025-07-24 10:20:26 发布 · 285 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

Web前端学习笔记专栏收录该内容

11 篇文章

订阅专栏

本文详细介绍了CSS样式的三种引入方式：行间、内部和外部，并重点讲解了内部引入的语法规范。同时，文章涵盖了各种选择符的用法，如id、class、tag、通配符、分组选择符等，以及伪类选择符和样式的继承与优先级。通过实例展示了样式如何应用到HTML元素上，帮助读者深入理解CSS的工作原理。

引入方式

入门那里已经记录过行间引入，但是基本上不用，因为项目需要统一性。

内部引入方式

它与行间引入的区别是它是通过<style>标签而不是属性。

一般添加到<head>里面。

补充。CSS的注释是/**/。

内部引入有CSS的样式规范：

选择符{属性1: 值1......}

比如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .T{
            width: 100px;
            height: 100px;
            background-color: rgb(133, 119, 119);
        }
        
    </style>
</head>
<body>
    <div class="T"> 
        <p>内部引入样式，晚饭吃什么</p>
    </div>
     
</body>
</html>

效果：

需要配合选择符，后面选择符详解

外部引入方式

1、链接式

创建一个.css的文件，然后在<head>里面通过：

<link href="相对路径或者绝对路径" rel="stylesheet" type="text/css"/>

rel是定义当前文档和被链接文档之间的关系，type是定义被链接文件的类型。

2、导入式，不咋用。

选择符详解

id选择符

一个页面只能用一次，但是我写了多次也阔以，可能现在放宽了要求

---------

class选择符

和id选择符最大的不一样是，可以使用多次

---------

tag选择符

直接用标签的名字放在{}前面

比如p{。。。。}

-----------

通配选择符

*{}，全部标签使用

---------

分组选择符

div.p,h1{}

---------

包含选择符

ul li{}

---------

伪类选择符

链接点击前，点击时，点击后的显示。

未访问：a:link{}，只能用在a上面

鼠标划过：p:hover{}

鼠标按下：p:active{}

访问过后：a:visited{}，只能在a上面用

样式的继承

越往外的标签拥有的样式，里面的标签也显示，但是有些样式继承不了，比如边框什么的。

样式的优先级

1、相同的样式，比如一个类，后面的高

2、内部样式和外部样式，后面写入的高

3、单一样式：style行间 > id选择符 > class选择符 > tag选择符 > 默认继承

4、!important提成最高优先级，不常用

5、分组选择符和单一选择符，后面写入的高

6、包含优先级，“约分法”，闲得写这么混乱