CSS入门
从CSS 样式代码插入的形式来看基本可以分为以下3种：内联式（直接写入标签内）、嵌入式（写入html网页的代码中）和外部式（外链式）三种。优先级：内联式>嵌入式>外部式。嵌入式css样式的位置一定在外部式的后面。如右代码编辑器就是这样，代码在...代码的前面（实际开发中也是这么写的）。
其实总结来说，就是--就近原则（离被设置元素越近优先级别越高）
若css和html不分离(嵌入式)，则需在<head>标签内，加入<style>标签，在里面设置文本样式。
外部式就是把css代码写在一个单独的外部文件中，这个css样式文件以.css为扩展名，在<head>标签内使用<link>标签将css外部文件链接到html文件内：<link href="base.css" rel="stylesheet" type="text/css"/>
<head>
<style type="text/css">
</style>
</head>
<head>
<title></title>
<link href="style.css" rel="stylesheet" type="text/css"/>
</head>
一、用<span>包含需要特别设置的文字。
二、语法：
选择符：又称选择器，指明网页中要应用样式规则的元素
声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔，如下所示：
p{font-size:12px;color:red;}
三、注释：
css中用：/*注释语句*/来标明
Html中使用：<!-- 注释 -->
四、选择器：
每一条css样式声明（定义）由两部分组成：
选择器{样式；}
五、标签选择器其实就是html代码中的标签。
六、类选择器/ID选择器（在文档中使用一次）
可以使用类选择器“词列表”方法为一个原色同时设置多个样式。id选择器，不能使用词列表。
.stress{
color:red;
}
.bigsize{
font-size:25px;
}
到了class="stress bigsize">三年级下学期时，我们班上了一节公开课... //词列表写法
七，子选择器
.food>li{border:1px solid red;}
八、后代选择器
可称为：包含选择器。是选择指定标签下的后辈元素，如下：.first span{color:red;}用空格隔开类和后代元素标签。
和子代选择器区别：子代选择器的“子”是指只作用于：元素的第一代后代。
而后代选择器的“后代”是指作用于：元素所有的后代（包括子子孙孙无穷尽也）
举例：
图一，子选择器，此时只作用于<li>元素当前的格式，右图也可看出只有边框变成红色。p>span{}也可。
图二，后代选择器，此时所有后代边框都变为红色。
图一、子选择器
图二、后代选择器
九、通用选择器
*{color:red;}
一般是为了给主体定基本格式。后续个别元素设定可通过类和id选择器进行单独设置。
十、伪类选择符
为什么叫伪类选择符，它允许给html不存在的标签（标签的某种状态）设置样式，比如：鼠标滑过的颜色：
a:hover{color:red;}
关于伪类选择符，到目前为止，可以兼容所有浏鉴器的“伪类选择符”就是 a 标签上使用 :hover 了（其实伪类选择符还有很多，尤其是 css3 中，但是因为不能兼容所有浏览器。
其实 :hover 可以放在任意的标签上，比如说 p:hover，但是它们的兼容性也是很不好的，所以现在比较常用的还是 a:hover 的组合。
十一、分组选择器
p,h1{color:red;}
十二、继承性
继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如：color，但是有一些css样式是不能继承的，比如border。
十三、css优先顺序（权值）
标签的权值为1，类选择符的权值为10，id选择符权值最高为100
还有一个权值比较特殊--继承也有权值但很低，有的文献提出它只有0.1，所以可以理解为继承的权值最低。
十三、层叠
若同一个元素，多个css样式具有一样的权重，处于最后面的css样式会被应用。就为层叠。
即：后面的样式覆盖前面的。
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。亦是此原因。
十四、最高权值（!important）
p{color:red!important;}
浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式
我们可以随意修改打开的网页的css样式，在不刷新的情况下，页面会随着用户的修改而发生变化。
十四、字体
用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：
body{font-family:"Microsoft Yahei";} ／／兼容性更好
或
body{font-family:"微软雅黑";}
font-size:"";
font-weight:"blod";
font-style:"italic";
十五、文本
text-decoration:underline;//文字排版
text-decoration:line-through;//文字排版
text-indent:2em;//段落排版
十六、行高（行间距）
line-light：2em;//段落排版
十七、中英文字间距
letter-spacing:50px;//中文字英文字母
word-spacing:50px;//英文单词
十八、对齐
块元素：
text-align：center／left／right；
十九、元素分类
常见的块元素：<div><p><hx><ol><ul><dl><table><adress><blockquote><form>
常见的内联元素：<a><span><br><i><em><strong><label><q><var><cite><code>
常见的内联块元素：<img><input>
1、块级元素：除去上述常见意外，可以设置：display：block；可以将元素设置为块级元素。
特点：
a.每个块级元素都从新的一行开始，并且其后的元素也另起一行。
b.元素的高度、宽度、行高以及顶和底边距都可设置。
c.元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
2、内联元素：除去上述常见意外，可以设置：display：inline；可以将元素设置为内联元素。
特点：
a.和其它元素在一行上
b.元素的高度、宽度、上下边距不可设置
c.元素的宽度就是它包含的文字或图片等额宽度，不可改变
内联元素之间的间距：wiki
二十、border
border:2px solid red;
border-width:2px;
border-style:solid;//dashed,dotted
boder-color:red;
单独设置border-bottom,可以实现下划线的效果。
二十一、盒模型的宽度width和高度height
css定义的width和height指的是填充以里的内容范围。
一个元素实际宽度（盒子的宽度）=左边界（margin）+左边框（border）+左填充（padding）+内容宽度+右填充+右边框+右边界。
若改小padding-top的值，元素内容会向上移动。
二十二、css布局模型
布局模型与盒模型一样都是css最基本最核心的概念
布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。
CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
（一）流动模型
流动（Flow）是默认的网页布局模式。也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
特征：
（1）块元素都会在所处的 包含元素 内自上而下按顺序垂直延伸分布（在默认状态下，块元素的宽度都为100%）
（2）在流动模型下，内联元素都会在所处的 包含元素 内从左到右水平分布显示。
（二）浮动模型
任何元素在默认情况下都是不能浮动的，但可以用css为块级元素定义浮动
eg:
div{
width:200px;
height:200px;
border:2px red solid;
float:left;//right
}
<div></div>
<div></div>
一左一右：
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
(三)层模型
层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作。
CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
（1）绝对定位(position: absolute)
如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
(2)相对定位(position: relative)
如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。
相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置（空间）保留不动。
3、固定定位(position: fixed)
fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。既：我们所看到的屏幕内的画面。
因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。并且拖动滚动条时位置固定不变。
注意：relative和absolute组合使用
使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位，当相对于其他元素进行定位时，使用：position：relative；来帮忙，但必须遵守以下规则：
1、参照定位的元素必须是相对定位元素的前辈元素（比如：父元素）
2、参照定位元素必须加上：position：relative；
3、定位元素加入position：absolute；便可进行偏移。
二十三、盒模型代码简写
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
1、如果top、right、bottom、left的值相同，如下面代码：
margin:10px 10px 10px 10px;可缩写为：
margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代码：
margin:10px 20px 10px 20px;可缩写为：
margin:10px 20px;
3、如果left和right的值相同，如下面代码：
margin:10px 20px 30px 20px;可缩写为：
margin:10px 20px 30px;
注意：padding、border的缩写方法和margin是一致的。
二十四、字体缩写
body{
font-style:italic; //设置字体为斜体
font-variant:small-caps; //区分大小写，浏览器会显示小型大写字母的字体
font-weight:bold; //设置粗体
font-size:12px; //字号是12像素
line-height:1.5em; //行间距（行高）1.5个行倍
font-family:"宋体",sans-serif;//设置中文字体为宋体，英文字体为sans-serif
}
这么多行的代码其实可以缩写为一句：
body{
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
注意：
1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-variant、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。
一般情况下因为对于中文网站，英文还是比较少的，所以下面缩写代码比较常用：
body{
font:12px/1.5em "宋体",sans-serif;
}
二十五、长度值
1、像素
像素为什么是相对单位呢？因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。
2、em
就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}
上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。
下面注意一个特殊情况：
但当给 font-size 设置单位为em时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
html:
以这个例子为例。
css:
p{font-size:14px}
span{font-size:0.8em;}
结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。
3、百分比
p{font-size:12px;line-height:130%}
设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
二十六、水平居中设置-行内元素
分两种情况：行内元素还是块状元素，块状元素里面又分为定宽块状元素，以及不定宽块状元素。
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。(父元素和子元素：如下面的html代码中，div是“我想要在父容器中水平居中显示”这个文本的父元素。反之这个文本是div的子元素 )如下代码：
html代码：
我想要在父容器中水平居中显示。
css代码：
.txtCenter{
text-align:center;
}
二十七、水平居中设置-定宽块级元素
当被设置元素为块状元素时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。
（1）定宽块元素
定宽块级元素：块状元素的宽度width为固定值（b设定的值，width：100px;）
满足“定宽”和“块状”两个条件的元素可以通过设置“左右margin”值为“auto”来实现居中，上下客随意设置
（2）不定宽块级元素
即：块级元素的宽度width不固定
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
1、加入table标签
2、设置display: inline方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
3、设置position:relative和 left:50%：利用相对定位的方式，将元素向左偏移50%，即达到居中的目的
第一种方法：为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。
第一步：为需要设置的居中的元素外面加入一个table标签，包括 tbody tr td
第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。
第二种方法：改变块级元素的 display 为 inline 类型（设置为行内元素显示），然后使用text-align:center来实现居中效果。如下例子：
html代码：
<body>
<div class="container">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
css代码
<style>
.container{
text-align:center;
}
/*margin:0;paddding:0(消除文本与边框之间的间隙)*/
.container ul{
list-style:none;/*消除项目符号*/
margin:0；
padding:0;
display:inline;
}
/*设置li的间距，避免重叠*/
.container li{
margin-right:8px;
display:inline;
}
</style>
这种方法相比第一种方法的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
第三种方法：设置position:relative
1、通过给父元素设置float，然后给父元素设置position：relative和left：50%
2、子元素设置position ：relative和left：-50%来实现水平居中。
html代码：与上边一致
css代码：
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0px;
padding:0px;
position:relative;
left:-50%
}
.container li{
float:left;
display:inline;
margin-right:8px;
}
</style>
二十八、垂直居中-父元素确定的单行/多行文本
1、父元素高度确定的单行文本
设置福原色的height和line-height高度一致来实现。height是指该元素的高度，line-height:行高（行间距），指在文本中，行与行之间的基线的距离
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
2、父元素高度确定的多行文本
方法一：
添加<table>标签，包括tbody th tr td 同时设置vertical-align:middle。
vertical-align，若父元素是inline-block类型，则对其子元素均有作用。
<body>
<table>
<tbody>
<tr>
<td class="wrap">
<div>
<p>
文字
</p>
</div>
</td>
</tr>
</tbody>
</table>
</body>
css代码：
table td{height:500px;backgroung:#ccc}
因为td标签的默认情况下已经设置了 vertical-align:middle;所以不需要显式设置了。
方法二：
设置块级元素的display为table-cell激活vertical-align属性，
<div class="container">
<div>
<p>文字</p>
</div>
</div
2. float : left 或float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以display:inline-block（块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素。
不管是<a>标签这种行内元素，只要浮动，均可设置宽高。
.container a{position:absolute;width:200px; background:#ccc;}
