web前端零基础入门
38. 继承
样式的继承:为一个元素设置的样式,同时也会应用到它的后代元素
继承是发生在祖先后代之间的,当然也包括父子元素之间
继承的设计是为了方便我们开发,可以将一些通用样式设置到共同的祖先元素上
但注意不是所有样式都会被继承,如:背景相关的,布局相关的不会被继承
<!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>
body{
font-size: 20px;
}
p{
color: pink;
background-color: orange;
}
div{
color: yellowgreen;
}
</style>
</head>
<body>
<p>
我是一个p元素
<span>我是p元素中的span</span>
</p>
<span>我是p元素外的span</span>
<div>
我是div
<span>我是div里的span
<em>我是span里的em</em>
</span>
</div>
</body>
</html>
【注意】如何查看CSS相关属性能否被继承,可以打开Zeal离线文档查看器进行搜索
39. 选择器的权重
在上一的章节的32. 关系选择器中说道元素颜色会发生覆盖,由它们的优先级决定,也就意味着它们发生了样式的冲突
样式的冲突:当通过不同的选择器选中相同的元素并设置了不同的值时,此时会发生样式的冲突
发生了样式冲突时,应用那个样式由选择器的权重(优先级)决定
选择器权重:
内联样式 1,0,0,0
id选择器 0,1,0,0
类和伪类选择器 0,0,1,0
元素选择器 0,0,0,1
通配选择器 0,0,0,0
继承 无优先级
- 比较优先级时,需要将所有的选择器的优先级进行相加计算,最后优先级越高,则越优先显示
- 分组选择器的优先级是单独计算的
- 如果优先级计算后相同,此时则优先使用靠下的样式
- 可以在某样式后面加上!important,此时该样式优先级最高,超过内联样式
<!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>
#box1{
background-color: orange;
}
div{
background-color: yellow ;
}
.red{
background-color: red;
}
div#box1{
background-color: aqua;
}
div,#box1{
background-color: brown;
}
*{
font-size: 50px;
}
div{
font-size: 20px;
}
p{
background-color: bisque !important;
}
</style>
</head>
<body>
<div id="box1" class="red" style="background-color:skyblue">我是第一个div</div> <!-- 内联选择器的优先级最高 -->
<div id="box1">我是第二个div
<!-- 交集选择器的优先级大于并集的优先级,color:aqua -->
<!-- 通配选择器的优先级大于继承的优先级,字体50px -->
<span>我是div里的span</span>
</div>
<!-- 使用!important改变样式优先级,color:bisque -->
<p style="background-color: pink;">我是p元素</p>
</body>
</html>
【注意】可以看到p元素上方有距离,因为p元素自带有上下边距,后面章节会详细说明
40. 像素和百分比
长度单位:
像素:屏幕(显示器)实际上由一个一个的小点构成
不同屏幕的像素大小是不同的,像素越小屏幕显示效果越清晰
百分比:将属性值设置为父元素属性的百分比
子元素可以跟随父元素改变而改变
41. em和rem
em是相对于元素的字体大小计算的
1em = 1 font-szie,默认为16px
em会根据字体大小的改变而改变
rem是相对于根元素(html)的字体大小计算的
因此改变该元素和html跟元素的字体大小都可以使em和rem的基数
<!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>
html{
font-size: 15px;
}
.box1{
width: 300px;
height: 100px;
background-color: orange;
}
.box2{
width: 50%;
height: 50%;
background-color: greenyellow;
}
.box3{
font-size: 20px;
width: 15em;/*em以元素字体大小计算 */
height: 5em;
background-color: aqua;
}
.box4{
width: 20rem; /*rem以html根元素字体大小计算*/
height: 6.667rem;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>
42. RGB与RGBA值
在CSS中可以使用颜色名来设置各种颜色
比如:red、orange、blue…
但很多颜色无法表示,因此引入RGB值,通过红绿蓝三原色调配出不同的颜色
十进制RGB值:
每一种颜色值范围在0-255(0%-100%)之间,表示颜色的浓度
语法:RGB(红色值,绿色值,蓝色值)
此三原色为光的三原色,(0,0,0)表示黑色,(255,255,255)表示白色
十六进制RGB值:
颜色浓度通过00-ff表示
语法:#红色绿色蓝色
如果颜色两位两位重复可以简写,如#aabbcc -> #abc
而RGBA在RGB基础上引入了不透明度,1表示完全不透明,0表示完全透明
<!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>
.box{
width: 100px;
height: 100px;
background-color: red;/* 颜色名 */
background-color: rgb(0, 255, 0);/* RGB */
background-color: rgba(76, 72, 102, 0.9);/* RGBA */
background-color: #bfa;/* 16进制RGB值 */
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
43. HSL和HSLA
HSL是一种将RGB色彩模型中的点在圆柱坐标系中的表示法
HSL即色相(Hue)、饱和度( Saturation)、亮度( Lightness)
H取值范围0-360
S取值范围0%-100%
L取值范围0%-100%
HSLA在HSL基础上引入透明度,与RGBA类似
<!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>
.box{
width: 10em;
height: 10em;
background-color: hsl(76, 72%, 89%);
background-color: hsla(76, 72%, 89%, 0.6);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
44. 文档流
文档流(normal flow)
之前介绍网页是一个多层的结构,一层叠着一层,而用户只能看到最上面一层
其中最底下的层称为文档流,所创建的元素默认在文档流中进行排列
因此元素只有两种状态,在文档流中和脱离文档流
元素在文档流中特点:
块元素:
独占一行,无论宽度多宽,自上向下垂直排列
默认宽度是父元素的宽度(撑满父元素),
默认高度被内容撑开
行内元素:
不会独占一行,自左向右水平排列
一行容纳不下会换行到下一行继续自左向右排列
默认宽度和默认高度都是被内容撑开
<!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>
.box{
background-color: yellow;
}
span{
background-color:aqua;
}
</style>
</head>
<body>
<div class="box">html和css</div>
<span>jiayou</span>
<span>jiayou</span>
<span>jiayou</span>
</body>
</html>
45. 盒子模型
CSS将页面中所有元素都设置为了一个矩形的盒子,至此对页面的布局就是将不同的盒子摆放到不同的位置
每一个盒子组成部分:
内容区(content)
内边距(padding)
边框(border)
外边距(margin)
元素中的所有子元素和文本、图像等内容都在内容区中排列
内容区大小由width和height两个属性来设置
边框会影响盒子的大小,设置边框需设置宽度、颜色、边框样式
<!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>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
border-width: 10px;
border-color: red;
border-style: solid;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
46. 边框
边框的宽度 border-width
边框的颜色 border-color
边框的样式 border-style
border-width:不写有默认值,不同浏览器不一样
可以指定四个方向的边框宽度
四个值:上、右、下、左
三个值:上、左右、下
两个值:上下、左右
一个值:上下左右
另外border-xxx-width可以单独指定一个边的宽度
border-color:不写默认值为color的颜色值,不设置为黑色
可以指定四个方向的边框颜色,四个值情况与宽度一样
另外border-xxx-color可以单独指定一个边的颜色
border-style:不写默认值为none
可以指定四个方向的边框颜色,四个值情况与宽度一样
可以指定边框的样式
solid表示实线
dotted表示点状虚线
dashed表示虚线
double表示双线
另外border-xxx-style可以单独指定一个边的边框样式
对这三个值可以进行简写,如:border:solid 10px orange
<!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>
.box1{
width: 100px;
height: 100px;
background-color: aqua;
border-color: red;
border-style: solid;
}
.box2{
width: 100px;
height: 100px;
background-color: #bfa;
border-width: 1px 2px 3px 4px;
border-color: saddlebrown salmon sandybrown;
border-style: dashed dotted;
}
.box3{
width: 100px;
height: 100px;
background-color: blue;
border-width: 5px;
border-style: solid;
}
.box4{
width: 100px;
height: 100px;
background-color: blueviolet;
border: solid 3px red;
border-right: none;
}
</style>
</head>
<body>
<div class="box1"></div><!-- 边框宽度不写此处默认宽度为1px -->
<br>
<div class="box2"></div><!--边框四个方向不同值情况 -->
<br>
<div class="box3"></div><!--边框颜色不写默认黑色 -->
<br>
<div class="box4"></div><!--只需要三边的样式 -->
</body>
</html>
47. 内边距
内容区和边框之间的距离是内边距
一共有四个方向的内边距:
padding-top
padding-right
padding-bottom
padding-left
内边距的设置为影响到盒子的大小
背景颜色会延伸到内边距上
一个盒子可见框的大小,由内容区、内边距和边框共同决定
padding内边距的简写属性,可以同时指定四个方向的内边距
如:padding:10px 20px 30px;
<!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>
.box{
width: 200px;
height: 200px;
background-color: #bfa;
border: 10px orange solid;
padding-top: 100px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 12.5px;
}
.inner{
width: 100%;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<div class="box">
<div class="inner"></div>
</div>
</body>
</html>
48. 外边距
外边距margin不会影响盒子可见框的大小,但是外边距会影响盒子的位置
一共有四个方向的外边距:
margin-top:设置一个正值,元素会往下移动,负值相反
margin-right:设置一个值,会移动其它元素 (具体后面章节介绍)
margin-bottom:设置一个正值,会移动其它元素,负值相反
margin-left:设置一个正值,元素会往右移动,负值相反
margin的简写属性,可以设置四个方向的外边距
如:margin:10px 20px 30px;
<!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>
.box1{
width: 100px;
height: 100px;
background-color: aqua;
margin-top: -50px;/* 往上移动自己50px */
margin-right: 10px;/* 右边没有元素,没有生效 */
margin-bottom: -10px;/* 往上移动下面元素10px */
margin-left: 10px;/* 往右移动自己10px */
}
.box2{
width: 100px;
height: 100px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
【注意】margin-right默认情况下不会产生任何效果
下一章节将会布局进行实例练习,这么久终于要开始实操了啊,想想都激动!