#WEB安全基础 : HTML/CSS | 0x8.1CSS继承
CSS的一大特性——继承，怎么样没听说过吧，没了它我们修饰网页时就变得十足的麻烦
这是本节课准备的文件
这是others文件夹
先看看index.html，代码如下
<!DOCTYPE html>
<html lang ="zh">
<head>
<meta charset = "utf-8">
<title>TEST</title>
<style>
p{
color: red;
}
p.myp{
color: blue;
background-color: yellow;
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<p>正文1</p>
<p>正文2</p>
<p>正文3</p>
<p>正文4</p>
<p>
<a href = "others/Test.html" target = "_blank"><p class = "myp">查看其它知识点
位置:others/Test.html</p></a>
</p>
</body>
</html>
<!--
p{
color: red; 对所有p标签都起作用，对有类名的标签不起作用
}
p.myp{ 我是有类名的p标签
color: blue;
background-color: yellow; 加入下部边框
border-bottom: 2px solid black;
-->
看看效果吧
对p元素的修饰，对所有p元素都起作用，在一个p元素里设置类名，单独对这个p元素修饰，就可以覆盖CSS对普通p元素的修饰
点击查看其它知识点
Test.html的代码为
<!DOCTYPE html>
<html lang ="zh">
<head>
<meta charset = "utf-8">
<title>TEST</title>
<style>
h1,p{
color: green;
border-bottom: 4px dotted red;
}
p.myp{
color: red;
background-color: yellow;
border-bottom: 2px solid black;
}
</style>
</head>
<body>
<h1>我是标题</h1>
<p>正文1</p>
<p>正文2</p>
<p>正文3</p>
<p>正文4</p>
<p>
<a href = "Test2.html" target = "_blank"><p class = "myp">查看其它知识点
位置:others/Test2.html</p></a>
</p>
</body>
</html>
<!--
h1,p{ 所有p和h1标签都受影响
color: green;
border-bottom: 4px dotted red; 加入下部边框
}
-->
理解一下
点击查看其他知识点
接下来是Test2.html
代码为
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title>TEST</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div> <!--div是块标签，就是在html划定一个块，div以内的样式都是属于div的样式，这就叫继承-->
<h1>我是h1标签</h1>
<p>我是p标签</p>
</div>
</body>
</html>
看到那个注释了吗？这就叫继承，不只是对于div元素，对body元素可以，对其他的元素也可以，但有些特殊的元素不能继承一些属性，比如说img元素不能继承文字颜色属性，因为img元素是显示图片的，而不是文字
//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买
转载请注明出处 by:M_ZPHr
最后修改日期：2019-01-17
#WEB安全基础 : HTML/CSS | 0x8.1CSS继承的更多相关文章
- #WEB安全基础 : HTML/CSS | 文章索引
本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基础 : H ...
- Web前端基础(4):CSS(一)
1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
- Web前端基础(5):CSS(二)
1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
- #WEB安全基础 : HTML/CSS | 0x11 浅谈GET和POST
HTTP中的GET和POST请求方法 我上次提到了GET和POST,现在就让你来认识一下这些新朋友 请看图 POST和GET都是将用户输入到浏览器的数据发送给服务器,不过采用了两种不同的方式,POST ...
- #WEB安全基础 : HTML/CSS | 0x10实现交互_表单
先看看表单如何工作吧 请求 响应 简要工作流程: 浏览器加载页面 用户输入数据 用户提交表单 服务器响应 概念都清楚了,我们来写表单吧 只有一个html文件 这是显示 你可以向空白框框 ...
- #WEB安全基础 : HTML/CSS | 0x9美丽的饮料店
我带着你,你带着钱,咱们去喝点饮料吧. 老板久仰你的大名,请你帮忙设计一个网站宣传他的饮料店 你要制定一个完美的方案还需要多学点东西 我先帮你设计一下 这是存放网站的文件夹 这是根目录 这是abo ...
- #WEB安全基础 : HTML/CSS | 0x8CSS进阶
你以为自己学这么点CSS就厉害了? 学点新东西吧,让你的网页更漂亮 我们只需要用到图片和网页 这是index.html的代码 <html> <head> <title ...
- #WEB安全基础 : HTML/CSS | 0x7HTML5和W3C验证
标准,标准,什么都有标准 你听说过HTML5吗?这是一个新版本,当然也有新标准 我只准备了一个index.html文件 以下是代码 <!DOCTYPE html> <!--告诉浏览器 ...
- #WEB安全基础 : HTML/CSS | 0x3文件夹管理网站
没有头脑的管理方式会酿成大灾难,应该使用文件夹管理网站 这是一个典型的管理方法,现在传授给你,听好了 下面是0x3初识a标签里使用的网站的目录,我把它重新配置了一下
随机推荐
- ArrayList源码理解
ArrayList是基于数组实现的,是一个动态数组,其容量能自动增长,类似于C语言中的动态申请内存,动态增长内存. ArrayList不是线程安全的,只能用在单线程环境下,多线程环境下可以考虑用Col ...
- [Swift]LeetCode810. 黑板异或游戏 | Chalkboard XOR Game
We are given non-negative integers nums[i] which are written on a chalkboard. Alice and Bob take tu ...
- VSCode与Deepin资源管理器冲突
解决方式: xdg-mime default dde-file-manager.desktop inode/directory 此外,网上有较多推荐(在deepin 15.8版本上测试无效): gvf ...
- 让 CDN 更省流量的 Brotli 算法详解
早年,我还是学生的时候,时常会鼓捣自己的个人网站,其中最困扰我的问题就是源站服务器易崩溃.作为学生,一方面我没有足够的钱购买高质量的服务器,另一方面一年的流量费用算下来也挺贵的,要花掉我不少的生活费. ...
- 【Maven】---坐标与依赖
Maven坐标与依赖 最近想深度学习下maven,找到一本书叫<Maven实战>,这本书讲的确实很好,唯一遗憾的是当时maven教学版本是3.0.0的,而目前已经到了3.5.4了,版本存在 ...
- 【3分钟就会系列】使用Ocelot+Consul搭建微服务吧!
一.什么Ocelot? API网关是一个服务器,是系统的唯一入口.API 网关一般放到微服务的最前端,并且要让API 网关变成由应用所发起的每个请求的入口.这样就可以明显的简化客户端实现和微服务应用程 ...
- 一些Linq方法,come on !!
bool b1 = users.All(u => u.ID == 21); 判断是否元素都满足条件,如果有一个不满足,则返回False,都满足则返回TrueAny() bool b2 = use ...
- 【c#】RabbitMQ学习文档（三）Publish/Subscribe（发布/订阅）
(本教程是使用Net客户端,也就是针对微软技术平台的) 在前一个教程中,我们创建了一个工作队列.工作队列背后的假设是每个任务会被交付给一个[工人].在这一部分我们将做一些完全不同的事情--我们将向多个 ...
- 完美数据迁移-MongoDB Stream的应用
目录 一.背景介绍 二.常见方案 1. 停机迁移 2. 业务双写 3. 增量迁移 三.Change Stream 介绍 监听的目标 变更事件 四.实现增量迁移 五.后续优化 小结 附参考文档 一.背景 ...
- golang - gob与rpc
今天和大家聊聊golang中怎么使用rpc,rpc数据传输会涉及到gob编码,所以先讲讲gob,别担心,就算你完全没有接触过gob与rpc,只要知道rpc的中文是远程过程调用,剩下的我都能给你讲明白( ...