1、CSS简介
①层叠样式表是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
②CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力，简化或优化写法，针对各类人群，有较强的易读性。
2、CSS基础
①最基础的CSS元素及属性
---Style元素
---Font-size设置文本大小的属性
---Color设置文本颜色的属性
②制作一个初级CSS设计
---一共有三种方法创建CSS
*使用元素内嵌样式表
*使用文档内嵌样式表
*使用外部样式表
③层叠样式表的含义等级
④注明：
---元素内嵌样式表不同属性值需要用分号分开来
---文档内嵌样式表一般放在<head>里面
---外部样式表需要创建一个新的CSS文档，如CSS项目里的a.css文档，引入至html文档方式如下：
<link rel="stylesheet" type="text/css" href="a.css" />
---样式表层叠方式优先考虑元素内嵌样式表，然后是文档样式表，最后才是外部样式表。即：
（外部样式表<文档内嵌样式表<元素嵌样式表）
3、CSS基本选择器
| 选择器类型 | 代码 |
|---|---|
| 选择所有元素 | Style 元素：* {} |
| 根据类型选择元素 | Style 元素：a {} Body 元素：<a>星期四</a> |
| 根据类选择元素 | Style 元素：.class1 {} Body 元素：<p class="class1">星期四</p> |
| 根据ID选择元素 | Style 元素：#id1 {} Body 元素：<p id="id1"></p> |
| 根据属性选择元素 | Style 元素：[href] {} Body 元素：<a href="1cssprimary.html">星期四</a> |
| ：选择器动作 | Style 元素：a:hover {} Body 元素：<a>星期四</a> |
①解释：选择器仅出现在文档内嵌样式或者外部样式中，具体用什么选择器根据自己的需求来制作。
②ID选择元素与类（Class）选择元素：
共同点：都可以作为选择器使用，改变该属性外面的元素的样式
不同点：ID选择器叫做唯一选择器，通俗一点就是这个元素的一个身份证，或者说是主键。即在网页或者网页内嵌网页中此ID属性的属性值确保值出现过一次，不能重复使用！
类选择器的属性值可以多次使用，相当于将不同元素如果想要表达出同一效果而进行的分门别类。
③CSS控制边框和背景
| 属性 | 说明 |
|---|---|
| Border-width | 设置边框的宽度 |
| Border-style | 设置边框的样式类型 |
| Border-color | 设置边框的颜色 |
| Border | 设置所有边框 实例：border:5px solid red ; 宽度，样式，颜色 |
| Border-top | 设置上边框 类似有border-bottom(下)、border-left(左)、border-right(右) |
| Border-radius | 设置圆角边框 实例：border-radius：20px/15px 详诉：此实例是一个椭圆的圆角效果，同时设定了四个圆角，即设置圆心离边框左右边距离20px，距离上下边15px。 |
④背景设置
| 属性 | 说明 |
|---|---|
| background-image | 设置背景图片 background-image: url(img/2.jpg); |
| background-repeat | 设置背景重复方式 |
| background-attachment | 设置背景是否跟随划轮滚动 Fixed为不随滚轮移动而移动 |
| background-color | 设置背景颜色 |
| background-size | 设置背景图像的尺寸 |
4、CSS设置文本样式
| 属性 | 说明 |
|---|---|
| Text-align | 对齐文本 属性值：center居中、left左对齐、right右对齐 |
| decoration | 文本方向 属性值：ltr（left to right）从左往右、rtl（right to left）从右到左 |
| letter-spacing | 指定字母（文字）间距 实例：letter-spacing: 10px; |
| line-height | 指定单词间间距（仅英文单词） 实例：line-height: 100px; |
| text-indent | 首行缩进（第一行开头空格像素） 实例：text-indent: 50px; |
| text-decoration | 设置文本装饰 常用属性值： underline 添加下划线 overline 添加上划线 line-through 添加中划线 |
| text-transform | 设置文本大小写转换（仅英语） 常用属性值： capitalize 首字母大写 uppercase 全部字母大写 lowercase 全部字母小写 |
| font-family | 设置字体 实例：font-family: "微软雅黑"; |
| font-size | 设置字体大小 实例：font-size: 40px; |
| font-style | 设置字体样式 值：oblique 倾斜样式 italic 斜体样式 注明：italic倾斜程度比oblique大 |
| font-variant | 指定字母是否以小型大写字母显示 实例：font-variant: small-caps; |
| font-weight | 设置字体粗细 值需要输入100-900整百类型，数值越大字体越粗 实例：font-weight: 900; |
| text-shadow | 创建文本阴影 输入四个值：水平偏移 垂直偏移 模糊程度 模糊颜色 实例：text-shadow: 10px 10px 10px red; |
5、CSS使用过渡
①transition属性
| 属性 | 说明 |
|---|---|
| transition-delay | 规定过渡效果何时开始 实例：transition-delay: 150ms; |
| transition-duration | 规定完成过渡效果需要花费的时间（以秒或毫秒计） 实例：transition-duration: 500ms; |
| transition-property | 规定应用过渡效果的 CSS 属性的名称 实例：transition-property: background-color |
| transition-timing-function | 规定过渡效果的速度曲线 实例：transition-timing-function: linear; |
②animation 属性
| 属性 | 说明 |
|---|---|
| animation-name | 规定@keyframes 动画的名称 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 |
| animation-timing-function | 规定动画的速度曲线。默认是 “ease”，常用的还有linear，同transtion 。 |
| animation-delay | 规定动画何时开始。默认是 0。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1，但我们一般用infinite，一直播放。 |
213
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
