CSS基本用法

来源:https://www.cnblogs.com/wyh518/archive/2022/11/08/16870029.html
-Advertisement-
Play Games

1、什麼是CSS Cascading Style Sheet 級聯樣式表。 表現HTML或XHTML文件樣式的電腦語言。 包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定。 2、CSS的發展史 CSS1.0 讀者可以從其他地方去使用自己喜歡的設計樣式去繼承性地使用樣式; CSS2.0 ...


1、什麼是CSS

Cascading Style Sheet 級聯樣式表。

表現HTML或XHTML文件樣式的電腦語言。

包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定。

 

 

 2、CSS的發展史

 

 

CSS1.0 讀者可以從其他地方去使用自己喜歡的設計樣式去繼承性地使用樣式;

CSS2.0 融入了DIV+CSS的概念,提出了HTML結構與CSS樣式表的分離

CSS2.1 融入了更多高級的用法,如浮動,定位等。

CSS3.0 它包括了CSS2.1下的所有功能,是目前最新的版本,它向著模塊化的趨勢發展,又加了很多使用 的新技術,如字體、多背景、圓角、陰影、動畫等高級屬性,但是它需要高級瀏覽器的支持。

由於現在IE 6、IE 7使用比例已經很少,對市場企業進行調研發現使用CSS3的頻率大幅增加,學習CSS3 已經成為一種趨勢

CSS的優勢

  • 內容與表現分離
  • 網頁的表現統一,容易修改
  • 豐富的樣式,使得頁面佈局更加靈活
  • 減少網頁的代碼量,增加網頁的瀏覽速度,節省網路帶寬
  • 運用獨立於頁面的CSS,有利於網頁被搜索引擎收錄

3、CSS的基本語法

 

Style標簽

 

 

 4、引入CSS方式

行內樣式

使用style屬性引入CSS樣式

<h1 style="color:red;">style屬性的應用</h1>
<p style="font-size:14px; color:green;">直接在HTML標簽中設置的樣式</p>

內部樣式表
CSS代碼寫在 <head><style> 標簽中

<style>
    h1{color: green; }
</style>

優點:方便在同頁面中修改樣式

缺點:不利於在多頁面間共用復用代碼及維護,對內容與樣式的分離也不夠徹底

引出外部樣式表

外部樣式表

CSS代碼保存在擴展名為.css的樣式表中

HTML文件引用擴展名為.css的樣式表,有兩種方式

  • 鏈接式(使用的最多)

     使用<link>標簽鏈接外部樣式表,並講解各參數的含義,<link>標簽必須放在<head>標簽中

   

 

 

  •  導入式

     使用@import導入外部樣式表

     

 

 

 鏈接式與導入式的區別

1. <link>標簽是屬於XHTML範疇的,@import是屬於CSS2.1中特有的。

2. 使用<link>鏈接的CSS是客戶端瀏覽網頁時先將外部CSS文件載入到網頁當中,然後再進行編 譯顯示,所以這種情況下顯示出來的網頁與用戶預期的效果一樣,即使網速再慢也一樣的效果。

3. 使用@import導入的CSS文件,客戶端在瀏覽網頁時是先將HTML結構呈現出來,再把外部CSS文件 載入到網頁當中,當然最終的效果也與使用<link>鏈接文件效果一樣,只是當網速較慢時會 先顯示沒有CSS統一佈局的HTML網頁,這樣就會給用戶很不好的感覺。這個也是現在目前大多少 網站採用鏈接外部樣式表的主要原因。

4. 由於@import是屬於CSS2.1中特有的,因此對於不相容CSS2.1的瀏覽器來說就是無效的。

CSS樣式優先順序

行內樣式>內部樣式表>外部樣式表
就近原則:越接近標簽的樣式優先順序越高

5、CSS基本選擇器

標簽選擇器

HTML標簽作為標簽選擇器的名稱
<h1>…<h6>、<p>、<img/>

 

 

 類選擇器

一些特殊的實現效果,單純使用標簽選擇器不能實現,從而引出類選擇器

 

 

 ID選擇器

