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

CSS样式与媒体查询精讲

最新推荐文章于 2022-03-03 00:43:10 发布

原创最新推荐文章于 2022-03-03 00:43:10 发布 · 309 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML #前端基础 #css媒体查询 #盒模型

前端基础同时被 2 个专栏收录

167 篇文章

订阅专栏

HTML

6 篇文章

订阅专栏

本文深入解析CSS中的字体加载、颜色设置、盒模型应用、ID选择器使用及多个样式表的链接方法。详细介绍了如何通过@font-face加载不同格式的Web字体，CSS颜色的定义方式，盒模型的布局技巧，ID属性的独特作用，以及如何正确使用多个样式表和媒体查询以实现响应式设计。

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