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
  • 移動開發(一):使用.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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...