CSS样式学习第一天

最新推荐文章于 2024-07-24 10:05:23 发布

你还要我怎样？

最新推荐文章于 2024-07-24 10:05:23 发布

阅读量68

点赞数

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

本文链接：https://blog.csdn.net/qq_46563235/article/details/126885593

版权

CSS学习专栏收录该内容

20 篇文章 1 订阅

订阅专栏

1、CSS样式表

（1）什么是CSS

（2）CSS语法

内部样式表

外部样式表

行内样式表

2、样式表的优先级（针对同一标签同一属性）

!important > 行内 > 内部 > 外部

3、标签选择器

（1）为什么要用选择器？

要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一，这就需要用到CSS选择器

（2）选择器

1）class选择器/类选择器

代码示例：

<!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>
        .ibm{
            background-color: blue;
        }
        .nb{
            color: chartreuse;
            background-color: coral;
        }
    </style>
</head>
<body>
    <div>111</div>
    <!-- ibm nb换位置结果一样 -->
    <div class="ibm nb">222</div>
    <div class="ibm">333</div>
    <div class="ibm">444</div>
    <div>555</div>
    <div>666</div>
</body>
</html>

效果：

2）id选择器

代码例子：

<!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>
        #box1{
            background-color: blue;
        }
        #box2{
            background-color:green;
        }
        #box3{
            background-color:orange;
        }
    </style>
</head>
<body>
    <div id="box1">111111</div>
    <div id="box2">222222</div>
    <div id="box3">333333</div>
</body>
</html>

效果：

3）*通配符、通配选择器

代码例子：

<!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>
        *{
            /* 外边距 */
            margin: 0;
            padding: 0;
            /* 内边距 */
        }
    </style>
</head>
<body>
    <h1>11111111</h1>
    <div>22222222</div>
    <ul>
        <li>333</li>
        <li>4444</li>
        <li>55555</li>
    </ul>
</body>
</html>

效果：（消去了默认边距）

4）群组选择器

代码例子：

<!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>
        div,p,h1{
            background-color: orange;
        }
    </style>
</head>
<body>
    <div>111111</div>
    <p>111111</p>
    <h1>111111</h1>
</body>
</html>

效果：

5）包含选择器/后代选择器

代码例子：

<!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>
        div p {
            background-color: orangered;
        }
    </style>
</head>
<body>
    <div>
        <p>111111111</p>
    </div>
    <p>22222222222</p>
</body>
</html>

效果：

6）伪类选择器

代码例子：

<!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>
        /* 初始状态 */
        a:link{
            color: red;
        }
        /* 访问之后 */
        a:visited{
            color: palegreen;
        }
        /* 鼠标悬停的颜色 */
        a:hover{
            color: purple;
        }
        /* 点击激活 */
        a:active{
            color: gold;
        }
    </style>
</head>
<body>
    <a href="http://www.baidu.com/aaa">百度</a>
</body>
</html>