css
1.初始css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 在head标签中写一个style标签，style标签是放在title标签下面的 -->
<!-- 理论上，style标签，你想放在什么地方，就可以放在什么地方 -->
<!-- 在style标签中，就可以书写style代码了 -->
<style>
/*
{} 叫声明块 在声明块中放一个个的属性，属性的格式是：xxx:yyyy; 每一个属性是以分号结束
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
*/
/* 表示选中页面中的所有的div */
div{
/* 属性名也叫键，属性值也叫值，整体叫键值对 */
color:gold;
font-size: 50px;
background-color: skyblue;
/* 男盒子和人妖盒子都可以设置宽高 */
width: 600px;
height: 600px;
}
</style>
</head>
<body>
<!--
强调：对于前端程序员来说，CSS也相当重要，不要着急学习JS。
CSS:
Cascading Style Sheet 层叠样式表
层叠性：明天会说到
样式表：学习CSS，就是学习一堆的样式，样式主要是用来美化网页。
HTML：
超文本标记语言，是书写网页的内容。
CSS版本：
CSS1 CSS2 CSS3
作用：
1）是用美化网页 美化方式一：布局 美化方式二：细节美化
2）网页中的内容与样式分离
内容写在HTML文件中，样式写在CSS文件中
CSS是一门编程语言？
答：不是的 CSS也不是标记语言 CSS可以叫样式语言
CSS是一门计算机语言吗？
答：是
学习HTML，把标签进行了分类：
1）男标签 块级标签 特点：独占一行
2）女标签 行内标签 特点：并排显示
3）人妖标签 行内块标签 img input 特点：并排显示
女标签和人妖标签的区别：
1）女标签不可以设置宽高
2）人妖标签除了可以并排显示之后，其它和男标签一模一样
从今天开始，不要说标签，也不要说元素，说盒子。一个标签就是盒子。因为每一个标签都是矩形的。
一个网页就是由N个盒子堆起来的。-->
<div>我是一个孤独的DIV</div>
</body>
</html>
2.行内样式
CSS的三种写法：<br>
1）行内写法 也叫行内样式 把样式和标签混在一起 不推荐 但是偶尔也会用到
后面，会配合JS来使用。<br>
2）内部写法<br>
3）外部写法
3.内部样式
CSS的三种写法：<br>
1）行内写法 <br>
2）内部写法<br>
在head标签中，title标签下面，写一个style标签，把css代码写在style标签中<br>
这种写法，项目中用的不多，但是在学习中，推荐这种写法。
3）外部写法
4.外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- href表示引入的css的路径，rel表示相关联的意思，stylesheet是样式表的意思 -->
<!-- link标签不只可以关联css样式表，还可以关系其它资源 -->
<link rel="stylesheet" href="./css/main.css">
<!-- 如果css文件有多个，可以通过link标签引入多次 -->
<!-- <link rel="stylesheet" href="./css/out.css"> -->
</head>
<body>
<!--
CSS的三种写法：
1）行内写法
2）内部写法
3）外部写法
A）先去创建一个css文件，你把css代码都写在css文件中
B）然后在html文件中，通过link标签引进来
-->
<div>我是一个小的DIV</div>
</body>
</html>
font-size
<!-- 理论上，style标签，你想放在什么地方，就可以放在什么地方 -->
<!-- 在style标签中，就可以书写style代码了 -->
<style>
/*
{} 叫声明块 在声明块中放一个个的属性，属性的格式是：xxx:yyyy; 每一个属性是以分号结束
选择器{
属性名:属性值;
属性名:属性值;
属性名:属性值;
属性名:属性值;
}
*/
/* 表示选中页面中的所有的div */
div{
/* 属性名也叫键，属性值也叫值，整体叫键值对 */
color:gold;
font-size: 50px;
background-color: skyblue;
/* 男盒子和人妖盒子都可以设置宽高 */
width: 600px;
height: 600px;
}
</style>
我是一个孤独的DIV
```
## 2.行内样式
CSS的三种写法：<br>
1）行内写法 也叫行内样式 把样式和标签混在一起 不推荐 但是偶尔也会用到
后面，会配合JS来使用。<br>
2）内部写法<br>
3）外部写法
3.内部样式
CSS的三种写法：<br>
1）行内写法 <br>
2）内部写法<br>
在head标签中，title标签下面，写一个style标签，把css代码写在style标签中<br>
这种写法，项目中用的不多，但是在学习中，推荐这种写法。
3）外部写法
4.外部样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- href表示引入的css的路径，rel表示相关联的意思，stylesheet是样式表的意思 -->
<!-- link标签不只可以关联css样式表，还可以关系其它资源 -->
<link rel="stylesheet" href="./css/main.css">
<!-- 如果css文件有多个，可以通过link标签引入多次 -->
<!-- <link rel="stylesheet" href="./css/out.css"> -->
</head>
<body>
<!--
CSS的三种写法：
1）行内写法
2）内部写法
3）外部写法
A）先去创建一个css文件，你把css代码都写在css文件中
B）然后在html文件中，通过link标签引进来
-->
<div>我是一个小的DIV</div>
</body>
</html>
font-size
CSS中的属性有100多个，我们需要掌握也就20多个。
这些属性，我们是分好类的：
1）字体设置相关
2）文本设置相关
3）盒子模型设置相关
4）浮动布局设置相关
5）层布局设置相关
6）列表设置相关
7）表格设置相关
8）其它
字体设置相关：
font-size：设置字体大小
font-size: 18px;
font-size: 50%; 是父元素fs的50% 基本上不用
谷歌浏览器默认字体大小是16px;
一个网页中最最常用的字体大小，要么是12px，要么是14px。
font-size有继承性。就是对父元素设置了某些属性，子元素也可以起作用。
font-size决定文字的大小
常用的设置：具体数值+单位 常用的设置：百分比，基于父元素的font-size计算，比如50%表示等于父元素font-size的一半 谷歌浏览器默认文字大小是16px 单位需要设置，否则无效
font-family
font-family是用来设置当前网页的字体的。
注意：
1）程序员决定不了，设计师决定。
2）设置这个字体取决于用户电脑上安装了什么字体。如果用户电脑上没有安装某个字体，设置了也白设。
3）基本上所有的用户电脑上都有所谓的微软雅黑，如果不设置，默认字体就是微软雅黑。
4）字体可以设置多个，解析是从左到右解析。
5）如果一个字体名称中间有空格，必须使用引号包起来。如：'Courier New'
6）自己也可以从网上下载某些字体，@font-face 引入 下周演示
7）font-family也有继承性
font-family用于设置文字的字体名称 可以设置1个或者多个字体名称 浏览器会选择列表中第一个该计算机上有安装的字体 渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体，如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体 或者是通过 @font-face 指定的可以直接下载的字体 如果字体名称中存在多个单词，推荐使用引号包裹 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示 window上默认字体是微雅黑，macOs上默认字体是苹方
font-weight:
font-weight:
1)设置文字是否加粗 normal是正常，就是不加粗，是默认值
2）默认hn标签和strong标签就是加粗的
3）font-weight也是有继承性的
font-weight用于设置文字的粗细（重量）
常见的取值：normal：等于400 常见的取值：bold：等于700 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量 strong、b、h1~h6等标签的font-weight默认就是bold 不是所有字体都提供了九种粗细，因此部分取值页面中无变化 实际开发中以：正常、加粗两种取值使用最多
font-style:
font-style: 1)设置文字是否倾斜 normal是正常，就是不倾斜，是默认值 2）em标签默认就是倾斜的 3）italic表示倾斜 4）font-style也有继承性。 font-style用于设置文字的常规、斜体显示 normal：常规显示 italic(斜体)：用字体的斜体显示(通常会有专门的字体) em、i、cite、address、var、dfn等元素的font-style默认就是italic font-variant(了解)：
font-variant可以影响小写字母的显示形式，variant是变形的意思; normal：常规显示，small-caps：将小写字母替换为缩小过的大写字母 line-height(常用)：
line-height(常用)：
line-height用于设置文本的行高
行高可以先简单理解为一行文字所占据的高度
取值：数字+px
取值：倍数（当前标签font-size的倍数）
网页精准布局时，会设置 line-height : 1 可以取消上下间距
行高的严格定义是：两行文字基线（baseline）之间的间距
基线（baseline）：与小写字母x最底部对齐的线
区分height和line-height的区别：
height：元素的整体高度 line-height：元素中每一行文字所占据的高度 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中？答：让line-height等同于height font：
font是一个缩写属性
font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写
font-style font-variant font-weight font-size/line-height font-family
font-style、font-variant、font-weight可以随意调换顺序，也可以省略
line-height可以省略，如果不省略，必须跟在font-size后面
font-size、font-family不可以调换顺序，不可以省略字体设置相关：
font-size：设置字体大小
font-size: 18px;
font-size: 50%; 是父元素fs的50% 基本上不用
谷歌浏览器默认字体大小是16px;
一个网页中最最常用的字体大小，要么是12px，要么是14px。
font-size有继承性。就是对父元素设置了某些属性，子元素也可以起作用。
font-size决定文字的大小
常用的设置：具体数值+单位 常用的设置：百分比，基于父元素的font-size计算，比如50%表示等于父元素font-size的一半 谷歌浏览器默认文字大小是16px 单位需要设置，否则无效-->
font-family
font-family是用来设置当前网页的字体的。
注意：
1）程序员决定不了，设计师决定。
2）设置这个字体取决于用户电脑上安装了什么字体。如果用户电脑上没有安装某个字体，设置了也白设。
3）基本上所有的用户电脑上都有所谓的微软雅黑，如果不设置，默认字体就是微软雅黑。
4）字体可以设置多个，解析是从左到右解析。
5）如果一个字体名称中间有空格，必须使用引号包起来。如：'Courier New'
6）自己也可以从网上下载某些字体，@font-face 引入 下周演示
7）font-family也有继承性
font-family用于设置文字的字体名称 可以设置1个或者多个字体名称 浏览器会选择列表中第一个该计算机上有安装的字体 渲染规则：从左往右按照顺序查找，如果电脑中未安装该字体，则显示下一个字体，如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体 或者是通过 @font-face 指定的可以直接下载的字体 如果字体名称中存在多个单词，推荐使用引号包裹 网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示 window上默认字体是微雅黑，macOs上默认字体是苹方
font-weight:
font-weight:
1)设置文字是否加粗 normal是正常，就是不加粗，是默认值
2）默认hn标签和strong标签就是加粗的
3）font-weight也是有继承性的
font-weight用于设置文字的粗细（重量）
常见的取值：normal：等于400 常见的取值：bold：等于700 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 ：每一个数字表示一个重量 strong、b、h1~h6等标签的font-weight默认就是bold 不是所有字体都提供了九种粗细，因此部分取值页面中无变化 实际开发中以：正常、加粗两种取值使用最多
font-style:
font-style: 1)设置文字是否倾斜 normal是正常，就是不倾斜，是默认值 2）em标签默认就是倾斜的 3）italic表示倾斜 4）font-style也有继承性。 font-style用于设置文字的常规、斜体显示 normal：常规显示 italic(斜体)：用字体的斜体显示(通常会有专门的字体) em、i、cite、address、var、dfn等元素的font-style默认就是italic font-variant(了解)：
font-variant可以影响小写字母的显示形式，variant是变形的意思; normal：常规显示，small-caps：将小写字母替换为缩小过的大写字母 line-height(常用)：
line-height(常用)：
line-height用于设置文本的行高
行高可以先简单理解为一行文字所占据的高度
取值：数字+px
取值：倍数（当前标签font-size的倍数）
网页精准布局时，会设置 line-height : 1 可以取消上下间距
行高的严格定义是：两行文字基线（baseline）之间的间距
基线（baseline）：与小写字母x最底部对齐的线
区分height和line-height的区别：
height：元素的整体高度 line-height：元素中每一行文字所占据的高度 应用实例：假设div中只有一行文字，如何让这行文字在div内部垂直居中？答：让line-height等同于height font：
font是一个缩写属性 font 属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写 font-style font-variant font-weight font-size/line-height font-family font-style、font-variant、font-weight可以随意调换顺序，也可以省略 line-height可以省略，如果不省略，必须跟在font-size后面 font-size、font-family不可以调换顺序，不可以省略
通用选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* *叫通用选择器，表示选中页面中的所有的标签 */
/* *效率比较低，能不用就不要用 */
*{
color: rebeccapurple;
}
</style>
</head>
<body>
<div>我是一个div</div>
<h1>我是一个h1标签</h1>
<ul>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
</ul>
<p>我是一个p标签</p>
</body>
</html>
元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* div叫元素选择器，也叫标签选择器，表示选中页面上所有标签 */
/* 选中的是一类标签，并不是某一个 */
/* 不管标签嵌套有多深，都可以选中 */
div{
color: red;
background-color: skyblue;
}
</style>
</head>
<body>
<div>我是一个div</div>
<h1>我是一个h1标签</h1>
<ul>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
</ul>
<p>我是一个p标签</p>
<div>我是一个div</div>
<ul>
<li>
<div>我是li中的一个DIV</div>
</li>
</ul>
</body>
</html>
类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 类选择器，也叫class选择器 */
/* 使用元素选择器，是选中页面中所有的同类元素 */
/* 想选中同类中某一个元素，可以给这个元素起一个名字 */
/* 起名字有两种方式：1）通过class起名字 2）通过id起名字 */
/* 通过 .class名字 就可以选中某个元素 */
/* 可以给不同的标签，起相同的名字，从而可以选中多个不同的标签 */
.box{
color: skyblue;
background-color: yellow;
}
.haha{
font-size: 40px;
}
/* .123{
width:500px;
} */
.abc_123{
text-decoration: underline;
}
</style>
</head>
<body>
<div>我是一个div</div>
<h1>我是一个h1标签</h1>
<ul>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
<li>我是一个li标签</li>
</ul>
<p class="box">我是一个p标签</p>
<!-- 可以给一个标签起多个名字，名字与名字之间使用空格隔开 -->
<!-- class名字，不是说你想写啥就写啥，由数字、字母、下划线、中划线组成，但不能以数字或者中划线开头 -->
<div class="box haha abc_123 def-ok">我是一个div</div>
<ul>
<li>
<div>我是li中的一个DIV</div>
</li>
</ul>
</body>
</html>
id选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 真实开发，以使用class的，尽可能使用class */
/* 如果页面是某个区域是唯一的，也是可以使用id选择器 */
/* id也好，class也好，是所有的标签的共有属性 */
/* id选择器，只能选中某一个元素，class选择器可以选中多个元素 */
/* id值如果由多个单词组成，单词之间可以用中划线-、下划线_连接，也可以使用驼峰标识 */
/* 用户名：username user-name user_name userName(小驼峰) UserName(大驼峰) */
/* 不要使用标签名，充当id名 <h1 id="h1"> 不推荐*/
#box1{
color: pink;
}
#h1{
color: aqua;
}
</style>
<!--
class选择器 和 id选择器的区别？
1）class起名字，可以重复，ID不能重复
2）写样式是 class起的名字 是通过 .class名字
3）写样式是 id起的名字 是通过 #id名字
4）实际开发中，class是使用的最多的
6）实际开发中，后面学完JS，id选择器可以配合JS完成网页交互
-->
</head>
<body>
<!-- id：身份证号 唯一的 class：姓名 可以重复 -->
<div>我是一个div</div>
<h1 id="h1">我是一个h1标签</h1>
<ul>
<li>我是一个li标签</li>
<!-- 给不同的标签起相同的id，极力不推荐 -->
<!-- id值是唯一的，整个网页中不能重复 -->
<li id="box2">我是一个li标签</li>
<li>我是一个li标签</li>
</ul>
<p id="box1">我是一个p标签</p>
<div>我是一个div</div>
<ul>
<li>
<div>我是li中的一个DIV</div>
</li>
</ul>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* [title] 属性选择器 只要标签中有title属性，都可以被选 */
[title]{
color: skyblue;
}
[title="xixi"]{
background-color: gold;
}
[type="password"]{
/* 人妖盒子，是可以设置宽度 */
width: 300px;
height: 100px;
}
/* [title*="abc"]{
background-color: red;
} */
/* [title^="abc"]{
background-color: blue;
} */
/* [title$="def"]{
background-color: green;
} */
[title|="123"]{
background-color: green;
}
[title~="mmm"]{
background-color: green;
}
</style>
</head>
<body>
<div title="abcdef">我是一个div</div>
<h1 title="haha">我是一个h1标签</h1>
<ul>
<li title="123-456">我是一个li标签</li>
<li title="xixi">我是一个li标签</li>
<li title="mmm nnn">我是一个li标签</li>
</ul>
<p>我是一个p标签</p>
<div title="hehe">我是一个div</div>
<ul>
<li>
<div>我是li中的一个DIV</div>
</li>
</ul>
<hr>
<form action="">
<ul>
<li>用户名：<input type="text"></li>
<li>密码：<input type="password"></li>
<li>密码：<input type="submit"></li>
</ul>
</form>
</body>
</html>
后代选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* 后代选择器，不管嵌套的多深，只要是后代，都可以选中 */
ul li{
color: skyblue;
}
/* 儿子选择器，只能选中儿子 */
/* > 表示直接子元素，说白了就是儿子 */
ul>li{
/* border给盒子设置边框 1px表示边框的粗细 solid表示边框的样式 red表示边框的颜色 */
border: 1px solid red;
}
/*
后代选择器分两类：
1）选中所有的后代 空格
2）儿子选择器 只会选中儿子
*/
</style>
</head>
<body>
<ul>
<li>我是一个li标签</li>
<li>
<ol>
<li>我是最面的li</li>
</ol>
</li>
<li>我是一个li标签</li>
</ul>
</body>
</html>
兄弟选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
兄弟选择器：
+ 选中某个元素后面紧挨着的那个兄弟 一定是后面的
~ 选中某个元素后面的所有的兄弟，一定是后面的 不包含自己
-->
<style>
/* .item1{
color:red;
} */
/* +表示选中某个元素紧挨着的那个兄弟 */
/* .item1+li{
color:red;
} */
/* ~选中某个元素后面的所有的兄弟 */
/* .item1~li{
color:red;
} */
/* .item2+li{
color:red;
} */
.item2~li{
color:red;
}
</style>
</head>
<body>
<ul>
<li class="item1">我是一个li标签1</li>
<li class="item2">我是一个li标签2</li>
<li>我是一个li标签3</li>
<li>我是一个li标签4</li>
</ul>
</body>
</html>
交集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
只想选中第2个li，怎么做？
.box 选两个
li 选四个
-->
<!-- li.box 交集选择器 选中li，并且li中有一个class是box -->
<style>
li.box {
color: red;
}
/* .boxli{} 不行 */
</style>
</head>
<body>
<ul>
<li>我是一个li 01</li>
<li class="box">我是一个li 02</li>
<li>我是一个li 03</li>
<li>我是一个li 04</li>
</ul>
<p>这是一个p标签1</p>
<p class="box">这是一个p标签2</p>
</body>
</html>
并集选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* li, p, .item 并集选择器，有的地方，也叫分组选择器 */
/* 如果逗号少了， 就成后代选择器， 逗号不能少 */
li, p, .item{
color: red;
}
</style>
</head>
<body>
<ul>
<li>我是一个li 01</li>
<li class="box">我是一个li 02</li>
<li>我是一个li 03</li>
<li>我是一个li 04</li>
</ul>
<p>这是一个p标签1</p>
<p class="box">这是一个p标签2</p>
<h1 class="item">xixi</h1>
<h1>haha</h1>
</body>
</html>
hove选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
类选择器：
第一步：先给盒子起一个class名字 这个名字叫类名
第二步：通过.className 选中一个或多个盒子
伪类：
所谓的伪类，就是不存在这个一个类。
伪类有很多，我们先学习一个，叫 hover
伪类使用时，不是通过.，是通过： :hvoer hover这个类并不存在
hover表示你去摸这个盒子的状态 你摸的时候就是hover
-->
<style>
.box{ color: red; }
div:hover{
color: yellow;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">我是一个孤独的div</div>
<a href="#">百度一下，你就知道</a>
</body>
</html>
link标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
类选择器：
第一步：先给盒子起一个class名字 这个名字叫类名
第二步：通过.className 选中一个或多个盒子
伪类：
所谓的伪类，就是不存在这个一个类。
伪类有很多，我们先学习一个，叫 hover
伪类使用时，不是通过.，是通过： :hvoer hover这个类并不存在
hover表示你去摸这个盒子的状态 你摸的时候就是hover
-->
<style>
.box{ color: red; }
div:hover{
color: yellow;
}
a{
color: black;
text-decoration: none;
}
a:hover{
color: blue;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="box">我是一个孤独的div</div>
<a href="#">百度一下，你就知道</a>
</body>
</html>
颜色表示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
16进制表示:
二进制 0 1 逢2进1 计算机只认识2进制
十进制 0 1 2 3 4 5 6 7 8 9 逢10进1
八进制 0 1 2 3 4 5 6 7 逢8进1
十六进制 0 1 2 3 4 5 6 7 8 9 a b c d e f 逢16进1
...
颜色表示：
1）英文单词 能表示所有的颜色吗？答：不能 在开发中，使用的也不多
2）RGB Red Green Blue 红绿蓝
A）16进制表示
以#打头 #_ _ _ _ _ _
#000000 黑色
#ffffff 白色 简写成：#fff
#ff0000 红色
#00ff00 绿色
#123456 不知道
在真实开发中，网页是什么样颜色，并不是我们程序员说了算，是设计说了算
后面我们有专门的工具，去吸取颜色值，吸取下来的都是16进制
如果颜色每两位都相同，如：#112233 可以简写成#123
B）rgb函数表示
取值范围就不是16进制。是0~255
rgb(0, 0, 0) 黑色
rgb(255, 255, 255) 白色
rgb(255, 0, 0) 红色
rgb(255, 144, 166) 不知道
rgba() a表示透明度
透明度的范围是0~1
0表示完全透明 看不见了
1表示完全不透明 默认就是完全不透明
0.5表示半透明
在CSS或JS中，如果是0.xxx， 这个0可以不写
-->
<style>
div{
color: #123456;
background-color: rgb(255, 144, 166)
}
p{
color: #123456;
/* background-color: rgba(255, 144, 166, 0.5) */
background-color: rgba(255, 144, 166, .5)
}
</style>
</head>
<body>
<div>我是一个孤独的DIV</div>
<p>我是一个孤独的P</p>
</body>
</html>
调试工具
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!--
html和css不是编程语言，如果你写错了，也不会报错，只是出现的结果和你想象不一样。
调试工具的使用：
1）鼠标右键 -> 检查 或 按F12
2）设置调试工具的位置 三个点
3）需要我们关注三个面板：element styles computed 所谓的计算样式，就是浏览器帮我们计算好的样式
4）选择工具
5）对于一个元素的样式，分三类：
A）自己的样式
B）默认样式
C）继承别人的样式
6）调试：
A）删除某些样式
B）添加某些样式
C）对颜色和数字进行调试
后面学习CSS的过程中，如果效果和你的想的不一样，不要看代码，不要对代码，不要看代码，不要对代码，
一定要打开调试工具，自己去调试。重要重要。
-->
<style>
.father{
font-size: 18px;
}
.son{
color: red;
background: blue;
font-style: italic;
font-size: 28px;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
我是一个孤独的DIV
</div>
</div>
</body>
</html>
回顾
CSS: Cascading Style Sheet 层叠样式表
有三种写法：
1）行内样式 在html的开始标签中写一个style属性，样式写在style属性值中
2）内部样式 在head标签内部，title标签下面，创建一个style标签，样式写在style标签中
3）外部样式 在外面创建一个css文件，样式写在css文件中，在html文件中通过link引入
CSS中的注释：
/* */ 和JS中的注释是一样
CSS中的选择器：
1）通用选择器 通配符选择器 *
2）元素选择器 选中网页中的一类标签 不管层次有多深，都可以选中
3）类选择器
第一步：给元素起名字
可以给多个不同标签起相同的名字
也可以给一个标签，起不同的名字
名字由数字，字符，下划线，中划线组成，不要以数字和中划线打头
这个名字类似于姓名 姓名可以重复
class可以写在任何标签上
第二步：在style标签中，通过 .className 就可以选中了
4）ID选择器
第一步：给元素起名字
通过ID起的名字，需要唯一，类似于身份证号
id也可以写在任何标签上
第二步：在stle标签中，通过 #idName 就可以选中了
5）属性选择器
[title] 选中标签中有title属性的元素
[title="abc"] 选中标签中有title属性的元素，并且属性值就是abc
---------------
[title*="abc"] 属性值中需要包含abc
[title^="abc"] 属性值需要以abc打头
[title$="abc"] 属性值需要以abc结尾
[title|="abc"] 属性值是abc 或 以 abc-打头
[title~="abc"] 属性值是有abc，abc是独立的 <div title="abc def"></div>
6）后代选择器
A）后代选择器 div p
B）儿子选择器 div>p
7）兄弟选择器
A）+ 后面紧挨着的一个兄弟
B）~ 后面的所有兄弟
8）交集选择器
div.box 选中div并且div中有一个class="box"
9）并集选择器
div, h1, p, li, .item
10）伪类选择器
:hover 当鼠标去摸的时候的状态
