CSS与HTML5知识点

浏览数：17 / 时间：2015年06月09日

以前在HTML标签中通过设置属性的方式(<div width="80px">)为标签定义样式，但是现在推荐使用CSS设置(div{width:80px;})

即"HTML与CSS分离"，在web中还有“页面展示与逻辑处理分离”等概念。

学习CSS：http://zh.learnlayout.com/ .

CSS在线编辑器工具：http://tool.chinaz.com/Tools/CssDesigner.aspx .

引入CSS样式的两种方法

内部样式表：在<head>标签中的<style type="text/css">......</style>
外部样式表：将CSS放在文件(如home.css)中，并在<head></head>内部添加：<link rel="stylesheet" type="text/css" href="home.css"/>引入文件

ID与Class

在一个网页里ID只能使用一次，clsss类可以在一个网页内无限次引用，且class可以addClass和removeClass添加删除样式。

<div class="yangshi1">颜色为红色的样式</div> 
<div class="yangshi2">字体大小为28px的样式</div> 
<div class="yangshi1 yangshi2">颜色为红色且文字大小为28px的样式</div>

CSS盒子模型

div的CSS属性： width(内容的宽度px 或百分比)、height(内容的高度px 或百分比)、padding(内边距上右下左px)、border(边框线宽px 线类型颜色)、margin(外边距上右下左px)。

div默认会独占一行，设置为浮动后会使得DIV不再独占一行，横排直到一行不够排转到下一行(见overflow)。使用“浮动”(float)、“清除浮动”(clear)，若对四个div使用float:left; 对第三个div使用clear:left; 使得第三个div的左侧不允许有浮动元素。这样这四个div就会排成两行每行两个。可以选择浮动方向left/right，inherit(从父元素继承float属性)。

字体属性

font-style: 设置斜体。可选值有：normal(正常), italic(斜体).
font-weight: 设置粗体。可选值有：normal(正常), bold(粗体).
font-size: 设置字号。
line-height: 设置行高，即一行的高度。
font-family: 设置字体。这里值得一提的是可以同时写多个字体，如："font-family:‘雅黑‘,‘宋体‘,‘黑体‘;"，因为不同机器上拥有的字体可能不一样，如果有的机器没有雅黑字体，则使用宋体，如果没有宋体，最后使用黑体。
color: 设置字的颜色。

段落属性

text-indent: 设置缩进大小。可选值为数字即可。
text-align: 文字对齐方式。可选值有：left(左对齐，默认), right(右对齐), center(居中), justify(两端对齐).
text-decoration: 设置段落的：underline(下划线), overline(上划线), line-through(删除线), none（无）.
letter-spacing: 设置字符间距。

背景及背景图片的属性

background-color: 设置背景颜色。
background-image: 设置背景图片。值类似：background-image:url(img.jpg);
background-repeat: 设置背景图片是否重复。可选值有：repeat(不断重复), no-repeat(不重复), repeat-x(在x轴方向重复), repeat-y(在y轴方向重复).
background-attachment: 设置背景图像是否固定还是随内容滚动。可选值有：fixed(固定),scroll(滚动).
background-position: 设置背景图片的位置。可选值有

<position><空格><position>: <position>可填：top, center, bottom; left, center, right.
<x-length><空格><y-length>: <length>可填像素值，表示将背景图片移动多少像素。

应用：

居中显示 {margin: 0 auto; vertical-align: middle;}

CSS选择元素方法

页面 html{...}
* : 选择任何元素。格式为：*{...}
标签选择器：选择指定标签。格式为：<tag>{...}
id选择器：选择指定 id 的元素。某个 id 在一个页面中是唯一的。格式为：#<id>{...}
class选择器：选择指定class的元素。格式为：.<class>{...}。值得一提的是，class选择器的变型：

与标签选择器一起使用，格式为：<tag>.<class>。表示只选择具有class=<class>的<tag>标签。
多个class一起使用，格式为：.<class1>.<class2>。表示class同时属于<class1>和<class2>的元素。

后代选择器：选择指定元素的指定后代元素（后代和子元素是不同的，并不一定要紧跟在父元素里面）。格式为：<father> <空格><descendent> ，例如 div h3 解释为“div元素的所有<h3>标签”。
子元素选择器：选择直接子元素（不包含孙子...）。格式为：<father> > <child>。
属性选择器: 选择具有指定属性或指定属性具有特定值的元素。格式为：<selector>[<attribute1>][<attribute2>]或<selector>[<attribute1>="<value1>"][<attribute2>="<value2>"]。
- 部分匹配属性值：<selector>[<attribute>*="<value>"] 表示只要<attribute>属性中包含<value>值即可。
相邻兄弟选择器：选择(紧挨着的)相邻的兄弟的元素。格式为：<selector1> + <selector2>。表示选择紧跟在selector1后面的selector2。

伪类(系统类)选择器：
- <selector>:first-child{...} . 当<selector>为某个元素的第一个子元素时应用样式。
- <selector>:focus{...} . 当<selector>拥有键盘输入焦点时应用样式。
- <a>标签已有类，在触发某事件时的样式，且css中一定要以：link再visited再hover再active的顺序进行定义
- a:link{...} . 当<a>未被访问过时应用样式。
- a:visited{...}. 当<a>已被访问时应用样式。
- a:hover{...} . 当鼠标悬浮在<a>上时应用样式。
- a:active{...}. 当<a>被激活(激活指的是鼠标按下且未松开的这段时间)时应用样式。
伪元素选择器：
- <selector>:first-line{...}. 选择<selector>的第一行。注意：<selector>必须是块级元素。
- <selector>:first-letter{...}. 选择<selector>的第一个字母。注意：<selector>必须是块级元素。
- <selector>:before{content:"..."}. 在<selector>的前面插入内容。
- <selector>:after{content:"..."}. 在<selector>的后面插入内容。
选择器分组：多个选择器可以用逗号（,）隔开，表示同时对多个选择器设置样式。格式为：<selector1>,<selector2>,<selector3>{...}

应用：

选择一个有序列表中的第三行：ol > li:first-child + li + li
选择class="c1"的div：div.c1
链接光标移到加下划线：a { text-decoration: none;} a:hover { text-decoration: underline; }

CSS文档流

position属性

static: 默认值。表示该元素没有被定位。
relative: 相对定位。如果将元素设置为相对定位，则可以通过设置 top, bottom, left, right 属性使得该元素相对于正常位置偏离多少。
fixed: 固定定位。固定在视窗的某个位置，即不管你怎么滚动页面，该元素总是在那个位置固定不动，可以通过设置 top, bottom, left, right 属性设置相对视窗的位置。
absolute: 绝对定位，从文档流中脱离出来。通过设置 top, bottom, left, right 属性设置偏移。当有多个absolute元素重叠时，怎么决定他们的上下关系，这就需要一个特殊的属性：z-index。默认z-index=0，即该元素就盖在地面上，z-index=-1则表示该元素在地面下面，z-index越高，则表示该元素在越高层。