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，20px 20px 20px;

下拉阴影

//水平；垂直；模糊直径；颜色box-shadow: 10px 5px 15px #000;//内阴影box-shadow: 10px 5px 15px #000 inset;//水平；垂直；模糊直径；延展距离;颜色box-shadow: 10px 5px 15px 15px #000;//多阴影box-shadow: 0 1px 1px #fff inset, 5px 5px 10px #000;

chromw:-webkit-;safari:-webkit-;ie>=9

文本阴影

//水平;垂直;颜色text-shandow: 1px 1px #fff;//水平;垂直;模糊直径;颜色text-shandow: 1px 1px .3em #fff;

渐变

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

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

linear-gradient(-45deg, #ccc, #fff);//水平渐变

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

linear-gradient(white, #ddd 20%, 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: 2s opacity, .5s height ease-in;

定时函数种类

?linear

?ease-in

?ease-out

?ease-in-out

例子

div {

background: pink;

width: 50px;

height: 50px;

-moz-transition: 2s width ease-in, 2s height ease-out; /* Firefox 4 */

-webkit-transition: 2s width ease-in, 2s height ease-out; /* Safari and Chrome */

-o-transition: 2s width ease-in, 2s height ease-out; /* Opera */

transition: 2s width ease-in, 2s height ease-out;}div:hover{

width: 100px;

height: 150px;}

div {

position: absolute;

left: 10px;

-moz-transition: 2s left

-webkit-transition: 2s left;

-o-transition: 2s left ;

transition:2s left;

}

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:n one;}#box li:nth-child(1){box-flex:1;}#box li:nth-child(2){box-flex:1;}#box li: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 @font-face{

2 3 4 5 6 7 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(必须) blur spread color inset;

文本溢出处理： ? 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); /* IE 9 */

-webkit-transform:

rotate(30deg); /* Chrome,

Safari, Opera */

transform:

rotate(30deg);

结构性伪

类 E:root 匹配文档的根元素。在HTML （标准通用标记语言下的一个应用）中，根元素永远是HTML

结构性

伪类

E:nth-child (n) 匹配父元素中的第n 个子元素E 结构性

伪类

E:nth-last-ch ild(n) 匹配父元素中的倒数第n 个结构子元素E 结构性

伪类

E:nth-of-typ e(n) 匹配同类型中的第n 个同级兄弟元素E 结构性

伪类

E:nth-last-of -type(n) 匹配同类型中的倒数第n 个同级兄弟元素E 结构性

伪类

E:last-child 匹配父元素中最后一个E 元素结构性

伪类

E:first-of-typ e 匹配同级兄弟元素中的第一个E 元素结构性

伪类

E:only-child 匹配属于父元素中唯一子元素的E 结构性

伪类

E:only-of-typ e 匹配属于同类型中唯一兄弟元素的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全称为“层叠样式表(Cascading Style Sheets)”，它主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

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

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

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

p{font-size:12px;color:red;}

注意：

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

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

font-size:12px;

color:red;

}

☆CSS中也有注释语句：用/*注释语句*/来标明，Html中使用。

CSS样式的基本知识

☆CSS 样式代码插入的形式来看基本可以分为以下3种：内联式、嵌入式和外部式三种。

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

这里文字是红色。

。

二、嵌入式css样式，就是可以把css样式代码写在标签之间。如下面代码实现把标签中的文字设置为红色：

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

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