2015-11-28

关于css

css基础知识回顾

层叠样式表（英语：Cascading Style Sheets，简写CSS），又称串样式列表、级联样式表、串接样式表、层叠样式表、階層式樣式表，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言，由W3C定义和维护。目前最新版本是CSS2.1，为W3C的推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发过程中。（引自维基百科）

1.css 样式由选择符和声明组成，而声明又由属性和值组成,选择器{属性:值}

2.声明：在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：”分隔。当有多条声明时，中间可以英文分号“;”分隔

3.注释方式 //

1、 css的引入方式：

① <style></style>标签引入
 缺点：不利于复用，常用在单一页面开发

② 标签内部引入方式（行间样式）用于修改别人的代码，有冲突的样式，标签内部的引入方式高于style标签的引入方式以及外部引入方式
缺点：不利于维护，没有样式内容分离，代码陈余，不利于阅读
优点：优先级高，不会被其他样式覆盖和影响

③ 外部引入<link rel="stylesheet" type="text/css" href="css/....css"/>
link是单标签有两个属性，rel：类型 stylesheet表示样式 type：关联文件的类型是css,href:表示路径。
缺点：增加了一次请求
优点：完全实现内容样式分离，模块儿化，利于复用

④import url(reset.css)不常用（如果有相关自动化工具，不影响性能时可以使用）

2、罗列一下css样式表中的元素：

宽高，背景，边框

width: 00px;宽 (px是单位)

height: 00px;高 (px是单位，以下类同)

background-color:  ;背景颜色 (后面可以跟16进制颜色值和rgb颜色值或颜色的英文名，例如red)

background-image:url("路径");

background-repeat:值;值一般有三个repeat-x,repeat-y no-repeat来说明背景图片的平铺情况

background-position:X轴位移,Y轴位移;后可以跟多少px值，也可以跟left,right,center,top,bottom;

background:color image position 是否平铺;这是background的组合写法;

border-color:颜色值;

border-style:样式值;(solid实线，dashed虚线，dotted点线‘ie6不支持点线’)

border-width:值;

border:width color style; border 的组合写法;

border-radius:值;值的类型可以是数字加px也可以是%比，一般50%表示圆；

边距分为外边距margin和内边距padding

内边距padding

padding-top:;

padding-right:;

padding-bottom:;

padding-left:;

padding:T R B L ;padding的组合写法，成为TRBL法则；

padding:10px; 上下左右的内边距都为10px；

padding:10px 20px; 上下的内边距是10px,左右的内边距是20px；

padding:10px 20px 30px; 上 左右 下；

注意：没有设宽度时，自动默认为100%，宽度不定right不可设！内边距是可以显示背景的，影响盒子的宽度！

外边距margin

margin-top:; margin-right:; margin-bottom:; margin-left:;

margin:10px; margin:10px 20px; margin:10px 20px 30px;(同内边距)

遵循TRBL法则；

注意:外边距影响的是盒子的位置，不会影响宽高！子级的首元素margin-top会传递给父级，解决方法:用父级的padding-top或者子级加边框或者overflow

盒模型（可以把我们的每一个标签都理解为一个盒子）

盒子的大小 ＝ border + padding + width/height ;

盒子宽度 ＝ 左border + 左padding + width + 右padding + 右border;

盒子高度 ＝ 上border + 上padding + height + 下padding + 下border ;

标准盒模型
IE盒模型

IE的盒模型同样也包括content，padding，border，margin，但是和标准浏览器唯一不同的地方就是content包含了border和padding。

浮动 float

float:left;向左浮  clear:left;清除左浮动   但浮动的窗口位置不动

float:right;向右浮  clear:right;清除右浮动

float:none; 不浮   clear:both; 将内容重新赋到父级中

float会对父级和父级的同级以及下面样式产生影响，不可控（因为父级没有被撑开）行级标签浮动后可以设置宽高

清楚浮动的方法 1.在父级增加overflow:hidden; 

                2.在父级的同级写clearfix <class="clearfix">;

                3.给父级加height(必须精确知道height);

定位position:

position:relative;相对自身当前的位置移动

left,right,top,bottom 可以对块级标签行级标签使用 不会改变标签属性 不对元素自身造成影响

z-index表示当前的标签的层级  取值数字可以为负数  必须使用position属性才可以使用

position:absolute; 绝对定位

该情况可以设置宽高百分比 如果没有父级设置position:relative; 则当前标签从body可视区域为起点

如果有父级标签设置position:relative; 则是以父级标签（可以是上上级 不一定是父级）位置为起点

