CSS(一)：認識CSS-html教學-PHP中文網

CSS 層疊樣式表(英文全名：Cascading Style Sheets)是一種用來表現HTML或XML等檔案樣式的電腦語言。 CSS3是CSS2的升級版本，3只是版本號，它在CSS2.1的基礎上增加了許多強大的新功能。目前主流瀏覽器chrome、safari、firefox、opera、甚至360都已經支援了CSS3大部分功能了，IE10以後也開始全面支援CSS3了。不同的瀏覽器可能需要不同的前綴。它表示該CSS屬性或規則尚未成為W3C標準的一部分，是瀏覽器的私有屬性，雖然目前較新版本的瀏覽器都是不需要前綴的，但為了更好的向前兼容前綴還是少不了的。

<span style="color: #800000;">-moz-transform:translateX(20px);
-webkit-transform:translateX(20px);
-ms-transform:translateX(20px);
transform:translateX(20px);</span>

登入後複製

transform為CSS3的新屬性，各瀏覽器都需要加上前綴來支援。

2.CSS能做什麼

樣式定義如何顯示HTML 元素。
CSS把很多以前需要使用圖片和腳本來實現的效果、甚至動畫效果，只需要短短幾行程式碼就能搞定。例如圓角，圖片邊框，文字陰影和盒子陰影，過渡、動畫等。
CSS簡化了前端開發工作人員的設計流程，更靈活的頁面佈局，更快的頁面載入速度。
可以將網站上所有的網頁風格都使用一個CSS檔案來控制，只要修改這個CSS檔案中對應的程式碼，那麼整個網站的所有頁面都會隨之變動。
目的：將表現與結構分離。

<span style="color: #008000;">/*</span><span style="color: #008000;"> style.css </span><span style="color: #008000;">*/</span><span style="color: #800000;">

body</span>{<span style="color: #ff0000;">
    background-color</span>:<span style="color: #0000ff;">#ccc</span>;
}<span style="color: #800000;">
h1</span>{<span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
    font-family</span>:<span style="color: #0000ff;">"微软雅黑"</span>;<span style="color: #ff0000;">
    font-weight</span>:<span style="color: #0000ff;">normal</span>;
}

登入後複製

<span style="color: #008000;"><!--</span><span style="color: #008000;"> index.html </span><span style="color: #008000;">--></span>

<span style="color: #0000ff;"><</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">link </span><span style="color: #ff0000;">rel</span><span style="color: #0000ff;">="stylesheet"</span><span style="color: #ff0000;"> href</span><span style="color: #0000ff;">="./style.css"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">head</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"><</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>这是标题<span style="color: #0000ff;"></</span><span style="color: #800000;">h1</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">body</span><span style="color: #0000ff;">></span>

登入後複製

3.CSS語法結構

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明，選擇器通常是你需要改變樣式的 HTML 元素。每條聲明由一個屬性和一個值組成。屬性（property）是你希望設定的樣式屬性（style attribute）。每個屬性有一個值。屬性和值被冒號分開。

<span style="color: #800000;">p</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择器 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">      
    color</span>:<span style="color: #0000ff;">red</span>;      <span style="color: #008000;">/*</span><span style="color: #008000;"> 属性:值; </span><span style="color: #008000;">*/</span>
}

登入後複製

4.如何引入CSS

引入樣式表的方法有三種：

外部樣式表
內部樣式表
內聯樣式

　　4.1 外部樣式表

　　　　當樣式需要套用於許多頁面時，外部樣式表將是理想的選擇。在使用外部樣式表的情況下，你可以透過改變一個檔案來改變整個網站的外觀。每個頁面使用標籤連結到樣式表。標籤在（文件的）頭部：

<span style="color: #800000;"><head>
　　<link rel="stylesheet" type="text/css" href="style.css">
</head></span>

登入後複製

　　4.2 內部樣式表

　　　　當單一文件需要特殊的樣式時，就應該使用內部樣式表。可以使用

<span style="color: #800000;"><head>
    <style>
        p </span>{<span style="color: #ff0000;">
            color</span>:<span style="color: #0000ff;">red</span>;
        }<span style="color: #800000;">
    </style>
</head>        </span>

登入後複製

　　4.3 內聯樣式

　　　　內聯樣式是指將CSS樣式直接寫在HTML 標籤中的style屬性裡。注意這種方式的引入CSS，是不需要寫入選擇器的。

<span style="color: #800000;"><p style="color:red;">这是一个段落</p></span>

登入後複製

　　4.4 三種引進方式的優先權對比

　　　　當同一個 HTML 元素被不只一個樣式定義時，會使用哪個樣式呢？一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。

瀏覽器缺省設定
外部樣式表
內部樣式表（位於標籤內部）
內聯樣式（在 HTML 元素內部）

因此，內聯樣式（在HTML 元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式聲明：標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（缺省值）。

5.CSS代碼註解

css 程式碼註釋，以 /* 開始 */ 結束。

<span style="color: #008000;">/*</span><span style="color: #008000;"> 公共样式</span><span style="color: #008000;">*/</span><span style="color: #800000;">

body </span>{<span style="color: #ff0000;"> margin</span>:<span style="color: #0000ff;">0px</span>;<span style="color: #ff0000;"> padding</span>:<span style="color: #0000ff;">0px</span>;}    
    
