前端学习笔记：CSS的引入，元素选择器

大苏打seven

已于 2024-07-24 16:07:41 修改

阅读量855

点赞数

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

于 2023-04-27 00:01:16 首次发布

本文链接：https://blog.csdn.net/sinat_38393872/article/details/130233257

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这是本人学习的总结，主要学习资料如下

马士兵教育

1、引入CSS

1.1、引入CSS的方式

第一个是内联样式，直接作为标签内部的属性设置样式。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
        </head>
        <body>
                <!--
                        书写方式：内联样式（行内样式）
                        在标签中加入一个style属性，CSS的样式作为属性值
                        多个属性值之间用;进行拼接
                -->
                <h1 style="color: deeppink;font-family: '宋体';">这是一个h1标题</h1>
        </body>
</html>

第二个是内部样式，将样式定义在<head>标签中，定义整个页面的样式。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <!--
                        书写方式：内部样式：
                        head标签中加入一个style标签，在里面定位到你需要修饰的元素，然后在{}中加入你要修饰的样式。
                -->
                <style type="text/css">
                        h1{
                                color: royalblue;
                                font-family: 宋体;
                        }
                </style>
        </head>
        <body>
                <h1>这是一个标题</h1>
        </body>
</html>

最后是外部样式，在外部专门定义一个CSS文件，HTML页面引入这个CSS文件即可。

h1{
        color: red;
        font-family: 宋体;
}

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <!--引入外部CSS资源：link-->
                <link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
        </head>
        <body>
                <h1>这是一个标题</h1>
        </body>
</html>

1.2、优先级

原则是就近原则，离元素最近的发挥作用，即内联样式>内部样式>外部样式。

2、元素选择器

元素选择器是指通过一定的方式定位到页面元素，给这些元素添加样式。

2.1、基本选择器

2.1.1、选择器

有三种基本选择器，元素选择器，类选择器和id选择器。

元素选择器就是通过元素名选择元素，比如说<h1>等。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        h1{
                                color: red;
                        }
                        i{
                                color: blue;
                        }
                </style>
        </head>
        <body>
                <h1>我是<i>一个</i>标题</h1>
                <h1>我是一个标题</h1>
        </body>
</html>

请添加图片描述

类选择器，可以将类名当做元素的属性，通过类名找到元素。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        /*
                         【2】基本选择器：类选择器
                         应用场合：不同类型的标签使用相同的类型
                         格式：
                         .class的名字{
                         	css样式;
                         }
                         */
                        .mycls{
                                color: green;
                        }
                </style>
        </head>
        <body>
                <h1 class="mycls">我是一个标题</h1>
                <h1>我是一个标题</h1>

                <h2 class="mycls">我是h2标题</h2>
        </body>
</html>

请添加图片描述

id选择器。和类选择器类似，只是属性名从class改成id，虽然即使有多个元素的id相同CSS也能生效，但还是建议让元素的id唯一。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">

                <title></title>
                <style type="text/css">
                        /*
                         【3】基本选择器：id选择器：
                         应用场合：可以定位唯一的一个元素
                         不同的标签确实可以使用相同的id，但是一般我们会进行人为的控制，让id是可以唯一定位到一个元素。
                         格式：
                         #id名字{
                         	css样式;
                         }
                         */
                        
                        #myid{
                                color: purple;
                        }
                </style>
        </head>
        <body>
                <h2 id="myid">我是h2标题</h2>
        </body>
</html>

请添加图片描述

2.1.2、优先级

范围小的大于范围大的。id选择器>类选择器>元素选择器。

2.2、关系选择器

关系选择器是可以选择标签A下的子标签。比如<h1>下的所有标签。

这种选择器有两种，一种是所有子标签，另一种是直接子标签，不包括孙子及以后的标签

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        /*关系选择器:
                         * 后代选择器：只要是这个元素的后代，样式都会发生变化
                         * div下面的所有h1标签样式都会改变
                         */
                        div h1{
                               color: red;
                        }
                        /*关系选择器：子代选择器
                         只改变子标签的样式*/
                        div>h1{
                                color: royalblue;
                        }
                        span>h1{
                                color: yellow;
                        }
                </style>
        </head>
        <body>
                <div>
                        <h1>这是标题</h1>
                        <h1>这是标题</h1>
                        <h1>这是标题</h1>
                        <h1>这是标题</h1>
                        <h1>这是标题</h1>
                        <span>
                                <h1>这是标题</h1>
                                <h1>这是标题</h1>
                                <h1>这是标题</h1>
                                <h1>这是标题</h1>
                                <h1>这是标题</h1>
                        </span>
                </div>
                        
        </body>
</html>

2.2.1、优先级

直接子标签>所有子标签，div>h1这样的写法优先级比div h1的高。

2.3、属性选择器

通过属性选择元素。比如有元素

<input type="password" value="123123"/>

那我们可以选择input中属性type=password的元素。

下面是示例。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        /*属性选择器*/
                        input[type="password"]{
                                background-color: red;
                        }
                        input[type="text"][value="zhaoss1"]{
                                background-color: yellow;
                        }
                        
                </style>
        </head>
        <body>
                <form>
                        用户名：<input type="text" value="zhaoss1" />
                        用户名2：<input type="text" value="zhaoss2" />
                        密码：<input type="password" value="123123" />
                        <input type="submit" value="登录" />
                </form>
        </body>
</html>

在这里插入图片描述

属性选择器还达到contains()的效果。比如下面的语句可以让id含有target的div元素的背景颜色变成红色。

div[id~="target"] {
	background-color: red;
}

2.4、伪类选择器

伪类选择器是在其他选择器的基础上，添加事件。

比如说下面是基础选择器，<h1>标签都变红色。

h1 {
	color: red
}

我们可以添加事件，变成只有鼠标在这个标签上时标签才变成红色。

h1:hover{
	color: red
}

事件有四个：link，hover，active，visited。分别是静止，悬浮，触发，完成。

就是正常状态（鼠标不在元素上），鼠标在元素在元素上，鼠标点击后事件处理中，鼠标点击后事件处理完。

下面是示例，一个超链接，刚开始是黄色，鼠标放上去变红色，点击超链接且没跳转到链接前变蓝色，跳转链接后变绿色。

<!DOCTYPE html>
<html>
        <head>
                <meta charset="UTF-8">
                <title></title>
                <style type="text/css">
                        /*设置静止状态*/
                        input:link{
                                color: yellow;
                        }
                        /*设置鼠标悬浮状态*/
                        input:hover{
                                color: red;
                        }
                        /*设置触发状态*/
                        input:active{
                                color: blue;
                        }
                        
                        /*设置完成状态*/
                        input:visited{
                                color: green;
                        }
                </style>
        </head>
        <body>
                <a href="index.html">超链接</a>
                <input type="text"/>
        </body>
</html>