Stanford CS142: Web Applications Week1 CSS
对于一个HTML文件，其内容的样式信息可以存储在.css文件中。这样做的好处是，完成一次样式信息的设计，就可以在多个地方使用。
一个css文件称为一个样式表(style sheet)，样式表中包含一个或多个CSS规则(CSS Rule)。
一个CSS规则的结构：
body {
font-family: Tahoma, Arial, sans-serif;
color: black;
background: white;
margin: 8px;
}
- 位于
{左边的字段body称作CSS选择器(Selector)； - 花括号中的内容称为声明块(Declaration Block)；
- 声明块中，
:左边的字段称为属性(Property)，例如font-mamily - 声明块中，
:右边的字段称为值(Value)，多个值用逗号分隔开，声明结束后用;结尾
CSS选择器和属性
这块建议参考CSS-142的课件CSS (stanford.edu)和CSS 参考手册 (w3school.com.cn)
颜色-color & background_color
颜色的描述有以下几种方法：
- 提前预定好的名字，例如
red,blue,green等 - 8位的16进制数字来描述
#RRGGBB - 0-255的10进制数字描述
rgb(R, G, B) - 百分数
rgb(80%,80%,80%)
CSS盒子模型
CCS的一些问题
继承
- CSS中有一些属性是可以从祖先元素继承而来，比如
font-size。 - 其他的一些元素比如
border，background等是不能被继承的。
匹配
most specific rule wins
将样式应用到HTML中
<head>
<link rel="stylesheet" type="text/css" href="myStyles.css" />
<style type="text/css">
body {
font-family: Tahoma, Arial, sans-serif;
}
</style>
</head>
<body>
<div style="padding:2px; ... "></div>
</body>
- 第2行的代码，是从
.css文件导入样式表，这是最推荐的方式 - 第3-7行代码，是针对当前页面设置的CSS样式
- 第10行，是针对特定的元素设置的CSS样式
