Web前端學習(二) CSS3

2021-10-23 04:39:11 字數 3778 閱讀 6769

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

設定字型的粗細

/*字型引用*/

@font-face

div

設定背景顏色:css列表屬性允許你放置、改變列表標誌,或者將影象作為列表項標誌 屬性

描述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 軸的 ...