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标签选择器
内联样式表>嵌入样式表>链接样式表

超全的css新手学习笔记

适合新手的css学习笔记,超级全面
  • qq_34477549
  • qq_34477549
  • 2016年10月11日 10:27
  • 1800

前端html与css学习笔记总结篇(超详细)

第一部分 HTML 第一章 职业规划和前景 职业方向规划定位: web前端开发工程师web网站架构师自己创业转岗管理或其他 web前端开发的前景展望: 未来IT行业企业需求最多的人才...
  • qq_36368586
  • qq_36368586
  • 2016年11月20日 16:53
  • 4000

HTML, CSS学习笔记(完整版)

第一章 div布局 前几课内容 .htm是早期的后缀,因为那时只能支持长度为3的后缀,因此html与htm是一样的。 shtml是服务器先处理然后再交给浏览器处理   #HTML小知识#之#...
  • u011925500
  • u011925500
  • 2014年10月02日 00:28
  • 4550

HTML/CSS基础笔记一

1. HTML/CSS介绍 HTML和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么的: 1. HT...
  • zln99
  • zln99
  • 2016年08月20日 14:37
  • 1410

css3布局的若干笔记总结

自己在写一些样式的时候,遇到的一些问题,顺手就记下了,多总结。1. css 图片间隙问题:解决方案:法宝一:定义图片img标签vertical-align:bottom,vertical-align:...
  • i10630226
  • i10630226
  • 2017年05月13日 19:05
  • 584

一、HTML+CSS基础知识学习笔记

注:如果早点了解那率性的你或者晚一点遇见成熟的我。学计算机的应该早点确定自己的技术方向,一定要有一个擅长的能够用来吃饭的,其他的能掌握多少就是多少,像我这样的什么都学,什么都不知道没什么卵用的。 1....
  • u013047859
  • u013047859
  • 2016年05月23日 22:56
  • 763

CSS基础笔记一览

CSS(Cascading Style Sheet,“级联样式表”/“层叠样式表”)   模盒型:(元素实际占用尺寸:width+padding+border+margin)   选择器: ...
  • vito_7474110
  • vito_7474110
  • 2018年02月03日 09:49
  • 70

CSS框模型笔记

框模型(Box Model)规定了元素框处理元素内容、内边距(padding),外边距(margin),边框(border)。边框位于外边距与内边距之间。框模型里所说的高度和宽度是指的是元素的高和宽,...
  • ElegantIce
  • ElegantIce
  • 2016年02月21日 13:59
  • 458

慕课学习史上最全零基础入门HTML5和CSS笔记

慕课学习史上最全零基础入门HTML5和CSS笔记Html和CSS的关系 学习web前端开发基础技术需要掌握:HTML、CSS、JavaScript语言。下面我们就来了解下这三门技术都是用来实现什么...
  • zoucanfa
  • zoucanfa
  • 2017年12月27日 19:11
  • 374

html + css + js初步简单学习笔记

html: 这个是HTML5的根元素。可以省略 注意每个文件最多只有一个根元素 页面头部分,可以省略 引入样式 标题1-6字体越来越小 定义的是段落 可以指定id class style...
  • JerroLuo
  • JerroLuo
  • 2016年07月27日 11:06
  • 3747
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS笔记
举报原因:
原因补充:

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