脱离文档流,改变标签属性 使之类似于inline-block

关于文本css样式

font-size:值; 多少px用来表示字体的大小

font-color:颜色值;

font-style:值; 这个值一般为 normal正常  italic斜体

font-family:值; 这个值为字体类型，可以跟多个字体类型

font-weight:值; normal正常

line-height:值;一般为父级的高度，用来垂直居中

text-align:值;一般为center用来水平居中

其他常用样式

opacity:0～1; 透明度 0为完全透明，1为完全不透明，就是正常显示状态

filter:alpha(opacity=sqlN) sqlN的值为0到100 （IE下的透明度）

clear:left right both; 清除 左 右 两边的浮动；

overflow:hidden; 用来清楚浮动 隐藏溢出部分

3.css法则:同等优先级，后面的样式覆盖前面的样式

①标签选择器：直接作用于选择的标签元素，是一个集合，如 #div｛｝; 优先级为 1

②ID选择器：直接作用于该名称的标签元素，ID名是唯一的，所以直对该名称的标签有效; 优先级 1000 永远都比标签选择器高

③【（派生）(层级选择器)父子级选择器】层级选择器如 div h1{ }; 找到的是div下面所有的h1包括h1的子孙

④类选择器: 优先级100

<div class="header"></div>
<div class="header sex age"></div>

这个时候选择器就可以用 .header{ } 这个选择起就叫类选择器，这样写的话选择器选择的就是上面两个div标签，class命名是可以重复的，也可以有很多个class名，像第二个div标签里面的名字不分顺序。

⑤群组选择器：body,#div,#lianjie,.sex{ } 由逗号隔开，表示这些标签全部选中 偏重于代码优化

⑥通配选择器： ｛｝所有的标签都是该样式，优先级比标签还低，通常用来清除一些默认属性如 ｛margin:0px;｝这样就把所有标签的默认margin设置为0

⑦伪类选择器：:link :visited :hover :active :focus :target :lang

:link 超链接未被访问过

:visited 超链接被访问过

:hover 鼠标在元素上面

:active 鼠标在元素上按着

以上4个伪类选择器有一定的顺序，请不要随意改变

:focus 焦点在元素上

:target 元素被URL标记（css3新增的类）

:lang 向带有指定lang属性的元素添加样式

优先级总结

优先级：通配选择器（慎用） < 标签选择器 < 类选择器 < ID选择器（少用） < 层选择器 < 群组选择器 < 行间样式 < ! important（直接跟在属性后面不用空格,例如：color:red!important;）

4、reset样式表

①reset样式表的引入方式：等同于css的引入方式

<link rel="stylesheet" type="text/css" href="路径"/>

注意：该引入方式一般放在css引入方式的上边

②作用：用于标签默认样式的初始化，方便开发人员控制元素！

③常用的reset样式表

body{
    margin:0px; 初始化body的margin为0
    font-family:16px/1.5 Tohoam,Arila,san-serif; 初始化body的字体大小为16px，1.5倍的行高以及字体样式
}

ol,ul,dl,dd,dt{
    margin:0px; 初始化ol，ul的外边距为0
    padding:0px; 初始化ol，ul的内边距为0 
    list-style-type:none; 把ol，ul的默认样式去掉 ol前面的 1. 2. 3. 等等以及 ul前面的 . . .
}
image{
    border:none; 去掉图片外面的边框(在IE下)
}
a{
    text-decoration:none; 去掉链接的下划线
}
h1,h2,h3,h4,h5,h6,p{
    margin:0px; 去掉标题以及P标签的margin（外边距）
}

Sundyfuther

关于css

css基础知识回顾

1、 css的引入方式：

2、罗列一下css样式表中的元素：

宽高，背景，边框

边距分为外边距margin和内边距padding

盒模型（可以把我们的每一个标签都理解为一个盒子）

浮动 float

定位position:

关于文本css样式

其他常用样式

3.css法则:同等优先级，后面的样式覆盖前面的样式

以上4个伪类选择器有一定的顺序，请不要随意改变

4、reset样式表

5.

css基础知识回顾

1、 css的引入方式：

2、 罗列一下css样式表中的元素：

宽高，背景，边框

边距 分为外边距margin和内边距padding

盒模型（可以把我们的每一个标签都理解为一个盒子）

浮动 float

定位position:

关于文本css样式

其他常用样式

3.css法则:同等优先级，后面的样式覆盖前面的样式

以上4个伪类选择器有一定的顺序，请不要随意改变

4、reset样式表

5.

2、罗列一下css样式表中的元素：

边距分为外边距margin和内边距padding