HTML5+CSS3基础学习笔记（二）
CSS层叠样式表（一）
一.CSS简介
1.HTML的局限性
HTML只关注内容的语义，
CSS可以设置html页面的文本内容（字体、大小、对齐方式）、
图片的外形（宽高、边框样式、边距）
以及版面的布局和外观的显示样式。
2.CSS-网页的美容师
CSS是层叠样式表（Cascading Style Sheets）的简称，有时称之为CSS样式表
CSS最大价值：
由HTML专注去做结构呈现，样式交给CSS，即
结构（HTML）与样式（CSS）相分离。
结构（HTML）与样式（CSS）相分离。
结构（HTML）与样式（CSS）相分离。
3.CSS语法规范
3.1
CSS规则由两个主要部分构成：选择器以及一条或多条声明。
CSS标签都写在style标签中
选择器（给谁改样式）{样式声明（改什么样式）}
3.2
属性和属性值用“：”分开
多个键值对之间用“；”分开
4.CSS代码风格
4.1 样式格式书写
1.紧凑型格式
2.展开型格式
4.2 样式大小写风格
一般使用小写字母
4.3 样式空格风格
冒号后面一个空格
选择器和花括号之间一个空格
二.CSS基础选择器
1.CSS选择器的作用
1.1 把标签选出来
2.选择器的分类
2.1基础选择器
由单个选择器组成
1.标签选择器：把某一大类的标签全部选出来
2.类选择器：单独选一个或者某几个标签 （最常用）
1.在要改变的地方添加class=“名称”属性，然后直接 .名称 就是一个选择
2.类命名有一个习惯规范：
header content footer nav（导航栏） sidebar（侧栏） column（栏目）
loginbar（登录条） logo hot（热点） news download subnav（子导航）
submenu（子菜单）
3.可以同时定义多个类名，用空格分开
可以将共同要修改的样式放置在同一个类里，以便于大量统一修改，
然后各自要 修饰的属性再新增独立的类名，在创建相应的选择器
3.id选择器
1.和类选择器差不多，都可以指定选择来修改
只是把class换成了id .换成了#
2.和类选择器的区别是 id选择器只能调用一个
一般用于页面当中唯一的元素上，经常和JS搭配使用
4.通配符选择器
选取页面中所有的标签 只需一个 *
5.总结
2.2复合选择器
包括标签选择器、类选择器、id选择器、通配符选择器
三.CSS字体属性 font
定义字体系列、大小、粗细、文字样式
1.字体系列
1.1用font-family属性定义文本的字体系列
2字体大小
2.1用font-size属性定义文本的字体大小
px（像素）大小是网页最常用的单位
标题需要重新指定大小，不会被全局文本大小影响
3.字体粗细
3.1用font-weight属性设置文本字体的粗细
实际开发中更提倡用数字表示加粗
不会的可以翻阅DHTMLET - Cascading Style Sheet 2.0 中文手册
3.2 normal 默认值、不加粗
bold定义粗体
100-900 400等同于normal 700等同于粗体
4.字体样式
4.1用 font-style属性设置文本的风格
normal代表默认值
italic代表倾斜
一般都是用normal把字体变得不倾斜
5.font复合属性写法
5.1按一定顺序一次性写出全部字体属性
font: [font-style] [font-weight] [font-size/font-height] [font-family]
必须元素：字体大小size和字体系列
font:italic 700 16px "黑体"
font:16px "黑体" 16px和黑体不可以省
6.字体属性总结
四.CSS文本属性 text
定义文本的外观：文本的颜色、对齐文本、装饰文本、文本缩进、行间距。
1.文本颜色
1.1color属性定义文本颜色
2.对齐文本
2.1text-align属性设置对齐方式
center居中 right右对齐 left左对齐
给图片加居中对齐的时候，不能直接在img里，要在p或者div里面
3.装饰文本
3.1text-decoration属性添加下划线、删除线、上划线
一般用于去掉链接的默认下划线，直接改成none。
4.文本缩进
4.1 text-indent让文本段落首行缩进
4.2单位有px和em
em是一个相对单位。表示当前元素文字的大小
5.行间距
5.1line-height 设置行间的距离（行高）
上间距到下间距的总值
6.文本属性总结
五.CSS的引入方式
1.CSS的三种样式表
1.1 行内样式表（行内式）
1.2 内部样式表（嵌入式）
1.3 外部样式表（链接式）
2.内部样式表
2.1将全部的CSS代码全部写到style标签里面
style可以放在HTML任何处，但一般放在head里，没有实现结构和样式完全分离
3.行内样式表
3.1元素标签内部直接使用style属性
4.外部样式表
4.1样式单独写到CSS里，之后再把文件引入HTML
4.2新建CSS文件，直接写样式，不用写标签
用link标签引入css文件：
<link rel="stylesheet" herf="css文件路径">
六.chome调试工具
用来调试HTML结构和CSS样式
6.1使用调试工具检查错误
1.左边HTML元素结构，右边CSS样式
2.ctrl+0恢复原浏览器的大小
3.若点击元素。右侧无样式引入，极有可能是类名或者引入样式错误
4.如果有样式，但有黄色叹号提示，则是样式属性书写错
5.调试完之后把代码复制回去