【2020Python修煉記】前端開發之 CSS基礎和CSS選擇器

来源:https://www.cnblogs.com/bigorangecc/archive/2020/05/12/12875183.html
-Advertisement-
Play Games

【目錄】 一、CSS基礎 1、什麼是CSS3,如何學習? 2、CSS的註釋方法 3、CSS語法結構 4、CSS的三種引入方式 二、CSS選擇器 1、基本選擇器 2、組合選擇器 3、屬性選擇器 一、CSS基礎 1、什麼是CSS3,如何學習? CSS3 就是 CSS(Cascading Style Sh ...


【目錄】

一、CSS基礎

1、什麼是CSS3,如何學習?

2、CSS的註釋方法

3、CSS語法結構

4、CSS的三種引入方式

二、CSS選擇器

1、基本選擇器

2、組合選擇器

3、屬性選擇器

4、群組選擇器

5、交叉選擇器

6、偽類選擇器

7、偽元素選擇器

8、選擇器優先順序

 

一、CSS基礎

1、什麼是CSS3,如何學習?

CSS3 就是 CSS(Cascading Style Sheet )語言,也屬於標記語言,數字3 是該語言的版本號;

CSS語言開發的文件尾碼名是 .CSS,通過在HTML文件中引入該 CSS文件 來控制HTML代碼的樣式(CSS 也可直接寫在HTML文件中)。

如何學習CSS?

  

css的學習流程
    1.先學如何查找標簽
        css查找標簽的方式你一定要學會
        因為後面所有的框架封裝的查找語句都是基於css來的
        css選擇器很簡單很好學不要有壓力!!!
    
    2.之後再學如何添加樣式

 

2、CSS的註釋方法

/*單行註釋*/
/*
多行註釋1
多行註釋2
多行註釋3
*/

通常我們在寫css樣式的時候也會用註釋來劃定樣式區域(因為HTML代碼多所以對呀的css代碼也會很多)
/*這是博客園首頁的css樣式文件*/
/*頂部導航條樣式*/
...
/*左側菜單欄樣式*/
...
/*右側菜單欄樣式*/
...

 

3、CSS語法結構

選擇器 {
  屬性1:值1;
  屬性2:值2;
  屬性3:值3;
  屬性4:值4;
}

 

4、CSS的三種引入方式(書寫方式)

1.style標簽內部直接書寫
    <style>
        h1  {
            color: burlywood;
        }
    </style>
2.link標簽引入外部css文件(最正規的方式 解耦合)
      <link rel="stylesheet" href="mycss.css">

3.行內式(一般不用)
      <h1 style="color: green">老闆好 要上課嗎?</h1>

 

二、CSS選擇器

1、基本分類 以及 語法格式

/* 基本選擇器 */
/* 
# id選擇器

# 類選擇器

# 元素/標簽選擇器

# 通用選擇器 */

<style>
        /* id選擇器*/ 
        /* !*找到id是d1的標簽 將文本顏色變成綠黃色*! */
        #d1 {  
           color: greenyellow;
        }
        
        /* 類選擇器 */
        /* !*找到class值裡面包含c1的標簽*! */
        .c1 {  
           color: red;
        }

        /* 元素(標簽)選擇器 */
        /* !*找到所有的span標簽*! */
        span { 
           color: red;
        }

        /*通用選擇器*/
        /* !*將html頁面上所有的標簽全部找到*!  */        
        *{  
           color: green;
        }

</style>

 

# 語法技巧—— p#d1.c1 (插件 emmet 的功能)

 

2、組合選擇器 

組合選擇器分類:
# 後代選擇器  ( 連接標識符: 空格 

# 兒子選擇器 ( 連接標識符: > 

# 毗鄰選擇器 ( 連接標識符: + 

# 弟弟選擇器 ( 連接標識符: ~ 

/* 在前端 我們將標簽的嵌套用親戚關係來表述層級 */

<div>
    <p>div p</p>
    <p>div p
        <span>div p span</span>
    </p>
    <span>span</span>
    <span>span</span>
</div>

  /* div裡面的p span都是div的後代
  p是div的兒子
  p裡面的span是p的兒子 是div的孫子
  div是p的父親
  ...
 */

