CSS入门

1. 什么是CSS

1.1 什么是css

1.1.1 什么是CSS

层叠样式表

1.1.2 HTML和CSS的关系

HTML – 表达结构（具有语义）

CSS – 表达样式

两者分离

1.1.3 CSS的作用

在浏览器调试对比网页在CSS变化下的浏览形象

1.2 HTML中的CSS

1.2.1 CSS如何加入
  1. 外部文件引入
1
<link rel="stylesheet" href="">
  1. 内联元素
1
2
3
<p style="background-color:yellow;">
  
</p>
  1. 放置头部
1
2
3
4
5
<head>
  <style>
  	p{background-color:green;}
  </style>
</head>

生效 – 就近

1.2.2 背景样式
1
2
3
4
p{
  background-image: #0f0;
  background-repeat: no-repeat;
}
1.2.3 关于颜色

默认颜色 – 透明 – transparent

表现方式

  1. RGB，rgb(123,155,231)，rgba(123,155,231,0.7)
  2. 16位，#FF00AF
1.2.4 图片背景

表现方式

background-image: url();

  1. 本地图片文件路径
  2. 外部图片文件路径
  3. base64

重复

background-repeat

  1. no-repeat
  2. repeat-x
  3. repeat-y

定位

background-position

背景固定

background-attachment

  1. scroll
  2. fixed

缩写顺序

color -> image -> repeat -> attachment -> position

2. 基础样式

2.1 段落样式

2.1.1 段落缩进
  1. em – 当前字体倍数
  2. 百分比 – 当前页面宽度
  3. in – 英寸
  4. mm – 毫米
  5. pt – 磅 – 72分之一英寸
  6. px – 像素
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p style="padding: 2em;text-indent: -2em;color: #333;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio neque dolores quia, et at animi sequi recusandae cupiditate voluptate iusto in nisi doloribus laborum architecto, laboriosam nesciunt, autem tenetur ab.</p>
</body>
</html>
2.1.2 间距与对齐
1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p style="text-indent: 2em; line-height: 2; text-align: justify; word-spacing: 20px; letter-spacing: 5px;">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio neque dolores quia, et at animi sequi recusandae cupiditate voluptate iusto in nisi doloribus laborum architecto, laboriosam nesciunt, autem tenetur ab.</p>
</body>
</html>

2.2 文本样式

2.2.1 文字修饰与空格处理
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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p style="text-transform: uppercase;">Lorem ipsum dolor sit amet.</p>
	<p style="text-transform: lowercase;">Lorem ipsum dolor sit amet.</p>
	<p style="text-transform: capitalize;">Lorem ipsum dolor sit amet.</p>
	<p style="text-decoration: underline;">Lorem ipsum dolor sit amet.</p>
	<p style="text-decoration: underline overline;">Lorem ipsum dolor sit amet.</p>
	<p style="text-decoration: line-through;">Lorem ipsum dolor sit amet.</p>
	<p style="white-space: normal;">Lorem ipsum dolor sit amet.</p>
	<p style="white-space: pre;">Lorem ipsum
	 dolor sit amet.</p>
	<p style="white-space: pre-wrap;">Lorem ipsum
	 dolor sit amet.</p>
	 <p style="white-space: nowrap;">Lorem ipsum
	 dolor sit amet.</p>
	 <p style="white-space: pre-line;">Lorem ipsum
	 dolor sit amet.</p>
	 <p style="direction: rtr;">Lorem ipsum dolor sit amet.</p>
</body>
</html>
2.2.2 字体

font-family 字体系列

  1. serif
  2. sans-serif
  3. monospace
  4. cursive
  5. fantasy
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
  	<p style="font-family: serif;">Lorem ipsum dolor sit amet.</p>
  	<p style="font-family: sans-serif;">Lorem ipsum dolor sit amet.</p>
  	<p style="font-family: monospace;">Lorem ipsum dolor sit amet.</p>
	<p style="font-family: cursive;">Lorem ipsum dolor sit amet.</p>
  	<p style="font-family: fantasy;">Lorem ipsum dolor sit amet.</p>
</body>
</html>
2.2.3 文字修饰

font-style

  1. normal
  2. italic – 使用斜体字
  3. obique – 让没有斜体属性的文字倾斜

font-variant 变体

font-size 使用em相对不错

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p style="font-style: normal;">Lorem ipsum dolor sit amet.</p>
	<p style="font-style: italic;">Lorem ipsum dolor sit amet.</p>
	<p style="font-style: oblique;">Lorem ipsum dolor sit amet.</p>
	<p style="font-variant: small-caps;">Lorem ipsum dolor sit amet.</p>
	<p style="font-weight: bold;">Lorem ipsum dolor sit amet.</p>
	<p style="font-size: 0.8em;">Lorem ipsum dolor sit amet.</p>
</body>
</html>
2.2.4 文字效果

text-shadow 阴影

注释：Internet Explorer 9 以及更早版本的浏览器不支持

1
text-shadow: h-shadow v-shadow blur color;

h-shadow必需。水平阴影的位置。允许负值。测试

v-shadow必需。垂直阴影的位置。允许负值。测试

blur可选。模糊的距离。测试

color可选。阴影的颜色。参阅 CSS 颜色值。测试

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<p style="text-shadow: 0px -1px 0px #000, 0px 1px 3px #606060; color: #606060;">Lorem ipsum dolor sit amet.</p>
	<p style="text-shadow: 0px -1px 0px #000, 0px 1px 3px #606060; color: #606060; outline-color: #f00; outline-style: dotted; outline-width: 2; display: inline-block;">Lorem ipsum dolor sit amet.</p>
</body>
</html>