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單位。這個屬性定義元素內容區的高度,在內容區外面可以增加內邊距 邊框和外邊距。設定段...