CSS 基礎教程

2022-08-29 20:12:15 字數 2842 閱讀 1914

1簡介

1、css 概述

1.1css 指層疊樣式表

1.2內容與表現分離

2、多重樣式將層疊為乙個

2.1優先權

2.1.1內聯樣式(在 html 元素內部)

2.1.2內部樣式表(位於

<

head

>

標籤內部)

2.1.3外部樣式表

2.1.4瀏覽器預設設定

2基礎語法

1、語法

1.1由兩個主要的部分構成:選擇器,以及一條或多條宣告。

selector

選擇器通常是您需要改變樣式的 html 元素。

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

selector

2、值的不同寫法和單位

p p

p p

3、記得寫引號

3.1如果值為若干單詞,則要給值加引號:

p 4、多重宣告

4.1如果要定義不止乙個宣告,則需要用分號將每個宣告分開。

p 3高階語法

1、選擇器的分組

1.1對選擇器進行分組,這樣,被分組的選擇器就可以分享相同的宣告。

h1,h2,h3,h4,h5,h6

2、繼承及其問題

2.1根據 css,子元素從父元素繼承屬性。

4派生選擇器

1、派生選擇器

1.1上下文選擇器

1.2派生選擇器允許你根據文件的上下文關係來確定某個標籤的樣式。

li strong

<

p><

strong

>我是粗體字,不是斜體字,因為我不在列表當中,所以這個規則對我不起作用

strong

>

p>

<

ol>

<

li><

strong

>我是斜體字。這是因為 strong 元素位於 li 元素內。

strong

>

li>

<

li>我是正常的字型。

li>

ol>

5id 選擇器

1、id 選擇器

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

1.2id 選擇器以 "#" 來定義。

#red

#green

<

p id

="red"

>這個段落是紅色。

p>

<

p id

="green"

>這個段落是綠色。

p>

2、id 選擇器和派生選擇器

#sidebar p

6類選擇器

1、在 css 中,類選擇器以乙個點號顯示:

.center

<

h1 class

="center"

>

this heading will be center-aligned

h1>

<

p class

="center"

>

this paragraph will also be center-aligned.

p>

2、和 id 一樣,class 也可被用作派生選擇器:

.fancy td

td.fancy

<

td class

="fancy"

>

7屬性選擇器

1、對帶有指定屬性的 html 元素設定樣式。

2、屬性選擇器

[title]

3、屬性和值選擇器

[title=w3school]

4、屬性和值選擇器 - 多個值

[title~=hello]

5、設定表單的樣式

5.1屬性選擇器在為不帶有 class 或 id 的表單設定樣式時特別有用

input[type="text"]

input[type="button"]

6、css 選擇器參考手冊

選擇器描述[attribute]用於選取帶有指定屬性的元素。[attribute=value]用於選取帶有指定屬性和值的元素。[attribute~=value]用於選取屬性值中包含指定詞彙的元素。[attribute|=value]用於選取帶有以指定值開頭的屬性值的元素,該值必須是整個單詞。[attribute^=value]匹配屬性值以指定值開頭的每個元素。[attribute$=value]匹配屬性值以指定值結尾的每個元素。[attribute*=value]匹配屬性值中包含指定值的每個元素。

8建立1、如何插入樣式表

1.1外部樣式表

<

head

>

<

link

rel="stylesheet"

type

="text/css"

href

="mystyle.css"

/>

head

>

1.2內部樣式表

<

head

>

<

style

type

="text/css"

>

hr p

body

style

>

head

>

1.3內聯樣式

<

p style

="color: sienna; margin-left: 20px"

>

this is a paragraph

p>

CSS應用基礎教程 4 顏色背景

主 要 作 用 在前面的章節介紹完了宣告與應用的方法及 一些特性之後,從這章開始,便要正式進入 css的指令介紹了!本章有兩個介紹的主 題,第乙個部份介紹的是顏色與背景性質的 css,其主要的作用在於設定元素的前景 顏色 背景顏色與背景圖形等樣式設定的性質 而第二部份為您介紹的是用於控制擺放 元素位...

CSS應用基礎教程 1 基本認識

概 論 css是 cascading style sheets 的簡稱,中文翻為 串接樣式表 也有人只翻為 樣式表 css用以作為網頁的排版與風格設計,在所謂的 新式網頁 裡 css不容置疑是相當重要的一環。css是以既有的基礎,用以彌補既存 規格裡的不足,也讓網頁的設計更為靈活。這份教學檔案就要來...

html css基礎教程入門之CSS 尺寸

css 尺寸 dimension 屬性允許你控制元素的高度和寬度。同樣,它允許你增加行間距。css height 屬性 height 屬性用以設定元素的高度,單位可以使用px,em等,通常用使用px 畫素 為html單位。這個屬性定義元素內容區的高度,在內容區外面可以增加內邊距 邊框和外邊距。設定段...