css---01（引入、选择器）

.98℃

已于 2022-10-09 14:27:47 修改

阅读量111

点赞数

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

于 2022-07-24 21:42:43 首次发布

本文链接：https://blog.csdn.net/m0_52049418/article/details/125962281

版权

一些前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS样式的四种引入方式：行内样式、内嵌样式、外链样式和导入样式，以及它们的优先级。同时，讲解了CSS选择器，包括基本选择器（元素、ID、类和通配符）、包含选择器（子代和后代）、属性选择器和伪类与伪元素选择器的应用。内容覆盖了CSS的基础知识，是理解CSS样式的良好参考资料。

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

CSS 规则：

1.css的样式引入方式

方式：行内样式、内嵌样式、外链样式、导入样式

优先级：就近原则，距离修饰的标签越近，优先级越高

概念来讲：行内>内嵌>外链>导入

1）行内样式：

行内样式又叫做标签样式，通过在html标签中添加属性 style 来引入。

<body>
    <h2 style="color:#97FFFF;text-align:center">这是一个标题</h2>
    <p style="color:#00CD00;text-align:center"> 这是一个段落</p>
</body>

2）内嵌样式：

在头部通过style标签内引入。

<html>
<head>
    <meta cherset="utf-8">
    <title>css样式引入</title>
    <style type="text/css">
        h2{
            color:#FFC125;
            text-align:center;
        }
        p{
            color:#00CD00;
            text-align:left;
        }
    </style>
</head>
<body>
    <h2>这是一个标题</h2>
    <p> 这是一个段落</p>
</body>
</html>

3）外链样式：

同样通过在html头部使用link标签的herf属性将css文件引入。

步骤：

新建一个.css的文件，专门写css样式
在head标签内写入link标签（link标签可以写在body标签内，但是不推荐）
link标签内href属性将css文件导入（路径：绝对路径和相对路径）

<!-- HTML文件内容 -->
<!DOCTYPE html>
<html>
<head>
    <meta cherset="utf-8">
    <title>css样式引入</title>
    <link rel="stylesheet" type="text/css" href="oneday.css">
</head>
<body>
    <h2>这是一个标题</h2>
    <p> 这是一个段落</p>
</body>
</html>

/* CSS文件内容 */
h2{
    color:#8B658B;
    text-align:right;
}
p{
    color:#8B4513;
    text-align:center;
}

4）倒入样式：

通过在style标签中用@import url （“”）进行导入.css文件

<!-- HTML文件内容 -->
<!DOCTYPE html>
<html>
<head>
    <meta cherset="utf-8">
    <title>css样式引入</title>
    <style type="text/css">
        @import url("../CSS/oneday.css");
    </style>
</head>
<body>
    <h2>这是一个标题</h2>
    <p> 这是一个段落</p>
</body>
</html>

/* CSS文件内容 */
h2{
    color:#551A8B;
    text-align:center;
}
p{
    color:#00008B;
    text-align:left;
}

2.选择器

1）.基本选择器：

元素选择器（标签选择器）。
ID选择器：id="???"，以id为???为的标签中的内容。
类选择器：class="???"，以class为???为的标签中的内容。
通用选择器：选择页面上的所有的 HTML 元素。

优先级：ID > 类 > 标签 > 通配符

<!DOCTYPE html>
<html>
<head>
    <title>基本选择器</title>
    <style type="text/css">
        h2{    color: #00ffff;  }/*标签选择器*/
        #one{  color: #0000cd;  }/*ID选择器*/
        .two{  color: #EE6363;  }/*类选择器*/
        p.tow{ color:#8B658B;   }
        *{     color: #FFD700;  }/*通配符选择器*/
    </style>
</head>
<body>
    <h2>这是一个标题</h2>
    <p id="one">这是一个段落</p>
    <p class="tow">这是第二个段落</p>
    <div class="two">这是一个div</div>
    <div>这是第二个div</div>
    <p>这是第二个段落</p>
</body>
</html>

2）.包含选择器：

子代选择器：获取某个标签的第一级子标签
后代选择器：获取某个标签内所有的子标签
分组选择器：逗号选择器，可以给多个标签加上样式，通过逗号隔开

<!--HTML文件内容 -->
<!DOCTYPE html>
<html>
<head>
     <title>包含选择器</title>
     <link rel="stylesheet" type="text/css" href="oneday.css">     
</style>
</head>
<body>
     <h2>这是一个标题</h2>
     <p id="list">这是一个段落</p>
     <div class="list">
         <ul>
            <li>这是列表1</li>
            <li>这是列表2</li>
            <li>这是列表3</li>
         </ul>
         <li>这是列表4</li>
         <li>这是列表5</li>
         <li>这是列表6</li>
     </div>
</body>
</html>

/*css文件*/
.list>ul{color: green;}/*子代选择器*/

/*css文件*/
.list li{ color: red; }/*后代选择器*/

/*css文件*/
h2,#list,.list{color: blue;}/*分组选择器*/

-》-》

3）.属性选择器：

选择器用于选取带有指定属性的元素。

优先级：就近原则

<!DOCTYPE html>
<html>
<head>
    <title>属性选择器</title>
    <style type="text/css">
        div[class]{color: red;}/*选中某个标签的某个值*/
        div[title = "这是一个标题"]{color: yellow;}/*等于某个固定的属性和值时*/
        .msg + p {color: pink;}/*表示下一个p标签*/
        input[type *= "e"]{background: red;}/*某个属性含有某个值*/
        input[type ^= "f"]{background: green;}/*某个属性以什么开始*/
        input[type $= "rl"]{background: blue;}/*某个属性以什么结束*/
        input[type="text"]{background: pink;}/*确切的等于XXX*/
    </style>
</head>
<body>
    <div title="one">这是一个div</div>
    <div title="这是一个标题">这是第二个div</div>
    <div class="msg">这是第三个div</div>
    <p id="msg">这是第一个段落</p>
    <p id="msg">这是第一个段落</p>
    <p class="two">这是二个段落</p>
    <input type="file" id="" class="" value="李四">
    <input type="text" id="" class="" value="张三">
    <input type="url" id="" class="" value="李四">
    <input type="email" id="" class="" value="王五">
</body>
</html>

4）.伪类选择器：

同一个标签，根据不同的状态，有不同的样式，这就叫伪类，使用冒号:表示的

:link -----超链接点击之前的样式
:visited -----链接访问之后的样式
:hover ----- 悬停，鼠标悬停在标签上的样式
:active ----- 被激活的时候，鼠标点击但是不松手的时候的样式
:focus ----- 某个标签获得焦点的时候的样式

注意：这四种超链接的伪类选择器的顺序是一定的，不可以改变。
他们的顺序 :link :visited :hover:active

<!DOCTYPE html>
<html>
<head>
    <title>伪类选择器</title>
    <style type="text/css">
        a:link{color: pink;}/*让超链接点击之前是粉色*/
        a:visited{color: green;}/*让超链接点击之后是绿色*/
        a:hover{color: red;}/*让鼠标悬停的时候，超链接变成红色*/
        a:active{color: orange;}/*让鼠标点击不松手的时候变成橙色*/
    </style>
</head>
<body>
    <a href="https://www.w3school.com.cn/">点击我</a>
</body>
</html>

5）.伪原属选择器：

:before
:after ---- CSS2提供的
::before
::after ----- CSS3提供的

<!DOCTYPE html>
<html>
<head>
<title>伪元素选择器</title>
    <style type="text/css">
        p::before{content: "rose";color:pink;}
        p::after{ content: "jack";color:blue;}
    </style>
</head>
<body>
    <p>和</p>
</body>
</html>