前端學習日記 (三)

来源:https://www.cnblogs.com/Fantac/archive/2019/11/08/11817333.html

CSS的引入 在早期,如果要去定義一個H1的標題的顏色、字體、大小和其他的顯示特征,就需要用到HTML中的font或其他樣式的指令,H1只是一個結構指令所以光有它是不夠的。因此如果有多個標簽要去進行處理,就會造成樣式的重覆,後期維護的困難。 那CSS的出現就解決了這一類的問題,CSS(Cascadi ...


CSS的引入

在早期,如果要去定義一個H1的標題的顏色、字體、大小和其他的顯示特征,就需要用到HTML中的font或其他樣式的指令,H1只是一個結構指令所以光有它是不夠的。因此如果有多個標簽要去進行處理,就會造成樣式的重覆,後期維護的困難。

那CSS的出現就解決了這一類的問題,CSS(Cascading Style Sheets),即層疊樣式表、階層樣式表,它是一種用來為結構化文檔(如HTML文檔或XML應用)添加樣式(字體、間距和顏色等)的電腦語言。

 

CSS的基本引入

通過HTML文件中的link標簽引入CSS文件

1.通過link引入CSS文件

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

CSS程式碼:

p{
    color:red;
}

2.使用style標簽

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <style>
            p{
                color:red;
            }
        </style>
    </head>
    <body>
        <p>Hello World!</p>
    </body>
</html>

3.直接在標簽中更改樣式

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
    </head>
    <body>
        <p style="color:red">Hello World!</p>
    </body>
</html>

 

CSS結構

 

 

選擇器相遇要更改標簽樣式的前提條件

 

CSS基本選擇器

選擇器查找標簽的方式 

1.標簽選擇器

這種選擇器如果對於同一種類的標簽會一起修改相同的樣式,因此對於通用的樣式時候可以選擇標簽選擇器

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <h1>網頁設計</h1>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
h1{
    color:blue;font-size:48px;
}

網頁效果:

2.ID選擇器

選擇器所表現出的樣式具有獨一無二的效果,ID選擇器優先順序比標簽選擇器高

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <h1 id="i1">網頁設計</h1>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
#i1{
    color:orange;font-size:60px;
}

網頁效果:

3.類選擇器

這一類標簽需要用同一種樣式的時候需要用到類選擇器

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <p class="c1">水蜜桃</p>
        <p class="c1">獼猴桃</p>
        <p class="c1">蘋果</p>
        <p class="c1">香蕉</p>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
.c1{
    color:pink;font-size:60px;
}

網頁效果:

4.通用選擇器

預設使用這一種樣式

/*CSS程式碼*/
*{
    color:black;
}

 

CSS組合選擇器

1.子代選擇器

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <div id="d1">
            <p>我是嵌套在div中的p標簽</p>
            <span>我是嵌套在div中的span標簽</span>
            <div>
                <p>我是嵌套在div中的div中的p標簽</p>
                <span>我是嵌套在div中的div中的span標簽</span>
            </div>
        </div>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
#d1>p{
    color:blue;font-size:20;
}

網頁效果:

2.兄弟選擇器

之後標簽都會統一更改樣式

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <p>第一段</p>
        <div>div標簽</div>
        <p>第二段</p>
        <p>第三段</p>
        <p>第四段</p>
        <p>第五段</p>
        <hr>
        <p>第六段</p>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
div~p{
    color:green;font-size:20;
}

網頁效果:

3.相鄰兄弟選擇器

這種方式它只會往下找相鄰的標簽

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <p>第一段</p>
        <div>div標簽</div>
        <p>第二段</p>
        <p>第三段</p>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
div+p{
    color:blue;font-size:20;
}

網頁效果:

4.後代選擇器

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <div id="d1">
            <p>我是嵌套在div中的p標簽</p>
            <span>我是嵌套在div中的span標簽</span>
            <div>
                <p>我是嵌套在div中的div中的p標簽</p>
                <span>我是嵌套在div中的div中的span標簽</span>
            </div>
        </div>
    </body>
</html>

CSS程式碼:

這裡對於ID為d1的標簽的後代只要是p標簽都會用一樣的CSS樣式

/*CSS程式碼*/
#d1 p{
    color:red;font-size:20;
}

網頁效果:

 

css屬性選擇器

可以給一個標簽去自定義一個屬性,通過這個屬性來改變這一類或這一個標簽的樣式

