这是我参与「第四届青训营」笔记创作活动的第2天

引言

再上一篇文章中，我们解决了**什么是前端的问题**以及前端三大件中**HTML**的相关知识，今天我们将介绍前端三大件中的**CSS**相关知识，一起来看看吧！

CSS详解

CSS 指层叠样式表 (Cascading Style Sheets)，编辑好的HTML需要增添一些样式来保证美观性，编辑一个简单的CSS文档就可以改变所有页面的布局和外观。

！！！ CSS文件的后缀为.css，通过后缀可以快速查看文件！！！！

1、CSS解析

h1 {
    color: white;
    font-size: 14rpx;
}

从以上代码中可以看出：

h1为选择器，通常是需要改变样式的HTML元素。
CSS的每条声明均由一个属性和一个属性值组成。
属性是希望设置的样式属性，每个属性有一个值。属性和值被冒号分开。

2、CSS语法

1、CSS声明总是以分号 ; 结束，声明总以大括号 {} 括起来:

2、CSS注释以 /* 开始, 以 */ 结束，注释是用来解释你的代码，并且可以随意编辑，编译时会忽略它。

/*这是第一个注释*/
h1 { 
text-align:center; 
/*这是第二个注释*/ 
color:black; 
}

3、CSS背景

属性	描述
background-color	定义元素的背景颜色
background-image	把图像设置为背景
background-repeat	设置背景图像是否及如何重复
background-attachment	背景图像是否固定或者随着页面的其余部分滚动
background-position	设置背景图像的起始位置

4、CSS文本

属性	描述
color	设置文本颜色
direction	设置文本方向
text-align	对齐元素中的文本
word-spacing	设置字间距

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>测试一下</title> 
<style>
    h1 {color:red;}
    p.date {text-align:right;}
</style>
</head>

<body>
    <h1>CSS 测试实例</h1>
    <p class="date">2022 年 7 月 27 号</p>
</body>

</html>

结果如下：

MIVXKJX%1NY(1NTO)5KWP`X.png

5、CSS间距

Margin(外边距) 清除边框外的区域，外边距是透明的。
Border(边框) 围绕在内边距和内容外的边框。
Padding(内边距) 清除内容周围的区域，内边距是透明的。

6、CSS浮动

CSS 的 Float（浮动） ，往往是用于图像，它会使元素向左或向右移动，其周围的元素也会重新排列。

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear 属性。

总结

CSS 可以用来添加背景、格式化文本、以及格式化边框，并定义元素的填充和边距。

同时，CSS还有很多关于如何定位元素、控制元素的可见性和尺寸、设置元素的形状、将一个元素置于另一个之后，以及向某些选择器添加特殊的效果，比如链接等功能。未来我们一起探讨！！！

接下来，我们将学习JavaScript,一起加油吧！！！

烟火向星辰，所愿皆成真！

，

前端小结之CSS的看过来| 青训营笔记

引言