css

css ：层叠样式表 (Cascading Style Sheets)

css可以用来为网页创建样式表，通关样式表可以对网页进行装饰。

所谓层叠，可以将整个网页想象成是一层一层的结构，层次搞的就爱哪个会覆盖层次低的。

而css就可以分别为网页的各个层次设置样式

tilt_3d-1.0.1-fx.xpi 该插件可以把网页转换成3d视角  看出层次结构，火狐浏览器中安装

http://download.csdn.net/download/intel80586/5694711

基础简介：

内联css样式：可以编写到元素的style的属性当中，如<p style="color:red">测试文本</p>

多个样式用分号 “；”  进行连接，该样式只对当前元素的内容其作用；内联样式属于“结构与表现耦合”，不方便后期的维护，不推荐

css样式编写到head中的style标签里，通过css选择器选中指定元素

然后可以同时为这些元素一起设置样式，这样可以使样式进一步的复用，使表现和结构进一步分离，推荐的使用方式

<style type="text/css">  p{   color:red;   font-size:40px  };</style>

外部样式表

新建一个以css为后缀的文件

将样式表编写到外部的css文件中，然后通关link标签来将外部的css 文件引入到当前页面中，

这样外部文件中的css样式表将会应用到当前页面中

讲css样式统一编写到外部的样式表中，完全使结构和表现分离，可以使样式表可以在不同的页面中使用，

最大限度的使样式可以进行复用，将样式统一写在样式表中，然后通关link标签引入，可以利用浏览器的缓存

加快用户访问的速度提高了用户体验,所以在开发中最推荐使用

<link rel="stylesheet" type="text/css" href="style.css">

css的注释  /*  这是注释内容 */

css的语法

选择器 声明块

选择器：

——通关选择器可以选中页面中指定的元素，并且将声明块中的样式应用到选择器对应的元素上

声明块：

——声明块紧跟在选择器的后边，使用一堆｛｝大括号括起来，声明块中实际上就是一组一组的名值对结构，

这一组一组的名值被我们称为声明，

在一个声明块中可以写多个声明，多个声明之间使用；分号隔开，声明的样式名和样式值之间使用：冒号  来连接

hbuilder安装 

