一、CSS技术介绍
CSS是「层样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
二、CSS语法规则
三、CSS和HTML结合方式
第一种
在标签的style属性上设置key:value value”，修改标签样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css01</title>
</head>
<body>
<div style="border: 1px solid red">div标签1</div>
<div style="border: 1px solid red">div标签2</div>
<span style="border: 1px solid red">span标签1</span>
<span style="border: 1px solid red">span标签2</span>
</body>
</html>缺点：
1、如果标签多了，样式多了，代码量非常庞大
2、可读性非常差
3、css代码没什么复用性可言
第二种
在head标签中，使用style标签来定义各种自己需要的css样式。格式如下：
XXX {
Key：value value
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css02</title>
<!--style标签专门用来定义css代码-->
<style type="text/css">
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head >
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>缺点：
1、只能在同一页面内复用代码，不能在多个页面中复用css代码。
2、维护起来不方便，实际的项目中会有成上万的页面，要到每个页面中去修改，工作量太大了。
第三种
把css样式写一个单独的css文件，再通过link标签引入即可复用。
使用html的 <link rel="stylesheet" type="text/css" href="./styles.css" /> 标签导入css样式文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css03</title>
<!--ink标签专门用来引入css样式代码-->
<link rel="stylesheet" type="text/css" href="1.css" />
</head >
<body>
<div >div标签1</div>
<div >div标签2</div>
<span >span标签1</span>
<span >span标签2</span>
</body>
</html>
四、CSS选择器
标签名选择器
标签名选择器，可以决定哪些标签被动的使用这个样式
标签名 {
属性:值;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签名选择器</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>
id选择器
可以让我们通过id属性选择性的去使用这个样式
#id {
属性:值;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>id选择器</title>
<style type="text/css">
#id001{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
#id002{
border: 5px dotted blue;
color: red;
font-size: 20px;
}
</style>
</head >
<body>
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>
class选择器
class类型选择器，可以通过class属性有效的选择性地去使用这个样式
.class {
属性:值;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<style type="text/css">
.class01{
border: 1px solid yellow;
color: blue;
font-size: 30px;
}
.class02{
border: 5px solid red;
color: red;
font-size: 26px;
}
</style>
</head >
<body>
<div class="class01">div标签1</div>
<div class="class02">div标签2</div>
</body>
</html>
组合选择器
组合选择器可以让多个选择器共用同一个css样式代码
选择器1，选择器2，选择器n {
属性:值;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
.class01, #id001{
border: 1px solid yellow;
color: blue;
font-size: 20px;
}
</style>
</head >
<body>
<div class="class01">div标签class01</div>
<span id="id001">标签id01</span>
</body>
</html>
五、常用样式
1、字体颜色
color:red;
颜色可以写颜色名如：black，blue，red，green等
颜色也可以写rgb值和十六进制表示值：如rgb（25500）， #00F6DE，如果写十六进制值必须加#
2、宽度
width:19px;
宽度可以写像素值：19px；也可以写百分比值：20%；
3、高度
height:19px;
高度可以写像素值：19px；也可以写百分比值：20%；
4、背景颜色
background-color:#0F2D40;
5、字体样式
color:#FF0000; 字体颜色红色
ont-size:20px; 字体大小
6、红色1像素实线边框
border:1px solid red;
7、DIV居中
margin-left:auto;
margin-right:auto;
8、文本居中
text-align:center;
9、 超连接去下划线
text-decoration:none
10、表格细线
table ｛
border:1px solid black；/*设置边框*/
border-collapse:collapse；/*将边框合并*/
｝
tdth｛border:1px solid black；/*设置边框*/
｝
11、列表去除修饰
ul ｛
list-style:none
｝
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css常用样式</title>
<style type="text/css">
div{
Color:red;
border:1px solid yellow;
width:300px;
height:300px;
background-color:green;
font-size:30px;
margin-left:auto;
margin-right:auto;
text-align:center;
}
a{
text-decoration: none;
}
table{
border:1px solid red;
border-collapse:collapse;
}
td{
border:1px solid red;
}
ul{
list-style: none;
}
</style>
</head >
<body>
<ul>
<li>11111</li>
<li>22222</li>
</ul>
<table>
<tr>
<td>1.1</td>
<td>1.2</td>
</tr>
</table>
<a href="https://www.baidu.com/">百度</a>
<div >div标签</div>
</body>
</html>
