1. 程式人生 > >css學習記錄

css學習記錄

#背景塊: #background: url(…/img/4.jpg)no-repeat; url路徑(…/)當前目錄 使用相對路徑 no-repeat:使影象將只顯示一次 #background-size: cover; 規定影象尺寸:把背景影象擴充套件至足夠大,以使背景影象完全覆蓋背景區域。 #-webkit/moz/o/ms-background-size: cover; 當背景圖太大,而螢幕太小時,頁面無法將圖片顯示完全。使用background-size, 這個可以設定圖片的寬度與高度,寬度一般是百分號,而高度用px。 #background-attachment: fixed; background-attachment 屬性設定背景影象是否固定或者隨著頁面的其餘部分滾動。 可能的值 作用 scroll 預設值。背景影象會隨著頁面其餘部分的滾動而移動。 fixed 當頁面的其餘部分滾動時,背景影象不會移動。 inherit 規定應該從父元素繼承 background-attachment 屬性的設定。 #background-position: center; 設定背景影象的起始位置 居中 #font-family: ‘Open Sans’, sans-serif; font-family:規定元素的字體系列。 可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型,則會嘗試下一個 #邊框: #margin-bottom 設定元素的下外邊距。 #padding-top 設定 p 元素的上內邊距 #font-size 設定不同的 HTML 元素的尺寸 #border-radius 新增圓角邊框: #letter-spacing 設定h1與h2元素的字型間距 #font-weight 設定文字的粗細 定義由粗到細的字元100——900。400 等同於 normal,而 700 等同於 bold。 #text-transform 控制文字的大小寫。 none 預設。定義帶有小寫字母和大寫字母的標準的文字。 capitalize 文字中的每個單詞以大寫字母開頭。 uppercase 定義僅有大寫字母。 lowercase 定義無大寫字母,僅有小寫字母。 inherit 規定應該從父元素繼承 text-transform 屬性的值。

#text-align 規定元素中的文字的水平對齊方式。 left 把文字排列到左邊。預設值:由瀏覽器決定。 right 把文字排列到右邊。 center 把文字排列到中間。 justify 實現兩端對齊文字效果。 inherit 規定應該從父元素繼承 text-align 屬性的值。 #text-shadow: 4px 5px 8px #101010; 向文字設定陰影 h-shadow 必需。水平陰影的位置。允許負值。 v-shadow 必需。垂直陰影的位置。允許負值。 z-shadow z軸 blur 可選。模糊的距離。 color 可選。陰影的顏色。參閱 CSS 顏色值。 #text-decoration 這個屬性允許對文字設定某種效果,如加下劃線。 none 預設。定義標準的文字。 underline 定義文字下的一條線。 overline 定義文字上的一條線。 line-through 定義穿過文字下的一條線。 blink 定義閃爍的文字。 inherit 規定應該從父元素繼承 text-decoration 屬性的值。 #box-shadow 向框新增一個或多個陰影。 h-shadow 必需。水平陰影的位置。允許負值。 v-shadow 必需。垂直陰影的位置。允許負值。 blur 可選。模糊距離。 spread 可選。陰影的尺寸。 color 可選。陰影的顏色。請參閱 CSS 顏色值。 inset 可選。將外部陰影 (outset) 改為內部陰影。 #font-family font-family 規定元素的字體系列。font-family 可以把多個字型名稱作為一個“回退”系統來儲存。如果瀏覽器不支援第一個字型,則會嘗試下一個。 font-family: ‘Play’, sans-serif;

#字型

#letter-spacing 增加或減少字元間的空白(字元間距)。 letter-spacing: 1px;

#HTML

#transition 例項 div { width:100px; transition: width 2s; -moz-transition: width 2s; /* Firefox 4 / -webkit-transition: width 2s; / Safari 和 Chrome / -o-transition: width 2s; / Opera */ } 把滑鼠指標放到 div 元素上,其寬度會從 100px 逐漸變為 300px: #placeholder placeholder 屬性提供可描述輸入欄位預期值的提示資訊(hint)。 該提示會在輸入欄位為空時顯示,並會在欄位獲得焦點時消失。 placeholder(Username) 輸入框內會顯示Username 並在獲取到欄位會消失 #required 屬性規定必需在提交之前填寫輸入欄位。 required 屬性適用於以下 型別:text, search, telephone,email, password, date pickers, number, checkbox, radio 以及 file。 required(’’)可以為空

#outline outline (輪廓)是繪製於元素周圍的一條線,位於邊框邊緣的外圍,可起到突出元素的作用。 outline-color 規定邊框的顏色。 outline-style 規定邊框的樣式。 outline-width 規定邊框的寬度。 outline: none 不設定輪廓 #cursor 規定要顯示的游標的型別(形狀)。可以定義滑鼠指標放在一個元素邊界範圍內時所用的游標形狀 default 預設游標(通常是一個箭頭) auto 預設。瀏覽器設定的游標。 crosshair 游標呈現為十字線。 pointer 游標呈現為指示連結的指標(一隻手) move 此游標指示某物件可被移動。 e-resize 此游標指示矩形框的邊緣可被向右(東)移動。 ne-resize 此游標指示矩形框的邊緣可被向上及向右移動(北/東)。 nw-resize 此游標指示矩形框的邊緣可被向上及向左移動(北/西)。 n-resize 此游標指示矩形框的邊緣可被向上(北)移動。 se-resize 此游標指示矩形框的邊緣可被向下及向右移動(南/東)。 sw-resize 此游標指示矩形框的邊緣可被向下及向左移動(南/西)。 s-resize 此游標指示矩形框的邊緣可被向下移動(南)。 w-resize 此游標指示矩形框的邊緣可被向左移動(西)。 text 此游標指示文字。 wait 此游標指示程式正忙(通常是一隻表或沙漏)。 help 此游標指示可用的幫助(通常是一個問號或一個氣球)。