首页 > 代码库 > CSS学习笔记

CSS学习笔记

1、HTML 和 CSS 颜色规范中定义了 147 中颜色名(17 种标准颜色加 130 种其他颜色)。
http://www.w3school.com.cn/cssref/css_colornames.asp (link里面列出了这些颜色)

2、css的尺寸(http://www.baidu.com/s?wd=%E8%8B%B1%E5%AF%B8 可以查查):
单位 描述
% 百分比
in 英寸
cm 厘米
mm 毫米
em
1em 等于当前的字体尺寸。
2em 等于当前字体尺寸的两倍。
例如,如果某元素以 12pt 显示,那么 2em 是24pt。
在 CSS 中,em 是非常有用的单位,因为它可以自动适应用户所使用的字体。
ex 一个 ex 是一个字体的 x-height。 (x-height 通常是字体尺寸的一半。)
pt 磅 (1 pt 等于 1/72 英寸)
pc 12 点活字 (1 pc 等于 12 点)
px 像素 (计算机屏幕上的一个点)

3、css里面的属性(http://www.w3school.com.cn/cssref/index.asp#)
高级使用会用到的属性:
@keyframes 规定动画。
animation 所有动画属性的简写属性,除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定动画何时开始。
animation-iteration-count 规定动画被播放的次数。
animation-direction 规定动画是否在下一周期逆向地播放。
animation-play-state 规定动画是否正在运行或暂停。
animation-fill-mode 规定对象动画时间之外的状态。

因为浏览器的不同,display参数不同
div
{
width:350px;
height:100px;
border:1px solid black;

/ Firefox /
display:-moz-box;
-moz-box-orient:horizontal;

/ Safari、Opera 以及 Chrome /
display:-webkit-box;
-webkit-box-orient:horizontal;

/ W3C /
display:box;
box-orient:horizontal;
}

在不同设备上显示不同:
@media screen
{
p.test {font-family:verdana,sans-serif; font-size:14px}
}

@media print
{
p.test {font-family:times,serif; font-size:10px}
}

@media screen,print
{
p.test {font-weight:bold}
}

CSS学习笔记