html css 前端學習筆記2

2021-10-10 05:30:09 字數 2747 閱讀 8499

css3去相容不同的瀏覽器,針對舊的瀏覽器做相容

新瀏覽器基本不需要新增字首。

98%的**就按正常標準寫就可以了

2%需要相容性處理

transition是以下四個屬性的復合寫法格式:

transition-property : 規定設定過渡效果的css屬性的名稱。

transition-duration : 規定完成過渡效果需要多少秒或毫秒。

transition-delay : 定義過渡效果何時開始。 ( 延遲(數值為正數),也可以提前(數值為負數) )

transition-timing-function : 規定速度效果的速度曲線。

注:不要加到hover上。

應用例項

animation-name : 設定動畫的名字 (自定義的)

animation-duration : 動畫的持續時間

animation-delay : 動畫的延遲時間

animation-iteration-count : 動畫的重複次數 ,預設值就是1 ,infinite無限次數

animation-timing-function : 動畫的運動形式

注: 1. 運動結束後,預設情況下會停留在起始位置。

2. @keyframes : from -> 0% , to -> 100%

none (預設值) : 在運動結束之後回到初始位置,在延遲的情況下,讓0%在延遲後生效

backwards : 在延遲的情況下,讓0%在延遲前生效

forwards : 在運動結束的之後,停到結束位置

both : backwards和forwards同時生效

alternate : 一次正向(0%~100%),一次反向(100%~0%)

reverse : 永遠都是反向 , 從100%~0%

normal (預設值) : 永遠都是正向 , 從0%~100%

一款強大的預設css3動畫庫。

基本使用:

animated : 基類(基礎的樣式,每個動畫效果都需要加)

infinite : 動畫的無限次數

transform:

rotatex() : 正值向上翻轉

rotatey() : 正值向右翻轉

translatez() : 正值向前,負值向後

scalez() : 立體元素的厚度

3d寫法

scale3d() : 三個值 x y z

translate3d() : 三個值 x y z

rotate3d() : 四個值 0|1(x軸是否新增旋轉角度) 0|1(y軸是否新增旋轉角度) 0|1(z軸是否新增旋轉角度) deg

perspective(景深): 離螢幕多遠的距離去觀察元素,值越大幅度越小。

perspective-origin : 景深-基點位置,觀察元素的角度。

transform-origin: center center -50px; (z軸只能加粗樣式寫數值,不能寫單詞)

transform-style : 3d空間

flat (預設值2d)、preserve-3d (3d,產生乙個三維空間)

backface-visibility : 背面隱藏

hidden、visible (預設值)

background-size : 背景圖的尺寸大小

cover : 覆蓋

contain : 包含

background-origin : 背景圖的填充位置

padding-box (預設)

border-box

content-box

background-clip : 背景圖的裁切方式

padding-box

border-box (預設)

content-box

注:復合樣式的時候,第乙個是位置,第二個是裁切

1. 線性漸變 -> linear-gradient是值,需要新增到background-image屬性上

注:漸變的0度是在頁面在下邊,正值會按照順時針旋轉,負值按逆時針旋轉。

2. 徑向漸變 -> radial-gradient

font-face是css3中的乙個模組,他主要是把自己定義的web字型嵌入到你的網頁中。

好處:1.可以非常方便的改變大小和顏色

font-size color

2.放大後不會失真

3.減少請求次數和提高載入速度

4.簡化網頁布局

5.減少設計師和前端工程師的工作量

6.可使用計算機沒有提供的字型

使用: @font-face語法

像.woff等檔案都是做相容平台處理的, mac、linux等。

HTML CSS學習筆記(2)

中寫入可以構成乙個無序列表,而在中寫入構成的是乙個有序列表 絕不考慮使用table,橫向布局用帶有float的div或li取代td。當然,如果要展現的就是 肯定得用table 其實asp.net的時候,基本都用table布局的 慎用ul li,當有重複單元時可使用ul li,沒有重複的單元就別用ul...

HTML CSS 學習筆記(2)

html hyper text markup language 是一種超文字標記語言。網頁所有的內容均書寫在標籤內部,標籤是組成html頁面的基本元素,因此對標籤特性的理解在html的學習過程中比較重要。一 標籤可分為 閉合標籤和空標籤 閉合標籤 指由開始標籤和結束標籤組成的一對標籤,這種標籤允許巢...

HTML CSS學習筆記

利用標籤中style屬性來改變每個標籤的顯示樣式 適用於單個標籤的樣式修改。不靈活 this is p tag 內嵌形式 可用於同類標籤的樣式統一修改 依然不夠靈活 表示後面的所有table中的文字預設顏色如我所設定。前提是已經存在乙個定義好的css檔案,網頁的一部分樣式需要用到,那麼可以採用這種方...