css
1.css的三种引入方式
<html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!-- 权重： 优先级高 权重大 谁在页面谁的权重大 --> <!--外接样式--> <link rel="stylesheet" href="./test.css">
div{ width: 100px; height: 200px; background: yellowgreen; }
<!--内接样式--> <style> /*选择器*/ div{ background: purple; } </style> </head> <body> <!--行内样式 的优先级是最高最高的--> <div style="background: red"></div> </body> </html>
2.css的选择器
(1) 标签选择器
标签{}
标签选择器可以选中所有的标签元素，比如div，ul，li ，p等等，不管标签藏的多深，都能选中，选中的是所有的，而不是某一个，所以说 "共性" 而不是 ”特性“
(2)id选择器
#选中id{}
同一个页面中id不能重复。
任何的标签都可以设置id
id命名规范 要以字母 可以有数字 下划线 - 大小写严格区分 aa和AA是两个不一样的属性值
(3)类选择器
.类名{}
所谓类：就是class . class与id非常相似 任何的标签都可以加类，但是类是可以重复,属于归类的概念。同一个标签中可以携带多个类，用空格隔开
3.高级选择器
(1)后代选择器
使用空格表示后代选择器。顾名思义，父元素的后代（包括儿子，孙子，重孙子 )
表示container类下的所有p标签
.container p{
color: red;
}
(2)子代选择器
使用>表示子代选择器。比如div>p,仅仅表示的是当前div元素选中的子代(不包含孙子....)元素p。
表示container下的第一层p标签
.container>p{
color: yellowgreen;
}
(3)并集选择器(组合选择器)
多个选择器之间使用逗号隔开。表示选中的页面中的多个标签。一些共性的元素，可以使用并集选择器
(4)交集选择器(我认为没有意义只是我认为)
使用.表示交集选择器。第一个标签必须是标签选择器，第二个标签必须是类选择器 语法：div.active
4.属性选择器
属性选择器，字面意思就是根据标签中的属性，选中当前的标签。
form input[type='text']{
background-color: red;
}
form input[type='password']{
background-color: yellow;
}
5.伪类选择器(a标签) LoVe HAte
/*没有被访问的a标签的样式*/
.box ul li.item1 a:link{
color: #666;
}
/*访问过后的a标签的样式*/
.box ul li.item2 a:visited{
color: yellow;
}
/*鼠标悬停时a标签的样式*/
.box ul li.item3 a:hover{
color: green;
}
/*鼠标摁住的时候a标签的样式*/
.box ul li.item4 a:active{
color: yellowgreen;
}
6.伪元素选择器(是行内的)
/*设置第一个首字母的样式*/
p:first-letter{
color: red;
font-size: 30px;
}
/* 在....之前 添加内容 这个属性使用不是很频繁 了解 使用此伪元素选择器一定要结合content属性*/
p:before{
content:'haha';
}
/*在....之后 添加内容，使用非常频繁 通常与咱们后面要讲到布局 有很大的关联（清除浮动）*/
p:after{
content:'&';
color: red;
font-size: 40px;
}
7.css的继承性和层叠性
继承性
面向对象语言都会存在继承的概念，在面向对象语言中，继承的特点：继承了父类的属性和方法。那么我们现在主要研究css，css就是在设置属性的。不会牵扯到方法的层面。
继承：给父级设置一些属性，子级继承了父级的该属性，这就是我们的css中的继承。
记住：有一些属性是可以继承下来 ： color 、 font-*、 text-*、line-* 。主要是文本级的标签元素。
但是像一些盒子元素属性，定位的元素（浮动，绝对定位，固定定位）不能继承。
层叠性:权重行内>id>类>标签权重： 谁的权重大，浏览器就会显示谁的属性
自己设置的
(1)数：id的数量 class的数量 标签的数量，顺序不能乱
(2)当权重一样的时候 是以后来设置的属性为准，前提必须权重一样 。‘后来者居上 ’。
<head> <meta charset="UTF-8"> <title>Title</title> <style> #father1 .box2 .box3{color:blue}
#无论这句话放在p标签后面还是前面,都是红色,因为权重大
#father1 #father2 #father3 p{color:yellow} p{color:red} /*有标签就用标签,继承和标签的没法比*/ </style> </head> <body> <div class="box1" id="father1"> <ul class="box2" id="father2"> <li class="box3" id="father3"> <p class="box4" id="child">猜猜我的颜色</p> </li> </ul> </div> </body> </html>
继承的继承来的属性，它的权重为0。它没有资格跟我们下面选中的标签对比。
<div id='box1' class="wrap1"> <div id="box2" class="wrap2"> <div id="box3" class="wrap3"> <p>再来猜猜我是什么颜色？</p> </div> </div> </div>
#box1 #box2 .wrap3{
color: red;
}
#box2 .wrap3 p{
color: green;
}
如果都是继承来的:
权重都是0:那么就是"就近原则" ： 谁描述的近，就显示谁的属性。所谓描述的近，就是选中到最内层的距离越近。
都是继承来的属性，选择的标签一样近，再去数权重
<head> <meta charset="UTF-8"> <title>Title</title> <style> #father1 #father2 #father3 {color:yellow} #father1 .box2 .box3{color:blue} </style> </head> <body> <div class="box1" id="father1"> <ul class="box2" id="father2"> <li class="box3" id="father3"> <p class="box4" id="child">猜猜我的颜色</p> </li> </ul> </div> </body>
黄
8.层叠性权重相同处理
第一种现象：当权重相同时，以后来设置的属性为准，前提一定要权重相同
第二种现象： 第一个选择器没有选中内层标签，那么它是通过继承来设置的属性，那么它的权重为0。第二个选择器选中了内层标签，有权重。
第三种现象：如果都是继承来的属性，谁描述的近，显示谁的属性。'就近原则'
!important 的使用。
！important:设置权重为无限大
!important 不影响继承来的权重，只影响选中的元素。不要随便使用!important,因为使用它会影响页面的布局
9.盒模型
盒模型的属性
width：内容的宽度
height: 内容的高度
padding：内边距，边框到内容的距离
border: 边框，就是指的盒子的宽度
margin：外边距，盒子边框到附近最近盒子的距离
10.padding
padding：就是内边距的意思，它是边框到内容之间的距离
另外padding的区域是有背景颜色的。并且背景颜色和内容的颜色一样。也就是说background-color这个属性将填充所有的border以内的区域
11.border
如果颜色不写，默认是黑色。如果粗细不写，不显示边框。如果只写线性样式，默认的有上下左右 3px的宽度,实体样式，并且黑色的边框。
12.margin和margin的用法
margin：外边距的意思。表示边框到最近盒子的距离。
当给两个标准流下兄弟盒子 设置垂直方向上的margin时，那么以较大的为准，那么我们称这种现象叫塌陷。没法解决，我们称为这种技巧叫“奇淫技巧”。记住这种现象，在布局垂直方向盒子的时候主要margin的用法。
当我们给两个标准流下的兄弟盒子设置浮动之后，就不会出现margin塌陷的问题。
margin：0 auto;另外如何给盒子设置浮动，那么margin:0 auto失效。
div{
width: 780px;
height: 50px;
background-color: red;
/*水平居中盒子*/
margin: 0px auto;
/*水平居中文字*/
text-align: center;
}
13块级元素和行内元素
行内元素和块级元素的区别：（非常重要）
行内元素：
- 与其他行内元素并排；
- 不能设置宽、高。默认的宽度，就是文字的宽度。
块级元素：
- 霸占一行，不能与其他任何元素并列；
- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%。
块级元素和行内元素的分类：
在以前的HTML知识中，我们已经将标签分过类，当时分为了：文本级、容器级。
从HTML的角度来讲，标签分为：
- 文本级标签：p、span、a、b、i、u、em。
- 容器级标签：div、h系列、li、dt、dd。
PS：为甚么说p是文本级标签呢？因为p里面只能放文字&图片&表单元素，p里面不能放h和ul，p里面也不能放p。
现在，从CSS的角度讲，CSS的分类和上面的很像，就p不一样：
-
行内元素：除了p之外，所有的文本级标签，都是行内元素。p是个文本级，但是是个块级元素。
-
块级元素：所有的容器级标签都是块级元素，还有p标签。
14.浮动
1.浮动的元素脱标
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>.box1{ width: 200px; height: 200px; background-color: red; float: left; } .box2{ width: 400px; height: 400px; background-color: yellow; } span{ background-color: green; float: left; width: 300px; height: 50px; }</style> </head> <body> <div class="box1">小红</div> <div class="box2">小黄小黄小黄小黄小黄小黄小黄</div> <span>HAHA</span> <span>HOUHOU</span> </body> </html>
2.浮动的元素互相贴靠
3.浮动的元素由"字围"效果
文字不会被遮盖，此时就形成了字围效果
4.收缩的效果;
一个浮动元素。如果没有设置width，那么就自动收缩为文字的宽度（这点跟行内元素很像）
清除浮动的方法，在这里给大家介绍四种：
- 给父盒子设置高度
- clear:both
- 伪元素清除法
- overflow：hidden
给父盒子设置高度
这个方法给大家上个代码介绍，它的使用不灵活，一般会常用页面中固定高度的，并且子元素并排显示的布局。比如：导航栏
clear：both
clear：意思就是清除的意思。
有三个值：
left：当前元素左边不允许有浮动元素
right：当前元素右边不允许有浮动元素
both：当前元素左右两边不允许有浮动元素
给浮动元素的后面加一个空的div，并且该元素不浮动，然后设置clear：both。
伪元素清除法
/*新浪首页清除浮动伪元素方法*/
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
15.文本属性和字体属性
文本对齐
text-align 属性规定元素中的文本的水平对齐方式。
属性值：none | center | left | right | justify
文本颜色
color属性
文本首行缩进
text-indent 属性规定元素首行缩进的距离，单位建议使用em
文本修饰
text-decoration属性规定文本修饰的样式
属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。)
行高
line-height就是行高的意思，指的就是一行的高度。
字体属性
字体大小
font-size表示设置字体大小，如果设置成inherit表示继承父元素的字体大小值。
字体粗细
font-weight表示设置字体的粗细
属性值：none(默认值，标准粗细) | bold(粗体) | border(更粗）| lighter(更细) | 100~900（设置具体粗细，400等同于normal，而700等同于bold）| inherit（继承父元素字体的粗细值）
行高 line-height(针对文本)
针对单行文本垂直居中
公式：行高的高度等于盒子的高度，可以使当行文本垂直居中，注意只适用单行文本。
针对多行文本垂直居中
行高的高度不能小于字体的大小，不然上下字之间会紧挨一起。
第一步，一个宽度300*300的盒子，看盒子中一共显示了几行文字，假如是5行，再看一下行高，如果行高是line-height:30px; 那么就知道行高*5=150px
第二步，让(盒子的高度-150px)/2=75;那么设置盒子的padding-top:75px;同时保证盒子的高度为300px,那么高度改为225px;
16.background
background-color属性表示背景颜色
background-img:表示设置该元素的背景图片
那么发现默认的背景图片，水平方向和垂直方向都平铺
background-repeat:表示设置该元素平铺的方式
属性值：
| 值 | 描述 |
|---|---|
| repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
| repeat-x | 背景图像将在水平方向重复。 |
| repeat-y | 背景图像将在垂直方向重复。 |
| no-repeat | 背景图像将仅显示一次。 |
| inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
给元素设置padding之后，发现padding的区域也会平铺背景图片。
repeat应用案例
还是上面那个超链接导航栏的案例，我们给body设置平铺的图片，注意：一定找左右对称的平铺图片，才能实现我们要的效果
background-position: 属性设置背景图像的起始位置。这个属性设置背景原图像（由 background-image 定义）的位置
属性值：
| 值 | 描述 |
|---|---|
|
如果您仅规定了一个关键词，那么第二个值将是"center"。 默认值：0 0； 这两个值必须挨在一起。 |
雪碧图技术（精灵图技术）
17.定位
默认：position:static; 静态定位
position: relative; 相对定位
absolute;绝对定位
fixed;固定定位
相对定位
- ralative:
如果仅仅设置标准文档流的盒子为相对定位，那么跟普通的盒子没有任何区别
不脱标
参考点：
相对于原来的位置
形影分离
作用：
1.层级提高，做压盖（不建议）
2.布局方案 "子绝父相"的参考
绝对定位
- absolute
1.脱标：不占位置
2.层级提高
参考点：
单个盒子
如果以top描述，是以页面的左上角为参考点（跟浏览器的左上角区分）
如果以bottom描述，是以浏览器的左下角为参考点
父子盒子之间
如果父辈盒子设置相对定位。子盒子设置绝对定位，以父辈盒子的0,0为参考点
固定定位
固定当前的元素不会随着页面滚动而滚动
特性:
1.脱标 2.遮盖，提升层级 3.固定不变
参考点：
设置固定定位，用top描述。那么是以浏览器的左上角为参考点
如果用bottom描述，那么是以浏览器的左下角为参考点
作用： 1.返回顶部栏 2.固定导航栏 3.小广告
18.z-index
- z-index 值表示谁压着谁，数值大的压盖住数值小的，
- 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
- z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
- 从父现象：父亲怂了，儿子再牛逼也没用(如果设置z-index无效就是这条的问题了)
19.标准文档流
1.空白折叠现象
多个空格会被合并成一个空格显示到浏览器页面中。img标签换行写。会发现每张图片之间有间隙，如果在一行内写img标签，就解决了这个问题，但是我们不会这样去写我们的html结构。这种现象称为空白折叠现象。
2.高矮不齐，底边对齐
文字还有图片大小不一，都会让我们页面的元素出现高矮不齐的现象，但是在浏览器查看我们的页面总会发现底边对齐
3.自动换行，一行写不满，换行写
如果在一行内写文字，文字过多，那么浏览器会自动换行去显示我们的文字。
