CSS笔记

原创 2012年03月25日 22:00:06
样式规则的选择器:
关联选择器:
它所定义的样式规则的优先权比单一选择器定义的样式规则的优先权高,如:
p span{backgroud:yellow}
span{backgroud:green}
但是,在段落标签<p>中定义的<span>标签中的背景仍为黄色。
组合选择器,如:
H1,H2,H3,H4,TD{COLOR:RED;}
伪元素选择器:
伪元素选择器是指对同一个HTML元素的各种状态和其所包括的部分内容的一种定义方式。例如,对于超链接标签(<a></a>)的正常状态、访问过的状态、选中状态、光标移到超链接文本上的状态,对于段落的首字母和首行,都可使用伪元素选择器来定义。
格式:
HTML元素:伪元素{属性:值}
常用的伪元素:
A:active选中超链接时的状态
A:hover光标移到超链接上的状态
A:link超链接的正常状态
A:visited访问过的超链接状态
P:first-line段落中的第一行文本
P:first-letter段落中的第一个字母
类选择器和伪元素一起使用的格式:
HTML元素.类名:伪元素{属性:值}
标签选择器
ID选择器
CLASS选择器




CSS样式属性的分类:
字体
背景
文本
位置
布局
边缘
列表
其他




Filter(CSS滤镜)
例如:
<div style="width:120;height:40;background-color:red;filter:Alpha(Opacity=80) Blur(Add=5,Derection=135)">百度网<br/>www.baidu.com</div>
<div style="width:120;height:40;background-color:red;filter:Alpha(Opacity=80) Blur(Add=5,Derection=135) FlipV">百度网<br/>www.baidu.com</div>
两个DIV中第二个比第一个多了个“FlipV”,此属性表示将此内容倒转显示;
filter中的参数:
Alpha(Opacity=?,FinishOpacity=?,Style=?,StartX=?,StartY=?,FinishX=?,FinishY=?):此属性用于控制元素与背景的混合程度,也就是此元素的透明度。
第一个参数:透明度的值(0-100),透明度递增,必选
BlendTrans(Duration=?)设置淡入和淡出的时间值
Blur(Add=?,Direction=?,Strength=?)模糊程度
Chroma(Color=?)模糊的颜色
DropShadow(Color=?,OffX=?,OffY=?,Positive=?)阴影效果
倒转效果:
FlipH:水平方向
FlipV:垂直方向

Gray:去掉色彩,显示为黑白
Invert:翻转颜色
Light:光源效果(要结合JS)
Xray:显示图片的轮廓

Glow(Color=?,Strength=?)设置元素边缘差生类似发光的效果
Mask(Color=?)在元素的表面上覆盖一个透明的遮罩,如带着有色眼镜去看物体
RevealTrans(Duration=?,Transition=?)用于建立元素初始显示的转换效果
Shadow(Color=?,Direction=?):阴影效果
Wave(Add=?,Freq=?,LightStrength=?,Phase=?,Strength=?)在元素上实现一种波纹的效果


位置属性
Position:指定元素的位置,它的值有:absolute(绝对)、relative(相对)、static(通用)
Z-index:设置元素的层叠位置,可以是正值、也可是负值,值越大,越显示在上面


边缘:
margin(元素边界与外部内容的空隙大小)、padding(元素边界与内部内容的空隙大小)、border-width(边框线的宽度)、border-color(边框颜色)、border-style(边框线样式)、border(为border-width、border-color的组合)


列表,如图



样式规则的优先级
ID选择器>CLASS选择器>HTML标签选择器
内联样式表>嵌入样式表>链接样式表

css3、html5、js笔记(传智播客)

  • 2017年11月20日 14:52
  • 36.29MB
  • 下载

韩顺平PHP从入门到精通_html+CSS笔记

  • 2015年08月20日 12:31
  • 3.61MB
  • 下载

css 使用@font-face 嵌入自定义字体或字体图标方法笔记

通常css使用font-family指定客户端显示字体的样式,本笔记目的在于解决客户端未安装指定字体,导致无法完成设计效果要求。与此同时现在大部分图标使用字体格式,因为它有矢量,体积小等等优点讲解如何...

HTML/css笔记

  • 2014年09月01日 11:43
  • 1002KB
  • 下载

css学习笔记

  • 2013年10月21日 16:26
  • 3KB
  • 下载

Head First HTML与CSS 读书笔记(二) Font

css学习笔记

  • 2012年02月13日 14:35
  • 556KB
  • 下载

CSS学习笔记

  • 2011年12月12日 22:31
  • 2KB
  • 下载

【前端笔记】在HTML中画一条横线和IE10支持引用的CSS文件

首先大家国庆节快乐啊~~~ 这是我第一个在省外的国庆节,毕竟今年毕业了哇,奋斗的我们要加油~~~ 最近我会不断总结上一个WEB项目所用到的前端知识,和大家一起分享哈~~~在HTML中画一条横线和IE...

自己总结css笔记

  • 2013年01月21日 21:46
  • 10KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS笔记
举报原因:
原因补充:

(最多只允许输入30个字)