文章目录

1、CSS
2、语法规则
3、CSS与HTML的结合方式
4、CSS选择器–标签名选择器
5、CSS选择器–id选择器
6、CSS选择器–class选择器
7、CSS选择器–组合选择器
8、CSS常用样式

1、CSS

CSS全称Cascading Style Sheets，层叠样式表。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

2、语法规则

选择器：
浏览器根据“选择器”来决定受影响的HMTL元素（标签）
属性：
要改变的样式名，并且每个属性都有一个值，属性和值用冒号分开，且由花括号包围，这样就是一个完整的样式声明（declaration），如：

p{color:blue}

多个声明：
多个声明之间用分号分开，最后一条声明可以不加分号，一般每行只描述一个属性。如：

p{
	color:red;
	font-size:30px;
}

CSS注释：
/*这是一条CSS注释*/

3、CSS与HTML的结合方式

3.1 第一种结合

在标签的style属性上设置”key:value value;”修改标签样式

<!--分别定义两个div和span标签,样式为边框1像素，实线，红色-->

<div style="border:1px solid red">div标签1</div>
<div style="border:1px solid red">div标签2</div>
<span style="borde:1px solid red">span标签1</span>
<span style="borde:1px solid red">span标签2</span>

运行效果：

缺点：

如果标签多了，或者需要设置的样式多了，代码量非常庞大
可读性很差
CSS代码没什么复用性可言

3.2 第二种结合

在head标签中，使用style标签来定义各种自己需要的CSS样式，格式为：

xxx{
	key: value value;
}

还是3.1中的题目要求，现在使用第二种结合来完成;

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS</title>
 	<style type="text/css">
		div{
		border:1px solid red;
		}
		span{
		border:1px solid red;
		}
		/*注意两个style标签中是CSS，别用html的注释符号*/
	</style>
</head>
<body>
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
</body>
</html>

缺点：

只能在同一个页面内复用代码，不能在多个页面中复用CSS代码
维护起来不方便，实际的项目中有成千上万的页面，要到每个页面上去修改，工作量太大

3.3 第三种结合

把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用。link标签专门用来引入CSS样式代码

<link rel="stylesheet" type="text/css" href="./style.css"/>

使用第三种结合方式，我们先新建一个css文件1.css

div{
	border:1px solid red;
}

span{
	border:1px solid red;
}

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

4、CSS选择器–标签名选择器

标签名选择器可以决定哪些标签被动的选择使用这个样式。标签名选择器的格式是：

标签名{
	属性：值；
}

举例：

<!--需求：修改所有的div标签中字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线-->
<!--span标签的字体颜色为黄色，字体大小20像素，边框为5像素蓝色虚线-->

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>CSS-2</title>
	<!--开始-->
	<style type="text/css">
		/*标签选择器*/
		div{
			border:1px solid yellow;
			color:blue;
			font-size:30px
		}
		span{
			border:5px dashed blue;
			color:yellow;
			font-size:20px;
		}
	</style>
</head>
<body>
	<div>div标签1</div>
	<div>div标签2</div>
	<span>span标签1</span>
	<span>span标签2</span>
</body>
</html>

运行效果：

5、CSS选择器–id选择器

id选择器可以让我们通过id属性选择性的去使用这个样式，id选择器的格式是：

#id 属性值{
	属性：值；
}

举例： 分别定义两个div标签

（1）第一个div标签定义id为id001，然后根据id属性定义CSS样式修改字体颜色为蓝色，字体大小30像素，边框为1像素黄色实线

（2）第二个div标签定义id为id002，然后根据id属性定义CSS样式修改字体颜色为红色，字体大小20像素，边框为5像素蓝色点线

<!--id选择器的定义-->

<style type="text/css">
	#id001{
		color: blue;
		font-size: 30px;
		border: 1px yellow solid;
	}
	#id002{
		color: red;
		font-size: 30px;
		border: 5px blue dotted;
	}
</style>

<!--id选择器的使用,需要的标签加id属性-->
<!--有种定义方法，再调用方法的味儿-->

<body>
	<div id="id001">div标签1</div>
	<div id="id002">div标签2</div>
<\body>

运行效果：

6、CSS选择器–class选择器

class选择器，即class类型选择器，可以通过class属性有效的选择性地去使用这个样式。class选择器的语法格式是：

.class 属性值{
	属性：值；
}

举例：

（1）修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小30像素，边框为1像素黄色实线

（2）修改class属性值为class01的div标签字体，颜色为灰色，字体大小26像素，边框为1像素红色实线

<!--class选择器的定义-->

<style type="text/css">
	.class01{
		color: blue;
		font-size: 30px;
		border: 1px yellow solid;
	}
	.class02{
		color: grey;
		font-size: 26px;
		border: 1px red solid;
	}
</style>

<!--id选择器的使用,需要的标签加id属性-->

<body>
	<div class="class01">div标签1</div>
	<div class="class02">div标签2</div>
	<span class="class01">span标签1</span>
<\body>

运行效果：

7、CSS选择器–组合选择器

组合选择器可以让多个选择器共用同一个CSS样式代码，组合选择器的格式是：

选择器1，选择器2，选择器n{
	属性：值；
}

举例：

.class03,#id03{
	color: blue;
	font-size: 30px;
	border: 1px yellow solid;
}

如此，类选择器class03和id选择器id03就共用了这几行样式代码，至于使用的时候，仍然和之前一样，在相应的标签中加属性class=”xx”或者id=”xx”即可

8、CSS常用样式

字体大小
font-size: 20px
字体颜色
color: red;颜色可以写颜色名如black、blue、green，也可以写rgb值和十六进制表示值，如rgb(255,0,0)，#00FDE
背景颜色
background-color: red；属性值写法和上面的颜色一样
宽度
width: 19px;宽度可以写像素值如19px，也可以写百分比如20%
高度
height: 20px;高度可以写像素值如19px，也可以写百分比如20%
边框
border: 1px solid red; 即红色1像素实现边框
DIV居中
margin-left: auto;
margin-right: auto;
文本居中
text-align: center;
超链接去下划线
text-decoration: none;
表格细线

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

加上border-collapse以后，上面的边框合并成一条。

列表去除修饰

ul{
	list-style:none;
}

小练习：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>小练习</title>
	<style>
		body {
			background-color:#d0e4fe;
		}
		h1 {
			color:orange;
			text-align:center;
		}
		p {
			font-family:"Times New Roman";
			font-size:20px;
		}
		#id9527{
			text-decoration: none;
		}	
	</style>
</head>

<body>

	<h1>CSS 实例!</h1>
	<p>这是一个段落。</p>
	<a href="www.baidu.com" id="id9527">百度</a>

</body>
</html>