0基础速通CSS
一、基础认知
1、作用
• 给页面中的HTML标签设置样式
2、CSS 语法规则
css写在style标签中，style标签一般写在head标签里面，title标签下面
常见属性：
3、常见引入方式
• 内嵌式 • 外联式 • 行内式
4、选择器
1、标签选择器
结构：标签名 { css属性名：属性值； }
➢ 作用：通过标签名，找到页面中所有这类标签，设置样式
2. 类选择器
结构：标签名 { css属性名：属性值； }
➢ 作用：通过标签名，找到页面中所有这类标签，设置样式
3. id选择器
➢ 结构：#id属性值 { css属性名：属性值； } ➢ 作用：通过id属性值，找到页面中带有这个id属性值的标签，设置样式
4. 通配符选择器
结构：* { css属性名：属性值； } ➢ 作用：找到页面中所有的标签，设置样式
5. 复合选择器
后代选择器：空格 选择器语法：选择器1 选择器2 { css }
子代选择器：> 选择器语法：选择器1 > 选择器2 { css }
6. 并集选择器
选择器语法：选择器1 ， 选择器2 { css }
7. 交集选择器：紧挨着 选择器语法：选择器1选择器2 { css }
8. hover伪类选择器 选择器语法：选择器:hover { css }
结构伪类选择器
9、伪元素
5、字体和文本样式
1、字体大小
属性名：font-size ➢ 取值：数字 + px
2、字体粗细
属性名：font-weight
3、字体样式（是否倾斜）
属性名：font-style
4、字体系列
属性名：font-family
font (复合属性)
取值： • font : style weight size family;
5. 文本缩进：text-indent
6. 文本水平对齐方式：text-align
7. 文本修饰：text-decoration
8、行高
属性名：line-height
可以看成是上下的内边距加上字体高度
6、背景相关属性
背景颜色 属性名：background-color（bgc）
背景图片 属性名：background-image（bgi）
背景平铺 属性名：background-repeat（bgr）
背景位置 属性名：background-position（bgp）
背景相关属性的连写形式 推荐：background：color image repeat position
7、元素显示模式
1. 块级元素代表标签： • div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer
2. 行内元素代表标签： • a、span 、b、u、i、s、strong、ins、em、del…
3. 行内块元素代表标签： • input、textarea、button、select……
4. 元素显示模式转换 
8、居中方法
9、CSS 三大特性
1. 继承性 2. 层叠性 3. 优先级
10、盒子模型
CSS 中规定每个盒子分别由：
内容区域（content）、 内边距区域（padding）、
边框区域（border）、 外边距区域（ margin）
构成，这就是盒子模型
1、宽度和高度 属性：width / height
1、边框（border）
1、内边距（padding）
自动内减 • 操作：给盒子设置属性 box-sizing : border-box ; 即可
外边距（margin）- 取值
清除默认内外边距 
浮动
作用：网页的横向布局
清除浮动的方法
定位
可以让元素自由的摆放在网页的任意位置
常用：1. 静态定位 2. 相对定位 3. 绝对定位 4、子绝父相
装饰
边框圆角 属性名：border-radius
溢出部分显示效果 
精灵图
场景：项目中将多张小图片，合并成一张大图片，这张大图片称之为精灵图的优点：减少服务器发送次数，减轻服务器的压力，提高页面加载速度
1. 创建一个盒子
2. 通过PxCook量取小图片大小，将小图片的宽高设置给盒子
3. 将精灵图设置为盒子的背景图片
4. 通过PxCook测量小图片左上角坐标，分别取负值设置给盒子的background-position：x y
阴影
文字阴影 属性名：text-shadow
盒子阴影 属性名：box-shadow
过渡
属性名：transition
SEO（Search Engine Optimization）：搜索引擎优化
1. title：网页标题标签
2. description：网页描述标签
3. keywords：网页关键词标签
ico图标设置
二、项目搭建
在学习完css和html之后，我们可以进行项目的搭建了：
以小兔新网站为例
1、建立文件夹
1、基础公共样式：
一般项目开始前，首先会 去除掉浏览器默认样式，设置为 当前项目需要的初始化样
常见有：
2、重复样式：
对相同样式进行编辑，达到简少代码量的效果
3、首页样式：
对首页个性样式进行编辑
2、链接
在index.html中运用link将css与html进行链接
项目链接与展示如下
(小兔鲜）：小兔鲜.rar - 蓝奏云
（学成在线）: 学成在线.rar - 蓝奏云
