#WEB安全基礎 : HTML/CSS | 0x8.1CSS繼承

tinysun1234 發布于2019-04-23 11:53 / 1387人閱讀

摘要：的一大特性繼承，怎么樣沒聽說過吧，沒了它我們修飾網頁時就變得十足的麻煩這是本節課準備的文件黑體這是文件夾黑體先看看，代碼如下正文正文正文正文查看其它知識點位置對所有標簽都起

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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