CSS基本屬性及sprite圖像拼合技術

時間 2019-11-17

標籤 css 基本屬性 sprite 圖像拼合技術欄目 CSS 简体版

原文原文鏈接

CSS基本屬性：css

文本html

文字第一行縮進：text-indent：20px ;
字間距：letter-spacing：20px;
詞間距：word-spacing：20px;
行高：line-height。他能夠使數字、百分比、normal。
文本對齊：text-align。他的值能夠是：left、center、right、justify（兩端對齊）。
垂直對齊：vertical-align：top、middle、bottom。
text-shadow：水平值、垂直值、模糊半徑、顏色。解釋：在已設置的水平值和垂直值爲中心處的樣式。

背景：background-color， background-image:url(), background-repeat: repeat, no-repeat, repeat-x, repeat-y
background-attachment

　　　　a) scroll 背景圖片隨着頁面的其他部分滾動web

　　　　b) no 背景圖固定post

　　　　c) fixed動畫

background-postion

　　　　a) top 上url

　　　　b) right 右spa

　　　　c) bottom 下設計

　　　　d) left 左orm

background-size

　　　　a) 高度百分比（若是隻設置一個值，第二個被默認爲auto）htm

　　　　b) 百分比以父元素的百分比來設置高度

　　　　c) cover：把背景圖擴展到足夠大徹底覆蓋背景區域，超出部分會被隱藏

　　　　d) contain：把背景圖片擴展到最大尺寸使其高度徹底適應內容區域。

background-image:url();將自定義圖片設爲背景。
簡寫順序 background：{ background-color background-image background-repeat background-attachment background-postion }

列表

list-style:none;去除圓點
list-style-image:url(); 插入自定義圖標
list-style-type：

　　　　a) circle 空心圓

　　　　b) square 方塊

　　　　c) lower-roman 小寫羅馬字符

　　　　d) upper-roman 大寫羅馬字符

　　　　e) lower-alpha 小寫英文字母

　　　　f) upper-alpha 大寫由於字母

表格

border-collapse: collapse; 設置表框線只有一根。

　　2. cursor:pointer; 將鼠標設置爲手型。

線性漸變

background:linear-gradient(right,red,yellow); //背景顏色線性變換,三個值的含義分別爲：方向，開始顏色，結束顏色。
background:linear-gradient(red,yellow);
background:linear-gradient(to right,red,yellow);//背景從左到右變換，顏色由紅變黃。
background:linear-gradient(to right bottom,red,yellow);//背景從右下角到左上角變換，顏色由紅變黃。
–webkit-transform:all 5s linear; //顏色每間隔5秒。
–webkit-animation:name 5s linear infinite。　@keyframe name{ from{}to{}} //樣式從from變爲to…

Transform、Transition、Animation之間的區別：

　　Transform：對元素進行變形；
　　Transition：對元素某個屬性或多個屬性的變化，進行控制（時間等），相似flash的補間動畫。但只有兩個關鍵貞。開始，結束。
　　Animation：對元素某個屬性或多個屬性的變化，進行控制（時間等），相似flash的補間動畫。能夠設置多個關鍵貞。

圖片整理技術（Sprite圖）

　　CSS sprite 是一種圖片的處理方式，它容許網頁設計師將不少張圖片合併在同一張圖檔中，而後根據 CSS 檔中的文字描述將圖檔分區塊加載。如在一個div裏，你能夠設置在網頁上顯示這張圖檔中的某個區域的圖片，而後根據用戶的操做或選擇改變在這個區域內顯示的圖片以及其餘樣式。其CSS樣式示例代碼以下：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>雪碧圖練習</title>
    <link rel="stylesheet" href="testSprite.css"/>
	<style>
		.divClass{
			width:90px;
			height:100px;
			background-image:url("images/1.png");
			background-size:500px 800px;
		}
		.divClass:hover{
			width:80px;
			height:100px;
			background-image:url("images/1.png");
			background-size:500px 800px;
			background-position:-50px 0;  //-50表示右邊的圖向橫座標左移動50px而縱座標上保持不變
			cursor:pointer;
		}
	</style>

</head>
<body>
    <div class="divClass"></div>
</body>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。