CSS层叠样式学习总结.docx

CSS层叠样式学习总结.docx

《CSS层叠样式学习总结.docx》由会员分享，可在线阅读，更多相关《CSS层叠样式学习总结.docx（19页珍藏版）》请在冰点文库上搜索。

CSS层叠样式学习总结

css3总结01

前缀

∙chrome:

-webkit-

∙safari:

-webkit-

∙firefox:

-moz-

∙ie:

-ms-

∙opera:

-o-

书写的时候应该先用有前缀的样式，再用无前缀的样式

颜色

∙rgb（red,green,blue）;

∙rgba（red,green,blue,opacity[0-1]）;

∙hsl（色度，饱和度，亮度）；

色度为色轮的度数，0/360d代表红色，120代表绿色，240代表蓝色；

饱和度百分比值，100%表示完全显示该颜色；

亮度百分比值，0%代表黑色，100%代表白色，50%平均值

圆角

border-radius:

20px;//水平，垂直border-radius:

20px，20px;//左上，右上，右下，左下border-radius:

20px，20px20px20px;

下拉阴影

//水平；垂直；模糊直径；颜色box-shadow:

10px5px15px#000;//内阴影box-shadow:

10px5px15px#000inset;//水平；垂直；模糊直径；延展距离;颜色box-shadow:

10px5px15px15px#000;//多阴影box-shadow:

01px1px#fffinset,5px5px10px#000;

chromw:

-webkit-;safari:

-webkit-;ie>=9

文本阴影

//水平;垂直;颜色text-shandow:

1px1px#fff;//水平;垂直;模糊直径;颜色text-shandow:

1px1px.3em#fff;

渐变

默认下渐变是垂直方向的；也可以传递一个位置参数来改变方向

linear-gradient（#ccc,#ddd,white）;//设定一个倾斜度

linear-gradient（-45deg,#ccc,#fff）;//水平渐变

linear-gradient（left,#ccc,#fff）;//设置颜色停止值

linear-gradient（white,#ddd20%,black）;

选择器

//选中的第一个元素:

first-child//选中的最后一个元素:

last-child//选中的元素是其父元素的唯一子元素:

only-child//选中当前URL的哈希中的目标元素:

target

//选中复选框以被勾选的元素

:

checked

∙nth-child选择器

nth-child（n）;

nth-child（even）;/nth-child（2n）;

nth-child（odd）;/nth-child（2n+1）;

∙直接后代选择器

>

∙否定选择器

:

not（.current）

ie>=9

过渡

transition:

持续时间，属性，[动画类型];//多个动画transition:

2sopacity,.5sheightease-in;

定时函数种类

∙linear

∙ease-in

∙ease-out

∙ease-in-out

例子

div{

background:

pink;

width:

50px;

height:

50px;

-moz-transition:

2swidthease-in,2sheightease-out;/*Firefox4*/

-webkit-transition:

2swidthease-in,2sheightease-out;/*SafariandChrome*/

-o-transition:

2swidthease-in,2sheightease-out;/*Opera*/

transition:

2swidthease-in,2sheightease-out;}div:

hover{

width:

100px;

height:

150px;}

div{

position:

absolute;

left:

10px;

-moz-transition:

2sleft

-webkit-transition:

2sleft;

-o-transition:

2sleft;

transition:

2sleft;

}

div:

hover{

position:

absolute;

left:

100px;

}

firefox:

-moz-; chrome:

-webkit-;safari:

-webkit-;ie>=10;opear:

-o-;

css3总结03

∙

box-flex:

设置或检索弹性盒模型对象的子元素如何分配其剩余空间。

∙

#box{display:

box;width:

240px;height:

100px;margin:

0;padding:

10px;list-style:

none;}#boxli:

nth-child

（1）{box-flex:

1;}#boxli:

nth-child

（2）{box-flex:

1;}#boxli:

nth-child（3）{box-flex:

2;}

注意box-flex只是动态分配父元素的剩余空间，而不是整个父元素的空间。

如上例，父元素#box的宽度为240px，如果你认为a,b,c的宽度分别为60,60,120那么就错了，因为box-flex只是分配父元素的剩余空间而已，所以a,b,c所分到的应该是除内容外所剩余下来的宽度

box-flex-group:

设置或检索弹性盒模型对象的子元素的所属组。

box-ordinal-group:

设置或检索弹性盒模型对象的子元素的显示顺序。

box-direction:

