CSS是【层叠样式表单】。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）。 属性（property）：要更改的样式名，每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这就组成了一个完整的样式声明（declaration）。 多个声明：如果要定义多个声明，就需要用分号将每个声明分开。最后一条声明的最后可以不加分号（尽量在每条声明的末尾都加上分号） CSS注释：/*注释内容*/
Css注释： /* 注释 */
在标签的style属性上设置“key：value value;”，修改标签样式。
<body> <!--需求 ：分别定义两个 div、span 标签，分别修改每个 div 标签的样式为：边框 1 个像素，实线，红色。 --> <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>在head标签中，使用style标签来定义各种自己需要的css样式。 格式： { Key : value value; }
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--style标签专门用来定义css样式代码--> <style type="text/css"> /*需求：分别定义两个 div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色。**/ 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>把css样式写成一个单独的css文件，再通过link标签引入即可复用。
使用 html 的 <link rel="stylesheet" type="text/css" href="./styles.css"/> 标签 导入 css 样式文件。1_css.css 文件内容：
div{ border: 1px solid yellow; } span{ border: 1px solid green; }html 文件代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--link标签专门用来引入css样式代码--> <link rel="stylesheet" type="text/css" href="1_css.css"/> </head> <body> <div>div 标签 1</div> <div>div 标签 2</div> <span>span 标签 1</span> <span>span 标签 2</span> </body> </html>标签名选择器的格式是： 标签名{ 属性 ： 值; } 标签名选择器可以决定哪些标签被动的使用这个样式。
color 属性：设置字体颜色 font-size 属性：设置字体大小
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS选择器</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标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。 并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。 --> <div>div标签1</div> <div>div标签2</div> <span>span标签1</span> <span>span标签2</span> </body> </html>id选择器的格式是： #id 属性值{ 属性 : 值; } id选择器，可以让我们通过id属性选择性的去使用这个样式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ID选择器</title> <style type="text/css"> #id001{ color: blue; font-size: 30px; border: 1px yellow solid; } #id002{ color: red; font-size: 20px; border: 5px blue dotted; } </style> </head> <body> <!-- 需求1：分别定义两个 div 标签， 第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色， 字体大小30个像素。边框为1像素黄色实线。 第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。边框为5像素蓝色点线。 --> <div id="id001">div标签1</div> <div id="id002">div标签2</div> </body> </html>class 类型选择器的格式是： .class 属性值{ 属性 : 值; } class 类型选择器，可以通过 class 属性有效的选择性的去使用这个样式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>class类型选择器</title> <style type="text/css"> .class01{ color: blue; font-size: 30px; border: 1px yellow solid; } .class02{ color: grey; font-size: 26; border: 1px red solid; } </style> </head> <body> <!-- 需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。 需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。 --> <div class="class01">div标签class01</div> <div class="class02">div标签</div> <span class="class01">span标签class01</span> <span >span标签2</span> </body> </html>组合选择器的格式： 选择器 1，选择器 2， 选择器 n{ 属性 : 值： } 组合选择器可以让多个选择器共用一个css样式代码。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>class类型选择器</title> <style type="text/css"> .class01 ,#id01{ color: blue; font-size: 20px; border: 1px yellow solid; } </style> </head> <body> <!-- 需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签， 字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。 --> <div class="class01">div标签class01</div> <br /> <span id="id01">span 标签</span> <br /> <div>div标签</div> <br /> <div>div标签id01</div> <br /> </body> </html>颜色可以写颜色名如：black，blue，red，green等 颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)，如果写十六进制必须加#
宽度可以写像素值：19px; 也可以写百分比值：20%;
高度可以写像素值：19px; 也可以写百分比值：20%;
auto：自动
margin-left: auto; margin-right: auto;