#WEB安全基础 : HTML/CSS | 0x8.1CSS继承

tinysun1234 发布于2019-04-23 11:53 / 1385人阅读

摘要：的一大特性继承，怎么样没听说过吧，没了它我们修饰网页时就变得十足的麻烦这是本节课准备的文件黑体这是文件夹黑体先看看，代码如下正文正文正文正文查看其它知识点位置对所有标签都起

CSS的一大特性——继承，怎么样没听说过吧，没了它我们修饰网页时就变得十足的麻烦

这是本节课准备的文件

这是others文件夹

先看看index.html，代码如下

 1 DOCTYPE html>
 2 <html lang ="zh">
 3 <head>
 4 <meta charset = "utf-8">
 5 <title>TESTtitle>
 6 <style>
 7 p{
 8 color: red;
 9 }
10 p.myp{
11 color: blue;
12 background-color: yellow;
13 border-bottom:     2px solid black;
14 }
15 style>
16 head>
17 <body>
18 <p>正文1p>
19 <p>正文2p>
20 <p>正文3p>
21 <p>正文4p>
22 <p>
23 <a href = "others/Test.html" target = "_blank"><p class = "myp">查看其它知识点
24 位置:others/Test.htmlp>a>
25 p>
26 body>
27 html>
28

看看效果吧

对p元素的修饰，对所有p元素都起作用，在一个p元素里设置类名，多带带对这个p元素修饰，就可以覆盖CSS对普通p元素的修饰

点击查看其它知识点

Test.html的代码为

 1 DOCTYPE html>
 2 <html lang ="zh">
 3 <head>
 4 <meta charset = "utf-8">
 5 <title>TESTtitle>
 6 <style>
 7 h1,p{
 8 color: green;
 9 border-bottom: 4px dotted red;
10 }
11 p.myp{
12 color: red;
13 background-color: yellow;
14 border-bottom: 2px solid black;    
15 }
16 style>
17 head>
18 <body>
19 <h1>我是标题h1>
20 <p>正文1p>
21 <p>正文2p>
22 <p>正文3p>
23 <p>正文4p>
24 <p>    
25 <a href = "Test2.html" target = "_blank"><p class = "myp">查看其它知识点
26 位置:others/Test2.htmlp>a>
27 p>
28 body>
29 html>
30

理解一下

点击查看其他知识点

接下来是Test2.html

代码为

 1 DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset = "utf-8">
 5 <title>TESTtitle>
 6 <style>
 7 div{
 8 color: red;
 9 }
10 style>
11 head>
12 <body>
13 <div>                
14 <h1>我是h1标签h1>
15 <p>我是p标签p>
16 div>
17 body>
18 html>

看到那个注释了吗？这就叫继承，不只是对于div元素，对body元素可以，对其他的元素也可以，但有些特殊的元素不能继承一些属性，比如说img元素不能继承文字颜色属性，因为img元素是显示图片的，而不是文字

//本系列教程基于《Head First HTML与CSS(第二版)》,此书国内各大购物网站皆可购买

转载请注明出处 by:M_ZPHr

最后修改日期：2019-01-17

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/1299.html

#WEB安全基础 : HTML/CSS | 文章索引

摘要：黑体本系列讲解安全所需要的和黑体安全基础我的第一个网页黑体安全基础初识黑体安全基础初识标签黑体安全基础文件夹管理网站黑体安全基础模块化黑体安全基础嵌套列表黑体安全基础标签拓展和属性的使用黑体安全基础嵌套本系列讲解WEB安全所需要的HTML和CSS #WEB安全基础 : HTML/CSS | 0x0 我的第一个网页 #WEB安全基础 : HTML/CSS | 0x1初识CSS #WEB安全基...

EscapedDog 2019-04-23 11:53 评论0 收藏0
#WEB安全基础 : HTML/CSS | 0x9美丽的饮料店

我带着你，你带着钱，咱们去喝点饮料吧。老板久仰你的大名，请你帮忙设计一个网站宣传他的饮料店你要制定一个完美的方案还需要多学点东西我先帮你设计一下这是存放网站的文件夹这是根目录这是about文件夹这是beverages文件夹存放CSS文件的文件夹(这是外部调用所以需要一个CSS文件，我们以前写的网页都是内部调用) 存放图片的images文件夹首先...

番茄西红柿 2019-04-23 11:53 评论0 收藏0
#WEB安全基础：HTML/CSS | 0x0 我的第一个网页

摘要：黑体安全基础系列，本系列采用第二人称以免你不知道我在对着你说话，以朋友的视角和你交流的中文名叫做超文本标记语言，叫做层叠样式表用设计你的第一个网页，你需要做的是用你的眼睛看，用你的手敲。#WEB安全基础：HTML/CSS系列，本系列采用第二人称以免你不知道我在对着你说话，以朋友的视角和你交流 HTML的中文名叫做超文本标记语言，CSS叫做层叠样式表用HTML设计你的第一个网页，你需要做的...

番茄西红柿 2019-04-23 11:53 评论0 收藏0
#WEB安全基础 : HTML/CSS | 0x1初识CSS

摘要：黑体我受够这些难看的网页了，我怎么才能让它变得好看点你说。比如访问百度，百度就会向你展示一个百度一下你就知道的页面。黑体这是在浏览器中的显示黑体我受够这些难看的网页了，我怎么才能让它变得好看点？你说。我答道:看来你得学点CSS了学习这些东西只有一个原则，就是用你的脑袋想，用你的眼睛看，用的你手敲。很简单，对吧？这次我写了两个网页看代码就用到了你的眼睛, 下面是index.htm...

番茄西红柿 2019-04-23 11:53 评论0 收藏0
#WEB安全基础 : HTML/CSS | 0x8CSS进阶

摘要：黑体你以为自己学这么点就厉害了黑体学点新东西吧，让你的网页更漂亮我们只需要用到图片和网页黑体这是的代码果汁果汁标签的背景颜色黑体请看你以为自己学这么点CSS就厉害了？学点新东西吧，让你的网页更漂亮我们只需要用到图片和网页这是index.html的代码 1 2 3 Head First Lounge 4 5 6 body{ 7 margin-left: ...

番茄西红柿 2019-04-23 11:53 评论0 收藏0