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, acss派生類選擇根據元素在其位置的上下文關係來定義樣式,就比如標籤中的標籤,如果直接定義body元素,就會把其中所有的值都改變,但是單單針對某些元素來定義,也是可以的。當然針對乙個元素定義的樣式的優先順序,要比定義全部樣式的優先順序高。所以即使是修改了樣式,也可以針對單個元素進行修改。
如下**:
doctype html然後我們用css樣式來修改>
<
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
>
可以看到,將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然後用css來修改>
<
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
>
/*如果沒有值,通過屬性修改全部的樣式
*/[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...