CSS

最新推荐文章于 2024-10-18 11:46:13 发布

qq_45794778

最新推荐文章于 2024-10-18 11:46:13 发布

阅读量36

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_45794778/article/details/114292528

版权

1.CSS技术介绍

CSS是层叠样式表单。适用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

CSS注释：/ *注释内容 * /

2.CSS和HTML的结合方式

在标签的style属性上设置“key：value value”，修改标签样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="border: 1px solid red">div 标签1</div>
<div style="border: 1px solid red">div 标签2</div>
<span style="border: 1px solid red">span 标签1</span>
<span style="border: 1px solid red">span 标签2</span>
</body>
</html>

缺点：

标签多了，样式多了，代码量非常庞大
可读性非常差
CSS代码没什么复用性

在head标签中，使用style标签来定义各种自己需要的CSS样式

×××{

key：value value；

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            border:1px solid red;
        }
        span{
            border:1px solid red;
        }
    </style>
</head>
<body>
<div>div 标签1</div>
<div>div 标签2</div>
<span>span 标签1</span>
<span>span 标签2</span>
</body>
</html>

把CSS样式写成一个单独的CSS文件，通过link标签引入即可复用

div{
    border:1px solid yellow;
}
span{
    border:1px solid red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css-1.css"/>
</head>
<body>
    <div>div 标签1</div>
    <div>div 标签2</div>
    <span>span 标签1</span>
    <span>span 标签2</span>
</body>
</html>

3.CSS选择器

3.1 标签名选择器

标签名{

属性：值；

}

标签名选择器可以决定哪些标签被动地使用这个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            border:1px solid yellow;
            color:blue;
            font-size:30px;
        }
        span{
            border:5px dashed blue;
            color:yellow;
            font-size:20px
        }
    </style>
</head>
<body>
<div>div 标签1</div>
<div>div 标签2</div>
<span>span 标签1</span>
<span>span 标签2</span>
</body>
</html>

3.2 id选择器

#id 属性值{

属性：值

}

id选择器，可以通过id属性选择性去使用这个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        #id001{
            color:blue;
            font-size:30px;
            border:1px yellow solid;
        }
        #id002{
            color:red;
            font-size:20px;
            border:5px blue dotted;
        }
    </style>
</head>
<body>
<div id="id001">div 标签1</div>
<div id="id002">div 标签2</div>
</body>
</html>

3.3 class选择器（类选择器）

.class 属性值{

属性：值；

}

class类型选择器，可以通过class属性有效地选择性去使用这个样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .class01{
            color:blue;
            font-size:30px;
            boeder:1px solid yellow;
        }
        .class02{
            color:grey;
            font-size:26px;
            border:1px solid red;
        }
    </style>
</head>
<body>
<div class="class01">div标签1</div>
<div class="class02">div标签2</div>
</body>
</html>

3.4 组合选择器

选择器1，选择器2，选择器n{

属性：值；

}

组合选择器可以让多个选择器共用同一个CSS样式代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .class01,#id01{
            color:blue;
            font-size:20px;
            border:1px yellow solid;
        }
    </style>
</head>
<body>
<div class="class01">div 标签</div>
<div id="id01">div 标签</div>
</body>
</html>