HTML程式碼: 

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>網頁示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <p attribute>Hello CSS!</p>
        <p attribute="abc">Hello CSS!-abc</p>
        <p attribute="abc123">Hello CSS!-abc123</p>
        <p attribute="123abc">Hello CSS!-123abc</p>
        <p attribute="abcabcabc">Hello CSS!-abcabcabc</p>
        <p attribute="   abc   ">Hello CSS!-   abc   </p>
        <p attribute="xsdda">Hello CSS!-xsdda</p>
    </body>
</html>

1.查找標簽元素里有"attribute"的屬性

CSS代碼:

/*CSS程式碼*/
[attribute]{
    color:blue;
}

網頁效果:

2.查找屬性是"abc"的標簽

CSS代碼:

/*CSS程式碼*/
[attribute="abc"]{
    color:blue;
}

網頁效果:

3.查找屬性使用空白分開的字串中其中是“abc”

CSS代碼:

/*CSS程式碼*/
[attribute~="abc"]{
    color:blue;
}

網頁效果:

4.查找屬性是以"abc"開頭的元素

CSS代碼:

/*CSS程式碼*/
[attribute^="abc"]{
    color:blue;
}

網頁效果:

5.查找屬性是以"abc"結尾的元素

CSS代碼:

/*CSS程式碼*/
[attribute$="abc"]{
    color:blue;
}

網頁效果:

6.查找屬性至少出現過一次"abc"

CSS代碼:

/*CSS程式碼*/
[attribute*="abc"]{
    color:blue;
}

網頁效果:

 

分組和嵌套

當有不同的標簽樣式有重覆的時候可以用到分組

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>分組和嵌套示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <div id="d1">這是一個div標簽</div>
        <p>這是一個p標簽</p>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
#d1,
p{
    color:gold
}

網頁效果:

 

把多種選擇器混合起來使用就是嵌套

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>分組和嵌套示例</title>
        <link rel="stylesheet" href="webCSS.css">
    </head>
    <body>
        <div class="c1">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </body>
</html>

CSS程式碼:

/*CSS程式碼*/
.c1 p{
    color:red
}

網頁效果:

像上面的組合選擇器也都是有用到嵌套

 

CSS選擇器的優先順序

樣式文件優先順序:選擇器都一樣的情況下,誰靠近標簽誰就生效,例一:

HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>選擇器的優先順序</title>
        <link rel="stylesheet" href="webCSS.css">
        <link rel="stylesheet" href="webCSS2.css">
    </head>
    <body>
        <div id="d1">我是一個div標簽</div>
        <p>我是一個p標簽</p>
    </body>
</html>

第一個CSS檔程式碼:

/*CSS程式碼*/
#d1,
p{
     color:red;
}

第二個CSS檔程式碼:

/*CSS程式碼*/
#d1,
p{
     color:gold;
}

網頁效果:

那如果把p標簽中語句稍加改動

<p style="color:blue">我是一個p標簽</p>

那這裡的p標簽就會變為藍色,因此像這種內聯樣式(直接在標簽裡面寫style)它的優先順序最高

例二,HTML程式碼:

<!DOCTYPE html>
<html>          
    <head>
        <meta charset="UTF-8">
        <title>選擇器的優先順序</title>
        <link rel="stylesheet" href="webCSS.css">
        <link rel="stylesheet" href="webCSS2.css">
    </head>
    <body>
        <div id="d1">我是一個div標簽</div>
        <p id="p1">我是一個p標簽</p>
    </body>
</html>

第一個CSS檔程式碼:

/*CSS程式碼*/
/*權重值為100 + 1*/
#d1, p
{ color:red; } /*權重值為100*/ #p1{ color:deeppink; }

第二個CSS檔程式碼:

/*CSS程式碼*/
/*權重100 + 1*/
#d1, p{ color:gold; }

網頁效果:

因為ID選擇器的權重比元素選擇器的權重更高所以最後的顏色是deepink,但是權重計算永不進位,比如說寫了十個類選擇器加起來就是100,但是按照規則它還是沒有ID選擇器來得大

另外如果想要讓一種樣式強制生效就可以使用!important(不推薦使用),會導致後期維護麻煩

/*CSS程式碼*/
#d1,
p{
     color:blue!important;
}

 


您的分享是我們最大的動力!

