码迷,mamicode.com
首页 > 其他好文 > 详细

样式规则

时间:2015-07-31 06:37:01      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:

标签选择器   给页面某个元素设定样式
关联类选择器    标签名.类名   给同一元素定义不同的样式规则
独立类选择器    .类名        给不同元素定义同样的样式规则 
ID选择器    #ID 用来定义某一定义功能的标签元素
关联选择器    用空格隔开的两个或多个单一选择器  P EM{background:yellow}  > EM{background:yellow}
组合选择器    多个选择器之间用 , 分开
伪元素选择器    HTML元素:伪元素{属性:值}
背景      位置    布局    边缘    列表    其他    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 
边缘: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 投影方向 
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
绝对定位能精确定位元素在页面的独立位置,不考虑页面上其他元素的位置
相对定位所设定的位置值是相对于元素通常应在的位置的偏移量 
如果父元素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 只有在内容超出元素才显示滚动条




样式规则

标签:

原文地址:http://www.cnblogs.com/TT-Cartier/p/4691069.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!