css基礎

CSS

   CSS.層疊樣式表(英文全稱:Cascading Style Sheets)是一種用來表現HTML標準通用標記語言的一個應用)或XML(標準通用標記語言的一個子集)等文件樣式的計算機語言。



1.如何使用CSS

四中方式:

1.外鏈式:使用link標籤引入指定的CSS文件

<link href=css的地址 rel=stylesheet type=text/css>

2.導入式:使用style標籤配合@import 語法引入指定的CSS文件

<style>

@import url(css文件地址);

</style>

3.嵌入式:將CSS代碼直接書寫在HTML文件的STYLE標籤

<style>

Body{color:cyan;}

</style>

4.內聯式:直接在標籤內部以style屬性的方式引入CSS屬性

<標籤 style=CSS屬性></標籤>

2.選擇器

現在css2.0中一共有七種選擇器:

HTML元素選擇器:

頁面中任何一個存在的標籤都是一個已經存在的選擇器,可以選中頁面中的所有同名標籤,進行樣式設定。

類(class)選擇器:

在指定的元素中添加class屬性,並且指定一個值,那麼所有帶有當前屬性和值得元素會被歸結爲一類當中,在CSS中可以使用.class值得方式選中所有帶有class屬性和值得元素。

ID選擇器:

在指定的元素中添加ID屬性,並且指定一個值,#+ID值得方式來選中元素。

組合選擇器:

多個選擇器使用同一組樣式時,可以使用所有選擇器用逗號分隔的方式,只寫一份CSS樣式。

關係選擇器或者後代選擇器:

具有嵌套關係的標籤可以使用外部標籤的選擇器 內部標籤的選擇器的方式選定指定部分。

通用選擇器:

選中頁面中的所有元素

*{margin:0;padding:0;list-style:none;}

僞元素選擇器:

選中的不是某個標籤,而是標籤的具體狀態。

正常連接(正常狀態)  :link

鼠標經過     :hover

鼠標點擊     :active

訪問過後     :visited

只有超鏈接標籤有這四種狀態,其他標籤只有:hover

3.字體相關屬性

Font-size  設置字體的大小,可以無限大,但是不能無限小

值爲長度單位:

Px   像素

Em   一個漢字的大小

Ex    一個英文x的大小

%     百分比

Color  設置字體的顏色

顏色值:

1.英文單詞:red,green,blue

2.Rgb模式

3.HEX模式,如果三種顏色的每兩位值都相同,例如:#FFAAFF,就可以簡寫成#FAF

Font-weight  設置字體的粗細

Normal   正常字體

Bold  加粗

800   加粗

Font-style  是否斜體

Normal  正常字體

Italic   斜體

Oblique  沒人用的斜體

Font-variant  設置字母的大小寫

Normal  正常字體

Small-caps  設置爲小型的大寫字母

Font-family  設置字體的類型

一般情況下不要設置

4.文本屬性

Text-decoration 文本修飾屬性

None   沒有修飾或者說去掉下劃線

Underline 下劃線

Overline  上劃線

Line-through  中橫線

Text-indent 設置內容的首行縮進

值爲長度單位

一般建議用em

Line-height 設置單行的文本高度

值爲長度單位,作用:單行文本垂直居中

Text-align  設置內容的水平對齊方式

Left  左對齊

Center  居中對齊

Right  右對齊

1.divspan

Div  無意義標籤,在頁面佈局中標識塊狀

Span  無意義標籤,在頁面佈局中標識行內標籤

2.背景屬性

Background-color 設置元素的背景顏色

值爲顏色值

Background-p_w_picpath 設置元素的背景圖片

格式:background-p_w_picpath:url(圖片地址);

Background-repeat 設置背景圖片的重複方式

Repeat  所有方向重複,默認值

Repeat-x  橫向重複

Repeat-y  縱向重複

No-repeat 不重複

Background-position  背景圖片位置屬性

格式:background-position:橫向座標 縱向座標

座標值不僅可以使用長度單位,還可以使用位置單詞:

橫座標單詞:left  左邊  right  右邊   center   中間

縱向座標單詞:top 上  center  中間   bottom  

*Background-p_w_upload 設置背景圖片的滾動方式

Scroll  背景圖片跟隨內容一起滾動,所有的默認值

Fixed  背景圖片綁定在頁面中不滾動

Background  背景綜合屬性

所有的背景屬性可以在當前屬性中直接書寫,而且沒有先後順序

wKiom1enS4XDGtATAABHbuy2wKg425.png-wh_50

3.邊框屬性

Border-width:   設置四個邊框的寬度

Border-color:    設置四個邊框的顏色

Border-style:     設置邊框的樣式

Solid    單實線

Double   雙實線

Dashed  虛線

Border:寬度 顏色 風格

上面三個屬性不可以少,可以更改順序

Border-left  設置左邊的邊框

wKioL1enS8iRy8wQAAArTNcpGrc296.png-wh_50

4.列表屬性

List-style-type:  設置列表的標識類型

None  不要標識

Decimal  數字標識

Disc   實心圓

Circle  空心圓

List-style-p_w_picpath 設置列表的圖片

格式:list-style-p_w_picpath:url(圖片地址);

List-style-position 設置列表表示的位置

Outside 標識在內容之外  默認值

Inside  標識在內容之內

List-style  列表綜合屬性

wKioL1enS2SQm2cmAAAnbvLHuQw690.png-wh_50

1.外間距屬性margin

Margin-top

Margin-left

Margin-right

Margin-bottom

Margin:的使用方式

一個值的使用方式:

Margin: 上下左右

兩個值的使用方式:

Margin: 上下   左右

三個值的使用方式:

Margin:頂部   左右    底部

四個值的使用方式:

Margin:上  右   下  左

居中:margin: 上下值    auto  

wKioL1enTNHTiDPHAAAgJ3DleJc299.png-wh_50

2.padding  內間距/內補白

Padding-left

Padding-right

Padding-top

Padding-bottom

Padding的使用方式:

四個值的使用方式:頂部  右側   底部   左側

三個值的使用方式:上   左右    下

兩個值的使用方式:  上下   左右

一個值得使用方式:上下左右

wKiom1enTRXTynEHAAAPkVqdETs513.png-wh_50

佈局屬性

float  元素浮動屬性

left   元素左浮動

right  元素右浮動

none   元素不浮動

   一個元素設置了float屬性相當於一塊石頭變成了木頭,浮在水面上,水面之下是空白的,後面的元素可以再木頭之下存在。

注意:浮動之後的屬性不佔用物理空間。

所有浮動的元素,高度最好給給死。

clear  清除浮動

left  清除左浮動

right  清除右浮動

both   清除左右浮動

display 設置元素的顯示方式

none 將元素設置爲不顯示

block   將元素設置爲塊狀元素

inline  將元素設置爲行內元素

*inline-block 將元素設置爲行內塊狀元素(不要用來佈局)

overflow  設置元素的溢出方式

hidden   超出部分隱藏

scroll   超出部分出現滾動條

visible  超出部分顯示,默認值

visibility  設置元素是否顯示(極少使用)

hidden  隱藏元素

visible 顯示元素

wKiom1enT1biHKh_AAGwCK5KWJ4015.png-wh_50

wKiom1enT1aD3em4AAEEDk5YTV0722.png-wh_50




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章