从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）

复习：从零开始学前端：复习课程 — 今天你学习了吗？（CSS：Day11）

文章目录

  • 从零开始学前端：程序猿小白也可以完全掌握！—今天你学习了吗？（CSS）
    • 前言
    • 第十二节课：CSS元素模式的转换和CSS三大特性和伪元素
      • 一、CSS元素模式的转换
        • 1.元素显示模式
        • 2.块元素
        • 3.行内元素
        • 4.行内块元素
        • 5.元素显示模式的转化
      • 二、CSS三大特性
        • 1. 层叠性
        • 2.继承性
        • 3.优先级
      • 三、练习

前言

感觉太忙了，学习的时候有的基础以前了解过，就没那么认真，然后做题，练习，就疯狂打脸。。。

第十二节课：CSS元素模式的转换和CSS三大特性和伪元素

一、CSS元素模式的转换

1.元素显示模式

什么是元素的显示模式（分类）及其作用？

作用：

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好地布局我们的网页。

定义及分类：

定义：
元素显示模式就是元素（标签）以什么方式进行显示。
分类：
根据标签的类型一共可以分为三大类：
块元素和行内元素还有行内块元素三种类型。

2.块元素

常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。

块级元素的特点：

  1. 自己独占一行。
  2. 高度、宽度、外边距以及内边距都可以控制。
  3. 宽度默认是容器（父级宽度）的100%。

注意：

  • 文字类的元素内不能使用块级元素
  • <p>标签主要用于存放文字，因此<p>里面不能放块级元素，特别是不能放<div>
  • 同理，<h1>~<h6>等都是文字类块级标签，里面也不能放其他块级元素。

3.行内元素

常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<span>等。
其中<span>标签是最典型的行内元素。有的地方也将行内元素称为内联元素。

行内元素的特点：

  1. 相邻行内元素在一行上，一行可以显示多个。
  2. 高、宽直接设置是无效的。
  3. 默认宽度就是它本身内容的宽度。
  4. 行内元素只能容纳文本或其他行内元素。

注意：

  • 链接里面不能再放链接。
  • 特殊情况链接<a>里面可以放块级元素，但是给<a>转换一下块级模式最安全。

4.行内块元素

在行内元素中有几个特殊的标签------<img/>、<input/>、<td>，他们同时具有会计与射弩和行内元素的特点。我们称他们为行内块元素。

行内块元素的特点：

  1. 和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
  2. 默认宽度就是它本身内容的宽度（行内元素特点）。
  3. 高度、行高、外边距以及内边距都可以控制（块级元素特点）

实例：

<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>链接的触动范围。那么这个是时候就需要元素显示模式转换了。

  1. 转换为块元素：display:block;(*)
  2. 转换为行内元素：display：inline；
  3. 转换为行内块元素：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）

------不经历风雨，怎能见彩虹。

从零开始学前端：CSS元素模式的转换和CSS三大特性 --- 今天你学习了吗？（CSS：Day12）相关推荐

  1. 从零开始学前端：if判断，for循环,，switch判断 --- 今天你学习了吗？（JS：Day4）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:中括号代替点操作,获取对象,自定义标签属性 - 今天你学习了吗?(JS:Day3) 文章目录 从零开始学前端 ...

  2. 从零开始学前端：json对象，对象的序列化和反序列化 --- 今天你学习了吗？（JS：Day15）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(JS) 复习:从零开始学前端:字符串.数组的方法 - 今天你学习了吗?(JS:Day12/13/14) 文章目录 从零开始学前端:程序猿小 ...

  3. 从零开始学前端：伪元素和盒子模型 --- 今天你学习了吗？（CSS：Day13）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS元素模式的转换和CSS三大特性 - 今天你学习了吗?(CSS:Day12) 文章目录 从零开始学前端 ...

  4. 从零开始学前端：复习课程 --- 今天你学习了吗？（CSS：Day11）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS复合选择器 - 今天你学习了吗?(CSS:Day10) 文章目录 从零开始学前端:程序猿小白也可以完 ...

  5. 从零开始学前端：grid布局和音频 --- 今天你学习了吗？（CSS：Day24）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:OPPO商城轮播图 - 今天你学习了吗?(CSS:Day23) 文章目录 从零开始学前端:程序猿小白也可以 ...

  6. 从零开始学前端：形变（小游戏：3D翻滚盒子） --- 今天你学习了吗？（CSS：Day21）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:过渡和动画 - 今天你学习了吗?(CSS:Day20) 文章目录 从零开始学前端:程序猿小白也可以完全掌握 ...

  7. 从零开始学前端：弹性盒模型（flex布局） --- 今天你学习了吗？（CSS：Day19）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:字体图标的引入 - 今天你学习了吗?(CSS:Day18) 文章目录 从零开始学前端:程序猿小白也可以完全 ...

  8. 从零开始学前端：定位 --- 今天你学习了吗？（CSS：Day17）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:显示隐藏与文本溢出 - 今天你学习了吗?(CSS:Day16) 文章目录 从零开始学前端:程序猿小白也可以 ...

  9. 从零开始学前端：过渡和动画 --- 今天你学习了吗？（CSS：Day20）

    从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:flex布局 - 今天你学习了吗?(CSS:Day19) 文章目录 从零开始学前端:程序猿小白也可以完全掌 ...

最新文章

  1. 由浅到深了解JavaScript类
  2. 计算机数值方法期末考试,《计算机数值方法》测试题二
  3. PHP 字符串替换 substr_replace 与 str_replace 函数
  4. naarray查询 swift_Swift 4最全的新特性详细解析(推荐)
  5. java socket send_java socket编程
  6. ffmpeg简单使用小记
  7. Linux多线程开发-线程同步-条件变量pthread_cond_t
  8. Linux下访问光盘数据
  9. 5G技术将加速智能网联汽车产业化进程
  10. Zabbix Agent端配置文件说明
  11. go set up on ubuntu
  12. 正则表达式3-兄弟的回复
  13. linux怎么下载ftp文件夹,命令行 - 如何在Linux上通过FTP递归下载文件夹
  14. java 中文词性标注_使用opennlp进行词性标注
  15. 第一季 停课模拟考试整理(完结)
  16. Kotlin学习资料
  17. Android开机速度优化
  18. zabbix + nexmo = 电话告警
  19. iif在mysql能用不_在写SQL语句时,你们会经常用IIF(ISNULL(字段))吗
  20. FAT32 学习及注意事项

热门文章

  1. 如何在MVC中下载模板和上传word文件
  2. 全国计算机二级ms office知识点,2017全国计算机二级MSOffice复习知识点
  3. linux下比较文件并输出,Linux使用diff命令比较文件的方法
  4. linux下抓包工具 wireshark,网络抓包工具Wireshark的简单使用
  5. php文件通常包含和一些,php函数导入与文件包含：include() 和 require() 语句的区别...
  6. matlab中怎么查看变量,Matlab 查看内存中的变量,清空屏幕等命令
  7. 曾经的python爬虫挣钱生活_聊一聊，这些年我用Python爬虫挣钱的那些事
  8. 毛玻璃效果 php,CSS3如何实现磨砂玻璃背景效果
  9. 定义域是取交集吗_高中数学；函数定义域秒解技巧（学好函数突破数学）
  10. oracle 12c pdb开启和关闭，及设置开机自启动