CSS笔记

最新推荐文章于 2024-09-27 11:01:06 发布

AHawkeye

最新推荐文章于 2024-09-27 11:01:06 发布

阅读量148

点赞数

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

本文链接：https://blog.csdn.net/AHawkeye/article/details/117674867

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS介绍

在这里插入图片描述

CSS和HTML结合方式

在标签的style属性上设置

在这里插入图片描述

如果样式多了，代码量非常庞大，而且可读性差，且没有复用性。

在head标签中，使用style标签来定义需要的css样式。

xxx{
key:value value;
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css代码-->
    <style type="text/css">
        div{
            border: 1px solid red;
        }

    </style>
</head>
<body>
    <div>my first css</div>
    <div>my first css</div>
    <span>my first css</span>
    <span>my first css</span>
</body>
</html>

在这里插入图片描述
div都有效。

这样span也有效。实现了css复用。
缺点

导入css文件

在这里插入图片描述

CSS选择器

标签名选择器

在这里插入图片描述

id选择器

在这里插入图片描述

class选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css代码-->
    <style type="text/css">
        .class01{
            border: 1px solid yellow;
            color: blue;
            font-size: 20px;
        }

        .class02{
            border: 1px dashed red;
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="class01">my first css</div>
    <div class="class02">my first css</div>
    <span class="class01">my first css</span>
    <span class="class01">my first css</span>
</body>
</html>

在这里插入图片描述
id不可重复 class可重复
注意id是#开头 class是.开头

组合选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css代码-->
    <style type="text/css">
        #id01,.class01{
            border: 1px solid blue;
            color: green;
            font-size: 20px;
        }

        .class02{
            border: 1px dashed red;
            color: blue;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div id="id01">my first css</div>
    <div class="class02">my first css</div>
    <span class="class01">my first css</span>
    <span class="class01">my first css</span>
</body>
</html>