ID選擇器的名稱就是HTML中標簽的ID名稱,ID全局唯一

 

 

 小結

  • 標簽選擇器直接應用於HTML標簽
  • 類選擇器可在頁面中多次使用
  • ID選擇器在同一個頁面中只能使用一次

基本選擇器的優先順序

ID選擇器>類選擇器>標簽選擇器

標簽選擇器是否也遵循“就近原則”?

不遵循,無論是哪種方式引入CSS樣式,一般都遵循ID選擇器 > class類選擇器 > 標簽選擇器的優先順序

6、CSS高級選擇器

1、層次選擇器

 

 

 後代選擇器

body p{
    background: red;
}

 

 

 子選擇器

body>p{
    background: pink;
}

 

 

 相鄰兄弟選擇器

.active+p {
    background: green;
}

 

 

 通用兄弟選擇器

.active~p{
    background: yellow;
}

 

 

 2、結構偽類選擇器

 

 

 

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>使用CSS3結構偽類選擇器</title>
</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

標紅的重點

ul li:first-child{ background: red;}
ul li:last-child{ background: green;}
p:nth-child(1){ background: yellow;}
p:nth-of-type(2){ background: blue;}

 

 

 小結

  • 使用E F:nth-child(n)和E F:nth-of-type(n)的 關鍵點
    • E F:nth-child(n)在父級里從一個元素開始查找,不分類型
    • E F:nth-of-type(n)在父級里先看類型,再看位置

3、屬性選擇器

 

 

 E[attr]屬性選擇器

a[id] {
    background: yellow;
}

 

 

 E[attr=val]屬性選擇器

a[id=first] {
    background: red;
}

 

 

 E[attr*=val]屬性選擇器

a[class*=links] {
    background: red;
}

 

 E[attr^=val]屬性選擇器

a[href^=http] {
    background: red;
}

 

 E[attr$=val]屬性選擇器

a[href$=png] {
    background: red;
}

 

 7、小結

 

本文來自博客園,作者:腹白,轉載請註明原文鏈接:https://www.cnblogs.com/wyh518/


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

-Advertisement-
Play Games
更多相關文章
  • redis集群搭建 一、安裝redis 源碼安裝: 1.下載源碼包: wget http://download.redis.io/releases/redis-6.0.7.tar.gz 2.解壓到指定目錄下: tar xf redis-6.0.7.tar.gz -C /usr/local/ 二、編譯 ...
  • 背景 建議至少提交兩份測試報告(從一、二選擇兩個測試case) 一、任選一(建議結合業務選擇,簡單線上業務選tpcb,複雜線上業務選tpcc,偏分析業務選tpch) tpcc tpcb tpch 二、任選一(建議結合業務場景選擇) 並行計算,選擇 RDS PG 12 進行測試 GIS,選擇 RDS ...
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者:YeJinrong/葉金榮 意外發現USER()和CURRENT_USER()的一點不同。 某次在用 ALTER USER 想要修改賬戶密碼時,發 ...
  • 2022年11月7日,Taier1.3版本正式發佈! Taier 是一個大數據分散式可視化的DAG任務調度系統,旨在降低ETL開發成本、提高大數據平臺穩定性,大數據開發人員可以在 Taier 直接進行業務邏輯的開發,而不用關心任務錯綜複雜的依賴關係與底層的大數據平臺的架構實現,將工作的重心更多地聚焦 ...
  • 1 背景與目標 1.1 背景 國際財務泰國每月月初賬單任務生成,或者重算賬單數據,數據同步方案為mysql通過binlake同步ES數據,在同步過程中發現計費事件表,計費結果表均有延遲,ES數據與Mysql數據不一致,導致業務頁面查詢數據不准確,部分核心計算通過ES校驗失敗 1.2目標 解決binl ...
  • 好家伙,JS基礎接著學, 本篇內容為《JS高級程式設計》第三章學習筆記 1.變數 ECMAScript 變數是鬆散類型的,意思是變數可以用於保存任何類型的數據。 (確實鬆散,不像C或C++那樣,分int,float,char等等...,一個變數可以用來保存任何類型的數據) 每個變數只不過是一個用於保 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 先上效果 簡易map 在圖一的地圖中可以看到 a點 連接 到 b點, 基本信息 以及 基本的控制項(放大、縮小、回到某個指定的點),接下來我們分開逐步講解。 所需配置 需要先在manifest.json中的 app模塊中配置地圖,並添加相關 ...
  • 函數 基本概念 在JS中,函數實際上是對象,是Function類型的實例。 函數名是指向函數對象的指針。 function sum(num1, num2){ return num1 + num2; } // 檢查sum是否是Function類型的實例 console.log(sum instance ...
