當(dāng)前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS 基本样式

發(fā)布時(shí)間：2025/10/17 CSS 30 豆豆

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

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; }

內(nèi)部樣式表

index.html

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

內(nèi)聯(lián)樣式表

index.html

優(yōu)先級(jí)： 內(nèi)聯(lián) CSS > 內(nèi)部 CSS > 外部 CSS

結(jié)論：

如果一個(gè)樣式在多個(gè)網(wǎng)頁中使用，只能使用外部 CSS 樣式表。

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

除非有特殊情況，否則一般不建議使用內(nèi)聯(lián)樣式。

4.3 CSS 的格式

格式：

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

注釋的格式：

/* 這是注釋的內(nèi)容 */

注意：

如果值是字符串，可以使用雙引號(hào)也可以使用單引號(hào)。

如果要聲明多個(gè)屬性，必須通過分號(hào)進(jìn)行隔開。

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

4.4 CSS 選擇器

描述如何選擇HTML氧元素

4.4.1 元素選擇器

選擇 HTML 文檔中的元素

p {background: yellow; }

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

4.4.2 類選擇器

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

html 文件

css 文件

.c1 {background: green; }

效果圖

4.4.3 id 選擇器

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

ID是通過id屬性去設(shè)置的，每一個(gè)元素指定的id不能重復(fù)。

html 文件

css 文件

.c1 {background: green; }#p4 {background: #f5ff00; }

效果圖

轉(zhuǎn)載于:https://www.cnblogs.com/xsh168/p/11385082.html

總結(jié)

以上是生活随笔為你收集整理的CSS 基本样式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

样式
css