CSS

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的必要知识。