<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* ol>li{
border:20px solid red
} */
/* ol li{
border:10px solid green
} */
/* .aa:hover{
background-color: green;
}
div{
width:300px;
heighe:100px;
background-color: greenyellow;
}
p{
width:300px;
heighe:100px;
background-color:indianred;
}
ul>li:hover{
background-color: indigo;
}
*/
/*div>p{
color:lightgreen;
}
p{
color:khaki;
} */
/* .box1{
width:100px;
height:100px;
background-color: lightgreen;
}
.box2{
width:300px;
height: 300px;
background-color:rgb(21, 22, 21);
}*/
/* 修饰p1 */
/* .p1{
font-size: 16px;
} */
/* .p1{
font-family:'Arial, Helvetica, sans-serif',fantasy Georgia, 'Times New Roman', Times, serif;
*/
/* .p1{
color:rgb(50, 105, 160);
color:#abf
color:yellowgreen;
} */
/* ul li:hover{
color:red;
font-size:30px;
} */
/* .p1{
font-style:italic;
} */
/* div:hover{
font-weight:bolder;
font-size:30px;
color:red;
} */
/* i,em,var{
font-style:normal;
} */
/* ul:hover{
color:#456;
font-weight: 700;
font-size:italic;
text-decorline:un
} */
.p{
text-indent:0px;
}
</style>
</head>
<body>
<!-- 1，选择器
标签选择器：标签名字作为选择器 ：dic,ph1,h2
类选择器：通过给元素起类名查找元素
id选择器：通过id的名字去查找元素
通配符选择器查找页面的元素
问题：多个选择器修饰同一个元素的时候实现何种样式？
选择器的权重值的问题、
W3C====规定：通配符选择器的权重最低：0
对比：id>类>标签>通配符
得出结论：行内样式修饰>id>类>标签>通配符的样式修饰
最终结论：!important >行内样式修饰>id>类>标签>通配符的样式修饰
-->
<!-- 包含选择器： -->
<!-- 包含选择器中有两种情况
1）父子关系
只能查找儿子辈分的元素====子代选择器
2）爷孙选择器（包含）
通过当前元素里包含的所有内容其查找元素，除了能找到儿子辈分的元素还能找到孙子辈分，重孙子等等=====后代选择器
加边框：border:5px solid 颜色-->
<!-- <ol>
<li>我是第1个选择器</li>
<li>我是第2个选择器</li>
<li>我是第3个选择器</li>
<li>我是第4个选择器</li>
<ul>
<li>最美丽的1</li>
<li>最美丽的2</li>
<li>最美丽的3</li>
<li>最美丽的4</li>
<li>最美丽的5</li>
</ul>
<li>我是第5个选择器</li>
<li>我是第6个选择器</li>
<li>我是第7个选择器</li>
<li>我是第8个选择器</li>
<li>我是第9个选择器</li>
</ol> -->
<!-- 伪类选择器 -->
<!-- ：本身元素不具有一种动态的效果，需要通过鼠标的事件去触发来完成对应的改变
伪类选择器经常使用在超链接里面
：link ====超链接访问前的状态
：visited= 超链接访问后的状态
：hover==超链接悬停时候的状态
：active==超链接激活的状态
书写的时候一定要遵循以上顺序，不能颠倒顺序，颠倒顺序之后实现不了 冒号前后没有任何的空格之说
鼠标悬停可以应用在任何一个元素上面
-->
<!-- <a href="#" class="aa">我是一个标签</a>
<p>一个p标签</p>
<div>
<p>一个怕标签</p>
</div> */ -->
<!-- 权重值相加：
通配符权重值：0
标签的权重值：1
类的权重值：10
id的权重值 ：100
行内的权重值：1000
！important的权重值：10000
问题：是个标签和一个类谁优先
答案：类优先因为类的优先级高
常用选择器权重优先级：！important>id>class>tag
!important 可以提升样式优先级，但不建议使用。如果！important被用于一个简写的样式属性，那么这条件写的样式属性所代表的子属性都会被应用上！important。例如：background:blue!important;
如果两条样式都使用！important，则权重值高的优先级更高
在CSS样式表中，同一个css样式你写了两次，后面的会把前面的覆盖掉
样式指向同一元素，权重规则生效，权重大的被应用
样式指向同一元素，权重规则生效，权重相同时，就近原则生效，后面定义的被应用
样式不指向同一元素时，权重规则失效，就近原则生效，离目标元素最近的样式被应用
-->
<!-- 元素如何起两个类名：
给元素起两个类名的情况下共用一个class多个类名之间使用空格隔开
他们两个的权重值是一样的；实现效果以CSS后者为主，后面的把前面的给覆盖掉
这么多选择器讲解完毕：
总结：
不同的选择器修饰同一个元素的时候，相同的属性，被权重值大的覆盖掉；不同的属性会被保留下来
相同的选择器修饰同一个元素的时候，相同的属性会被后面的代码给覆盖掉，不同的属性会被保留下来
-->
<!-- <div class="box1 box2"></div> -->
<!-- CSS基本语法
选择器{
属性：属性值；
}
选择器：查找页面元素的一种方式方法
{}：样式规则：规定了选择器查找的页面元素实现何种样式
主要学：文本的规则；背景的规则；边框的规则；浮动的规则；定位的规则；溢出的规则；盒子模型的规则
盒子模型规则
1）文本的规则
主要对页面的文本文字记性样式的修饰
a.字体大小的属性
font-size:12px(默认文本最小的10px 移动端和个人电脑默认的网页之中的字体大小是16px 开)
-->
<!-- 文本的大小:最小像素是10个像素
默认字体的大小为16个像素
开发的时候经常使用为偶数-->
<!-- <p class="p1">修饰：我好困啊</p>
<p class="p2">默认：我好困啊</p>
b.字体属性：字体族科
font-family:宋体
默认的浏览器中的字体是宋体
实际的谷歌和火狐里面的字体为“微软雅黑”
后面可以跟好几个字体
font-family:宋体；楷体；隶书；
如果从左到右开始匹配，第一个支持的话实现第一个，如果都不支持实现的是浏览器中的默认字体
英文字体：如果是一个单词组成的话，不需要带引号，如果是多个单词组成的话，这个字体需要引号
英文字体大部分只针对英文
c.
文本颜色属性
color:red
取值1）颜色单词：red green
2)rgb(red,green,blue)三个颜色的取值范围：0~255
rgb(23,45,67)
3)#六位十六进制的颜色值0-9A-F
第12====红色
第34====绿色
第56====蓝色
#aabbcc======#abc
#112233======#123
#112234======不能减写
#000=====黑色
#fff=====白色
d.文本加粗属性
font-weight
2类取值
1）数值类型
100-900
100===细体
400===正常
700===加粗
900===更粗 更加具有强调性
取值没有任何单位
问题1：取值为400正常字体的作用是什么？
取消b,strong,h1-h6,th,标签的默认效果===防止标签不够使用
2）为啥要学习font-weight:700
可以简化标签结构
能够制作鼠标划过效果；
能够控制加粗的数值
2）关键词类型
lighter====细体
normal=====正常
bold======粗体
bolder====更粗
e.文本的倾斜
font-style:
italic====倾斜
oblique===斜体字 具有强调行
normal====正常字体
取消i和em的倾斜效果
总结：font-style:normal的时候，主要作用使用取消i和em，var标签的倾斜效果
为啥使用CSS的倾斜属性不要使用标签倾斜
简化结构，制作鼠标滑过的效果
f. 文本的修饰属性
text-decoration
取值：underline=====下划线====u标签
line-through====中划线
overline======上划线
none=========取消修饰线
取消的是u,s,del,等修饰效果
g 文本对齐方式
水平对齐
text-align:left/right/center/justify(两端对齐)
默认是左对齐的
h.单行文本垂直居中显示（单行文本垂直居中对其）
line-height====调整行间距
父元素height多少line-height取值就是多少
取值：为高度的时候=====文本垂直居中
>高度的时候=====文本贴下边显示（很少使用）
<高度的时候====文本贴上边显示
多行文本时调整的就是行间距
i. 首行缩进
text-indent:2em
em====先对单位，根据父元素字体大小缩小或放大的一个倍数
1em=16px;
调整了字体大小
font-size:30px;
1em=30px;
只对第一行起作用，
能取正数能取复数
transparent(透明色)
问题：如何在不隐藏元素的情况下把文本隐藏掉（面试）
首行缩进：text-indent:-9999px;
字体大小设置为0px fong-size:0px;
g.字词间距
字符间距
字母与字母之间的间距(汉字与汉字之间的间距)
词间距
letter-spacing:px/em
英文单词与单词之间的间距
word-spacing:px/em
k.属性分类
属性：单一属性：一个属性只能实现一种一样修饰
复合属性：通过一个属性能实现多种样式修饰的效果
font:font-weight font-style font-size/line-height font-family
使用复合属性注意事项：
字体放在最后面
字体和字体大小必须携带
font:30px/50px 微软雅黑；
5.群组选择器
<style>
i,em,vaar{
font-style:normal;
}
<style>
PS使用规范
1）测量
使用PS打开你的素材
如何调整标尺=======视图====标尺
标尺上面单机拖动-----出现参考线=====水平标尺上面的为水平参考线==垂直的标尺上面显示的为垂直参考线
如何放大缩小图像：ctrl++ ctrl+- 使用alt+滚轮
使用临时抓手工具进行拖动图片显示的区域
调整单位：在标尺上面右键：修改单位
如何显示：测量大小：窗口里面有信息面板===保存着你想要的信息
2）吸取颜色
使用的是吸管工具（i）
#f69d29
rgb(246,157,41)
3)截图
a.快捷键截图
使用选框工具进行框选------ctrl+c----ctrl+n---ctrl+v---ctrl+s
保存格式为：png,jpg,gif,webp
b.快速截取多个
点击左侧的第五个图标（裁剪工具）===右键==切片工具===想要把谁留住就使用切片工具进行框选====点击左上角文件===存储为wed所用的、格式===点击存储====修改切片类型为（所有用户切片）===会出现一个文件夹===images===保存的就是你的切片
7.列表修饰的CSS属性====无序列表的修饰 ui>li
默认的无序列表的列表项是黑色的实心圆点
修饰css属性 修改列表项的显示类型
list-style-type 必须加横杠
list-style-type:disc(默认的就是disc)
circle(空心圆)
none(取消列表项)
square(实心方块)
列表项显示的图片
list-style-img:url(img/.png)
列表项显示的位置
list-style-position:inside;在里面
list-style-position:outside；在外面（默认值）
列表的复合属性
list-style:none url(img/.png)inside
实际开发：
list-style:none======重中之重（任何一家官网，任何一家网站都必须使用这行代码）
继承性
ul>li{
list-style:inside(img/dian.png)
}
8.边框规则
边框：元素的边界值，元素的边界，超出去叫做溢出效果
属性：border
取值：border：10px side(样式) gray为元素添加一个四周的边框，边框的样式为10px粗细的灰色的单实线边框，双实线边框为double,
10px=====边框的粗细=====border-width
side=====边框的样式=====border-style
gray=====边框的颜色====border-color
border是复合属性
可以同时实现边框的粗细，样式，颜色
添加边框之后会变大
默认的情况下边框是黑色的
var也是倾斜的意思
-->
<!-- <p class="p1">修饰：我好困啊 hallo word</p>
<p class="p2">默认：我好困啊</p> -->
<ul>
<li>我是第1个</li>
<li>我是第2个</li>
<li>我是第3个</li>
</ul>
<div>好困</div>
<i>
1+1=2
</i>
<em>
2+2=4
</em>
<var>
3+3=6
</var>
<p>123333=1233333</p>
</body>
</html>
