css基本概念與css核心語法介紹

来源:https://www.cnblogs.com/dhnblog/archive/2020/02/13/12305693.html
-Advertisement-
Play Games

css是什麼?不需要瞭解太多文字類介紹,記住css是層疊樣式表,HTML是頁面結構,css負責頁面樣式,javascrt負責靜態頁面的交互。CSS能夠對網頁中元素位置的排版進行像素級精確控制,擁有對網頁對象和模型樣式編輯的能力。詳情參考css百度百科瞭解其發展歷史,語言特點與語言基礎等,也是有好處的... ...


css基本概念

css是什麼?不需要瞭解太多文字類介紹,記住css是層疊樣式表,HTML是頁面結構,css負責頁面樣式,javascrt負責靜態頁面的交互。CSS 能夠對網頁中元素位置的排版進行像素級精確控制,擁有對網頁對象和模型樣式編輯的能力。詳情參考css百度百科瞭解其發展歷史,語言特點與語言基礎等,也是有好處的。

標簽的屬性決定了靜態頁面的展示效果,在早期,標簽屬性過多,對於瀏覽器的識別過於麻煩,因為一修改標簽,頁面的版本什麼都需要變動,可謂牽一發而動全身!除此之外,對於開發人員來說,代碼過於臃腫冗長,為此W3CS,也就是萬維網聯盟制定了一個標準,把css與HTML相分離,選擇器通過樣式屬性與標簽相關聯,這樣就提高了html代碼與css樣式的可用性。

css核心語法

1.css的三種引入方式屬於css的核心語法,分為內部樣式、外部樣式、內聯樣式(也叫行內樣式),最終展示頁面效果都是一樣的

2.css組成為:選擇器{屬性:屬性值},同時{屬性:屬性值}也稱之為選擇器聲明部分,css的註釋與html的註釋<!--註釋部分-->不同,它的註釋表示為/*註釋部分*/

3.css中顏色為RGB紅、綠、藍三種色彩模式,顏色由淺入深,對應數字0-255,這也是系統預設顏色

3.1顏色表示color(255,0,0)紅色,如果用百分比表示為(100%,0,0)

3.2顏色也可以用具體的英文單詞表示,比方說:紅色就是red,綠色就是green,藍色就是blue等

3.3從設計師而言,顏色也可以按照16進位,0-9是10,剩餘的從a-f開始,這才15位,至於16則用10表示;顏色表示形式為#開頭,比方紅色是#ff0000=>rgb(255,0,0)針對這種重覆的就可以2個寫成一個,展示為#f00

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>css基本概念與css核心語法介紹</title>
 7     <!-- css外部樣式 -->
 8     <!-- 新建一個css樣式文件,結尾.css 文件內容如下,再通過<link rel="stylesheet" href="">鏈接外部樣式
 9     div{
10         color: blue;
11     } -->
12     <!-- <link rel="stylesheet" href="demo.css"> -->
13 
14     <!-- css內部樣式 -->
15     <!-- <style type="text/css">
16         div{
17             color: blue;
18             }
19     </style> -->
20 
21     <!-- 顏色三種展示形式 -->
22     <style type="text/css">
23         .box1{
24             color: blue;/*英文單詞名稱*/
25             color: rgb(255,0,0);/*rgb中0-255*/
26             color: rgb(100%,0,0);/*百分比展示*/
27             /* color: #ff0000; */color: #f00;
28             }
29     </style>
30 </head>
31 <body>
32     <!--<div style="color: blue;">css三種樣式引入分為內部樣式、外部樣式、內聯樣式(行內樣式)</div>--><!--內聯樣式(行內樣式)-->
33     <div class="box1">css三種樣式引入分為內部樣式、外部樣式、內聯樣式(行內樣式),執行順序是先將外部樣式與內部樣式合併再執行內聯樣式</div>
34 </body>
35 </html>

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

