b站广告投放平台入口推56论坛
一.CSS：
1.定义：
层叠样式表（Casecading Style Sheets），是一种样式表语言，用来描述HTML文档的呈现（美化内容）
书写位置：title标签下方添加style双标签，style标签里面书写CSS代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p{/* 文字颜色 */color: aqua;/* 字号 */font-size: 30px;}</style>
</head>
<body>
<p>CSS</p>
</body>
</html>2.CSS引入方式
（1）.内部样式表（学习使用）
CSS代码一般写在style标签里面
（2）.外部样式表（开发使用）
CSS代码写在单独的CSS文件中，在HTML中使用link标签引入
<link rel="stylesheet" href="./test.css">其中link表示引入外部样式表，rel表示关系，样式表
（3）.行内样式（配合JavaScript使用）
CSS写在标签的style属性值里
<div style="color: red; font-size: 20px;">div标签</div>二.选择器
1.作用：
查找标签，设置样式
2.基础选择器
（1）.标签选择器
使用标签名作为选择器，可以选中同名标签设置相同的样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 只要是p标签就会是现在这个基础选择器中的样式 */p {color: red;}</style>
</head>
<body>
<p>p标签</p>
<p>文本内容</p>
</body>
</html>（2）.类选择器
查找标签，差异化设置标签的显示效果
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 定义一个名字为red的类选择器 */.red {color: red;}.size {font-size: 50px;}</style>
</head>
<body><!-- 使用类选择器 -->
<div class="red">div标签</div>
<!-- 一个类选择器可以给多个标签使用 --><p class="red">p标签</p><!-- 一个标签可以使用多个选择器 --><p class="red size">测试文本</p>
</body>
</html>一个类选择器可以给多个标签使用，一个标签也可以使用多个标签
（3）.id选择器
查找标签，差异化设置标签的显示效果
使用场景：id选择器一般配合JavaScript使用，很少用来设置CSS样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>#red {color:red;}</style>
</head>
<body>
<p id="red">id选择器测试</p>
</body>
</html>同一个id选择器只能在一个页面使用一次
（4）.通配符选择器
查找页面所有标签，设置相同样式
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {color: red;}</style>
</head>
<body>
<p>p标签</p>
<div>div标签</div>
<h1>h1标签</h1>
</body>
</html>通配符选择器不需要调用，浏览器会自动查找页面所有标签，将其全部设为相同的样式
三.盒子
目标，使用合适的选择器画盒子
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.red {width: 100px;height: 100px;background-color: red;}.orange {width: 200px;height: 200px;background-color: orange;}</style>
</head>
<body><div class="red">div_test1</div><div class="orange">div_test2</div>
</body>
</html>效果图：
四.文字控制属性
font-size：
字体大小（常用单位：px）
font-weight：
字体粗细（开发时可以直接使用数字作为属性值（不需要加单位），也可以使用关键字如normal，bold（加粗））
font-style：
字体倾斜（属性值有normal和italic（倾斜），可以使用normal属性清除字体倾斜）
line-height：
行高（属性值常用单位：px，或直接使用数字，表示为当前font-size的倍数）
作用：设置多行文本的间距
<style>p {font-size: 20px;/* px单位 */line-height: 20px;/* 纯数字，表示为当前font-size的倍数 */line-height: 2;}</style>行高的测量方法：从一行文字的最顶端（最底端）量到下一行文字的最顶端（最底端）
font-family：
字体族（改变当前文字的字体，如楷体等等）
font-family属性值可以书写多个字体名，各个字体名之间用逗号隔开，执行顺序是从左向右依次查找，一旦找到在当前环境中存在该字体就会使用该字体
font：
字体复合属性
能够将多种属性同时写到本属性中，是属性的简写方式，一个属性对应多个值的写法，各个属性值之间用空格隔开
<style>p {/* 是否倾斜 加粗 字号 行高 字体 */font:italic 700 30px/2 楷体;}</style>使用场景：设置网页文字公共样式
注意font中的属性必须按顺序书写，分别为：是否倾斜 是否加粗 字号/行高 字体，而在这之中字号和字体值必须书写，否则font属性不生效
text-indent：
文本缩进（属性值常用单位为：px和em，而1em等于当前标签的字号大小）
<style>p {text-indent: 2em;}</style>text-align：
文本对齐（left：左对齐，center：居中对齐，right：右对齐）
<style>p {text-align: center;}</style>我们可以使用本属性完成文本对齐（left，center，right）
text-align还可以设置图片的水平对齐，但是因为text-align本质是控制内容的对齐方式，所以属性要设置给内容的父级才能够生效
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {text-align: center;}</style>
</head>
<body>
<div><img src="" alt="">
</div>
</body>
</html>text-decoration：
修饰线（属性值分别为：none：无，underline：下划线，line-through：删除线，overline：上划线）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.none {text-decoration: none;}.underline {text-decoration: underline;}.line-through {text-decoration: line-through;}.overline {text-decoration: overline;}</style>
</head>
<body><div><p class="none">none</p><p class="underline">underline</p><p class="line-through">line-through</p><p class="overline">overline</p></div>
</body>
</html>效果图：
color：
颜色
可以用四种方式来表示颜色：
1.颜色关键字（red，green等等）
2.rgb表示法（rgb（r,g,b）其中r，g，b表示红绿蓝三原色，取值为0到255）
3.rgba表示法（其中多出来的a表示透明度，取值为0到1）
4.十六进制表示法（#RRGGBB，这是在开发时使用的，并且我们只需要从设计稿中复制参数即可）