前端学习总结HTML5+CSS3+JavaScript（2）
昨天介绍了HTML5，今天趁热打铁，总结CSS3。
开头
HTML控制网页的结构，CSS控制网页的外观，而JavaScript控制网页的行为。
CSS的出现就是为了改造HTML标签在浏览器展示的外观，使其变得更加好看。如果没有CSS的出现，就不可能有现在“色彩缤纷”的页面。
在HTML中引入CSS共有3种方式：
（1）外部样式表；把CSS代码和HTML代码都单独放在不同文件中，然后在HTML文档中使用link标签来引用CSS样式表
（2）内部样式表；内部样式，指的就是把CSS代码和HTML代码放在同一个文件中，其中CSS代码放在<style></style>标签对内，并且<style></style>标签对是放在<head></head>标签对内的。
（3）内联样式表；（一般不用）
选择器
元素的id属性。id只有一个，不允许出现相同的
元素的class属性。class谁也可以设置，最终设置一样的class属性的元素可以展示同样的结果。一个标签可以有多个class
id是身份证号，class是姓名。类比记忆
选择器是什么意思，就是选中某个元素或者标签来进行某件事，选择的方式规则不同而已。
选择器主要分为标签选择器，id选择器，类选择器，通配选择器
标签选择器，某个标签后面直接跟着改就行了。
id选择器，在目的地直接加上id的名字，在head里面对齐修改。
class选择器，对一堆相同的元素或者不同的元素，设置类名，一起操作。
通配选择器。直接加*，对所有 的元素进行同一个样式。不用调用。
子元素选择：根据父元素子元素之间的关系，对子元素进行选择。eg：“#father1 div{…}”表示选择“id为father1的元素”下的所有div元素；
相邻选择器：兄弟选择。选择和他最近的同一级元素。eg：“#lv+div{…}”表示选择“id为lv的元素”的相邻的下一个兄弟元素div。
群组选择器：两个选择器之间用逗号。eg：“h3,div,p,span{color:red;}”表示选中所有的h3元素、div元素、p元素和span元素，然后设置这些元素的字体颜色为red。
伪类选择器：：hover/visted/active/link 给选择器加特殊效果。hover用的最多，经过的时候发生变化。lvha这个顺序不能变。cursor：pointer/default（鼠标的样子）
| 属性 | 说明 |
|---|---|
| a:link | 定义a元素未访问时的样式 |
| a:visited | 定义a元素访问后的样式 |
| a:hover | 定义鼠标经过显示的样式 |
| a:active | 定义鼠标单击激活时的样式 |
CSS字体属性
文字样式属性往往包括字体、大小、粗细、颜色
| 属性 | 说明 |
|---|---|
| font-family | 字体类型 |
| font-size | 字体大小 |
| font-weight | 字体粗细 |
| font-style | 字体斜体 |
| color | 颜色 |
字体大小用用px为单位；字体斜体：normal/italic（斜体）。在css浏览页面时从上到下运行。如果对某一个元素先后都定义了同一个属性，在浏览器中以“后定义的那个属性值”为准
CSS文本属性（段落）
文字样式注重个体，段落样式注重整体
-
属性 说明 text-decoration 下划线、删除线、顶划线 text-transform 文本大小写 font-varient 将英文文本转换为“小型”大写字母 text-indent 段落首行缩进 text-align 文本水平对齐方式 line-height 行高 letter-spacing 字距 word-spacing 词距 text-decoration：none/underline/line-through/overline.去除a标签默认的下划线
text-transform：uppercase/lowercase 转换大小写
text-indent:2em.两字的间距
text-align：left/right/center。只对文本和img有效。img进行居中对齐，必须在父元素中进行，不能再img标签里进行。
行高与行间距是不一样的概念。
CSS背景属性
背景样式主要包括背景颜色和背景图像
background-color背景颜色（和color分开）
背景图像属性：
| 属性 | 说明 |
|---|---|
| background-image | 定义背景图像的路径，这样图片才能显示嘛 |
| background-repeat | 定义背景图像显示方式，例如纵向平铺、横向平铺 |
| background-position | 定义背景图像在元素哪个位置 |
| background-attachment | 定义背景图像是否随内容而滚动 |
background-position:有x与y区分。可以是方位名词。也可以是px.第一个是x，另一个一定是y；如果只指定一个数值，数字是x，另一个水平居中
img：url（）
repeat：no-repeat/repeat/repeat-x/repeat-y
attachment:scroll/fixed
CSS边框属性
-
属性 说明 border-width 边框的宽度 border-style 边框的外观 border-color 边框的颜色 border-style：none/solid/dashed/dotted/
简写：border:1px solid Red;
border-top/border-bottom/border-left/border-right...用来局部搞事情
CSS列表属性
list-style-type:none：去除列表项默认的符号
CSS表格属性
-
border-collapse属性值 说明 separate 默认值，边框分开，不合并 collapse 边框合并，如果相邻，则共用一个边框 border-spacing:表格间距
盒子模型
在“CSS盒子模型”理论中，所有页面中的元素都可以看成一个盒子，并且占据着一定的页面空间
元素的宽度width和高度height是针对内容区而言的。只有块元素能设置width和height，行内元素无法设置width和height
如果我们想为（行内元素）也设置高度和宽度，那怎么办呢？在CSS中，可以使用display属性来将行内元素转换为块元素，或者将块元素转换为行内元素。display：block；转为块元素；display：inline：转为行内元素；display：inline-block：转为行内块
内边距padding分为四个方向的内边距：padding-top、padding-right、padding-bottom、padding-left。“padding:20px;”表示四个方向的内边距都是20px；“padding:20px 40px;”表示padding-top和padding-bottom为20px，padding-right和padding-left为40px。“padding:20px 40px 60px 80px;”表示padding-top为20px，padding-right为40px，padding-bottom为60px，padding-left为80px。顺时针方向记忆
外边距是两个元素之间的距离。外边距的记忆和内边距一样
补充
文字垂直居中：行高等于盒子高度。line-height = height（行高是分为上下边距加上文字的高度，盒子高度是height，总体属性和一个文本属性相等）
css三大特性：层叠性（就近原则，如果样式冲突，选择离他近的），继承性（子承父业），权重
优先级：范围越小，权重越大；，继承的权重为0；标签做继承，类不做继承。
行高的而继承性：如果子元素没有设置行高，子元素的行高是：当前大小*1.5
css里面定义的宽和高指的文字内容的宽和高，实际比这大
边框大小影响盒子大小
内边距影响盒子大小
嵌套块元素垂直外边距的塌陷：外边距合并 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者。解决方案：
1.给父级元素加上上边框(border-top)
2.给父级元素加上上内边距（padding-top）
3.给父级元素加上overflow：hidden
没有宽度的盒子实际占有的空间不变，你给它添加水平边框、内边距和外边距，那就会减少内容占有的空间。
较宽的外边距决定两个元素之间会离多远
第一步：*{margin:0; padding:0;}。清除所有论七八糟的样式
哦了！拜拜