/*後代選擇器*/
div span {
   color: red;
}

/*兒子選擇器*/
div>span {
   color: red;
}

/*毗鄰選擇器*/
/* !*同級別緊挨著的下麵的第一個(即 只能匹配 直接兄弟關係的標簽)*! */
div+span {  
   color: aqua;
}

/*弟弟選擇器*/
/*同級別下麵所有的span*/
div~span {  
    color: red;
}

3、群組選擇器

<style>
        /*逗號表示併列關係*/
        div,p,span {   
            color: yellow;
        }
        /* 多種選擇器組合使用,表示併列關係使用逗號分隔 */
        #d1,.c1,span {
            color: orange;
        }
     
    </style>

4、交叉選擇器

/* 連接標識符 緊挨著(沒有任何連接符) */
/* 交叉選擇器本質上是對一個目標標簽的多個名字的同時表示 */

div.box#ele.tag { /*div是標簽名,box和tag都是class屬性值,ele是id屬性值*/
    /* 樣式塊 */
}
<!-- 標簽名div、class名box及tag和id名ele都是對一個目標標簽的修飾空格隔開
<!-- class屬性擁有多個值時,多個值之間用空格隔開 -->
<div class="box tag" id="ele"></div>

 

5、屬性選擇器 

/* 屬性選擇器 */
/* 
1 含有某個屬性
2 含有某個屬性並且有某個值
3 含有某個屬性並且有某個值的某個標簽

# 屬性選擇器是以[]作為標誌的 */

/* !*將所有含有屬性名是username的標簽背景色改為紅色*! */
[username] {
    background-color: red;
}

/* !*找到所有屬性名是username並且屬性值是jason的標簽*! */
[username='jason'] {  
    background-color: orange;
}

/* !*找到所有屬性名是username並且屬性值是jason的input標簽*! */
input[username='jason'] { 
    background-color: wheat;
}

6、偽類選擇器 ——標簽 :標簽狀態

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            background-color: black;
        }
        a:link {  /*訪問之前的狀態*/
            color: red;
        }
        a:hover {  /*需要記住*/
            color: aqua;  /*滑鼠懸浮態*/
        }
        a:active {
            color: black;  /*滑鼠點擊不鬆開的狀態  激活態*/
        }
        a:visited {
            color: darkgray;  /*訪問之後的狀態*/
        }

p { color: darkgray; font-size: 48px; } p:hover { color: white; } input:focus { /*input框獲取焦點(滑鼠點了input框)*/ background-color: red; } </style> </head> <body> <a href="https://www.jd.com/">小軒在不在?</a> <p>點我有你好看哦</p> <input type="text"> </body> </html>

 

7、偽元素選擇器 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        /* 為首字元設置樣式 如首個文字為大寫 */
        p:first-letter {
            font-size: 48px;
            color: orange;
        }
         /*在文本開頭 用css在前面或者後面 添加內容,用CSS添加的內容時無法選中複製的*/
        p:before { 
            content: '你說的對';
            color: blue;
        }
        p:after {
            content: '雨露均沾';
            color: orange;
        }
    </style>
</head>
<body>
    <p>生命如此多嬌</p>
</body>
</html>

 

8、選擇器優先順序——不同選擇器 同時控制 同一標簽的同一屬性

(1)普通選擇器的優先順序

1.選擇器相同 書寫順序不同

就近原則:誰離標簽更近就聽誰的(同級的執行順序是從上而下,因此以最後執行的樣式為準)

2.選擇器不同 
行內 > id選擇器 > 類選擇器 > 標簽選擇器
精確度越高,越有效

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- <link rel="stylesheet" href="mycss1.css"> -->
    <style>
        #d1 {
            color: aqua;
        }
        .c1 {
           color: orange;
        }
        p {
           color: red;
        }
    </style>
   <link rel="stylesheet" href="mycss1.css">
</head>
<body>
    <p id="d1" class="c1" style="color: blue">你好鴨子</p>
