前端學習日記 (三)

来源: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;
}

 


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

更多相關文章
  • 代碼: <img src="images/001.jpg" alt="pic" onmouseover="this.src='images/001.jpg';" onmouseout="this.src='images/002.jpg';"/> ...
  • 作者:Dmitri Pavlutin 譯者:小維FE 原文:dmitripavlutin.com 國外文章,筆者採用意譯的方式,以保證文章的可讀性。 當執行像數據獲取這樣的I/O操作時,你必鬚髮起獲取請求,等待響應,將響應數據保存到組件的狀態中,最後渲染。非同步的數據獲取會要求額外的工作來適應Reac ...
  • 塊級作用域: ES6允許你使用塊級作用域,不過目前大多數的ES6語法只允許在嚴格模式下使用("use strict” )。 1 let關鍵字 作用:聲明變數,一個花括弧就是一個作用域(每個花括弧內就是全新變數). 特點:不在進行聲明提升,在塊作用域外無法訪問變數,和const一樣只能聲明一次. 關鍵 ...
  • 編輯表格輸入內容、根據input輸入框輸入數字動態生成表格行數、編輯表格內容提交傳給後臺數據處理 記錄自己學習做的東西,寫的小demo,希望對大家也有幫助! 代碼如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></tit ...
  • 題目描述 實現函數 makeClosures,調用之後滿足如下條件:1、返回一個函數數組 result,長度與 arr 相同2、運行 result 中第 i 個函數,即 result[i](),結果與 fn(arr[i]) 相同 示例1 1 //參考《JavaScript高級程式設計》的典型方法 2 ...
  • 眾所周知,在組件式開發中,最大的痛點就在於組件之間的通信。在 Vue 中,Vue 提供了各種各樣的組件通信方式,從基礎的 props/$emit 到用於兄弟組件通信的 EventBus,再到用於全局數據管理的 Vuex。 在這麼多的組件通信方式中,provide/inject 顯得十分阿卡林(毫無存 ...
  • var myDate = new Date();Date.now(); // 獲取當前時間 1573200670754 時間戳精確到毫秒 myDate.getYear(); //獲取當前年份(2位) myDate.getFullYear(); //獲取完整的年份(4位,2017) myDate.ge ...
  • 本節說一下DOM操作模塊里的刪除元素模塊,該模塊用於刪除DOM里的某個節點,也可以理解為將該節點從DOM樹中卸載掉,如果該節點有綁定事件,我們可以選擇保留或刪除這些事件,刪除元素的介面有如下三個: empty() ;移除匹配元素的所有子元素。 ;先移除所有後代元素關聯的數據和事件,以避免記憶體泄漏。然 ...
一周排行
  • C#中的DefaultView方法 簡介: 首先可建立一個表,對錶進行填充若幹條數據,代碼如下: //創建Table1 DataTable dt = new DataTable(); //對Table1添加列名,並設置列值類型 DataTable dt1 = new DataTable();//創建 ...
  • 1、運行程式報錯: FailFast: Couldn't find a valid ICU package installed on the system. 解決方法: yum install icu -y 2、程式運行後,本地可以訪問,但其他機器無法訪問,需要開放埠 firewall-cmd - ...
  • 只是一個Demo,所用有很多功能也沒有添加進去如分頁,輸入驗證,頁面也沒有進行精心佈局。 整體先來幾張圖解 ...
  • Core提供二種開發模式:Core Pages和Core MVC,今天介紹的是Core MVC。 1、創建web MVC項目 新建service/h_r.baseservice類庫文件、data/h_r.efdata類庫文件、common/h_r.common類庫文件。 引入需要的CSS文件和JS文 ...
  • 學習網址:https://docs.microsoft.com/zh-cn/visualstudio/get-started/visual-studio-ide?view=vs-2019 示範 vs2019: 變數的重命名的重構,更改該變數命名的同時,引用該變數的地方也會更改,如果該變數有被反射用到 ...
  • 1、在data裡面新建個Entity文件用於存放表映射,設計資料庫,執行如下語句 Scaffold-DbContext -Force "server=.;user=sunyong;password=1qaz!QAZ;database=hr;" Microsoft.EntityFrameworkCor ...
  • 1、發送郵件類,百度一大堆,這裡用的也是直接百度拿過來的 public static bool get_send_email(email email, string Title, string Body) { MailMessage mailMsg = new MailMessage(); mail ...
  • 1、添加用戶列表控制器,用於用戶列表顯示,登錄,增刪改查,郵件發送,下載 public userlistController(MainDbContext _db, ILogger<operatorlog> _logger, IOptions<email> sendMail) { db = _db; ...
  • 1、用戶列表頁面 @{ Layout = Layout = null;}<table id="datalistuser" class="easyui-datagrid" url="/userlist/getuserlist" toolbar="#toolbaruser" rownumbers="tr ...
  • 1、引用包 Microsoft.EntityFrameworkCore.Tools Microsoft.EntityFrameworkCore.SqlServer Microsoft.AspNetCore.Mvc.Razor.RuntimeCompilation Microsoft.AspNetCo ...