-Advertisement-
Play Games
更多相關文章
  • 1、使用 show status 瞭解各種 SQL 的執行頻率 該命令可以查詢 sql 命令的執行次數。 2、定位執行效率較低的 SQL 語句 定位執行效率較低的 SQL 一般有兩種方法: 1. 通過慢查詢日誌定位效率低的 SQL,用 該選項啟動; 2. 慢查詢日誌在查詢結束後才會記錄,所以在應用執 ...
  • 在上章14.Android-使用sendMessage線程之間通信我們學習瞭如何線上程之間發送數據. 接下來我們便來學習如何通過socket讀寫TCP. 需要註意的是socket必須寫在子線程中,不能在ui主線程中直接使用,所以我們這裡創建了兩個class: MainActivity(主界面)、Tc ...
  • 1.Handler介紹 Handler 是一個消息分發對象。handler是Android給我們提供用來更新UI的一套機制,也是一套消息處理機制,通過它可以實現在不同線程之間傳遞消息 本章Handler類要用到的方法有: void handleMessage(Message msg); //需要重寫 ...
  • 在SwiftUI中顯示模態視圖 簡介 這裡教大家如何彈出一個簡單的模態視圖。分別有兩個頁面,ContentView和GCPresentedView,以下對應簡稱為A和B。我們要做的是在A視圖中點擊按鈕跳轉到B視圖,然後再從B視圖點擊按鈕返回到A視圖。 步驟 在A視圖中創建按鈕和模態視圖代碼 使用 對 ...
  • css sprite 俗稱:精靈圖,雪碧圖,指將整個頁面不同的圖片or圖標合併在一張圖上;優點:使用CSS Sprite 可以減少網路請求,提高網頁載入性能,不會出現網頁上端載入完畢下麵還在載入中這一問題 缺點:如果後期更改其中某一圖標,且其像素大小發生改變,需要重新對所有圖標進行定位 精靈圖製作: ...
  • 什麼是選擇器?選擇器的作用是通過它可以找到元素,把css樣式傳遞給元素!css選擇器主要分為:基本選擇器、屬性選擇器、組合選擇器與偽類選擇器四個大類!基本選擇器又分為:*通配符、標簽選擇器、class選擇器、id選擇器,在這裡需要註意的編程思想在css層疊樣式表中元素有且僅有一個id。註意以下幾點1... ...
  • css原理:1.優先原則=>後解析的內容會覆蓋之前解析的內容(所謂解析就是讀取的css樣式)2.繼承原則=>嵌套裡面的標簽擁有外部標簽的某些樣式,子元素可以繼承父元素的屬性 1》優先原則針對選擇器:a.同一個選擇器從上往下讀取執行css樣式 b.同一類選擇器從上往下執行 c.不同類型的選擇器優先順序,... ...
  • 在移動端做了個導航,長這樣 原來結構是用的span <span class="menu_icon"> <img src="img/icon_1.png"> <p>導航</p> </span> 綁定用的是jquery的.click $('.menu_icon').click(function () { ...
一周排行
    -Advertisement-
    Play Games
  • JWT(JSON Web Token)是一種用於在網路應用之間傳遞信息的開放標準(RFC 7519)。它使用 JSON 對象在安全可靠的方式下傳遞信息,通常用於身份驗證和信息交換。 在Web API中,JWT通常用於對用戶進行身份驗證和授權。當用戶登錄成功後,伺服器會生成一個Token並返回給客戶端 ...
  • 老周在幾個世紀前曾寫過樹莓派相關的 iOT 水文,之所以沒寫 Nano Framework 相關的內容,是因為那時候這貨還不成熟,可玩性不高。不過,這貨現在已經相對完善,老周都把它用在項目上了——第一個是自製的智能插座,這個某寶上50多塊可以買到,搜“esp32 插座”就能找到。一種是 86 型盒子 ...
  • 引言 上一篇我們創建了一個Sample.Api項目和Sample.Repository,並且帶大家熟悉了一下Moq的概念,這一章我們來實戰一下在xUnit項目使用依賴註入。 Xunit.DependencyInjection Xunit.DependencyInjection 是一個用於 xUnit ...
  • 在 Avalonia 中,樣式是定義控制項外觀的一種方式,而控制項主題則是一組樣式和資源,用於定義應用程式的整體外觀和感覺。本文將深入探討這些概念,並提供示例代碼以幫助您更好地理解它們。 樣式是什麼? 樣式是一組屬性,用於定義控制項的外觀。它們可以包括背景色、邊框、字體樣式等。在 Avalonia 中,樣 ...
  • 在處理大型Excel工作簿時,有時候我們需要在工作表中凍結窗格,這樣可以在滾動查看數據的同時保持某些行或列固定不動。凍結窗格可以幫助我們更容易地導航和理解複雜的數據集。相反,當你不需要凍結窗格時,你可能需要解凍它們以獲得完整的視野。 下麵將介紹如何使用免費.NET庫通過C#實現凍結Excel視窗以鎖 ...
  • .NET 部署 IIS 的簡單步驟一: 下載 dotnet-hosting-x.y.z-win.exe ,下載地址:.NET Downloads (Linux, macOS, and Windows) (microsoft.com) .NET 部署 IIS 的簡單步驟二: 選擇對應的版本,點擊進入詳 ...
  • 拓展閱讀 資料庫設計工具-08-概覽 資料庫設計工具-08-powerdesigner 資料庫設計工具-09-mysql workbench 資料庫設計工具-10-dbdesign 資料庫設計工具-11-dbeaver 資料庫設計工具-12-pgmodeler 資料庫設計工具-13-erdplus ...
  • 初識STL STL,(Standard Template Library),即"標準模板庫",由惠普實驗室開發,STL中提供了非常多對信息學奧賽很有用的東西。 vector vetor是STL中的一個容器,可以看作一個不定長的數組,其基本形式為: vector<數據類型> 名字; 如: vector ...
  • 前言 最近自己做了個 Falsk 小項目,在部署上伺服器的時候,發現雖然不乏相關教程,但大多都是將自己項目代碼複製出來,不講核心邏輯,不太簡潔,於是將自己部署的經驗寫成內容分享出來。 uWSGI 簡介 uWSGI: 一種實現了多種協議(包括 uwsgi、http)並能提供伺服器搭建功能的 Pytho ...
  • 1 文本Embedding 將整個文本轉化為實數向量的技術。 Embedding優點是可將離散的詞語或句子轉化為連續的向量,就可用數學方法來處理詞語或句子,捕捉到文本的語義信息,文本和文本的關係信息。 ◉ 優質的Embedding通常會讓語義相似的文本在空間中彼此接近 ◉ 優質的Embedding相 ...