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

HTML

HTML学习笔记（三）样式CSS

發布時間：2025/6/17 HTML 37 豆豆

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

1.樣式

外部樣式表（通過css文件定義樣式，整體樣式）

當樣式需要被應用到很多頁面的時候，使用外部樣式表，在?head 部分<link>。

內部樣式表（單個文件的樣式）

當單個文件需要特別樣式時，就可以使用內部樣式表。你可以在 head 部分通過 <style> 標簽定義內部樣式表。

<head><style type="text/css"> body {background-color: red} p {margin-left: 20px} </style> </head>
這樣<body>和<p>就是上面的屬性了

內聯樣式（單個控件的樣式）

當特殊的樣式需要應用到個別元素時，就可以使用內聯樣式。使用內聯樣式的方法是在相關的標簽中使用樣式屬性。樣式屬性可以包含任何 CSS 屬性

<p style="color: red; margin-left: 20px"> This is a paragraph </p> 2.樣式選擇器（內部樣式表）
標簽選擇器（選擇器是標簽）

用逗號將需要分組的選擇器分開h1，h2；值也可以有多個，用逗號隔開；
class選擇器

　類選擇器以一個點號顯示：

.center {text-align: center}
用class=“”來使用

id 選擇器

id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式。

id 選擇器以 "#" 來定義，用id=“”來使用

屬性選擇器

下面的例子為帶有 title 屬性的所有元素設置樣式：

選擇器定義：元素名 [屬性 = 屬性值] 只要元素使用了該屬性，就可設置此樣式。其中元素名、=屬性值可不寫

響應式 Web 設計

RWD 指的是響應式 Web 設計（Responsive Web Design）
RWD 能夠以可變尺寸傳遞網頁
RWD 對于平板和移動設備是必需的

創建您自己的響應式設計

方法一：自己來創建它

方法二：使用現成的 CSS 框架——Bootstrap

<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <meta> 元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。

轉載于:https://www.cnblogs.com/dengquan/p/8728424.html

總結

以上是生活随笔為你收集整理的HTML学习笔记（三）样式CSS的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。