更多相關文章
  • 如何插入樣式表? 代碼應該寫到什麼地方呢? 代碼分為三種插入方式,接下來筆者給園友們介紹有哪些插入方式: 嵌入式、外鏈式、行內式。 嵌入式 什麼是嵌入式? 嵌入式就是將寫好的 代碼嵌入到 文件中,嵌入式是通過 中的 標簽將 代碼嵌入到 網頁當中的。 語法規則如下: 如果我們使用的是 的文檔, 標簽中 ...
  • 彈性盒子flex: 對於客戶端的佈局非常有用,不管是平均分配space-around這個屬性還是兩端對齊space-betwee在頁面佈局的時候都會有很好的表現。 對於部分內容區域中,具有很多大致內容相同的幾個區塊的佈局都可以使用到它,將父級設置為display:flex;父級就會變成容器,子級就會 ...
  • 1.首先引用jquery以及table2excel <script type="text/javascript" src="js/jquery.table2excel.min.js"></script> <script type="text/javascript" src="js/jquery.mi ...
  • HTML解釋: HTML是英文Hyper Text Mark-up Language(超文本標記語言)的縮寫,他是一種製作萬維網頁面標準語言(標記)。相當於定義統一的規則(W3C),大家都來遵守他,這樣就可以讓瀏覽器根據標記語言的規則去解釋它。 瀏覽器負責將標簽翻譯成用戶“看得懂”的格式,呈現給用戶 ...
  • 父組件向子組件傳值 父組件向子組件傳方法 vue+本地存儲實現評論功能 難道在於理解父組件向子組件傳方法 ref獲取DOM和組件 vue中如何操作DOM ...
一周排行
  • static void Main(string[] args) { string url = "https://go.microsoft.com/fwlink/?linkid=2108895&amp;clcid=0x409"; DownloadBigFile(new Uri(url), "ssms.... ...
  • 1. 使用ASP.NET Core 3.x 構建 RESTful API - 1.準備工作 什麼是REST 什麼是REST REST一詞最早是在2000年,由Roy Fielding在他的博士論文《Architectural Styles and the Design of Network-base ...
  • wpf 兩個自定義控制項 一個是IP控制項,一個滑動條。先看下效果圖 IPControl 1、實際工作中有時需要設置IP信息,就想著做一個ip控制項。效果沒有window自帶的好,需要通過tab切換。但也能滿足使用。廢話不多說直接上代碼 IPControl.xaml IPControl.xaml.cs 2 ...
  • 近期和幾位做嵌入式開發的朋友閑聊過程中,一位朋友抱怨到:這C#太難用了,我想在N個窗體(或者是N個用戶組件之間)傳遞值都搞不定,非得要定義一個全局變數來存儲,然後用定時器來刷新值,太Low了。我急切的回答道:這很簡單,不就是委托的事嘛。那你來一個示例啊:朋友道。此為這篇博客的起因,所以此篇博客對於有 ...
  • 在面對對象編程中,類的三大特性分別為封裝,繼承,多態。其中多態的具體實現,依賴於三個方法,也就是虛方法,抽象類和介面。 多態的具體作用是什麼呢?或者說多態的存在有什麼意義呢?多態的存在有效的降低了程式的耦合度,在使用的時候,不僅可以表現大家都有的共性,還能在必要的時候突出一些特殊的的個性。 那麼如何 ...
  • [toc] 前言 在之前已經提到過,公用類庫Util已經開源,目的一是為了簡化開發的工作量,畢竟有些常規的功能類庫重覆率還是挺高的,二是為了一起探討學習軟體開發,用的人越多問題也就會越多,解決的問題越多功能也就越完善, 倉庫地址: "April.Util_github" , "April.Util_ ...
  • 【ASP.NET Core學習】在ASP.NET Core 種使用Entity Framework Core介紹,包括如何添加Entity Framwork Core,創建模型和遷移到資料庫,查詢數據,保存數據,使用事務,處理併發衝突 ...
  • 環境:MacOS 10.13 MAMAP Prophp 7.0.33 + xdebugVisual Studio Code前言我所理解的 POP Chain:利用魔術方法並巧妙構造特殊屬性調用一系列函數或類方法以執行某種敏感操作的調用堆棧反序列化常用魔法函數前言我所理解的 POP Chain:利用魔 ...
  • 當創建隊列jobs、監聽器或訂閱伺服器以推送到隊列中時,您可能會開始認為,一旦分派,隊列工作器決定如何處理您的邏輯就完全由您自己決定了。 嗯……並不是說你不能從作業內部與隊列工作器交互,但是通常情況下,哪怕你做了,也是沒必要的。 這個神奇的騷操作的出現是因為“InteractsWithQueue”這 ...
  • 在說正題之前先解釋一下交換機模式是個籠統的稱呼,它不是一個單獨的模式(包括了訂閱模式,路由模式和主題模式),交換機模式是一個比較常用的模式,主要是為了實現數據的同步。 首先,說一下訂閱模式,就和字面上的意思差不多主要就是一個生產者,多個消費者,同一個消息被多個消費者獲取,先看一下官網的圖示 整體執行 ...
x