CSS3-其它特性
1. web
字型和字型圖示
1.1 web
字型
概述:
使用者電腦上沒有安裝相應字型
,強制讓使用者下載該字型(瀏覽器臨時性自動下載網頁編寫者給定在CSS
中的字型檔案)
步驟:
-
提供需要
生成字型
的字型檔案內容
-
使用網路資源生成
web字型
,然後下載並解壓到本地;如阿里巴巴icofont字型圖示網站
-
把解壓的字型檔案複製到,專案的
font資料夾
中 -
把下載到的字型程式碼複製到
css檔案中
/*程式碼格式:*/
@font-face{
font-family:"字型名";
src:url("字型檔案路徑");
}
/*注:因為字型檔案放在font資料夾中,所有一定要更改程式碼裡面的路徑,一般前面加上 ./font/*/
- 建立
類樣式
,並把類樣式新增給需要的元素
.myFont{
font-family:iconfont;
}
1.2 字型圖示
概述:
常見的是把網頁常用的一些小的圖示,藉助工具幫我們生成一個字型包,然後就可以像使用文字一樣使用圖示了
步驟
-
使用網路資源找到需要的字型圖示,然後下載並解壓到本地;如
阿里巴巴icofont字型圖示網站
-
把解壓的字型檔案複製到,專案的
font資料夾
中 -
把下載到的字型程式碼複製到
css檔案
中
/*程式碼格式:*/
@font-face{
font-family:"iconfont";
src:url("字型檔案路徑");
}
/*注:因為字型檔案放在font資料夾中,所有一定要更改程式碼裡面的路徑,一般前面加上 ./font/*/
- 建立
類樣式
,並把類樣式新增給需要的元素
.myFont{
font-family:iconfont;
}
- 給需要字型圖示的
元素
,生成一個偽元素
,設定字型圖示
.myFont::before{
/*把16進位制的字型編碼""寫成以下格式*/
content:"\e620";
/*可以自由新增字型樣式 */
font-size:20px;
....
}
2. 多列布局(文字)
概述:
CSS3
中新出現的多列布局(multi-column)
是傳統HTML
網頁中塊狀佈局模式
的有力擴充。這種新語法能夠讓WEB
開發人
員輕鬆的讓文字呈現多列顯示
。
常用屬性(設定多列布局):
1. column-count: 屬性設定列的具體個數
如:column-count:3;
注:會根據列的個數均分元素空間
2. column-width: 屬性控制列的寬度
如: column-width:200px;
注意:a).當指定了列的個數和寬度時,原則上取大優先
b).如果設定的寬度更大,則取寬度,用元素總寬度/設定的寬度,重新生成列數,
c).但是會填充整個元素,意味最終的寬度可能會大於設定的寬度
d).如果設定的寬度小於生成列數形成的寬度,則使用列數生成的寬度
3. column-gap: 兩列之間的縫隙間隔
column-gap:50px;
4. column-rule: 規定列之間的寬度、樣式和顏色,與設定邊框樣式一樣
column-rule: 1px dashed #000;
5. column-span: 規定元素應橫跨多少列,只有兩個引數:1(1列)、all(跨所有列)
一般如文字標題,放在最頂部,橫跨所有列
3. CSS3 新增的的計算屬性
calc()
是css3的一個新增的功能,用來指定元素的長度。calc()
可以元素的border、margin、pading、font-size和width等屬性設定動態值.wrappers { height: calc(100% - 93px); } // 這裡的 100% 相對於父元素,calc 方法內部可以做計算,注意運算子兩邊要留一個空格
4. vh 單位
- vh 是相對於視口的單位
.wrappers { height: 100vh; } // 100vh 表示,相對於視口的 100%
5. 圖片模糊
filter
屬性將模糊或顏色偏移等圖形效果應用於元素filter: blur(5px) // blur模糊處理,值越大越模糊
6. calc()函式
calc()
計算屬性值width: calc(100% - 80px) // 運算子兩邊留空格
相關文章
- [C++]類的其它特性C++
- rman備份的其它特性
- CSS3-背景篇CSSS3
- 使用者、組及其它 Linux 特性(二)Linux
- 01、CSS3-選擇器CSSS3
- CSS3-彈性佈局篇CSSS3
- CSS3-過渡、變形、動畫CSSS3動畫
- CSS3-陰影引數基礎CSSS3
- 其它 ObjectObject
- 其它事件事件
- 其它知識
- PostgreSQL:其它型別SQL型別
- C語言的本質(21)——預處理之三:其它預處理特性及總結C語言
- Oracle OCP(26):其它ObjectOracleObject
- 微信小程式使用其它字型微信小程式
- Oracle備份的其它手段Oracle
- Oracle OCP(31):USER & ROLE & PRIVILEGE 其它Oracle
- 【Mysql】Mysql線上安裝其它引擎MySql
- Oracle其它情況的恢復Oracle
- Request Headers 的其它 fields 值Header
- Kerberos ticket lifetime及其它ROS
- LINUX(十七)Linux其它命令Linux
- inv與其它模組的關系
- Statspack之九-其它重要指令碼指令碼
- 常用CSS樣式2:其它樣式CSS
- 針對IE及其它的css hackCSS
- java學習:Java中的其它類Java
- 從java程式中呼叫其它程式 (轉)Java
- Linux(08):網路配置檔案——其它Linux
- 【目錄】日常工具與其它文章目錄
- 1.6 常用CSS樣式2:其它樣式CSS
- 使用 Moq 測試.NET Core 應用 -- 其它
- 07HTML基礎-meta其它型別HTML型別
- create table之storage選項initial和其它
- level 的其它用法實現loop功能OOP
- 12、Oracle中的其它資料庫物件Oracle資料庫物件
- 好程式設計師web前端培訓分享之HTMLCSS學習筆記css3-多列程式設計師Web前端HTMLCSS筆記S3
- loading動畫的效能優化-摒棄Canvas,擁抱CSS3-實現點選特效動畫優化CanvasCSSS3特效