设置或检索弹性盒模型对象的子元素的排列顺序是否反转。

box-lines:

设置或检索弹性盒模型对象的子元素是否可以换行显示。

.hbox{

display:

-webkit-box;

-webkit-box-orient:

horizontal;

-webkit-box-align:

stretch;

-webkit-box-pack:

start;

display:

-moz-box;

-moz-box-orient:

horizontal;

-moz-box-align:

stretch;

-moz-box-pack:

start;

}

.vbox{

display:

-webkit-box;

-webkit-box-orient:

vertical;

-webkit-box-align:

stretch;

display:

-moz-box;

-moz-box-orient:

vertical;

-moz-box-align:

stretch;

}

上面将display设置为-webkit-box或-moz-box-，然后设置子元素布局的方向。

默认情况下，所有子元素都将自动扩充为父元素一样的大小。

但通过设置box-flex属性却可以修改默认行为

#sidebar{

-webkit-box-flex:

0;

-moz-box-flex:

0;

box-flex:

0;

width:

200px;

}#content{

-webkit-box-flex:

1;

-moz-box-flex:

1;

box-flex：

1；

}

如果设置box-flex为0，就指定了该元素不允许扩充；相反设置1或更大的数值该元素会自动扩充可利用的内容空间。

上面对侧边栏设置flex为0；而主内容区设置flex为1

字体

@font-face{

font-family:

'Bitstream'

src:

url（'/Bitstream.ttf'）;}#font-example{

font-family:

Bitstream;}

css实例--文字/字体

使用自定义字体：

∙在CSS2中font-family属性只能使用两个字体：

∙通用字体：

Serif字体，Sans-serif字体，Monospace字体，Cursive字体,Fantasy字体;

∙特定字体：

如Times,Courier等，要求计算机已经安装该字体；

使用@font-face：

1

2

3

4

5

6

7

@font-face{

   font-family:

example;

   src:

url（'example.ttf'）,url（'example.eot'）;/*IE9+*/

}

div{

  font-family:

example;

}

文本缩进和首字符下沉：

∙缩进：

text-indent;

∙首字符设置：

:

first-letter;

文本被选中：

1

2

3

:

:

selection{}

//老版本的firefox

:

:

-moz-selection{}

调整文字，字符间距：

∙demo:

∙word-spacing：

空格距离；

∙letter-spacing：

子间距离；

∙line-heigh：

文本行间距；

∙white-space：

空格，换行符的控制；

∙强制换行：

word-wrap:

break-word; word-break:

normal;

 文字阴影/框阴影：

∙text-shadow：

h-shadow（必须） v-shadow（必须） blur color;

∙文字毛玻璃效果：

∙box-shadow:

 h-shadow（必须） v-shadow（必须） blurspreadcolorinset;

文本溢出处理：

∙demo:

∙overflow：

主要在对高度的处理，如果宽度不够，默认会换行；

∙text-overflow：

主要对宽度的处理，在设置white-space:

nowrap;阻止换行之后可以设置默认（clip）或省略（ellipsis）;

高级文字设置：

∙金属质感文字

∙linear-gradient:

 （direction,color-stop1,color-stop2,...）;

隐藏文本：

∙使用display;

∙使用opacity;

∙使用text-indent;

1

2

3

4

h1{

   text-indent:

-9999px

   ............

}

∙使用定位；

1

2

3

4

5

h1{

  position:

absolute;

  top:

-9999px;

  left:

-9999px;

}

文字旋转：

1

2

3

-ms-transform:

rotate（30deg）; /*IE9*/

-webkit-transform:

rotate（30deg）; /*Chrome,Safari,Opera*/

 transform:

rotate（30deg）;

结构性伪类

E:

root

匹配文档的根元素。

在HTML（标准通用标记语言下的一个应用）中，根元素永远是HTML

结构性伪类

E:

nth-child（n）

匹配父元素中的第n个子元素E

结构性伪类

E:

nth-last-child（n）

匹配父元素中的倒数第n个结构子元素E

结构性伪类

E:

nth-of-type（n）

匹配同类型中的第n个同级兄弟元素E

结构性伪类

E:

nth-last-of-type（n）

匹配同类型中的倒数第n个同级兄弟元素E

结构性伪类

E:

last-child

匹配父元素中最后一个E元素

结构性伪类

E:

first-of-type

匹配同级兄弟元素中的第一个E元素

结构性伪类

E:

only-child

匹配属于父元素中唯一子元素的E