一周排行
    -Advertisement-
    Play Games
  • 隨著Aspire發佈preview5的發佈,Microsoft.Extensions.ServiceDiscovery隨之更新, 服務註冊發現這個屬於老掉牙的話題解決什麼問題就不贅述了,這裡主要講講Microsoft.Extensions.ServiceDiscovery(preview5)以及如何 ...
  • 概述:通過使用`SemaphoreSlim`,可以簡單而有效地限制非同步HTTP請求的併發量,確保在任何給定時間內不超過20個網頁同時下載。`ParallelOptions`不適用於非同步操作,但可考慮使用`Parallel.ForEach`,儘管在非同步場景中謹慎使用。 對於併發非同步 I/O 操作的數量 ...
  • 1.Linux上安裝Docken 伺服器系統版本以及內核版本:cat /etc/redhat-release 查看伺服器內核版本:uname -r 安裝依賴包:yum install -y yum-utils device-mapper-persistent-data lvm2 設置阿裡雲鏡像源:y ...
  • 概述:WPF界面綁定和渲染大量數據可能導致性能問題。通過啟用UI虛擬化、非同步載入和數據分頁,可以有效提高界面響應性能。以下是簡單示例演示這些優化方法。 在WPF中,當你嘗試綁定和渲染大量的數據項時,性能問題可能出現。以下是一些可能導致性能慢的原因以及優化方法: UI 虛擬化: WPF提供了虛擬化技術 ...
  • 引言 上一章節介紹了 TDD 的三大法則,今天我們講一下在單元測試中模擬對象的使用。 Fake Fake - Fake 是一個通用術語,可用於描述 stub或 mock 對象。 它是 stub 還是 mock 取決於使用它的上下文。 也就是說,Fake 可以是 stub 或 mock Mock - ...
  • 為.net6在CentOS7上面做準備,先在vmware虛擬機安裝CentOS 7.9 新建CentOS764位的系統 因為CentOS8不更新了,所以安裝7;簡單就一筆帶過了 選擇下載好的操作系統的iso文件,下載地址https://mirrors.aliyun.com/centos/7.9.20 ...
  • 經過前面幾篇的學習,我們瞭解到指令的大概分類,如:參數載入指令,該載入指令以 Ld 開頭,將參數載入到棧中,以便於後續執行操作命令。參數存儲指令,其指令以 St 開頭,將棧中的數據,存儲到指定的變數中,以方便後續使用。創建實例指令,其指令以 New 開頭,用於在運行時動態生成並初始化對象。方法調用指... ...
  • LiteDB 是一個輕量級的嵌入式 NoSQL 資料庫,其設計理念與 MongoDB 類似,但它是完全使用 C# 開發的,因此與 C# 應用程式的集成非常順暢。與 SQLite 相比,LiteDB 提供了 NoSQL(即鍵值對)的數據存儲方式,並且是一個開源且免費的項目。它適用於桌面、移動以及 We ...
  • 1 開源解析和拆分文檔 第三方的工具去對文件解析拆分,去將我們的文件內容給提取出來,並將我們的文檔內容去拆分成一個小的chunk。常見的PDF word mark down, JSON、HTML。都可以有很好的一些模塊去把這些文件去進行一個東西去提取。 優勢 支持豐富的文檔類型 每種文檔多樣化選擇 ...
  • OOM是什麼?英文全稱為 OutOfMemoryError(記憶體溢出錯誤)。當程式發生OOM時,如何去定位導致異常的代碼還是挺麻煩的。 要檢查OOM發生的原因,首先需要瞭解各種OOM情況下會報的異常信息。這樣能縮小排查範圍,再結合異常堆棧、heapDump文件、JVM分析工具和業務代碼來判斷具體是哪 ...