CSS基礎介紹

2022-07-06 15:42:14 字數 4115 閱讀 8995

css介紹

css是指層疊樣式表,css樣式表極大的提高了工作效率

css基礎語法

1. 首先選擇乙個屬性

2. 選擇了屬性以後,用大括號括起來

3. 括號裡面是對應的屬性和屬性值,如:

selector
舉乙個實際的例子,就像這樣:

h1是屬性,然後乙個大括號,括號中的color是屬性,後面跟著對應的屬性值red,設定結束後需要用;來分別各個屬性

h1
使用css樣式:

需要在html中來使用css樣式,可以用標籤來呼叫css檔案,如:

doctype html

>

<

html

>

<

head

>

<

title

>

title

>

<

meta

charset

="utf-8"

>

<

link

rel="stylesheet"

type

="text/css"

href

="test.css"

>

head

>

<

body

>

<

h1>我被css改變了。

css選擇器分組:

選擇器分組就是將一堆頁面元素,一起定義:

h1, h2, h3, p, a
css派生類選擇

根據元素在其位置的上下文關係來定義樣式,就比如標籤中的標籤,如果直接定義body元素,就會把其中所有的值都改變,但是單單針對某些元素來定義,也是可以的。當然針對乙個元素定義的樣式的優先順序,要比定義全部樣式的優先順序高。所以即使是修改了樣式,也可以針對單個元素進行修改。

如下**:

doctype html

>

<

html

>

<

head

>

<

title

>

title

>

<

meta

charset

="utf-8"

>

<

link

rel="stylesheet"

type

="text/css"

href

="test.css"

>

head

>

<

body

>

<

p>我是小p,我是body p{}指定的標籤改變的

p>

<

h1>我是標題

h1>

body

>

html

>

然後我們用css樣式來修改

可以看到,將body全部定義成綠色了,但是如果指定body中的p元素進行定義,還是可以將其改變顏色的。所以指定的元素的優先順序要比全部定義的高。相反沒有指定定義的h1標題,就是綠色。

id選擇器

id選擇器可以為標有id的html元素指定特定的樣式,id選擇器以「#」來定義。id選擇常常用於簡歷派生選擇器,他們經常一起來使用

doctype html

>

<

html

>

<

head

>

<

title

>

title

>

<

meta

charset

="utf-8"

>

<

link

rel="stylesheet"

type

="text/css"

href

="test.css"

>

head

>

<

body

>

<

div

id="testid"

>

呵呵呵呵

<

p>哈哈哈,我被指定定義了顏色,id與元素經常一起使用!

p>

div>

body

>

html

>

/*

id可以直接用#號來表示

css類選擇器

類選擇器是以乙個點「.」來顯示的,class也可以結合派生選擇器來一起使用,比如定義了乙個元素

利用css可以如下修改:

/*class

可以需要用「.」來表示

*/.testclass.testclass p

屬性選擇器:

屬性選擇器就是針對標籤中的屬性來進行修改,當然,也可以根據屬性的值,來針對性的修改:

doctype html

>

<

html

>

<

head

>

<

title

>

title

>

<

meta

charset

="utf-8"

>

<

link

rel="stylesheet"

type

="text/css"

href

="test.css"

>

head

>

<

body

>

<

ol type

="i"

>

<

li>屬性選擇器

li>

<

li>屬性選擇器

li>

<

li>屬性選擇器

li>

ol>

<

ol type

="1"

>

<

li>屬性選擇器

li>

<

li>屬性選擇器

li>

<

li>屬性選擇器

li>

ol>

<

ol type

="a"

>

<

li>屬性選擇器

li>

<

li>屬性選擇器

li>

<

li>屬性選擇器

li>

ol>

body

>

html

>

然後用css來修改

/*

如果沒有值,通過屬性修改全部的樣式

*/[type]

/*有值的話,就是針對值進行修改

總結:主要學習了css的用法,已經派生選擇器的使用,id選擇器的使用,class選擇器的使用和屬性選擇器的使用

id---以「#」開頭

class---以「.」開頭

屬性選擇器---以在括號類填寫屬性和值

派生選擇器---直接呼叫標籤,如:

CSS介紹 筆記 css基礎知識

css介紹 筆記 網頁背景描述 外部樣式表檔案 另外建乙個新的.css檔案 h1 color pink background color aqua font size 20px css使用方式 css h1 匹配頁面中所有的h1標籤 統一新增樣式 h1 color green background ...

css3基礎介紹

一 css3選擇器 1,css2.1選擇器 標籤 div 類 class id id 萬用字元 交集 div.d id 並集 div,p,span,id 後代 div p span 2,關係選擇器 兒子 ie7開始相容 下乙個兄弟 ie7開始相容 後邊所有兄弟 jquery都可以使用,ie6也能使用...

CSS基礎之簡單介紹

元素 元素是文件結構的基礎,在css中,每個元素都會生成乙個框 或者說盒 表現形式 替換元素 替換元素的內容並非有瀏覽器直接生成,典型的莫 過於img元素了 非替換元素 大部分html元素都是非替換元素,如div元素 p元素等 塊級元素 填充父元素的內容區 行內元素 在文字行內生成元素框 宣告css...