當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS 基本样式

發布時間：2025/10/17 CSS 9 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS 基本样式小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

4.1 CSS 基本概念

CSS：Cascade Style Sheet 層疊樣式表。

樣式表： 樣式的集合，定義HTML元素顯示的方式。

4.2 CSS 的使用

使用 CSS 的三種方式：

外部樣式表：需要配合外部的 CSS 樣式文件使用

index.html 頁面

<!DOCTYPE html> <html lang="zh-CN"> <head><meta charset="UTF-8"><title>CSS 樣式</title><link rel="stylesheet" type="text/css" href="style.css"/> </head> <body> <div id="div1"></div> </body> </html>

style.css 頁面

/* style.css */ #div1{width: 200px;height: 200px;background: #ef5576; }

內部樣式表

index.html

<head>......<style type="text/css">#div1 {width: 400px;height: 400px;background: blue;}</style> </head>

內聯樣式表

index.html

優先級： 內聯 CSS > 內部 CSS > 外部 CSS

結論：

如果一個樣式在多個網頁中使用，只能使用外部 CSS 樣式表。

如果一個樣式只是在一個頁面中使用，可以考慮放到內部樣式表。

除非有特殊情況，否則一般不建議使用內聯樣式。

4.3 CSS 的格式

格式：

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

注釋的格式：

/* 這是注釋的內容 */

注意：

如果值是字符串，可以使用雙引號也可以使用單引號。

如果要聲明多個屬性，必須通過分號進行隔開。

CSS 中不區分大小寫，但是建議使用小寫。

4.4 CSS 選擇器

描述如何選擇HTML氧元素

4.4.1 元素選擇器

選擇 HTML 文檔中的元素

p {background: yellow; }

一旦選擇使用，頁面中的所有 p 元素都會被選中并變成黃色背景。

4.4.2 類選擇器

選擇文檔中元素指定的類，類是通過 class 屬性去指定的；多個元素可以使用同一個類。

html 文件

css 文件

.c1 {background: green; }

效果圖

4.4.3 id 選擇器

選擇HTML文檔中元素指定的ID

ID是通過id屬性去設置的，每一個元素指定的id不能重復。