CSS基本整理1

目錄

css建立

@[基本例項|css]

css 指層疊樣式表 (cascading style sheets)

樣式定義如何顯示 html 元素

樣式通常儲存在樣式表中

外部樣式表通常儲存在 css 檔案中

css規則由兩個主要的部分構成：選擇器，以及一條或多條宣告

selector

每條宣告由乙個屬性和乙個值組成。

屬性（property）是您希望設定的樣式屬性（style attribute）。每個屬性有乙個值。屬性和值被冒號分開

你可以對選擇器進行分組，這樣，被分組的選擇器就可以分享相同的宣告。用逗號將需要分組的選擇器分開。

h1,h2,h3,h4,h5,h6

根據 css，子元素從父元素繼承屬性

通過 css 繼承，子元素將繼承最高端元素所擁有的屬性（這些子元素諸如 p, td, ul, ol, ul, li, dl, dt,和 dd）

派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。通過合理地使用派生選擇器，我們可以使 html **變得更加整潔

//列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義乙個派生選擇器：

li strong

id 選擇器可以為標有特定 id 的 html 元素指定特定的樣式。id 選擇器以 "#" 來定義

注意：id 屬性只能在每個 html 文件**現一次

//css定義

#red 
#green 
//html使用
這個段落是紅色。
這個段落是綠色。

id 選擇器常常用於建立派生選擇器

//下面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落

#sidebar p

即使被標註為 sidebar 的元素只能在文件**現一次，這個 id 選擇器作為派生選擇器也可以被使用很多次

#sidebar p 

#sidebar h2

在 css 中，類選擇器以乙個點號顯示

.center

this paragraph will also be center-aligned.

和 id 一樣，class也可被用作派生選擇器

//類名為 fancy 的更大的元素內部的段落都會以灰色背景顯示橙色文字

.fancy p

元素也可以基於它們的類而被選擇

//類名為 fancy 的段落將是帶有灰色背景的橙色

p.fancy

注釋：只有在規定了 !doctype 時，ie7 和 ie8 才支援屬性選擇器。在 ie6 及更低的版本中，不支援屬性選擇

//為帶有 title 屬性的所有元素設定樣式

[title]
//為 title="王皓" 的所有元素設定樣式
[title=王皓]
//為包含指定值的 title 屬性的所有元素設定樣式
[title~=王皓]

使用標籤鏈結到外部樣式表。標籤在（文件的）頭部

//外部樣式表舉例

p

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

使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性

this is a paragraph

如果某些屬性在不同的樣式表中被同樣的選擇器定義，那麼屬性值將從更具體的樣式表中被繼承過來

h3

h3

color: red; 

text-align: right; 
font-size: 20pt;

即顏色屬性將被繼承於外部樣式表，而文字排列（text-alignment）和字型尺寸（font-size）會被內部樣式表中的規則取代

posted @

2018-01-08 19:27

ustc_rjgc2017 閱讀(

...)

編輯收藏

重新整理頁面

返回頂部

CSS 知識點整理1

css提供了一種分層設計的思想，html提供具體的內容，而css對內容進行編輯，排版，更加方便管理。一 css選擇器元素選擇器紅色 c1 藍色 c2 綠色紅色 c1 藍色 c2 綠色二 元素尺寸大小設定html，body 獲取瀏覽器的定高。子元素的父元素是body，body的父元素是html，通過設...

C 基本知識整理（1）

在c 程式設計中using namespace std 這條語句很常見，其中，namespace就是命名空間，而using是宣告，std是命名空間名。命名空間就是為了解決c 中函式變數的命名衝突所採取的一種措施，能夠解決多模組協同開發出現變數函式命名的衝突問題。1 using宣告及作用域 using...

css樣式整理部分part1

此篇為了整理自己在調整css樣式中遇到過的問題 1.內容過長時,使用省略號代替 overflow hidden text overflow ellipsis white space nowrap 2.滾動條的粗細 includes lists webkit scrollbar lists webki...