从零开始学前端:程序猿小白也可以完全掌握!—今天你学习了吗?(CSS)
复习:从零开始学前端:复习课程 — 今天你学习了吗?(CSS:Day11)
文章目录
前言
感觉太忙了,学习的时候有的基础以前了解过,就没那么认真,然后做题,练习,就疯狂打脸。。。
第十二节课:CSS元素模式的转换和CSS三大特性和伪元素
一、CSS元素模式的转换
1.元素显示模式
什么是元素的显示模式(分类)及其作用?
作用:
网页的标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好地布局我们的网页。
定义及分类:
定义:
元素显示模式就是元素(标签)以什么方式进行显示。
分类:
根据标签的类型一共可以分为三大类:
块元素
和行内元素
还有行内块元素
三种类型。
2.块元素
常见的块元素有<h1>
~<h6>
、<p>
、<div
>、<ul>
、<ol>
、<li>
等,其中<div>
标签是最典型的块元素。
块级元素的特点:
- 自己独占一行。
- 高度、宽度、外边距以及内边距都可以控制。
- 宽度默认是容器(父级宽度)的100%。
注意:
- 文字类的元素内不能使用块级元素
<p>
标签主要用于存放文字,因此<p>
里面不能放块级元素,特别是不能放<div>
- 同理,
<h1>~<h6>
等都是文字类块级标签,里面也不能放其他块级元素。
3.行内元素
常见的行内元素有<a>
、<strong>
、<b>
、<em>
、<i>
、<del>
、<s>
、<ins>
、<span>
等。
其中<span>
标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素的特点:
- 相邻行内元素在一行上,一行可以显示多个。
- 高、宽直接设置是无效的。
- 默认宽度就是它本身内容的宽度。
- 行内元素只能容纳文本或其他行内元素。
注意:
- 链接里面不能再放链接。
- 特殊情况链接
<a>
里面可以放块级元素,但是给<a>
转换一下块级模式最安全。
4.行内块元素
在行内元素中有几个特殊的标签------<img/>
、<input/>
、<td>
,他们同时具有会计与射弩和行内元素的特点。我们称他们为行内块元素。
行内块元素的特点:
- 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。一行可以显示多个(行内元素特点)。
- 默认宽度就是它本身内容的宽度(行内元素特点)。
- 高度、行高、外边距以及内边距都可以控制(块级元素特点)
实例:
<body>
<div>
<h2>《块级元素》</h2>
<div>
<h1>h1</h1>
<p>p</p>
<div>div</div>
<ul><li>ul-li</li></ul>
<ol><li>ol-li</li></ol>
</div>
</div>
<hr>
<div>
<h2>《行内元素》</h2>
<div>
<a href="">a</a>
<strong>strong</strong>
<b>b</b>
<em>em</em>
<i>i</i>
<del>del</del>
<s>s</s>
<ins>ins</ins>
<span>span</span>
</div>
</div>
<hr>
<div>
<h2>《行内块元素》</h2>
<div>
<img src="../../../img素材/回眸.jpg" alt="" style="width: 100px;">
<input type="text" placeholder="input">
<td>td:table的标准单元</td>
</div>
</div>
</body>
效果图:
5.元素显示模式的转化
在特殊情况下,我们需要元素模式的转换,简单理解一个模式的元素需要另一种模式的特性,比如当我们想要增加<a>
链接的触动范围。那么这个是时候就需要元素显示模式转换了。
- 转换为块元素:display:block;(*)
- 转换为行内元素:display:inline;
- 转换为行内块元素:display:inline-block;(*)
实例:
<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>CSS元素模式的转换和CSS三大特性和伪元素</title>
</head>
<body>
<div>
<h2>《块级元素--->行内元素》</h2>
<div>
<h1 style="display: inline;">h1</h1>
<p style="display: inline;">p</p>
<div style="display: inline;">div</div>
<ul style="display: inline;"><li style="display: inline;">ul-li</li></ul>
<ol style="display: inline;"><li style="display: inline;">ol-li</li></ol>
</div>
</div>
<hr>
<div>
<h2>《行内元素--->块级元素》</h2>
<div>
<a href="" style="display: block;">a</a>
<strong style="display: block;">strong</strong>
<b style="display: block;">b</b>
<em style="display: block;">em</em>
<i style="display: block;">i</i>
<del style="display: block;">del</del>
<s style="display: block;">s</s>
<ins style="display: block;">ins</ins>
<span style="display: block;">span</span>
</div>
</div>
<hr>
<div>
<h2>《行内块元素--->块级元素》</h2>
<div>
<img src="../../../img素材/回眸.jpg" alt="" style="display: block;height: 100px;">
<br>
<input type="text" placeholder="input" style="display: block;">
<table>
<tr>
<td style="display: block;">td:table的标准单元</td>
</tr>
</table>
</div>
</div>
</body>
效果图:
转换完之后最明显的效果就是是否只能在一行显示。
二、CSS三大特性
CSS三大特性:层叠性
、继承性
、优先级
1. 层叠性
相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性主要解决样式冲突问题。
层叠性原则:
- 样式冲突,遵循的原则是就近原则,那个样式离结构近,就执行哪个样式
- 不冲突,不会层叠
- 长江后浪推前浪,后面的样式会覆盖前面的样式
例子:
html文件:
<!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>CSS元素模式的转换和CSS三大特性和伪元素</title>
<style>
div{
background-color: rgb(49, 207, 207);
color: rgb(166, 240, 240);
}
div{
background-color: rgb(180, 63, 184);
color: rgb(199, 231, 58);
}
</style>
</head>
<body>
<div class="menu">
<div>第一行</div>
<div>第二行</div>
<div>第三行</div>
</div>
</body>
</html>
效果图:
2.继承性
现实中的继承:我们继承了父亲的姓
CSS中的继承:子标签会继承父标签的某些样式,如文本颜色和字号。简单的理解就是子承父业。
- 恰当地使用继承可以简化代码,降低CSS样式的复杂性
- 子元素可以继承父元素的样式(text-、font-、line-这些元素开头的可以继承,以及color属性)
例子:
html文件:
<!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>CSS元素模式的转换和CSS三大特性和伪元素</title>
<style>
.father{
background-color: rgb(49, 207, 207);
color: rgb(49, 124, 62);
font-size: 24px;
line-height: 40px;
text-decoration: underline;
}
/* .son{
background-color: rgb(180, 63, 184);
color: rgb(199, 231, 58);
} */
</style>
</head>
<body>
<div class="father">
<div class="son1">第一行</div>
<div class="son2">第二行</div>
<div class="son3">第三行</div>
</div>
</body>
</html>
效果图:
3.优先级
当同一个元素指定多个选择器,就会有优先级的产生。
- 选择器相同,则执行层叠性
- 选择器不同,则根据选择器权重执行
选择器 | 选择器权重 |
---|---|
集成/* | (0,0,0,0)----0 |
标签选择器 | (0,0,0,1)----1 |
类选择器/伪元素选择器 | (0,0,1,0)----10 |
ID选择器 | (0,1,0,0)----100 |
行内样式 | (1,0,0,0)----1000 |
!important重要的(color:red!important) | 无穷大 |
注意:
- 权重是有4组数字组成,但是不会有进位。
- 可以理解为类选择器永远大于元素选择器,id选择器永远大于类选择器,以此类推。
- 等级判断从左向右,如果某一位数值相同,则判断下一位数值。
- 可以简单记忆法:通配符和继承权重为0,标签选择器为1,类(伪类)选择器为10,id选择器为100,行内样式为1000,!important无穷大。
- 继承的没有权重,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0。
- 权重叠加:如果是复合选择器,则会有权重叠加,需要计算权重。(权重虽然有叠加但是不会进位)
例子:
html文件:
<!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>CSS元素模式的转换和CSS三大特性和伪元素</title>
<style>
.father{
background-color: pink;
}
/* son1 */
/* 标签选择器 */
a{
color: red;
}
/* 类选择器 */
.son1{
color: rosybrown;
}
/* id选择器 */
#one{
color: royalblue;
}
/* son2 */
/* 标签选择器 */
div:first-child{
color: red;
}
/* 类选择器 */
.son2{
color: rosybrown;
}
/* id选择器 */
#two{
color: royalblue;
}
/* son3 */
/* 标签选择器 */
div:second-child{
color: red;
}
/* 类选择器 */
.son3{
color: rosybrown;
}
</style>
</head>
<body>
<div class="father">
<!-- 行内样式 -->
<a class="son1" id="one" style="color: rgb(84, 173, 62);">第一行</a>
<div class="son2" id="two">第二行</div>
<div class="son3" id="three">第三行</div>
</div>
</body>
</html>
效果图:
三、练习
代码:
HTML:
<!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>菜单</title>
<link rel="stylesheet" href="./css/菜单.css">
</head>
<body>
<div>
<!-- <div class="head1">
<div class="back1">
<a href="http://">崩坏3</a>
<a href="http://">怪物之家</a>
<a href="http://">古剑奇谭网络版</a>
<a href="http://">洪潮之焰</a>
<a href="http://">机动战士敢达Online</a>
<a href="http://">命运之手</a>
<a href="http://">恶魔秘境</a>
<a href="http://">笼中窥梦</a>
</div>
</div>
<hr> -->
<div class="head">
<div class="back">
<ul>
<li><a href="http://">崩坏3</a></li>
<li><a href="http://">怪物之家</a></li>
<li><a href="http://">古剑奇谭网络版</a></li>
<li><a href="http://">洪潮之焰</a></li>
<li><a href="http://">机动战士敢达Online</a></li>
<li><a href="http://">命运之手</a></li>
<li><a href="http://">恶魔秘境</a></li>
<li><a href="http://">笼中窥梦</a></li>
</ul>
</div>
</div>
<!-- <hr>
<div class="foot">
<a href="http://" ></a>
</div> -->
</div>
</body>
</html>
CSS:
/* .head1{
height: 500px;
width: 800px;
background-image: url(../../../../img素材/康娜元气波.jpg);
background-size: cover;
} */
.head{
height: 700px ;
background-image: url(../img/8work.jpg);
background-size: 1200px 700px;
background-repeat: no-repeat;
}
.head .back{
width: 350px;
height: 700px ;
background-color: rgba(27,35,49,0.8);
}
.head .back ul{
list-style-type: none;
height: 700px;
}
li{
text-indent: 1em;
}
li>a{
display: block;
font-family:"幼圆";
font-size: 24px;
line-height: 87px;
text-decoration: none;
color: white;
}
li>a:hover{
color: rgb(203,165,118);
background-color: rgba(94,94,104, 0.9);
}
.foot a{
height: 500px;
width: 500px;
display: block;
background-image: url(../img/im1.jpg);
background-size: 500px 500px;
background-repeat: no-repeat;
}
div>a:link:hover{
height: 500px;
width: 500px;
display: block;
background-image: url(../img/girl.jpg);
background-size: 500px 500px;
background-repeat: no-repeat;
}
预习:从零开始学前端:伪元素和盒子模型 — 今天你学习了吗?(CSS:Day13)
------不经历风雨,怎能见彩虹。