#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标签里使用的网站的目录,我把它重新配置了一下
随机推荐
- [复试机试]c++读取/写入文本文件
读取文件 #include <iostream> #include <cstdio> #include <string> #include <cstdlib& ...
- Data Center手册(1):架构
如图是数据中心的一个基本架构 最上层是Internet Edge,也叫Edge Router,也叫Border Router,它提供数据中心与Internet的连接. 连接多个网络供应商来提供冗余可靠 ...
- [Swift]LeetCode59. 螺旋矩阵 II | Spiral Matrix II
Given a positive integer n, generate a square matrix filled with elements from 1 to n2 in spiral ord ...
- [Swift]LeetCode82. 删除排序链表中的重复元素 II | Remove Duplicates from Sorted List II
Given a sorted linked list, delete all nodes that have duplicate numbers, leaving only distinct numb ...
- [Swift]LeetCode560. 和为K的子数组 | Subarray Sum Equals K
Given an array of integers and an integer k, you need to find the total number of continuous subarra ...
- 9.Django form组件
Form组件 Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 创建Form类时,主要涉及到 [ ...
- BBS论坛(五)
5.1.cms后台修改密码功能完成 (1)新建app/forms.py # app/forms.py from wtforms import Form class BaseForm(Form): de ...
- BBS论坛(三)
3.1.cms用户名渲染和注销功能实现 显示登录的用户名 (1)app/cms/hooks.py from .views import bp import config from flask impo ...
- Kibana(一张图片胜过千万行日志)
Kibana是一个开源的分析和可视化平台,设计用于和Elasticsearch一起工作. 你用Kibana来搜索,查看,并和存储在Elasticsearch索引中的数据进行交互. 你可以轻松地执行高级 ...
- 将dylib库嵌入macOS应用的方法
写作是一种习惯,稍微松懈,也许失去的就很多.过了一个年,居然很多天都没有更新,幸福的代价吧:) 标题的问题其实以前碰到过,不过当时在iOS,所以随手处理了没有重视. 而这次是在macOS,所使用的库, ...