css_quickstart

lienhui68 收录于技术

2021-01-01 约 1273 字预计阅读 3 分钟次阅读

简介

CSS指层叠样式表（Cascading Style Sheets），主要用来设置网页中元素的样式，如边框、颜色、位置等…

层叠：一个元素（也即标签）可以拥有多个样式

基本语法

编写位置

内联样式标签style属性内

缺点：不能复用，不能编写大量的样式
内部样式表 <style></style>标签中，style标签放在head标签中
外部样式表 <link ref="stylesheet" type="text/css" href="文件路径">

语法规则

1
2
3
4


选择器 {
    属性名1:属性值1;
		属性名2:属性值2;
}

注释使用/* */

示例

html中引用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</title>

    <link rel="stylesheet" type="text/css" href="demo.css">
</head>
<body>

<p>hello</p>

</body>
</html>

css

1
2
3
4
5
6


/*
对所有p标签运用样式
*/
p {
    color: blue;
}

选择器

标签选择器

使用标签名选择元素

1
2
3


标签名 {
	样式
}

类选择器

使用标签的class属性值选择元素，class 规定元素的类名，把元素进行分类

1
2
3


.类选择器名 {
	样式
}

Id选择器

使用标签的id属性值选择元素，id 是元素的唯一标识

1
2
3


#id选择器名 {
	样式
}

组选择器

选择一组选择器，选中的这些元素全部应用样式

1
2
3


选择器1,选择器2... {
	样式
}

派生选择器

1. 派生选择器

1
2
3
4
5
6
7
8
9


<style type="text/css">
		a {
			color: red;
		}
		/*派生选择器*/
		p a {
			font-size: 32px;
		}
	</style>

2. id派生选择器

1
2
3
4
5
6
7
8
9


<style type="text/css">
   	a {
   		color: red;
   	}
   	/*id派生选择器*/
   	#p2 a {
   		font-family: 微软雅黑;
   	}
   </style>

3. 类派生选择器

1
2
3
4
5
6
7
8
9


<style type="text/css">
  	a {
  		color: red;
  	}
  	/*类派生选择器*/
  	p.myclass a {
  		background: #ccc;
  	}
  </style>

4. `>`直接子元素

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


<style type="text/css">
 	a {
 		color: red;
 	}
 	/*>直接子元素*/
 	#div3>a {
 		color: blue;
 	}
 	#div3 p a {
 		color: green;
 	}
 </style>

组合演示

 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


<div>
		我是div,<a href="#">链接一</a>
	</div>

	<p>
		我是p,<a href="#">链接二</a>
	</p>

	<p id="p2">
		我是p2,<a href="#">链接三</a>
	</p>

	<p class="myclass">
		我是p3,<a href="#">链接四</a>
	</p>

	<div class="myclass">
		我是div2,<a href="#">链接五</a>
	</div>
	<hr />

	<div id="div3">
		<a href="#">链接六</a>
		<p>我是div3,<a href="#">链接七</a></p>
	</div>

常用样式

颜色

1

color: red;

颜色可以写颜色名，也可以写rgb值，如rgb(255,0,0)，rgb值也可以使用十六进制进行表示，如#00F6DE，如果写十六进制必须加#

宽度

1

width: 19px;

宽度可以写像素值，也可以写成百分比值如 20%。

高度

高度如果要设置成百分比，父元素必须有指定高度

背景颜色

background-color

扩展

黑色1像素实现边框
1

border: 1px solid black;

div居中

1
2


margin-left: auto;
margin-right: auto;

文本居中
1

text-align: center;
超链接去下划线
1

text-decoration: none;

表格细线

1
2
3
4
5
6
7


table {
  border: 1px solid black; /* 设置边框 */
  border-collapse: collapse; /* 将边框合并 */
}
td,td {
  border: 1px solid black; /* 设置边框 */
}

列表去除修饰
1 2 3

ul { list-style: none; }

目录