纯文本编辑器：notepad++（免费）   sublime（收费）

 ide（集成开发工具）：dreamWeaver（收费） webStorm(收费）  hubilder（免费）

叹号 + table键  默认结构  （如果没有提示，可以关闭再打开）

书写元素  + table  自动补全

cctrl+2 在指定的浏览器打开

或者右上角 边改边看模式

块和内联

<div></div> div就是一个块元素，独占一行，无论内容多少 

p段落  h1标题 

div 没有任何语义，就是一个纯粹的块，也没有任何默认样式，多用于布局

span 是一个内联元素（行内元素），只占用自身大小

a   img  iframe 

span 没有任何语义，专门用来选中文字，设置样式

一般情况下只使用块元素包含内联元素，不会相反

a标签可以包含任意元素，除了它本身

p元素不可以包含任何元素

H5中没有 内联，块元素的概念了，内容模型来区分

常见选择器

元素选择器 语法：标签名｛｝  如 p{ }

id选择器  语法：  #id{ }       如   #p1{ }

类选择器  语法： .class属性值{ }   如  .pClass{ } 一个元素可以设置多个class属性值

通配选择器 语法： *｛ ｝ 如  *｛｝ 选中页面的所有元素

选择器分组：语法： 选择器1，选择器2，选择器3｛｝  逗号隔开

复合3选择器（交集选择器） 语法：选择器1选择器2选择器3｛｝紧密连接  ，不建议id选择器使用，因为id是唯一的

子元素和后代元素选择器

父元素：直接包含子元素的元素

子元素：直接被父元素包含的元素

祖先元素：直接或间接包含后代元素包含，父元素也是祖先元素

后代元素：直接或间接被祖先元素包含，子元素也是后代元素

兄弟元素：拥有相同父元素的就叫兄弟元素

后代元素选择器

作用——选中指定元素的指定后代元素

语法：祖先元素  后代元素 后代元素｛｝  空格隔开

子元素选择器：

作用——选中指定父元素的指定子元素

语法：父元素>子元素    大于号

ietester  可以测试ie的兼容性  在win10中可能不兼容了 ；在系统的ie调试工具中也可以选择ie版本 但没有ie6版本

伪类选择器

表示元素的一种特殊的状态，如访问过的连接，普通的超链接

正常连接 a：link    冒号开头  表示普通链接

访问过的链接 a：visited  通过历史记录来判断  ，由于涉及到用户隐私，visited只能设置字体的颜色

鼠标移入的链接a：hover

超链接被点击  a：active

hover active  也可以为其他元素绑定，ie6中不支持这种写法

获取焦点—— ：focus

指定元素前—— ：before

指定元素后——：after

选中的元素—— ：：selection  两个冒号   如选中的文字 这个伪类在火狐中要采用另一种编写方式

例子   p：：-moz-selection{ }

伪元素

使用伪元素来表示元素中的一些特殊的位置

首字母——  ：first-letter  控制p标签的第一个字符   p:first-letter{color:red}

首行——：first-line

before表示元素最前边的部分 一般before都需要结合content这个样式一起使用，

通过content可以向before或者after的位置添加一些内容，例如：  

p:before{  content:"这是段落的最前边";}

属性选择器

title属性，这个属性可以给任何标签指定，当鼠标移入到元素上时，元素中的title属性值会作为提示文字显示

作用：根据元素的属性、属性的值来选取指定元素

语法：   [属性名] 选取含有指定属性的元素

[属性名=“属性值”]  特殊值是需要用双引号的  选取指定值的元素

[属性名^=属性值]  表示以什么值开头

[属性名$="属性值"] 表示以什么值结尾

[属性名*="属性值"] 表示包含值指定属性值

更多的可在W3School手册中查找

子元素的伪类

：first-child

——选择第一个子标签      可以选中的第一个子元素  如:   p：first-child｛color：red｝

：last-child

——选择最后一个子标签

：nth-child

——选择指定位置的子标签 p：nth-child(1)｛color：red｝    从1开始

even偶数    odd奇数

：first-of-type

：last-of-type

：nth-of-type

——选择指定类型的子元素  和first-child这些非常类似，

child是在所有的子元素中排序  而type是在当前类型的子元素中排列 （如子女   第一 第二，大儿子，大女儿）

兄弟元素选择器

作用：选中一个元素后紧挨的元素

语法：前一个+后一个

如： span+p｛｝

作用：选中后背所有的兄弟元素

语法： 前一个~后边所有

如： span~p｛｝

否定伪类

作用：可以从已选中的元素中剔除某些元素

语法          ：not（选择器）

如：  p：not（.hello）｛｝

样式的继承

css中，祖先元素上的样式，也会被他的后代元素所继承，利用继承，可以将一些基本的样式设置给祖先元素

这样所有的后代元素将会自动继承这些样式，

并不是所有的样式都会被子元素所继承，比如：背景相关的样式都不会被继承  边框  定位

更多可在手册中查询

选择器的优先级

如  .p{}   p{}  #{}  选中同一个元素

当使用不同的选择器，选中同一个元素时，并且设置相同样式时，这时样式之间产生了冲突，这时由选择器的优先级（权重）

最高的优先使用。

优先级的规则

内联样式，优先级 1000

id选择器，优先级 100

类和伪类，优先级 10

元素选择器，优先级 1

通配选择器*，优先级 0

继承的样式，没有优先级

当选择器中包含多种选择器时，要将多种选择器的优先级相加然后再比较，

但注意，选择器的计算不会超过他的最大数量级 如：10个id选择器 最大为900

如果选择器的级别一样，使用靠后的样式，

并集选择器的优先级是单独计算 div，p，#p1， 。hello｛｝

在某个样式的最后添加一个 ！important，该样式则会得到最高的级别，将会优先于所有的样式显示甚至超过内联样式，

但在开发中尽量避免使用    !imporatnt

伪类的顺序

涉及到a的伪类有4中

:link

:visited

:hover

:active

这四个选择器的优先级是一样的，所以要注意顺序的书写

文本标签

<em>  <strong>

em:表示一段内容的着重点。语气上的强调，em在浏览器中默认使用斜体显示

strong：表示一个内容的重要性，比em更强烈，默认粗体显示

两个标签可以单独使用，也可以同时使用

i标签中的内容斜体显示 没有语义

b标签的内容粗体显示  没有语义

small：比他父元素中的文字要小一些，在H5中使用small标签来表示一些细则一类的内容，

如：合同中的小字，网站的版权声明

big：没有语义 字体会变大 已不用

cite：表示参考的内容，网页中所有加书名号的内容都可以使用

q：表示一个短的引用（行内引用）有引号，无法复制，不同浏览器表现不同，利用before实现

blockquote：表示一个长引用，（块元素，独占一行，块级引用） 如 摘抄某段名言

sup：设置一个上标，如百度中的解释跳转

sub：表示一个下标  如表示一个 水的化学式

del：标签来表示一个删除的内容，自动添加删除线

ins：表示一个插入的内容，自动添加下划线

pre：预格式标签，会将代码中的格式保存，不会忽略空格

code：专门用来表示代码，不会保留格式

一般结合pre和code来表示一端代码  code解决单行代码；pre解决多行代码。

无序列表和有序列表

1.有序列表：使用ul来创建一个无序列表，使用li在ul中创建一个一个的列表项

通关type可以修改无序列表的项目符号可选值：disc，默认值，实现圆点，square，实心的方块

circle，控线的圆，一般不用，不同浏览器中显示效果不同；默认的项目符号一般不用

ul｛list-style：none｝ 隐藏项目符号，可以用li设置背景图片的方式来设置项目符号

ul li 都是块元素

2.无序列表：和无序列表相似，使用ol来代替ul，使用有序的序号来当项目符号

type属性，指定序号的类型，可选值

1 默认  使用阿拉伯数字；

a A  采用小写 或者 大写作为序号

i  I    采用小写 湖综合大写的罗马数字作为序号

列表之间可以互相嵌套

3.定义列表：用来对一些词汇或内容进行定义

dl：创建一个定义列表 dl中有两个自标签 dt：被定义的内容  dd：对定义内容的描述

<dl>  <dt>武松</dt>  <dd>景阳冈打虎</dd>  <dd>投奔梁山</dd>  <dt>xxx</dt>  <dd>这是对xxx的定义</dd><dl>

dl ul ol 之间可以互相嵌套

长度单位

px：像素

——在网页中使用最多的一个单位，相当于屏幕中的一个小点，屏幕实际上是由这些小点组构成的，这些像素点，是不能直接看见的

——不同显示器的一个像素的大小也不同，显示效果越好越清晰，像素越小，反之像素越大。

百分比%

——也可以将单位设置为一个百分比的像是，这样浏览器将会根据其父元素的样式来计算该值。

——使用百分比的好处：当父元素的属性值发生变化时，子元素也会按照比例发生改变

——在我们创建一个自适应的页面时，经常使用百分比作为单位

em

——em和百分比类似，它是相对于当前元素的字体大小来计算的

——1em = 1  font-size

——使用em时，当字体大小发生改变时，em也会随之改变

——设置字体相关样式时，经常会使用em

颜色单位：在CSS中可以直接使用颜色的单词来表示不同的颜色

红色：red，蓝色：blue，绿色：green

也可以使用RGB值来表示不同的颜色

——所谓的RGB值指的是red，green，blue三原色，通过这三种颜色的不同的浓度，来表示出不同的颜色

——例如：rgb（红，绿，蓝三色的浓度）；

——颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有

——浓度也可以采用一个百分数来设置，需要一个0%-100%之间的数字，使用的百分数最终也会转换为0-255之间的数

也可以使用十六进制的rgb值，原理和上边RGB原理一样，只不过使用十六进制数来代替，使用三组两位的十六进制数来表示一个颜色

语法：#红色绿色蓝色  如红色  #ff0000   黑色  #000000

像这种两位重复的颜色，可以简写如   #ff0000  可以写成 #f00 ； #aabbcc  #abc

字体的样式

设置字体颜色：color（前景色）

设置文字的大小，浏览器中一般默认的字体大小都是16px

font-size并不设置文字本身的大小，在页面中，每个文字的都是处在一个看不见的框中的，

实际上设置格的高度，并不是字体的大小，一般情况下文字都要比这个格小一些，也有时候会比格大，根据字体的不同

显示的效果也不同

font-family：微软雅黑；    配置字体，当采用某种字体，如果浏览器支持则使用该字体，如果字体不支持，则使用默认字体

如：arial只支持英文

可以同时指定多个字体，多个字体用逗号分开，浏览器会优先使用前边的字体，如果前边的没有，则使用下一个

浏览器使用的字体默认就是计算机中的字体，如果计算机中有，则使用，没有则不用（如果字体名有空格，则使用引号包含）

字体的分类

serif（衬线字体） 拐弯不好写 小角

sans-serif（非衬线字体）

monospace（等宽字体）

cursive（草书字体）

fantasy（虚幻字体）不同的浏览器 不同的实现

可以将字体设置为这些大的分类，当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式

一般把分类放在font-family的最后面