目录

css_quickstart

简介

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;
    }