css樣式
css定位
css3盒子模型
css常用操作
屬性選擇器
selector
eg:h1
p
h1,h2, h3, h4, h5, h6
屬性body
描述background-attachment
背景影象是否固定或者隨著頁面的其餘部份滾動
background-color
設定元素的背景顏色
background-image
把設定為背景
background-position
設定背景的其實位置
background-repeat
設定背景是否及如何重複
background-size
規定背景的尺寸
background-origin
規定背景的定位區域
background-clip
規定背景的繪製區域
屬性描述
color
文字顏色
direction
文字方向
line-height
行高text-align
對齊元素中的文字
letter-spacing
字元間距
text-decoration
向文字新增修飾
text-indent
增進元素中文字的首行
text-transform
元素中的字母
unicode-bidi
設定文字的方向
white-space
元素中空白的處理方式
word-spacing
字間距
字型屬性定義文字的字型系列、大小、加粗、風格和變形屬性描述
font-family
設定字型系列
font-size
設定字型尺寸
font-style
設定字型風格
font-variant
以小型大寫字型或正常字型顯示文字
font-weight
設定字型的粗細
設定背景顏色:css列表屬性允許你放置、改變列表標誌,或者將影象作為列表項標誌 屬性/*字型引用*/
@font-face
div
描述list-style
簡寫列表項
list-style-image
列表項影象
list-style-position
列表標誌位置
list-style-type
列表型別
1:css**
2:摺疊邊框
3:**邊框
4:**寬度
5:**文字對齊
6:**內邊距
7:**顏色
突出元素的作用屬性
描述outline
設定輪廓屬性
outline-color
設定輪廓的顏色
outline-style
設定輪廓的樣式
outline-width
設定輪廓的寬度
css定位屬性
屬性描述
position
把元素放在乙個靜態的、相對的、絕對的、或固定的位置中
top元素向上的偏移量
left
元素向左的偏移量
right
元素向右的偏移量
bottom
元素向下的偏移量
overflow
設定元素溢位區域發生的事情
clip
設定元素顯示的形狀
vertical-align
設定元素垂直對齊方式
z-index
設定元素的堆疊順序
浮動:
float 屬性可用的值:
clear屬性:
屬性描述
padding
設定所有邊距
padding-bottom
設定底部邊距
padding-left
設定左邊距
padding-right
設定有邊距
padding-top
設定上邊距
邊框的樣式 border-style:定義了10個不同的非繼承樣式,包括none
邊框的單邊樣式:
css3邊框:
屬性描述
margin
設定所有邊距
margin-bottom
設定底邊
margin-left
設定左邊距
margin-right
設定右邊距
margin-top
設定上邊距
初步復原還ok屬性
描述height
設定元素高度
line-height
設定行高
max-height
設定元素最大高度
max-width
設定元素最大寬度
min-width
設定元素最小寬度
min-height
設定元素最小高度
width
設定元素寬度
屬性描述
clear
設定乙個元素的側面是否允許其它浮動元素
cursor
規定當指向某元素之上時顯示的指標型別
display
設定是否及如何顯示元素
float
定義元素在哪個方向浮動
position
把元素放置到乙個靜態的、相對的、絕對的、固定的位置
visibility
設定元素是否可見或不可見
前端學習 Css3動畫入門
在css3中,用 keyframes 規則來定義動畫的。可以看到,在ie10以前的版本是不相容css3動畫的,而且特定的瀏覽器需要使用特定的字首來讓瀏覽器支援動畫效果。所以使用css3動畫需要考慮一下瀏覽器相容的問題。下面是乙個動畫定義的例子。keyframes circle 100 以上使用的都是...
Web前端開發 CSS3之3D變換
2d變換僅是在電腦螢幕平面的變換,而3d變換則是空間三個方向的變換,可以是單個方向,也可以三個方向組合,3d變換用的也是transform屬性,不同的是rotate 要加上單個方向的軸系如rotatex 同時在3d變換時需要使用transform style屬性宣告使用的是 3d變換,為了讓視覺更好...
《前端》css3動畫效果
語法 transform none transform functions translatex x 定義轉換,只是用 x 軸的值。translatey y 定義轉換,只是用 y 軸的值。translatez z 定義 3d 轉換,只是用 z 軸的值。rotatex angle 定義沿著 x 軸的 ...