如何定義?
在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.通用選擇器 不管什麼...