<span style="color: #008000;">/*</span><span style="color: #008000;">导航样式开始</span><span style="color: #008000;">*/</span><span style="color: #800000;">
    
#nav </span>{<span style="color: #ff0000;">
      ……
    </span>}

<span style="color: #008000;">/*</span><span style="color: #008000;">导航样式结束</span><span style="color: #008000;">*/</span>

登入後複製

6.CSS選擇器

CSS選擇器用於選擇你想要的元素的樣式的模式。

　　6.1 通配符選擇器

　　　　* 選擇器選擇所有元素。 * 選擇器也可以選擇另一個元素內的所有元素:

<span style="color: #800000;">*</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择所有元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    margin</span>:<span style="color: #0000ff;">0</span>;<span style="color: #ff0000;">
    padding</span>:<span style="color: #0000ff;">0</span>;
}<span style="color: #800000;">
div *</span>{              <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择div元素下的所有元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">blue</span>;
}

登入後複製

　　6.2 元素選擇器

　　　　所謂元素選擇符，指以網頁中已有的標籤名稱作為名稱的選擇符。

<span style="color: #800000;">body</span>{               <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择标签为body的元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    font-size</span>:<span style="color: #0000ff;">16px</span>;
}<span style="color: #800000;">
a</span>{                  <span style="color: #008000;">/*</span><span style="color: #008000;"> 选择标签为a的元素 </span><span style="color: #008000;">*/</span><span style="color: #ff0000;">
    text-decoration</span>:<span style="color: #0000ff;">none</span>;
}

登入後複製

　　6.3 群組選擇器

　　　　除了可以對單一標籤進行樣式指定外，還可以對一組標籤進行相同的樣式定義。使用逗號對選擇符號進行分隔。對頁面中需要使用相同樣式的元素，只需寫一次樣式。

<span style="color: #800000;">h1,h2,h3,p</span>{<span style="color: #ff0000;">         
    font-size</span>:<span style="color: #0000ff;">16px</span>;<span style="color: #ff0000;">
    color</span>:<span style="color: #0000ff;">red</span>;
}

登入後複製

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學

1666

CakePHP 教程

1425

Laravel 教程

1327

PHP教程

1273

C# 教程

1253

Related knowledge

HTML：結構，CSS：樣式，JavaScript：行為 Apr 18, 2025 am 12:09 AM

HTML、CSS和JavaScript在Web開發中的作用分別是：1.HTML定義網頁結構，2.CSS控製網頁樣式，3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML，CSS和JavaScript的未來：網絡開發趨勢 Apr 19, 2025 am 12:02 AM

HTML的未來趨勢是語義化和Web組件，CSS的未來趨勢是CSS-in-JS和CSSHoudini，JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果，Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積，CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡，Serverless簡化開發但需優化冷啟動問題。

HTML的未來：網絡設計的發展和趨勢 Apr 17, 2025 am 12:12 AM

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML與CSS vs. JavaScript：比較概述 Apr 16, 2025 am 12:04 AM

HTML、CSS和JavaScript在網頁開發中的角色分別是：HTML負責內容結構，CSS負責樣式，JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容，確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式，使其美觀易讀。 3.JavaScript通過腳本控製網頁行為，實現動態和交互功能。

HTML：建立網頁的結構 Apr 14, 2025 am 12:14 AM

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義，使用、、等標籤。 2.提供語義化標記，如、、等，提升SEO效果。 3.通過標籤實現用戶交互，需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號，需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML與CSS和JavaScript：比較Web技術 Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是構建現代網頁的核心技術：1.HTML定義網頁結構，2.CSS負責網頁外觀，3.JavaScript提供網頁動態和交互性，它們共同作用，打造出用戶體驗良好的網站。

HTML：是編程語言還是其他？ Apr 15, 2025 am 12:13 AM

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1）htmlStructures andFormatSwebContentusingtags.2）itworkswithcsssforstylingandjavascript for Interactivity，增強WebevebDevelopment。

從文本到網站：HTML的力量 Apr 13, 2025 am 12:07 AM

HTML是一種用於構建網頁的語言，通過標籤和屬性定義網頁結構和內容。 1）HTML通過標籤組織文檔結構，如、。 2）瀏覽器解析HTML構建DOM並渲染網頁。 3）HTML5的新特性如、、增強了多媒體功能。 4）常見錯誤包括標籤未閉合和屬性值未加引號。 5）優化建議包括使用語義化標籤和減少文件大小。

See all articles

CSS(一)：認識CSS

1.什麼是CSS

2.CSS能做什麼

3.CSS語法結構

4.如何引入CSS

4.1 外部樣式表

4.2 內部樣式表

4.3 內聯樣式

4.4 三種引進方式的優先權對比

5.CSS代碼註解

6.CSS選擇器

6.1 通配符選擇器

6.2 元素選擇器

6.3 群組選擇器

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題

　　4.1 外部樣式表

　　4.2 內部樣式表

　　4.3 內聯樣式

　　4.4 三種引進方式的優先權對比

　　6.1 通配符選擇器

　　6.2 元素選擇器

　　6.3 群組選擇器