CSS是指层叠样式表(Cascading Style Sheets)，它是一种用来描述HTML或XML等文档如何呈现的语言。CSS描述了文档的内容应该如何被渲染到屏幕、纸张或其他媒体上。
一、基础概念
1、CSS的组成
/*样式表由选择器和声明块组成*/
selector{
property:value;
property2:value2;
}
其中，选择器选择需要改变样式的HTML元素，声明块由一个或多个属性-值对组成，定义需要改变样式的具体属性及其值。
2、CSS的三种样式
- 内联样式：在HTML标签中直接写入样式，优先级最高。
- 内部样式：在HTML中使用<style></style>标签定义样式，作用于整个页面。
- 外部样式：在外部CSS文件中定义样式，通过<link>标签引入HTML文件中，作用于整个站点。
二、CSS选择器
1、元素选择器
/*按HTML标签选择*/
p{
color:red;
}
2、类选择器
/*按类名称选择*/
.className{
color:red;
}
/*HTML中应用*/
<p class="className">Hello World!</p>
3、ID选择器
/*按ID名称选择*/
#idName{
color:red;
}
/*HTML中应用*/
<p id="idName">Hello World!</p>
4、通配符选择器
/*对所有HTML元素应用样式*/
*{
color:red;
}
5、后代选择器
/*选取某元素下的子元素*/
ul li{
color:red;
}
三、CSS盒模型
1、什么是CSS盒模型
CSS盒模型是指一个HTML元素由内容、内边距、边框和外边距组成的矩形框，决定了元素在页面上所占的空间。
2、盒模型的组成
/*内容区(Width & Height)*/
{
width:200px;
height:100px;
}
/*内边距(Padding)*/
{
padding:10px; /*四周内边距*/
padding-top:20px; /*上内边距*/
padding-right:20px; /*右内边距*/
padding-bottom:20px; /*下内边距*/
padding-left:20px; /*左内边距*/
}
/*边框(Border)*/
{
border:1px solid #000; /*四周边框*/
border-top:2px dashed #000; /*上边框*/
border-right:2px dashed #000; /*右边框*/
border-bottom:2px dashed #000; /*下边框*/
border-left:2px dashed #000; /*左边框*/
}
/*外边距(Margin)*/
{
margin:10px; /*四周外边距*/
margin-top:20px; /*上外边距*/
margin-right:20px; /*右外边距*/
margin-bottom:20px; /*下外边距*/
margin-left:20px; /*左外边距*/
}
四、CSS布局
1、基本布局方法
- 定位布局(position)
- 浮动布局(float)
- 弹性盒子布局(flex)
2、定位布局
/*relative相对定位；absolute绝对定位*/
#box{
position:relative;
left:10px;
top:10px;
}
#box2{
position:absolute;
left:20px;
top:20px;
}
3、浮动布局
/*float实现左右布局，clear清除浮动*/
.left{
float:left;
}
.right{
float:right;
}
.clear{
clear:both;
}
4、弹性盒子布局
/*实现灵活分布和对齐*/
.box{
display:flex;
justify-content:center; /*水平对齐*/
align-items:center; /*垂直对齐*/
}
五、CSS动画
1、CSS3实现动画
/*定义动画*/
@keyframes myanimation{
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
/*调用动画*/
#box{
animation:myanimation 2s linear infinite;
}
2、CSS动画属性
- animation-name：指定动画名称
- animation-duration：指定动画时长
- animation-timing-function：指定动画的时间函数
- animation-delay：指定动画延迟
- animation-iteration-count：指定动画执行次数
- animation-direction：指定动画方向
六、CSS预处理器
1、什么是CSS预处理器
CSS预处理器是一种语言，其可以在推出之前编译成CSS。它通过一些基本的编程风格，如变量、循环、函数等，来更好地组织和维护CSS代码。
2、常见的CSS预处理器
- Sass
- Less
- Stylus
七、CSS框架
1、什么是CSS框架
CSS框架是一系列预先编写好的样式集，在开发过程中可用以构建网站或应用程序。框架提供了用于排版、样式、设计元素和JavaScript插件等基础的代码和文件。
2、常见的CSS框架
- Bootstrap
- Foundation
- Bulma
八、总结
本文中介绍了CSS的基础概念、选择器、盒模型、布局、动画、预处理器和框架等多个方面。相信通过学习本文，读者们已经有了深入了解并掌握了CSS的必要知识。
