CSS样式

发表于 | 分类于 ， ，

CSS简介

Cascading Style Sheets 层叠样式表

HTML文件想象成房子骨架，里面的标签（块元素、行内元素）就是搭房子的砖，CSS负责装修(美化页面)，让静态页面好看一些。

内部样式

放置在style中的是内部样式

1.1体验样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>体验样式</title>
	<!-- 样式一般是放置在style标签里面 -->
	<style type="text/css">
		div{
			color: yellow；/*文字颜色*/
 			font-size:30px;/*文字大小*/
			background-color: red;/*背景色*/
			text-align: center; /*字体居中*/
			border: 5px solid black; /*
			边框颜色粗细*/
			opacity: .5; /*透明度*/
	</style>
</head>
<body>
	<div>祖国花朵</div>
</body>
</html>

1.2标签选择器

标签选择器：常用样式中选择匹配标签

web领域样式分为三种：

  • 外部样式
  • 内部样式
  • 行内样式

内部样式需要书写在head中，利用子元素双闭合标签style完成。
格式：

1
2
3
4
5
6
7
<style type="text/css">
    标签名字{
        属性:属性值;
        属性:属性值;
        ……
    }
</style>

常用属性：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/*文字颜色设置*/
color: orange;
/*设置字号，最小12px，最大上不封顶*/
font-size: 14px;
/*背景颜色设置*/
background-color: red;
/*文本对齐方式*/
text-align: center;
/*字体样式设置*/
font-style: italic;
/*透明度设置，0~1*/
opacity: 0.3;
/*光标放到该标签中，会变为小手*/
cursor: pointer;

1.3 id选择器

上面案例是通过标签名字匹配页面中对应标签设置（内部样式），除此之外还可以通过id选择器匹配标签（节点element）

命名标识符规范
可以是数字、字母、下划线、$
不能以数字开头
不能是关键字和保留字

一般情况下，id不重名，即属性值唯一

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>10id选择器</title>
	<style type="text/css">
		#box{
			color: cyan;
			/*文本的描述 没用下划线*/
			text-decoration: none;
		}
		#box1{
			/*列表默认样式设置*/
			list-style: square;/*变成正方形*/
		}
		#cur{
			color: cyan;
		}
		#box2{
			/*列表默认样式设置*/
			list-style: circle;/*变成空心圆*/
		}
	</style>
</head>
<body>
	<a href="http://www.taobao.com" id="box">淘宝</a>
	<ul id="box1">
		<li>初三</li>
		<li id="cur">初三</li>
	</ul>
	<ol id="box2">
		<li>初一</li>
		<li id="box2">初一</li>
	</ol>
</body>
</html>
  • 在标签（开始标签）这里添加一个id属性，对应右侧属性值
  • 在style标签里面（内部样式）# + 对应节点id的属性值
属性 属性值
text-decoration none、underline、overline、line-through
list-style none、circle、square

1.4 class选择器

注意：id选择器属性值一般唯一，class选择器可重名

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>类选择器</title>
	<style type="text/css">
		.current{
			color: skyblue;
			background-color: red;
			text-align: center;
		}
		.cur{
			color: cyan;
		}
	</style>
</head>
<body>
	<div class="current">
		祖国花朵
	</div>
	<div>
		祖国花朵1
	</div>
	<div>
		祖国花朵2
	</div>
	<div class="current">
		祖国花朵
	</div>
	<div>
		祖国花朵11
	</div>
	<div>
		祖国花朵22
	</div>
	<div> 今天是<span class="cur">3.9 </span></div>
</body>
</html>

1.5 背景系列样式

背景系列属性有如下几个：
background-color：背景颜色
background-img：背景图
background-repeat：背景图重复

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>背景样式</title>
	<style type="text/css">
		div {
			/*宽高设置*/
			width: 720px;
			height: 720px;
			/*背景色*/
			/*background-color: red;*/
			/*设置背景图*/
			/*background-image: url(2.jpg);*/
			/*背景重复设置*/
			/*background-repeat: no-repeat;*/
			/*简写*/
			background: red url(2.jpg) no-repeat;
		}
	</style>
</head>
<body>
	<div></div>
</body>
</html>

外部样式

在前端web开发中样式可以放置在css文件里面，在页面中通过link标签可以引入外部文件样式。

比如：我们在程序中创建css文件夹，这个文件夹中有一个default.css文件，这个文件里面可以写你的样式。像这种样式前端工程师称为外部样式。

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>外部样式</title>
	<link rel="stylesheet" type="text/css" href="css/default.css">
</head>
<body>
	<div class="box">
		<p>昨天下雨了，<span id="cur">冷</span></p>
	</div>
</body>
</html>
  • 如果想要引入外部css文件，需要通过link标签进行引入。
1
2
3
4
5
6
7
8
9
/*default.css*/
.box{
	width: 280px;
	height: 280px;
	background: red;
}
#cur{
	color: green;
}

行内样式

在给标签设置样式的时候，可以选择外部样式、内部样式、行内样式（web开发很用）
行内样式：直接在开始标签里设置，通过style进行属性设置
行内样式写法：
<标签名字 style=”属性:属性值;属性:属性值;”>文本</标签名字>

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>行内样式</title>
</head>
<body>
	<p style="width: 600px;height: 300px;font-size: 30px;color: red;">最近热门话题是暴力裁员</p>
</body>
</html>

总结

样式 写法 优先级
外部样式 link标签引入 最低
内部样式 <style></style> 第二
行内样式 <标签名字 style=”属性:属性值;属性:属性值;”>文本</标签名字> 最高