css 的声明
<html>
<head>
<meta charset="UTF-8">
<title>css的声明学习</title>
<!--
CSS声明学习:
1、在head标签中使用style标签声明：
作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式
2、在标签上使用style属性进行声明：
作用：此声明会将css样式直接作用于当前标签。
3、在head标签中使用link标签引入外部声明好的css文件
作用：此声明相当于调用,解决了不同网页间样式重复使用的问题
一次声明，随处使用
问题：
不同的声明给同一个标签操作了同一个样式，会使用谁的？（自上而下执行）
如果Css的声明全部在head标签中，则遵循就近原则，谁离标签近，谁就会被显示。
-->
<!--引入外部声明好的css文件-->
<link rel="stylesheet" type="text/css" href="css/my.css"/>
<!--声明css代码域-->
<style type="text/css">
hr{
width: 50%;
height: 20px;
color: red;
background-color: red;
}
</style>
</head>
<body>
<h3>css的声明学习</h3>
<hr style="background-color: blue;height:50px;"/>
<hr/>
</body>
</html>
css 的选择器
/*使用伪类给标签添加样式*/
img:hover{
transform: rotate(0deg) scale(1.5);/*设置旋转角度和缩放比例*/
z-index: 1;/*设置显示优先级别*/
transition: 1.5s;/*设置显示加载时间*/
}
显示优先级：
!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器（标签选择器） > 通配符选择器 > 继承 >浏览器默认属性
选择器的分类：
基础选择器、组合选择器、属性选择器、伪类选择器和伪元素等
基础选择器：
组合选择器：
属性选择器：
伪类选择器：
在css中，这四种状态必须按照固定的顺序写：
a:link 、a:visited 、a:hover 、a:active
伪元素：
css优先级，即是指CSS样式在浏览器中被解析的先后顺序
- 第一种算法：
选择器优先级的规定
关于优先级的规定，常用的方法是给不同的选择器分配权值：
- id选择器优先级很高，权值为100
- class、属性和伪类选择器的权值为10
- 标签选择器权值为1
在比较样式的优先级时，只需统计选择符中的id、class和标签名的个数，然后把相应的权值相加即可，最后根据结果排出优先级
- 权值较大的优先级越高
- 权值相同的，后定义的优先级较高
- 样式值含有！important，优先级最高
div .class1 #people的权值等于1+10+100=111
.class2 li #age的权值等于10+1+100=111
如果第二个选择器后定义样式，则第二个的优先级要高
后代选择器的定位原则
在这里介绍一下对于后代选择器，浏览器是如何查找元素的呢？
浏览器CSS匹配不是从左到右进行查找，而是从右到左进行查找。
比如DIV #divBox p span.red{color:red;}，浏览器的查找顺序如下：先查找html中所有class='red’的span元素，找到后，再查找其父辈元素中是否有p元素，再判断p的父元素中是否有id为divBox的div元素，如果都存在则匹配上。
浏览器从右到左进行查找的好处是为了尽早过滤掉一些无关的样式规则和元素。
- 另外一种算法：
优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
- 如果存在内联样式，那么 A = 1, 否则 A = 0;
- B 的值等于 ID选择器 出现的次数;
- C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
- D 的值等于 标签选择器 和 伪元素 出现的总次数 。
这样子直接看好像也还是很明白 ，那先上个例子：
#nav-global > ul > li > a.nav-link
套用上面的算法，依次求出 A B C D 的值：
- 因为没有内联样式 ，所以 A = 0;
- ID选择器总共出现了1次， B = 1;
- 类选择器出现了1次， 属性选择器出现了0次，伪类选择器出现0次，所以 C = (1 + 0 + 0) = 1；
- 标签选择器出现了3次， 伪元素出现了0次，所以 D = (3 + 0) = 3;
上面算出的A 、 B、C、D 可以简记作：(0, 1, 1, 3)。
为了熟悉掌握优先级算法 ，我们再来做一些练习：
li /* (0, 0, 0, 1) */
ul li /* (0, 0, 0, 2) */
ul ol+li /* (0, 0, 0, 3) */
ul ol+li /* (0, 0, 0, 3) */
h1 + *[REL=up] /* (0, 0, 1, 1) */
ul ol li.red /* (0, 0, 1, 3) */
li.red.level /* (0, 0, 2, 1) */
a1.a2.a3.a4.a5.a6.a7.a8.a9.a10.a11 /* (0, 0, 11,0) */
#x34y /* (0, 1, 0, 0) */
li:first-child h2 .title /* (0, 0, 2, 2) */
#nav .selected > a:hover /* (0, 1, 2, 1) */
html body #nav .selected > a:hover /* (0, 1, 2, 3) */
OK， 现在已经弄清楚了优先级是怎么算的了。但是，还有一个问题，怎么比较两个优先级的高低呢？
比较规则是: 从左往右依次进行比较 ，较大者胜出，优先级最高，如果相等，则继续往右移动一位进行比较 。如果4位全部相等，则后面的会覆盖前面的
css 的盒子模型
div标签：
块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
特点：
默认宽度是页面的宽度，但是可以设置。
高度默认是没有的，但是可以设置。(可以顶开)
如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
盒子模型：
外边距:margin
作用：用来设置元素和元素之间的间隔。
居中设置:margin:0px auto;上下间隔是0px,水平居中。
可以根据需求单独的设置上下左右的外边距。
边框：border
作用：用来设置元素的边框大小
可以单独设置上下左右
内边距：padding
作用：设置内容和边框之间的距离
注意：内边距不会改变内容区域的大小
可以单独的设置上下左右的内边距
内容区域：
作用：改变内容区域的大小。
设置宽和高即可改变内容区域的大小。
css 的定位
position
相对定位:relative
作用：相对元素原有位置移动指定的距离(相对的自己的原有位置)
可以使用top,left,right,bottom来进行设置。
注意：
其他元素的位置是不改变的。
绝对定位:absolute
作用：可以使用元素参照界面或者相对父元素来进行移动
注意：
如果父级元素成为参照元素，父元素必须使用相对定位属性
默认情况下是以界面为基准进行移动的。
固定定位:fixed
作用：将元素固定现在页面的指定位置（相对于屏幕），不会随着滚动条的移动而改变位置。
以上定位都可以使用top,left,right,bottom来进行移动。
z-index:此属性是用来声明元素的显示级别的。
173
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