结构性伪类

E:

only-of-type

匹配属于同类型中唯一兄弟元素的E

结构性伪类

E:

empty

匹配没有任何子元素（包括text节点）的元素E

一、E:

root，匹配文档的根元素

二、 E:

nth-child（n）,匹配父元素的第n个孩子元素E

    nth-child选择的是父元素的子元素，其中要满足两个条件：

①没有规定确切的类型，只要是子元素；②该元素要在第n的位置。

只需要看在父元素下的第n个孩子是否是E，如果是那么就匹配否则就不匹配。

      p:

nth-child

（2）:

选择的是父元素的第二个P类型的孩子节点，p:

nth-of-type

（2）：

选择的是父元素的所有孩子节点的P类型的第二个。

     对于理解了E:

nth-child（n）之后，对于结构伪类的理解很有帮助，其他类型都是在这个的基础上的特殊情况。

另外，结构伪类中一个比较特殊的用法是选择指定的元素的位置。

nth-child（n）、nth-last-child（n）、nth-of-type（n）、nth-last-of-type（n）中的N在选择器中的使用，这个参数可以是整数（1、2、3、4）、关键之（odd、even），还可以是公式（2n+1、-n+5）.但参数n的起始值始终是1而不是0.

1、参数可以是数值；

2、参数n为表达式【n*length】:

单length为整数1时，将选择整个系列中的所有元素，直到元素无法选择为止。

例如：

":

nth-child（2n）"

   n=0时，2*0=0,不选任何元素；

   n=1时，2*1=2，选中的是系列中的第2个元素；

3、参数n为表达式"n+length"，例如：

":

nth-child（n+3）"

   n=0时，0+3=3，选中的是第3个元素；

   n=1时，1+3=4，选中的是第4个元素；

4、参数n为表达式【-n+length】，例如：

":

nth-child（-n+3）"

   n=0时，-0+3=3，选中的是第3个元素；

   n=1时，-1+3=2，选择的是第2个元素；

  当为负数的时候，不选择任何元素。

5、如果n的表达式为【2*n+1】或者【2*n-1】，那么此时与odd的效果相同，一样的【2n】与even的效果是一样的

这里有一个比较特别的用法就是从父元素的相反方向进行匹配，:

last-child,:

nth-last-child,:

nth-last-of-type（n）,:

last-of-type，这几个选择器都是从父元素的最后一个开始匹配。

为了方便记忆和查询，把CSS的结构伪类选择器归为四类：

1）通用子元素过滤器：

E:

nth-child（n）（顺序过滤）和E:

nth-last-child（n）（逆序过滤）

2）通用子类型元素过滤器：

E:

nth-of-type（顺序过滤）和E:

nth-last-of-type（n）（逆序过滤）

3）特定位置的子元素：

E:

first-child,E:

last-child,E:

first-of-type,E:

last-of-type

4）特定状态的元素：

E:

root（根节点）、E:

only-child（独子元素）、E:

only-of-type（独子类型元素）和E:

empty（孤节点）

CSS介绍

　　☆CSS全称为“层叠样式表（CascadingStyleSheets）”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

　　☆选择符：

又称选择器，指明网页中要应用样式规则的元素。

　　声明：

在英文大括号“｛｝”中的的就是声明，属性和值之间用英文冒号“：

”分隔。

当有多条声明时，中间可以英文分号“;”分隔，如下所示：

p{font-size:

12px;color:

red;}

注意：

1、最后一条声明可以没有分号，但是为了以后修改方便，一般也加上分号。

2、为了使用样式更加容易阅读，可以将每条代码写在一个新行内，如下所示：

p{

font-size:

12px;

color:

red;

}

　　☆CSS中也有注释语句：

用/*注释语句*/来标明，Html中使用

--注释语句-->。

CSS样式的基本知识

　　☆CSS样式代码插入的形式来看基本可以分为以下3种：

内联式、嵌入式和外部式三种。

　　一、内联式css样式表就是把css代码直接写在现有的HTML标签中，如下面代码：

red">这里文字是红色。

　　二、嵌入式css样式，就是可以把css样式代码写在标签之间。

如下面代码实现把标签中的文字设置为红色：

span{

color:

red;

}

嵌入式css样式必须写在之间，并且一般情况下嵌入式css样式写在之间。

　　三、外部式css样式（也可称为外联式）就是把css代码写一个单独的外部文件中，这个css样式文件以“.css”为扩展名，在内（不是在