CSS导入方式以及选择器（前端基础，纯干货！）

最新推荐文章于 2024-01-26 07:13:19 发布

W.樂�

最新推荐文章于 2024-01-26 07:13:19 发布

阅读量253

点赞数 1

分类专栏： java 文章标签： css

本文链接：https://blog.csdn.net/AA_le/article/details/115747861

版权

java 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

2 .css的导入方式

内部样式：
行内样式
外部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--内部样式-->
    <style>
        h1{
            color: green;
        }

    </style>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--优先级：就近原则-->

<!--行内样式：在标签元素中，编写一个style属性，编写样式即可-->
<h1 style="color: red">我是标题</h1>

</body>
</html>

3.选择器

选择页面上的某一个或者某一类元素
基本选择器
标签选择器：选择一类标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--这里如果改的话好h1 所有是s1的都会改-->
    <style>
        h1{
            color: #7d3d3d;
        }
    </style>
</head>
<body>

<h1>学java</h1>
<h1>学java</h1>
<p>狂神说</p>

</body>
</html>

类选择器 class：选择所有class属性一致的标签，垮标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    类选择器
class的名称，好处：可以多个标签归类，是同一个class 可以复用-->
    <style>
        .l{
            color: red;
        }
        .w{
            color: green;
        }
    </style>
</head>
<body>
<h1 class="w">2222</h1>
<h1 class="w1">12222</h1>
<h1 class="l">1222</h1>

</body>
</html>

id选择器：全局唯一：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
/*
id选择器
样式 #id选择器{
}
不遵循就近原则，固定的
id选择器>class选择器>标签选择器
 */
        #111{
            color: yellow;
        }
    </style>
</head>
<body>
<h1 id="111">1</h1>
<h1>2</h1>
<h1>3</h1>
<h1>4</h1>
<h1>5</h1>

</body>
</html>

id>class>标签优先级
高级选择器
层次选择器：
后代选择器：在某个元素的后面
```
/*
body p{
background:red;
}
*/
```
子选择器,一代，儿子
```
/*
body>p{
background：red;
}
*/
```
兄弟选择器,向下（只有一个）

    .active+p{
            background: red;
        }

通用选择器向下(两个)
```
.active~p{
    background:green;
}
```

W.樂�

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
CSS导入方式以及选择器（前端基础，纯干货！）

2 .css的导入方式内部样式：行内样式外部样式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <style> h1{ color: green; }
复制链接

扫一扫