CSS学习

发表于 更新于 分类于

基本了解CSS

1.什么是CSS

　　CSS（Cascading Style Sheet）：层叠样式表语言，它的作用是修饰HTML页面，设置HTML页面中的某些元素的样式。

2.CSS实例

1
2
3
4
P{
	color:red;
	text-align:center;
}

3.id和class选择器

3.1 id选择器

　　可以为标有特定id的HTML元素指定特定的样式。HTML元素以id属性来设置id选择器，css中以“#”来定义。以下的央视规则应用于元素属性id=“para1”：

实例1

1
2
3
4
#para1{
	text-align:center;
	color:red;
}

3.2 class选择器

　　class选择器用于描述一组元素的样式，class选择器有别于id选择器，class可以在多个元素中使用。class选择器在HTML中以class属性表示，在CSS中，类选择器以一个点“.”号显示：

在以下例子中，所拥有center类的HTML元素均为居中。

实例2

1
2
3
.center{
	text-align:center;
}

也可以指定特定的HTML元素使用class。在以下实例中，所有的p元素使用class=”center”让该元素的文本居中：

实例3

1
2
3
p.center{
	text-align:center;
}

4.CSS的三种使用方式

4.1 内联定义方式

在标签内部使用style属性来设置元素的CSS样式，语法格式：

1
<标签 style="样式名：样式值;样式名：样式值;样式名：样式值;..."></标签>

4.2 样式快方式

在head标签中使用style块，语法格式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
	<style type="text/css">
		选择器{
			样式名：样式值;
			样式名：样式值;
			...
		}
		选择器{
			样式名：样式值;
			样式名：样式值;
			...
		}
	</style>
</head>

4.3 链入外部样式表文件

直接引入css文件，语法格式：

1
<link type="text/css" rel="stylesheet" href="css文件的路径" />