样式规则
标签选择器 给页面某个元素设定样式
关联类选择器 标签名.类名 给同一元素定义不同的样式规则
独立类选择器 .类名 给不同元素定义同样的样式规则
ID选择器 #ID 用来定义某一定义功能的标签元素
关联选择器 用空格隔开的两个或多个单一选择器 P EM{background:yellow} > EM{background:yellow}
组合选择器 多个选择器之间用 , 分开
伪元素选择器 HTML元素:伪元素{属性:值}
widht height 指的是内容大小 当设置padding时候 内容大小不变 但是装着内容的div 会变大 而没有设置Padding 是因为内容和边框是重合了的
背景 位置 布局 边缘 列表 其他 CSS滤镜 字体 文本 9大属性
背景: 背景色,背景图像,背景图像的控制 background-color background-image background-repeat background-position
位置:CSS-P中的内容 用来控制网页元素在浏览器文档窗口的位置 position z-index
字体: 字体,大小,颜色,显示效果,下划线,粗细
font-family 什么字体 font-size 字体大小 font-style 粗体还是斜体 text-decoration 下划线
font-weight 字体多粗 font-variant 让字母大写 text-transform 设置字母大小写
布局:设置元素在网页中如何放置 属性包括 visibility display overflow float clear
float:块级元素浮动起来就变成行内元素
边缘:margin padding width 设置4个边框粗细 border-方向-width color border-方向-color style 设直线虚实
列表: ol ul 用于设置列表项标记的类型,列表图片和位置 list-style-type list-style-image list-style-position
其他:cursor 设置鼠标移动到某元素上的形状
filter:设置元素的滤镜特效 多媒体滤镜特效 有边界区域的元素,表格 图片等 才能使用CSS滤镜特效 类似P 没有边界区域的无法使用
设置这些元素的 高宽 变成区域元素后 CSS滤镜可以使用
实现滤镜,设置filter属性的各种参数 filter设置多个参数值 之间用空格分开 有的参数由若干子参数组成
1、alpha 设置元素透明度 需要设置子参数 alpha(Opacity=?,FinishOpacity=?,Style=?StartX=?,StartY=?,FinishX=?,FinishY=?)
Opacity 0-100 0代表全透明 FinishOpacity可选参数 设置渐变透明,指定结束时透明度 Style 设置渐变透明样式 0代表同一形状 1代表线形 2 3
X Y渐变透明的开始和结束为止 2围
2、BlendTrans 设置元素淡入淡出效果 需要设置子参数 BlendTrans (Duration=?) 淡入淡出时间
3、Blur 用于建立模糊效果 像手在没干的油画上划过的效果 需要设置子参数 Blur(Add=?,Direction=?,Strength=?)
Add 是否单方向模糊,true(非0) false(0) D 设置模糊方向 S 代表有多少像素的宽度将受到影响
4、Chroma 用于把指定的颜色置为透明 也就是过滤掉某种颜色 需要设置子参数 Chroma(Color=?) 颜色
5、DropShadow 用于建立阴影效果 需要设置子参数 (Color=?,OffX=?,OffY=?,Positive=?)
C 指定阴影颜色 X Y 指定印象相对于元素的偏移量 P true 表示建立外阴影 false 内阴影
6、FlipH 将元素水平反转 7、FlipV 将元素垂直反转
8、Glow 用于设置元素边缘产生类似发光效果 需要设置子参数 (Color=?,Strength=?) c 指发光颜色 S 指发光强度 1-255
9、Gray 用于去掉图像的色彩,显示为黑白图像 不用设置子参数 10、Invert 用于反转图像颜色,产生类似底片效果
11、Light 用于设置光源效果,类似模拟光源照射物体的投影效果
12、Mask 用于在元素表面覆盖一个透明遮罩层 其效果类似带着有色眼镜看物体一样 需要设置子参数(color=?) 设置遮罩层颜色
13、RevealTrans 用于建立元素初始显示的转换效果 需要设置子参数 (Duration=?Transition=?) 切换时间 切换方式0-23
14、Shadow 用于建立令一种阴影效果 需要设置子参数 color 阴影颜色 Direction 投影方向
14、Shadow 用于建立令一种阴影效果 需要设置子参数 color 阴影颜色 Direction 投影方向
15、Wave 用于实现波纹效果 需要设置子参数 add 设置原对象是否按照波纹样式扭曲 freq 设置完成波纹个数 LightStrength 设置波浪效果的光照强度
0-100 phaes 设置波浪的起始角度 0-100百分比 strength 设置波浪幅度
16、Xray 用于显现图片的轮廓,产生X光片效果 不需要子参数
字体: 字体,大小,颜色,显示效果,下划线,粗细
font-family 什么字体 font-size 字体大小 font-style 粗体还是斜体 text-decoration 下划线
font-weight 字体多粗 font-variant 让字母大写 text-transform 设置字母大小写
color 字体颜色
font 可以定义关于字体的所有属性
文本:文字间距 对齐方式 首行缩进 设置文本所在行的行高 line-height: 可以是精确数字也可以是140% 表示行高等于文字大小的1.4倍
word-spacing 文字间距 letter-spacing 字符间距 vertical-align 垂直对齐方式 可以是相对于元素行高的百分比
text-align 文本水平对齐方式 text-indent 第一行缩进值 white-sapce
背景: 背景色,背景图像,背景图像的控制
background-color 设置背景色 设置成 transparent表示透明背景色 background-image 背景图像 url(图片地址)
background-repeat: 设置背景图像是否重复显示 不重复 或者x y方向重复 background-attchment fixed标识不随内容滚动 scroll 表示随内容滚动 background-position 设置背景图像水平和垂直位置
background 可以定义关于背景的所有属性
位置:CSS-P中的内容 用来控制网页元素在浏览器文档窗口的位置
position:绝对定位 相对定位 无特殊定位 absolute relative static
Absolute,CSS中的写法是:position:absolute; 他的意思是绝对定位,他是参照浏览器的左上角,配合TOP、RIGHT、BOTTOM、LEFT(下面简称TRBL)进行定位,在没有设定TRBL,默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性,那么当前的absolute则以浏览器左上角为原始点进行定位,位置将由TRBL决定。
绝对定位能精确定位元素在页面的独立位置,不考虑页面上其他元素的位置
相对定位所设定的位置值是相对于元素通常应在的位置的偏移量
如果父元素relative,子元素absolute 那么子元素的位置 是参照relative设定的
z-index:使用定位后,同一局域可能有元素堆叠,z-index用于设置这些堆叠元素的层叠顺序
z-index 属性大的在上 默认为0 负的在下 默认各元素堆叠,后出现的在上
div span 是常用标签
一般CSS-P 作用于div
当把文字 图像 元素放在div中时 就可以称为 div block 层,是指div标签中的内容 改变层的属性,嵌套在其中的元素可以随之出现,消失,更改,移动等
布局:设置元素在网页中如何放置 属性包括 visibility 设置元素课件状态 display:设置元素显示状态
inherit 继承父层的显示特性 visible显示在网页中 hidden 隐藏
block 元素的前后都会有换行 inline 元素前后都不会有换行
list-item 与block相同,但增加目录表项标记 none不显示元素 隐藏元素加快浏览器
clip:定义使用绝对定位元素可视区域 (顺时针)
overflow:元素中内容超出元素大小,设定元素的高宽后,导致元素中内容溢出(visible 增加元素的显示空间大小
hidden保持元素显示不变,裁剪掉多余 scroll 显示滚动 auto 只有在内容超出元素才显示滚动条
==============================================
1、浏览器默认会给body 添加margin值
posted on 2015-07-31 01:23 tongjiahao 阅读(130) 评论(0) 编辑 收藏 举报