</body>
</html>
<head>
    <style>
        * {
            width: 50px;
            height: 50px;
            background-color: red;
            color: pink;
        }
        div {
            width: 60px;
            height: 60px;
            background-color: orange;
        }
        .box {
            width: 70px;
            height: 70px;
        }
        #ele {
            width: 80px;
        }
    </style>
</head>
<body>
    <div class="box" id="ele">文字內容</div>
</body>
<!--
1. 四種選擇器都控制目標標簽的寬度,最終目標標簽寬度為80px,所以id選擇器優先順序最高
2. 三種選擇器都控制目標標簽的高度,最終目標標簽寬度為70px,所以class選擇器優先順序其次
3. 二種選擇器都控制目標標簽的背景顏色,最終目標標簽背景顏色為orange,所以標簽選擇器優先順序再次
4. 只有一種選擇器控制目標標簽的字體顏色,目標標簽字體顏色一定為pink
優先順序:通配選擇器 < 標簽選擇器 < class選擇器 < id選擇器
-->
優先順序:通配選擇器 < 標簽選擇器 < class選擇器 < id選擇器

 (2)複雜組合選擇器的優先順序

1. 複雜選擇器的種類並不會影響優先順序
    -- 後代:div #ele  |  兄弟:div~#ele  |  交叉:div#ele  優先順序一樣
2. 複雜選擇器本質是通過同類型(簡單選擇器)的個數來確定優先順序
    -- 三層標簽選擇器後代:body div i  大於  兩層標簽選擇器後代:div i  |  body i
3. 簡單選擇器的優先順序起關鍵性作用,也就是一個id選擇器要大於無限個class選擇器,一個class選擇器要大於無限個標簽選擇器
    -- id選擇器:#i 大於 n層class選擇器:.box .i
    -- class選擇器:.box 大於 n層標簽選擇器:body div

 

參考閱讀:

https://www.cnblogs.com/xiaoyuanqujing/articles/11669933.html

https://www.cnblogs.com/xiaoyuanqujing/articles/11669943.html

https://www.cnblogs.com/Dominic-Ji/p/10474769.html

 


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

-Advertisement-
Play Games
更多相關文章
  • 一、項目概述 flutter-chatroom是採用基於flutter+dart+chewie+image_picker+photo_view等技術跨端開發仿微信app界面聊天室項目。實現了消息發送/動態gif表情、彈窗、圖片預覽、紅包/朋友圈/小視頻號等功能。 二、技術框架 編碼/技術:Vscod ...
  • layer-list : 簡單來說layer-list就是圖層列表的意思,是用來創建LayerDrawable的,LayerDrawable是DrawableResource的一種,所以,layer-list創建出來的是"圖層列表",也就是一個drawable圖形``` ... ...
  • 最近在學習 SwiftUI ,我一般都是先去學習界面佈局,所以就想著仿寫一下經常使用的軟體的界面,所以先拿微信開刀。因為不想一次性發太多的內容,所以只好將主題分解,一部分一部分地去講,接下來我們一起來學習吧。 ...
  • 1.創建會話cookie: $ .cookie('name','value'); 2.創建到期的cookie,然後7天: $ .cookie('name','value',{到期日:7}); 3.創建有效過期cookie,整個網站: $ .cookie('name','value',{到期:7,路徑 ...
  • js 獲取視頻的總時長: <!DOCTYPE html> <html> <head> <title></title> </head> <body> <video id="videoPlayerNew" src="http://vfx.mtime.cn/Video/2019/03/18/mp4/190 ...
  • ES6-10的整理筆記,僅為梳理知識體系,回頭查閱方便。本節(scope作用域 -- let&const -- Array) ...
  • 一、“前浪” JavaScript 2007年 Jeff Atwood 在他的博客里提出了著名的 Atwood 定律,即“任何能夠用 JavaScript 實現的應用系統,最終都必將用 JavaScript 實現。” JavaScript 的強大毋庸置疑,十餘年的時間早已驗證了這一點:語法結構簡單、 ...
  • 背景圖像可能是所有前端開發人員在我們的職業生涯中至少使用過幾次的CSS屬性之一。大多數人認為背景圖片沒有什麼不尋常的,但是。。。。。。 1.如何將背景圖像完美地適合視口 body { background-image: url('https://images.unsplash.com/photo-1 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...