CSS

Posted on | In ,

简介

CSS（cascading style sheets, 层叠样式表），可以将HTML理解为身体，CSS理解成衣服。
CSS能对某部分内容达到统一管理的效果。
新建工程：new->dynamic web project -> HeadFirstCss，
在HeadFirsHtml - WebContent选项下新建文件夹chap01-sec02，新建HTML file。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css"> //内嵌式
	P{
		font-size: 20px;
		color: red;
	}
</style>
</head>
<body>
<p>paragraph 1</p>
<p>paragraph 2</p>
</body>
</html>

CSS核心基础

基础语法

p{color: red; font-size: 20px;}
其中p为选择器，color和font-size为属性，red和20px为属性值。
/…/进行多行注释

基本选择器

1） 标记选择器
上面的P

2） 类别选择器
都是以点号开头的，里面定义一些属性内容。需要引用的时候用class关键字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.r{
		font-size: 20px;
		color: red;
	}
	.b{
		font-size: 10px;
		color: blue;
	}
</style>
</head>
<body>
<p class="r">paragraph 1</p>
<p class="b">paragraph 2</p>
</body>
</html>

3） id选择器

id是唯一的，只能一次建立使用。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#p1{
		font-size: 20px;
		color: red;
	}
	#p2{
		font-size: 10px;
		color: blue;
	}
</style>
</head>
<body>
<p id="p1">paragraph 1</p>
<p id="p2">paragraph 2</p>
</body>
</html>

在HTML中引入CSS的方法

1） 行内样式

写在标签里。

行内样式

2） 内嵌式

1
2
3
4
5
6
7
8
9
10
11
12
<title>Insert title here</title>
<style type="text/css"> //内嵌式
	p{
		font-size: 20px;
		color: red;
	}
</style>
</head>
<body>
<p>paragraph 1</p>
<p>paragraph 2</p>
</body>

3） 链接式（用得最多）

新建.css文件，将所有的样式写在里面，进行统一管理。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//red.css文件
p{
		font-size: 20px;
		color: red;
	}

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link href="red.css" type="text/css" rel="stylesheet">
</head>
<body>
<p>链接式</p>
</body>
</html>

4） 导入样式

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	@import url(red.css);
</style>
</head>
<body>
<p>导入方式</p>
</body>
</html>

导入样式与链接式的区别：链接式是先将链接写在那儿，不会将css全部加载进来，当执行到需要的地方，如

标签时，才会进行渲染，所以性能更高。导入式则是在import时将css全部导入，性能比较低。

5） 几种样式的优先级比较

行内样式最高。

网页制作小实践

网页裸奔

设置标题

设置图片

设置正文

设置整体页面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>引力波</title>
<style type="text/css">
	/* 设置标题 */
	h1{
		color:white;
		background-color:gray;
		text-align: center;
		padding:20px;
	}
	/* 设置图片 */
	img{
		width: 400px;
		height: 200px;
		float: left;  /*向左悬浮*/
		margin: 8px;  /*图片与文字的间距 */
	}
	/* 设置正文 */
	p{
		font-size: 20px;
		line-height: 1.5; 
		text-indent: 2em;
	}
	/* 设置整体页面 */
	body{
		margin: 0px;
		background-color: #DFDFDF;
	}
</style>
</head>
<body>
<h1>Universe
</h1>
<img src="../universe.jpg"/>
<p>北京时间2017年10月16日22点，美国国家科学基金会召开新闻发布会，宣布LIGO（Laser Interferometer Gravitational-Wave Observatory, 美国激光干扰引力波天文台）和VIRGO（欧洲室女座引力波天文台）于2017年8月17日首次发现双中子星并合引力波事件（编号GW170817），国际引力波电磁对应体观测联盟发现该引力波事件的电磁对应体。</p>
<p>这是人类第一次同时探测到引力波及其电磁对应体，是引力波天文学的极为重要的里程碑，在天文学以及物理学发展史上具有划时代的意义，正式开启了引力波天文学时代。</p>
</body>
</html>

CSS高级特性

复合选择器

交集、并集、后代、子选择器。

交集选择器，把共同的东西抽取出来：如p.c{…}

并集选择器，对多个选择器加东西，如p,h1,.c,#d1{}

后代选择器，对p里的span加东西，如p span{} //尽量不要用行内

子代选择器，对直接后代作用，而不对其简介后代有影响 p>span

CSS继承特性

嵌套，子节点继承父节点的特性。

但有些不能继承：如border

CSS层叠特性

层叠样式规则（多个样式对一个节点进行作用，有冲突，因此设置的优先级）：行内样式>id样式（#p）>类别样式（.c）>标记样式（p）

用CSS设置文本样式

文本字体

文本倾斜效果

文本加粗效果

英文字母大小写转换

文字大小

文字的装饰效果

段落首行缩进

字词距离

文字行高

段落之间的距离

文本的水平位置

文本和背景颜色

段落垂直对齐方式

用CSS设置图片效果

图片边框

图片大小及缩放

图文混排

图片与文字的对齐方式

用CSS设置背景颜色和背景图像

设置背景颜色

设置背景图像

背景图像平铺

背景图像位置

背景图像位置固定

CSS盒模型

padding（图与相册边框之间的距离）
border（边框/相框）
margin（边框/相框之间的距离）

边框

内边框

外边框

网页布局与盒模型

1） 标准文档流
2） 块级元素VS行内元素

盒子在标准流中的定位

1）行内元素之间的水平margin
2）块级元素之间的竖直margin
3）嵌套盒子之间的margin
4）margin属性可以设置成负值

盒子的浮动与定位

盒子的浮动float

清除浮动影响clear

空间位置z-index

盒子display属性

用CSS设置表格属性

表格边框

表格宽度

表格隔行换色

表格列样式

鼠标经过时行变色

用CSS设置超链接样式

  1. 使用CSS伪类别来设置超链接样式
  2. 创建按钮式超链接

用CSS设置列表样式

设置列表的符号

设置列表图片符号

创建简单导航菜单

用CSS固定宽度布局

绝对定位法

浮动法

用CSS变宽布局

随着浏览器的放大缩小而放大缩小，而不会变形。