1.什么是CSS
如果说html就像报纸一样，把一些文字图片放到网页上。CSS就是将这个网页进行了美化处理。
CSS，中文翻译为 层叠样式表 (Cascading Style Sheets)。
如果对PS有过了解，就会知道图层的概念，CSS和PS一样，他将一层有一层的效果添加到网页上，使网页变得美观好看，这就是他的作用。
2.基本语法规则
选择器 + 若干属性声明
"td"为选择器，选择所有<td>标签的，并将{}内的属性赋予。
3.写CSS的方式
3.1内部样式
在html文件中使用<style>标签，可以放到任意位置，推荐放到<head>标签中。
3.2内联样式
在html文件中，标签使用“style”属性，针对指定的标签设置样式。不需要写选择器，直接写属性键值对。
3.3外部样式
把CSS代码作为一个单独的.css文件，再在html文件中使用<link>标签引用。
4.选择器
4.1基础选择器
4.1.1标签选择器
在“{”前面写标签的名字，此时意味着选中所有这个名字的标签。
上文已经举了一些例子，在此不过多叙述。
4.1.2类选择器
此处的类，与java中的面向对象的类无关。
可以创建CSS类，手动指定哪些标签应用这个类。
一个标签可以引用一个类，也可以引用多个类。
类选择器是在“{”之前，写"."加类名。
如图所示，在标签的"class"属性中，加上空格就可以选择多个类。
4.1.3 ID选择器
在html中，每一个标签都可以设置一个唯一的id属性，作为元素的身份标识。
ID选择器是在“{”之前，写“#”加id值。
本质上ID选择器是使CSS可以指定一个特定的元素。
4.2“复合选择器”
“复合选择器”本质就是将上面的基础选择器组合一下。
4.2.1后代选择器
简单选择器1+空格+简单选择器2
这里的简单选择器可以是标签，类，id选择器中的任意一个。
如图所示，只要在<ul>标签内部的<li>元素都会被选择，无论是“子元素还是孙子元素。
4.2.2子选择器
简单选择器1+ > +简单选择器2
这里的简单选择器可以是标签，类，id选择器中的任意一个。
如图所示，此选择器缩小了选择范围，只选择子元素，而不选择其他后代元素。
4.2.3并集选择器
简单选择器1 + ， +简单选择器2...
这里的简单选择器可以是标签，类，id选择器中的任意一个。
并集选择器用逗号分割，将多个选择器进行集体声明。
4.2.4伪类选择器
简单选择器 + ： + 选择器选中元素的某个状态
常用的状态：
:hover 鼠标悬停时候的状态
:active 鼠标按下时候的状态
如图所示，第一个按钮点击时会变成红色，第二个按钮悬停时会变成蓝色。
5.常见的CSS属性
5.1字体属性
5.1.1字体家族
font-family 当前使用哪种字体来显示。
这个属性的字体，必须是系统已经安装了的。
5.1.2字体大小
font-size 浏览器的每一个文字都可以视为一个方框。
而字体的大小就是这个方框的大小。
我们基于【5.1.1】的html文件，修改CSS。
5.1.3字体粗细
font-weight 实际设置的时候有两种设置风格：单词和数字。
举例一些设置使用的单词：
（1）normal 正常粗细，等值为400。
（2）bold 加粗，等值为700。
（3）lighter 比从父元素继承来的值更细。
（4）bolder 比从父元素继承来的值更粗。
基于上诉使用的html和css，增加字体粗细。
5.1.4文字样式
font-style 比如我们这里使用让文字倾斜和取消文字倾斜的样式。
让一个<div>标签内的文字正常情况下是倾斜的，鼠标悬停时是不倾斜的。
5.2文本属性
5.2.1文字颜色
color 用于表示文本颜色。
在这里有三种表示颜色的方法：
（1）英文单词，例如：red、blue等等。
（2）rgb（#，#，#） #代表数字或者颜色的英文单词。
（3）#ff0000 类似于这样子也可以写成#f00，但是必须要满足#aabbcc的条件，这里aabbcc只是指带。
（2）和（3）其实都一样，用rgb的表示方法，红绿蓝各占一个字节，0~255，（2）用的十进制，（3）用的十六进制。
5.2.2文本对齐
text-aligin 来设置对齐方式
居中 center
靠左 left
靠右 right
如图所示，设置了一个200像素 * 200像素的div块，让文字在其内部居中、靠左、靠右。
5.2.3文本装饰
text-decoration 设置文本装饰
装饰的值有：
underline 给文字添加下划线。
none 无装饰，可以用来给a标签去下划线。
overline 上划线，不是很常用。
line-through 删除线，也不是很常用。
在这里为了显示效果，更明显，我添加了一些内边距，就是让显示出来的文字行与行之间有所分隔开来。具体内边距是什么，在博客后续会继续介绍。
5.2.4文本缩进
text-indent 经常用于段落开头时的缩进。
在这里有两种表示缩进值的单位：
一种是px，是像素，像素不太好控制。
另一种是em，是相对值，是以文字尺寸为基础进行设置的，1em就是一个字的缩进。
比较常用的还是em。
5.2.5行高
首先，我们要对CSS中的行高进行理解。
行高 = 文字高度 + 行间距。
行间距就是一行文字的上边距和下边距。上边距和下边距的距离是相等的。
我们通过控制文本的字体大小和行高，就能实现控制行间距。
line-height 来控制行高。
此时行间距就是80px减去16px，就为64px，上下边距就为32px。
5.3背景属性
5.3.1背景颜色
background-color 设置背景颜色
5.3.2背景图片及相关属性配置
background-image:url(图片路径)
引入背景图片后默认是平铺的。
如图所示如果需要取消平铺，使用background-repeat:no-repeat;
静止平铺后，图片出现在左上角，我们需要背景图片居中，使用background-position属性。
此时我们再将图片尺寸设置为100%（100%指的是按照其父元素一般大小），使用background-size。
6.CSS中的常用功能及模式
在学习常用功能之前，我们首先需要把浏览器的默认样式给去除掉。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}6.1“圆角矩形”以及“圆形”的实现
html元素默认都是一个个的矩形，比如我们这里使用一个200px * 200px的div，来帮助理解。
这里我们使用border-radius: length;来实现圆角矩形。首先我们先理解是如何实现的，其本质其实是一个内切圆。
length是一个内切圆的半径。
现在就实现了一个圆角矩形。
当内部的内切圆半径逐渐变大，大到一定程度时，就会变成一个圆形。当然这是基于这个div是一个正方形的基础。
此时内切圆半径为这个“正方形边长”的一半。
这个其实在实际使用中很有用，比如头像的实现，一些按钮等等。
6.2设置元素的显示模式
在html中，有块级元素和行内元素。
那么，块级元素和行内元素有什么区别呢：
（1）块级元素会独占一行，行内元素不独占一行。
（2）块级元素，高度、宽度、内外边距都是可以设置的。行内元素，高度、宽度、行高无效，内边距有效，外边距不确定是否有效（此处内外边距为下面盒子模型内容）。
（3）块级元素默认宽度和父元素一致。行内元素默认宽度和里面的内容一样宽。
综上所述，真正使用时，还是建议使用块级元素
使用display属性，设置元素的显示模式。
display:blok; 块级元素。
display:inline；行内元素。
我们在此举一个例子：
此时他为原生的块级元素，独占一行。
此时已经设置为了行内元素。
6.3盒子模型
每一个html元素就相当于一个矩形的盒子，由边框、内容、内边距、外边距构成。
如图所示：
6.3.1边框
设置边框需要设置三个方面：粗细、颜色、风格（实线、虚线...）
border属性，同时设置四条边的粗细。还可以使用border-left、border-right、border-top、border-bottom来单独设置左、右、上、下边框的粗细。
border-style属性，边框样式，默认是无边框的，solid实线边框、dashed虚线边框、dotted点线边框。
border-color属性，边框颜色，与其他颜色属性类似。
还有一种比较省略的写法 border:边框粗细 边框样式 边框颜色;
边框会把盒子给撑大，如图所示：
如果不要盒子被撑大，我们需要使用box-sizing属性。
此时其就满足我们给设置的高度与宽度。
6.3.2内边距
padding属性内容与边框之间的距离。
基于上述div，我们对其css部分进行了修改。
此时其四个方向的内边距都为10像素。
绿色部分就是内边距。
还有其他写法:
padding:10px 10px; 表示上下为10，左右为10
padding:10px 10px 10px; 表示上10，左右10，下10
padding:10px 10px 10px 10px; 表示 上10 左10 下10 右10
6.3.3外边距
margin 设置的是元素和元素之间的距离。
margin的写法与padding类似，
margin:10px 上下左右都为10
margin:10px 10px; 表示上下为10，左右为10
margin:10px 10px 10px; 表示上10，左右10，下10
margin:10px 10px 10px 10px; 表示 上10 左10 下10 右10
margin还有一个特殊用法。
把margin-left和margin-right设置为auto（让浏览器自动调节），此时元素就能在父元素内部居中放置。
对于垂直居中，margin无法实现。
6.4弹性布局
弹性布局是用来解决，元素水平方向排列的问题。行内元素虽然是在水平方向排列的，但是不适合进行水平布局，很多东西不可控。
比如：我们可以使用弹性布局实现导航栏等等。
6.4.1开启弹性布局
display:flex;给要进行水平排列元素的父元素，设置flex。
此时，这个父元素我们可以称为“弹性容器”，其内部的元素则变为“弹性元素”，遵守弹性布局，可以设置尺寸和边距了。
6.4.2设置元素水平方向的排列方式
未指定时，元素从左到右排列。
justify-content: space-around;平分剩余空间，如图所示，每个元素之间的间隔相同。
justify-content: space-between左右元素贴紧两边，再平分剩余空间。
justify-content: center元素居中排列。
justify-content: flex-end元素全部排列到右侧。
6.4.3设置元素垂直方向的排列方式
align-items属性。
stretch，行拉伸占据剩余空间。
center，在弹性容器的中间。
flex-start，在弹性容器的上面。
flex-start，在弹性容器的下面。
space-between，行均匀分布。
space-between，行均匀分布，两端各占一半。
这些属性值都与水平方向类似。
3141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
