CSS@1介绍和准备 - Jiacheng Pan's Blog

引入 CSS

三种方法用于在 HTML 文档中引入 CSS：

外部样式表

1
2
3

<head>
	<link rel="stylesheet" href="base.css">
</head>

内部样式表

<head>
	<style type="text/css">
		body{background-color:read;}
		p{margin-left:20px;}
	</style>
</head>

内嵌样式表
不利于后期的维护，静态页面不建议

1
2
3

<p style="color:read;margin-left:20px;">
	this is a paragragh.
</p>

CSS 语法

基本语法

1
2
3

selector{
	property: value;
}

selector：选择器，也就是指明样式应用的对象。因为你写 CSS 样式时，必须要指名道姓的说，我这些样式是写给谁谁谁的，所以必须要用选择器把样式应用的对象挑选出来。
property：性质或者称为属性。
value：属性的值。

可以这么认为，如果 CSS 是一套房子的装修方案，那么 selector 就可以认为是物品的名字，property 就是物品的属性，value 则是这个属性的值。比如你想要把东墙，西墙的背景颜色刷成蓝色，墙上写的字体都要是微软雅黑，你可以这么写：

east_wall, west_wall{ //东墙和西墙
	background-color: blue; //背景颜色为蓝色
	font-family: Microsoft yahei; //字体为微软雅黑
}

浏览器私有属性

有时候，有些属性只有某些浏览器实现了，或者说在不同的浏览器中，不同属性的名称叫法不一样，这时，就需要在属性前加上必要的前缀，常见浏览器和它们的私有属性的对应关系如下：

browser	prefix
chrome, safari	-webkit-
firefox	-moz-
IE	-ms-
opera	-o-

举个例子，以前圆角属性border-radius还未在所有浏览器普及的时候，需要这么写 CSS：

-webkit-border-radius: 50%;
-o-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;

属性值语法

因为我们后面会介绍不同的属性，属性的值必须要符合一定语法，其实这和正则表达式比较像的，比如，background-color 是颜色，它的值可能就是一个关键词（如 blue, red）或者 16 进制 RGB 值（#ffffff 或#fff 表示白色)，而 border-width 是边框宽度，那可能就是一个数字。我们这里要讲的，就是说明如何表示属性值的规则。OK，来举个栗子：
margin: [<length>|<percentage>|auto]{1,4}

这句话的意思就是，margin 这个属性的值，可以是 length（长度），或者 percentage（百分数），或者关键词 auto，而这个值可以写 1-4 个。因为一个元素的外边距（margin）有上下左右四个，所以可以写 1-4 个值，而值的类型当然可以是绝对长度，或者相对长度或者自动设置（auto）。
OK，那么我们来学一下这句话是怎么写的，也就是规则是什么。

margin: [<length>|<percentage>|auto]{1,4}

红色部分：基本元素
基本元素有三种：
- 关键词：auto, solid, bold…
- 类型
  - 基本类型（<length>, <percentage>, <color>…）
  - 特殊类型（<padding-width>, <background-color>…）
- 其他：inherit(继承)，initial（默认）
绿色部分：组合符号
组合符号就是用来表示这些基本元素之间的关系是怎么样的：
- |：分隔两个基本元素，表示两者只能出现一个，比如后面我们会讲到：
1
display:block|inline|inline-block|none
这一句表示，display这个属性的值只能是block, inline, inline-block, none中的其中一个。
- (空格)：表示这两个基本类型必须出现，而且必须以相同的排列顺序出现，随便举个例子，比如：
1
font:<font-family> <font-size>
表示：font 这个属性的值，一定要由一个类型为 font-family 的值和一个类型为 font-size 的值以如上的排列顺序构成。
- ||：表示前后两个元素至少出现一个，对顺序不作要求。
- &&：表示前后两个元素必须出现，对顺序不做要求。
- []：表示一个优先级，也就是方括号中的整个看做一个整体，随便举个例子：
1
font-weight:[bold|thin] [<percentage>|<lenth>]
表示 font-weight 这个属性一定要有两个值组成，一个是 bold 或 thin，一个是一个百分比值或长度值，且前后顺序要保证。
蓝色部分：数量符号
- {}:花括号中间写两个值，中间用逗号隔开。表示最少出现次数和最多出现次数。当然，两个值当中其中一个不设置，就表示不作要求。举个例子：
  margin: [<length>|<percentage>]{1,4}
  其中的{1,4}就表示，中括号中的值要出现最少一次，最多四次。
- ?:表示出现 0 次或 1 次。相当于{0, 1}
- *:表示出现 0 次或多次。相当于{0, }
- +:表示出现 1 次或多次。相当于{1, }
- #:表示出现 1 次或多次。注意：#和+很像，但是唯一不同的是，当用#表示时，这个元素多次出现需要用逗号隔开。
  对比一下，符合bold smaller#这一条规则的取值有：
  - bold smaller
  - bold smaller, smaller
  - bold smaller, smaller, smaller
    而符合bold smaller+这一条规则的取值有：
  - bold smaller
  - bold smaller smaller
  - bold smaller smaller smaller
- 无：说明该元素只出现一次。

OK，在学习之后做个简单的练习，有个属性叫 text-shadow。它可以写 none，也可以写一个或多个用逗号隔开的，由 2 个或 3 个长度类型的值以及 0 或 1 个颜色类型的值构成的组合。答案在下方，我写成白色了，当然不是唯一的答案：
答案：text-shadow:none|[<length>{2,3}&&<color>?]#

@规则语法

我在这儿不再赘述，这些内容在后面会再出现。
@media：用来做响应式的布局，只有设备符合@media 媒体查询条件样式才能生效
@keyframes：描述 css 动画的中间步骤
@font-face：引入外部字体

推荐