CSS基础、选择器与权重、盒子模型
一、CSS的字体属性
CSS Fonts（字体）属性用于定义字体系列，例如大小、粗细、和文字样式（斜体之类）。
1.字体
CSS使用font-family属性定义文本的字体系列。
p{font-family:"微软雅黑";}
各种字体之间必须使用英文状态下的逗号隔开一般情况下，如果有空格隔开的多个单词组成的字体，加引号尽量使用系统默认自带字体，保证在各个浏览器都能显示常见字体：body{font-family:‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’;}
2.字体大小
CSS使用font-size属性定义字体大小。
p{font-size:20px;}
px(像素）大小是我们常用单位
3.字体粗细
CSS使用font-weight属性设置文本字体的粗细。
p{font-weight:bold;}
实际开发中，更喜欢用数字表示粗细。
4.字体样式
CSS使用font-style属性设置文本风格。
p{font-style:normal;}
5.综合实例
p.a {font: 20px Arial, sans-serif;}p.b {font: italic bold 12px/30px Georgia, serif;}
二、CSS的文本属性
CSS Text(文本）属性可定义文本的外观，如颜色、对其文本、装饰文本、文本缩进、行间距等。
1.文本颜色
color属性用于定义文本颜色
body {color: blue;}
颜色名 - 比如 “red” 十六进制值比如 “#ff0000” RGB 值比如 “rgb(255,0,0)”
2.对齐文本
text-ailgn属性用于设置元素内文本内容的水平对齐。
h1 {text-align: center;}
3.装饰文本
text-decoration属性规定添加到文本的修饰，例如下划线，删除线，上划线等。
h1 {text-decoration: overline;}h2 {text-decoration: line-through;}h3 {text-decoration: underline;}
4.文本缩进
text-indent属性用来指定文本的第一行的缩进，通常是将段落的首行缩进。
em是一个相对单位，是当前元素一个文字的大小，如果没有当前元素设定的大小，则按照父元素的一个文字大小。
p {text-indent: 2em;}
例如：
5.行间距
line-height属性用于设置行间距离，可以控制文字行与行之间距离。
p{line-height:40px;}
三、CSS的三种样式表
按照CSS样式书写的位置（或引入的方式）不同，CSS样式可以分为三大类：
行内样式表（行内式）内部样式表（嵌入式）外部样式表（链接式）
1. 内部样式表
内部样式表（内嵌样式表）是写到html页面内部，是将所有的CSS代码抽取出来，单独放到一个< style > 标签中。
<style>div{color:red;font-size:12px;}</style>
效果如下：
< style >标签理论上可以放到HTML文档的任何地方，但一般都会放在文档的< head >标签中通过这种方式，可是方便控制当前整个页面中的元素样式设置。代码结构清晰，但是并没有实现结构与样式完全分离。使用内部样式表设定CSS，通常也被称为嵌入式引入，这种方式是我们联系时常用的方式。
2.行内样式表
行内样式表（内联样式表）是在元素标签内部的style属性中设定CSS样式，适合于修改简单样式。
<div style="color:pink; font-size:40px;">青春不常在</div>
效果如下：
style 其实就是标签的属性在双引号中间，写法要符合CSS规范可以控制当前的标签设置样式由于书写繁琐，不推荐大量使用该方法通常被称为行内式引入。
3.外部样式表
实际开发都是外部样式表，适合于样式比较多的情况，核心是样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用。通常又称为外联式引入。
引入步骤：
新建一个后缀名为.css的样式文件，把所有CSS代码放入此文件中。在HTML页面中，使用< link >标签引入这个文件。
<!DOCTYPE html><html><head><link rel="stylesheet" href="/demo/css/mystyle.css"></head><body><h1>This is a heading</h1><p>This is a paragraph.</p></body></html>
效果如下：
四、CSS基础选择器及权重
选择器（选择符）就是根据不同需求把不同的标签选出来这就是选择器的作用。简单来说，就是选择标签用的。
基础选择器是由单个选择器组成的基础选择器又包括：标签选择器、类选择器、id选择器和通配符选择器。
1.标签选择器
标签选择器（元素选择器）是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签制定统一的CSS样式。
把某一类标签全部选出来，快速为同类型的标签统一设置样式不能设置差异化样式。
2.类选择器
差异化选择不同的标签，单独选一个或几个标签，可以用类选择器。类选择器在HTML中用class属性表示，在CSS中，用"."表示。
3.id选择器
id选择器可以为标有特定id的HTML元素指定特定的样式。HTML元素用id属性来设置id选择器，CSS中用“#”来定义。
4.通配符选择器
在CSS中，通配符选择器使用“*”定义，它表示选取页面中所有元素。
5.选择器权重
权重由四组数字组成，但是不会进位值从左到右，左面最大，一级大于一级，级别之间不可超越。
五、CSS样式的三大特性
CSS有三大特性：层叠性、继承性、优先级
1.层叠性
相同选择器给设置相同的样式，此时一个样式就会覆盖另一个冲突的样式，主要解决样式冲突。
层叠性原则：
样式冲突，遵循就近原则，那个样式离得近，就执行那个样式不冲突，不会层叠
2.继承性
子标签会继承父标签的某些样式，如文本颜色和字号。简单的理解就是：子承父业。
恰当地使用继承可以简化代码子元素可以继承父元素的样式（text-，font-等）
3.优先级
当同一个元素指定多个选择器，就会有优先级的产生
选择器相同，执行层叠性选择器不同，根据选择器权重（见选择器权重）执行类选择器永远大于元素选择器，id选择器永远大于类选择器继承的权重是0。
六、行内元素、块元素特点及转换
HTML元素一般分为块元素和行内元素两种类型
1.块元素
常见块元素有< h1 > ~ < h6 >、< div >、< ul >、< ol >、< li >等，其中< div >标签是最典型的块元素。
块元素的特点：
自己独占一行高度，宽度，内外边距都可以控制宽度默认为容器的100%是一个容器及盒子，里面可以放行内或块级元素文字类元素（例如< p >、< h1 > ~ < h6 >)内不能使用块级元素
2.行内元素
常见行内元素有< a >、< strong >、< span >、< ins >、< b >、< em >、< i >、< del >、< s >、< u >等，其中< span >标签是最典型的行内元素，有的地方也将行内元素称为内联元素。
行内元素的特点：
相邻行内元素在一行上，一行可以显示多个高、宽不能设置默认宽度为本身宽度只能容乃文本或其他行内元素链接里不能再放链接,特殊情况下< a >里面可以放块级元素
3.行内块元素
在行内元素中有几个特殊的标签< img >、< input >、< td >,它们同时具有块元素和行内元素的特点，被称为行内块元素。
行内块元素特点：
和相邻行内元素（行内块）在一行上，但会有空白缝隙，一行可以显示多个。默认宽度为本身宽度高度、行高、内外边距可以控制
4.元素模式转换
一个模式的元素需要另外一种模式的特性
转换为块元素：display:block;转换为行内元素：display:inline;转换为行内块：display:inline-block;
七、盒子模型（Box Model）
页面布局要学习三大核心，盒子模型，浮动和定位。
1.盒子模型的组成
所谓盒子模型，就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括边框、外边距、内边距和实际内容。
border边框content内容padding内边距margin外边距
2.边框（border）
border可以设置元素的边框，边框由三部分组成，边框宽度（粗细）、边框样式、边框颜色
边框属性允许指定一个元素边框的样式和颜色。边框会影响盒子实际大小。解决办法：用width/height减去多出来的边框大小
3.内边距（padding）
padding属性用于设置内边距，即边框与内容之间的距离。
padding属性可以有一到四个值
padding影响了盒子实际大小，会增大盒子实际大小。解决办法：用width/height减去多出来的内边距大小
4.外边距（margin）
margin属性用于设置外边距，即控制盒子和盒子之间的距离。
清除内外边距
5.实例
<html><head><title>css 盒子模型</title><meta http-equiv="content-type" content="text/html;charset=utf-8"/><style type="text/css">div{width:300px;height:300px;padding-top:50px;}#h1{width:650px;}#h2{width:650px;}#d1{border:dashed 5px red;float:left;margin-left: 10px auto;text-align:center;}#d2{border:solid 5px yellowgreen;float:left;margin-bottom: 10px;}#d3{border:dotted 5px orange;float:left;margin-right:10px;}#d4{border:solid 5px magenta;float:left;}#h1,#h2{width:650px;margin-top:20px;margin:auto;}</style></head><body><h3 align="center">css 盒子</h3><hr size="30" color="aquamarine"/><div id="h1"><div id="d1">第一部分</div ><div id="d2">第二部分</div></div><div id="h2"><div id="d3">第三部分</div><div id="d4">第四部分</div></div></body></html>
效果如图所示：
