目录
-
@font-face
@font-face {
font-family: "Emblema One";
src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),
url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.ttf");
}
body {
font-family: Verdana, Geneva, Arial, sans-serif;
font-size: small;
}
| TrueType字体 | .ttf，与OpenType紧密相关 |
|---|---|
| OpenType字体 | .otf，建立在TrueType基础之上 |
| Embedded OpenType字体 | OpenType的一种压缩形式，微软专用，仅IE支持 |
| SVG字体 | scalable vector graphics，一种通用图像格式。SVG字体使用这种格式表示字体 |
| Web开放字体格式 | 建立在TureType基础之上，已经发展为Web字体的一个标注。大多数浏览器支持 |
-
CSS颜色
不区分大小写。基本颜色16种，扩展颜色150种，可按rgb分量来自定义，如
body {
background-color:rgb(30%,50%,0%);
}
/*
body {
background-color:rgb(120,222,0);//0~255之间
}
body {
background-color:#cc6600;//十六进制
}
*/
-
盒模型（BoxModel）
.guarantee {
border-color:white;
border-width:1px;
border-style:dashed;
background-color:#a7cece;
padding:25px;
padding-left:80px;
margin:30px;
margin-right:250px;
background-image:url(images/background.gif);
background-repeat:no-repeat;
background-position:top left;
}
-
id属性
元素唯一标识符
#eid{
样式；xxx;
}
-
使用多个样式表
注意！ 后链接的样式表会覆盖前面的样式。使用时需注意顺序。
-
在CSS中增加媒体查询
@media screen and (min-device-width:481px){
//媒体查询设备屏幕
#guarantee {
margin-right:250px;
}
}
@media screen and (min-device-width:480px){
#guarantee {
margin-right:30px;
}
}
@media print {
//如果要打印页面则
body {
font-family:Times,"Times New Roman",serif;
}
}
p.specials {
//其他正常
color:red;
}
<link type="text/css" rel="stylesheet" href="lounge.css" media="screen and (min-width:481px)">
<link type="text/css" rel="stylesheet" href="lounge-mobile.css" media="screen and max-width:480px)">
<link type="text/css" rel="stylesheet" href="lounge-print.css" media="print">
