CSS笔记

最新推荐文章于 2024-07-18 17:34:14 发布

AHawkeye

最新推荐文章于 2024-07-18 17:34:14 发布

阅读量135

点赞数

分类专栏：前端文章标签： 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>

在这里插入图片描述
这里就是组合选择器

CSS常用样式

颜色

在这里插入图片描述

宽度

在这里插入图片描述

高度

在这里插入图片描述

背景颜色

在这里插入图片描述

字体样式

在这里插入图片描述

边框

在这里插入图片描述

DIV居中

在这里插入图片描述

文本居中

在这里插入图片描述

超链接去下划线

在这里插入图片描述

表格细线

在这里插入图片描述

列表去除修饰

在这里插入图片描述

AHawkeye

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记

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>
复制链接

扫一扫