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.自动换行,一行写不满,换行写
如果在一行内写文字,文字过多,那么浏览器会自动换行去显示我们的文字。