一. 认识CSS
1. css全称是“层叠样式表cascadingstyle sheets”,它主要是用于定义HTML内容在浏览器内的显示样式，比如文字大小，颜色，字体加粗等
2. 使用css样式的一个好处是通过定义某个样式，可以让不同网页位置的文字有着统一的字体，字号或者颜色等。
二. CSS代码语法
1. css样式由选择符和声明组成，而声明又是由属性和值组成。
(1)选择符：又称为选择器，指明网页中药应用样式规则的元素
(2)声明：在英文大括号中的就是声明，属性和值之间用英文冒号分隔，当有多条声明时，中间可以用英文分号分隔。、
(3)最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。
(4)举个简单的例子:p{color:blue}它指的是p是选择器，声明在大括号里面，color是属性，blue是属性的值。
(5)一般为了使阅读容易，可以将每条代码写在一个新行内。
2. css注释代码
(1) 在css中，用/*注释语句*/来标明注释
3. 内联式css样式
(1) 直接写在现有的HTML标签中
(2) Css样式从代码插入的形式可以分为三种：内嵌式，嵌入式，外部式
(3) 内联式：css样式表就是把css代码直接写在现有的HTML标签中，比如:<p style=”color:blue”>这里文字是蓝色</p>
(4) 需要写在元素的开始标签里面
(5) Css样式代码要写在style=””双引号中，如果有多条css样式代码设置可以写在一起，中间用分号隔开。
4. 嵌入式css样式
(1) 写在当前的文件中。
(2) 这种样式就是可以把css样式代码写在<style type=”text/css”></style>标签之间
(3) 嵌入式css样式必须写在<style></style>之间，并且一般情况下嵌入式css样式写在<head></head>之间。
5. 外部css样式
(1) 写在一个单独文件中
(2) 外部式css样式也称作外联式，就是把css代码写在一个单独的外部文件中，这个css样式文件以.css为扩展名，在<head>标签内使用<link>标签将css样式文件链接到HTML文件内，比如:<link href=”base.css” rel=”stylesheet” type=”text/css”/>
(3) Css样式文件名称以有意义的英文字母命名。
(4) rel=”stylesheet” type=”text/css”是固定写法不可修改
(5) <link>标签位置一般写在<head>标签之内。
6. 三种方法的优先级
(1) 三种方法的优先级顺序：内联式>嵌入式>外部式
(2) 嵌入式>外部式有一个前提：嵌入式css样式的位置一定在外部式的后面
(3) 总的来说就是一个原则：就近原则（距离被设置元素越近优先级别越高）
(4) 内嵌式、嵌入式、外部式样式表中css样式是在相同的权值的情况下，才有上面的优先级顺序。
7. 选择器
(1) 每一条css样式声明由两部分组成，选择器{样式;}
(2) 在{}之前的部分是选择器，选择器指明了{}中的样式的作用对象，也就是样式作用域网页中的哪些元素。
8. 标签选择器
(1) 标签选择器就是html中的标签
9. 类选择器
(1) 类选择器在css样式编码中最常用到
(2) 语法:.类选择器名称{css样式代码;}
(3) 类选择器必须以英文圆点开头
(4) 其中类选择器的名称可以任意起名字，建议不要使用中文
(5) 类选择器的用法：使用合适的标签把要修饰的内容标记起来；使用class=”类选择器名称”为标签设置一个类;设置类选择器css样式
10. ID选择器
(1) 类似于类选择器，但是也具有一些重要的区别
(2) 为标签设置id=”ID名称”,而不是class=”类名称”。
(3) ID选择符的前面是#号，而不是英文圆点。
11. 类选择器和ID选择器的区别
(1) 相同点：可以应用于任何元素
(2) 不同点：ID选择器只能在文档中使用一次，与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次，而类选择器可以使用多次。
(3) 可以使用类选择器词为列表方法为一个元素同时设置多个样式，我们可以为同一个元素同时设置多个样式，但是只可以用类选择器的方法实现，ID选择器是不可以的（不能使用ID词列表）
12. 子选择器
(1) 自选择器就是大于符号，用于选择指定标签元素的第一代子元素
13. 包含（后代）选择器
(1) 包含选择器：即加入空格，用于选择指定标签元素下的后辈元素
(2) 子选择器仅仅是指它的直接后代，或者可以说是作用于子元素的第一代后代；而后代选择器是作用于所有子后代元素，后代选择器通过空格来进行选择，而子选择器是通过大于号来进行选择
(3) 大于号作用于元素的第一代后代，空格作用于元素的所有后代。
14. 通用选择器
(1) 通用选择器是功能最强大的选择器，它使用一个星号(*)指定，它的作用是匹配html中所有标签元素。
15. 伪类选择符
(1) 它允许给html不存在的标签（标签的某种状态）设置样式
(2) 关于伪类选择符，到目前为止，可以兼容所有浏览器的”伪类选择符”，就是a标签上使用:hover，现在比较常用的还是a:hover的组合。
16. 分组选择符
(1) 当想为html重多个标签元素设置同一个样式时，可以使用分组选择符(,),比如span,h1{color:blue;}
17. 继承
Css的某些样式时具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
18. 特殊性
(1) 权值的规则：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100
(2) 还有一个权值比较特殊—继承也是有权值的但是很低，有的文献提出它只有0.1，所以可以理解继承的权值最低。
19. 层叠
(1) 当html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值时，可以使用层叠来解决。
(2) 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
(3) 内联样式表（标签内部）>嵌入样式表（当前文件中）>外部样式表（外部文件中）
(4) 重要性：使用!important来解决；!important要写在分号的前面
(5) 当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页，并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置大一些，使其查看网页的文本更加清楚，这时注意样式优先级为：浏览器默认的样式<网页制作者样式<用户自己设置的样式，但记住!important优先级样式时个例外，权值高于用户自己设置的样式。
20. 文字排版---字体
(1) 可以使用css样式为网页中的文字设置字体，字号，颜色等样式属性。
(2) 不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体，现在一般网页喜欢设置为“微软雅黑”，比如：body{font-family:”Microsoft Yahei”;}或者body{font-family:”微软雅黑”;}，第一种方法比第二种方法兼容性更好一些
21. 文字排版—字号、颜色
(1) 比如设置网页中文字的字号是12像素，并把字体颜色设置为#666(灰色)：
(2) Body{font-size:12px;color:#666}
(3) 文字的粗体可以使用 span{font-weight:bold}来设置
(4) 文字的斜体可以使用a{font-style:italic;}来设置
(5) 文字的下划线可以使用a{text-decoration:underline;}来进行设置
(6) 文字的删除线可以使用span{text-decoration:line-through;}来进行设置
22. 段落排版
(1) 中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用p{text-ident:2em;}来实现。
(2) 行间距属性设置：p{line-height:1.5em;}
(3) 设置文字间隔或者字母间隔可以使用letter-spacing来实现，这个样式就是在使用英文单词时，设置字母与字母之间的间距
(4) 设置单词之间的间距可以使用word-spacing来实现。
(5) 对齐：使用text-align样式代码
23. 元素分类
(1) 块状元素，内联元素（行内元素）和内联块状元素
(2) 常用的块状元素有：<div>,<p>,<h1>…<h6>,<ol>,<ul>,<dl>,<address>,<blockquote>
<form>
(3) 常用的内联元素有：<a><span><br><i><em><strong><label><q><var><cite><code>
(4) 常用的内联块状元素有：<img><input>
24. 元素分类—块级元素
(1) 设置display:block就是将元素显示为块级元素
(2) 块级元素的特点：每个块级元素都是从新的一行开始，并且其后的元素也另起一行；元素的高度，宽度，行高及顶和底边距都可以设置；元素宽度在不设置的情况下，是它本身父容器的100%(和父元素的宽度一致)，除非设定一个宽度。
25. 元素的分类—内联元素
(1) 块状元素可以通过代码display:inline将元素设置为内联元素
(2) 内联元素的特点：和其他元素都在一行上；元素的高度、宽度及顶部和底部边距不可设置；元素的宽度就是它包含的文字或图片的宽度，不可改变。
26. 元素分类—内联块状元素
(1) inline-block就是同时具备内联元素，块状元素的特点，使用代码:display:inline-block就是将元素设置为内联块状元素
(2) inline-block元素特点：和其他的元素都在一行上；元素的高度、宽度、行高及顶和底边距都可以设置。
27. 盒子模型—边框
(1) 盒子模型的边框就是围绕着内容及补白的线，这线条你可以设置它的粗细、样式和颜色（边框三个属性）
(2) boder-style常见的样式有：dashed（虚线）|dotted（点线）|solid（实线）
(3) boder-color（边框颜色）中的颜色可设置为十六进制颜色
(4) boder-width（边框宽度）中的宽度也可以设置为thin|medium|thick（但不是很常用），最长还是用像素(px)。
(5) 设置下边框：boder-bottom
(6) 设置上边框：boder-top
(7) 设置左边框：boder-left
(8) 设置右边框：boder-right
(9) 盒子模型的高度和宽度在CSS内定义的宽和高指的是填充以内的内容范围，因此一个元素的实际宽度（盒子宽度）=左边界(morgin-left)+左边框(boder-left)+左填充(padding-left)+内容宽度(width)+ 右填充(padding-right)+ 右边框(boder-right)+ 右边界(morgin-right) ，元素的高度是同一个道理。
(10) 填充：元素内容与边框之间是可以设置距离的，称之为”填充”，填充也分为上，下，左，右（顺时针），顺序一定不能搞乱
(11) 盒子的边界：元素与其他元素之间的距离称之为边界（margin）来设置的，边界也分为上下左右
(12) Padding和margin的区别是：padding在边框里，margin在边框外。
28. CSS布局模型
(1) 布局模型是本，那么css布局模板就是外在的表现形式
(2) Css包含三种基本的布局模型，用英文概括为:Flow,Layer和Float
(3) 在网页中元素有三种布局模型：流动型；浮动型；层模型；
29. 流动模型
(1) 流动模型是默认的网页布局模式，也就是说网页在默认状态下的HTML网页元素都是根据流动模型来分布网页内容的
(2) 流动布局模型具有两个比较典型的特征：块状元素都会在所处的包含元素内自上而下顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%,实际上，块状元素都会以行的形式占据位置；在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
30. 浮动模型
(1) 任何模型在默认的情况下是不能浮动的，但可以用CSS定义为浮动。比如float:left;
31. 层模型
(1) 层布局模型就像图像软件ps中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计中，由于网页大小的活动性，层布局没能收到热捧，但是在网页上局部使用层布局还是有其方便之处的。
(2) Css定义了一组定位属性来支持层布局模型：绝对定位(position:absolute);相对定位(position:relative);固定定位(position:fixed)
(3) 层模型绝对定位：如果想为元素设置层模型中的绝对定位，需要设置position:absolute（表示绝对定位），这条语句的作用将元素从文档流中拖出来，然后使用left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位，如果不存在这样的包含块，则相对于body元素，即是相对于浏览器窗口
(4) 层模型相对定位：如果香味元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left,right,top,bottom属性确定元素在正常文档流中的偏移位置，相对定位完成的过程是首先按static(float)方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动，移动的方向和幅度由left,right,top,bottom属性确定，偏移前的位置保留不动。
(5) 层模型—固定定位：fixed表示固定定位，与absolute定位类型类似，但是它的相对移动的坐标是视图（屏幕内的网页窗口）本身，由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或者改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响，这与background-attachment:fixed;属性功能相同。
(6) Relative与absolute组合使用：参照定位的元素必须是相对定位元素的前辈元素；参照定位的元素必须加入position:relative;定位元素加入position:absolute，便可以使用top,bottom,left,right来进行偏移定位。
(7) 盒子模型代码简写：盒子模型外边距，内边距，边框设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。通常有三种缩写方法：如果top,right,bottom,left的值相同，比如margin:10px 10px 10px 10px;可以缩写为margin:10px；如果top和bottom值相同，left和right值相同，比如margin:10px20px 10px 20px;可以缩写为margin:10px 20px;如果left和right值相同，比如margin 10px 20px 30px 20px;可以缩写为margin:10px 20px30px;注意padding,border的缩写方法和margin方法是一致的
(8) 颜色值的缩写：当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半
(9) 字体缩写：使用简写方式时至少要指定font-size和font-family属性，其他的属性如果没有指定将自动使用默认值。
(10) 在缩写时font-size和line-height中间要加入”/”斜杠。
(11) 一般情况下因为对于中文网站，英文还是比较少的。
(12) 颜色值：在网页中有字体颜色（color）,背景颜色(background-color),边框颜色(border)等，设置颜色的方法有：英文命令颜色；RGB颜色（每一项的值可以是0-255之间的整数，也可以是0%-100%的百分数）；十六进制颜色（这种颜色设置方法是现在比较普遍使用的方法，它的原理其实也是RGB设置，但是其每一项的值由0-255变成了十六进制00-ff）
(13) 长度值：目前比较常用的有px(像素),em,%百分比，要注意其实这三种单位都是相对单位。
(14) 水平居中设置行内元素：如果被设置元素为文本，图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的。
(15) 水平居中设置定宽块状元素：当被设置元素为块状元素时用text-align:center就不起作用了，这时分两种情况：定宽块状元素和不定宽块状元素。满足定宽和块状两个条件的元素时可以通过设置“左右margin”值为auto来实现居中的，元素的“上下margin”是可以随意设置的。
32. 水平居中---不定宽块状元素方法
(1) 不定宽度块状元素有三种方法居中：加入table标签；设置display:inline方法;设置position:relative和left:50%
(2) 加入table标签：为需要设置的居中元素外面加入一个table标签；为这个table设置“左右margin居中”（这个和定宽块状元素的方法一样）；
(3) 设置display:inline方法：改变块级元素的display为inline类型，然后使用text-align:center来实现居中效果
(4) 设置position:relative和left:50%:通过给父元素设置float，然后给父元素设置position:relative和left:50%，子元素设置position:relative和left:50%来实现水平居中。
33. 垂直居中---父元素高度确定的但行文本
(1) 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的
(2) 垂直居中—父元素高度确定的多行文本：父元素高度确定的多行文本、图片】、块状元素的竖直居中的方法有两种：(a)使用插入table(包括tbody,tr,td)标签，同时设置vertical-align:middle。竖直居中，css有一个用于竖直居中的属性vertical-align，但这个样式只有在父元素为td或th时，才会生效，所以又要插入table标签。(b)在chrome,firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell,激活vertical-align属性，但是要注意IE6，7并不支持这个样式。当为元素设置以下两个句子之一：position:absolute;float:left和float:right元素会自动变为以display:inline-block的方式显示，当然可以设置元素的width和height了，且默认宽度不沾满父元素
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
