《Head First HTML与CSS 》笔记-0x4

目录

 

@font-face

CSS颜色

盒模型（BoxModel）

 id属性

使用多个样式表

在CSS中增加媒体查询

---

• @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">