您的位置：首页 > Web前端 > CSS

CSS层叠样式表

2016-01-22 10:32 477 查看

1.选择符组

h1,p,span,body,div{}

2.类选择符

.demo{}//可用于任何选择符
p.demo{}
<p class=demo></p>

3.ID选择符

#demo{}
<p id=demo></p>

tips:类选择符和ID选择符的区别：

1.ID选择符只能被使用一次；

2.选择符组可以同时选择多个类选择符，如< p class=”demo1 dem2”>,而ID选择符不行

4.子选择器和后代选择器

example:   ./#demo>span{}(子选择器)
./#demo span(后代选择器)
<p class=demo> <span>这个会被子选择器/后代选择器影响</span></p>
<p class=demo> <span>这个会被子选择器/后代选择器影响
<span>这个只会被后代选择器影响</span>
</span></p>

tips:关于滤镜：

目前滤镜只支持IE浏览器，所以..局限性较大。相应的，所需要的网页效果亦可用Photoshop来替代。

5.滤镜：

· IE4.0以上支持的滤镜属性表

滤镜效果描述：

Alpha 设置透明度

Blru 建立模糊效果

Chroma 把指定的颜色设置为透明

DropShadow 建立一种偏移的影象轮廓，即投射阴影

FlipH 水平反转

FlipV 垂直反转

Glow 为对象的外边界增加光效

Grayscale 降低图片的彩色度

Invert 将色彩、饱和度以及亮度值完全反转建立底片效果

Light 在一个对象上进行灯光投影

Mask 为一个对象建立透明膜

Shadow 建立一个对象的固体轮廓，即阴影效果

Wave 在X轴和Y轴方向利用正弦波纹打乱图片

Xray 只显示对象的轮廓

语法：BODY,P,IMG{FILTER：ALPHA(opacity=opacity,finishopacity=finishopacity,style=style,startx=startx,

starty=starty,finishx=finishx,finishy=finishy)}

6.布局

6.1一列布局

居中：margin:0 auto

6.2两列布局

float:left/right;width:x%;height:xpx;background:color

6.3多列布局

中间插入middle类，但是float就不行了，需要定义position:absolute;上;右;下;左;(绝对定位）

6.4混合布局

absolute:相对于浏览器的绝对位置定位，有四个属性决定位置
relative:相对于其应该所在的位置定位。

tips:关于CSS的继承属性：不是所有属性都具有继承性。例如：border,margin,padding,background,position，布局，width,height.

7.定位

7.1相对定位

特点：合模型仍存在于文档流中，原来 的位置保留。根据设置的属性发生偏移。

7.2绝对定位

特点：合模型脱离文档流。根据祖先的相对定位进行绝对定位。如果没有进行过相对定位的祖先，那么其祖先就是<body>标签。

8.浮动

浮动元素也不存在于文档流中。清除浮动：元素的左侧/右侧不允许出现浮动元素，如果有，就换行显示。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航