css層疊樣式表

2021-09-14 02:43:14 字數 1994 閱讀 3774

如何定義?

在html文件的head中新增style標籤,樣式定義其中。

樣式分選擇器樣式規則兩個部分;

使用link標籤匯入外部的css:

選擇器:

1、標籤選擇器:作用範圍,當前頁面中所有的該型別的標籤

2、類選擇器:

a、定義,使用點操作符進行定義,類名在點後,沒有空格,如「.bule」

b、應用,為應用該類樣式的標籤中新增class屬性,值為該類,注意類名沒有點。 如class=「bule」

3、id選擇器:id值唯一,人為控制

a、定義,使用#+元素的id值,注意#和id值之間沒有空格

選擇器優先順序:

id選擇器 > 類選擇器 > 標籤選擇器

4、後代選擇器

a、定義:

在父標籤中加入子標籤。

b、應用: 表示在父標籤中的所有子標籤都應用該樣式。

例如:li a

li:hover a

字型

font-size:大小,單位px,還有其他如em、rem、%

font-weight:粗體,100-900,bold,bolder,lighter

font-style:是否斜體

font-family:字型庫

coloer:顏色

opacity:透明度,0-1

文字:

line-height:行高,用於設定文字在容器中垂直居中,值為容器的高度值

text-align: 設定文字在容器中水平對齊方式,left/center/right

overflow:溢位,用於設定當內容大於容器時,如何顯示

white-space:nowrap 當文字大於容器時,設定不換行

text-decoration:none 去掉超連結中下劃線

text-indent:縮排

letter-spacing:字元間距

背景屬性:

background-color:背景色

background-image: url("../imgage/dn.jpg");背景,優先順序高於背景色

background-repeat:no-repeat;當容器大於背景時,背景的重複方式預設為x,y都平鋪

background-position:背景的位置,預設起始點為容器的左上角,即(0,0)點。

座標系說明:容器的左上角為原點(0,0)

水平向右為x的正軸,向左為x的負軸

垂直向下為y的正軸,向上位y的負軸

主要利用背景偏移進行截圖展示,css spritrs

要點:

1、容器的大小,要正好能夠容納要展示的

2、正確計算偏移量,偏移量為座標(x,y)

3、提取重複的css,單獨成為乙個類樣式,然後針對每個圖示編寫對應的背景偏移css類

4、在對應的容器內使用公共的類和專有的類 比如:class=「bg icon1」

列表樣式:

list-style:設定列表的樣式,最常見的值是none,即取消列表的符號或序號,該屬性可應用到ul/ol/li上,建議使用在ul/ol上。

選擇奇數或偶數的標籤進行操作

li:nth-child(2n-1)

超連結的4種狀態:

a:link:未訪問的狀態;

a:visited:已訪問的狀態;

a:hover:滑鼠懸浮狀態;

a:active:啟用狀態;

注意書寫順序:link -- visited -- hover -- active

其他元素可以使用的狀態為: hover active

CSS層疊樣式表

一般說來所有樣式有下面的規則 第四個最有優先性 1 browser default 瀏覽器預設 2 external style sheet 外部樣式表 3 internal style sheet inside the 瀏覽器將從mystyle.css檔案中讀採樣式定義資訊,並根據它來格式化文件 ...

CSS(層疊樣式表)

一.css是增加html的樣式,擁有對網頁物件和模型樣式編輯的能力 1 在html中引入css有3種方式 1.外部樣式表 2.內部樣式表 3.內聯樣式表 2 css選擇元素的方式 1.元素選擇器 通過元素名字進行選擇 2.id選擇器 3.class選擇器 4.子元素選擇器 5.相鄰選擇器 如果需要選...

CSS層疊樣式表

html主要控制內容 css主要控制格式。樣式表是用來指定樣式資訊的句法機制。之所以將css稱為層疊樣式表,是因為它可以在3個層次上進行定義。內聯樣式表位於開始標籤中,其設定只對該元素起作用 文件樣式表位於文件的頭部區域,能夠作用於文件的整個主體。文件樣式表的說明是作為乙個 3.通用選擇器 不管什麼...