響應式Web設計:HTML5和CSS3實戰(第2版)
第五章 CSS3 新特性
5.1 CSS能實現什么要心里有數
5.2 CSS 規則
5.3 CSS 技巧
- CSS 響應式多列布局
- 例子：
column-width: 12em;
- 固定列數，可變寬度：
.main{
column-count: 3;
}
+ 添加列間距和分隔線
.mian{
column-gap: 2em;
column-rule: thin dotted #999;
column-width: 12em;
}
5.4 斷字
- 如果要將一行很長的文字放入一個比較窄的容器內
- 在容器上加一個
word-wrap: break-word;
- 此時文字會在需要的地方拆開一個獨立的單詞，完成換行
- 截短文本
.main{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
- 創建水平滾動面板
- white-space: nowrap
- display: inline-block / inline-flex / inline-table
- :after 和 :before
- 為了能保證其能顯示，必須包含一個content，就算為' '空白也行
- 隱藏滾動條
.scroll-wrapper {
width: 100%;
white-space: nowrap;
overflow-x: auto;
overflow-y: hidden;
// 在webkit設備上出現
-webkit-overflow-scrolling: touch;
// 在支持的IE中刪除滾動條
-ms-overflow-style: none;
}
// 防止webkit瀏覽器出現滾動條
.scroll-wrapper::-webkit-scrollbar{
display: none;
}
- 此時空間有限時，就會出現水平滾動面板，否則會自適應
5.5 在CSS中創建分支
- 完全基于CSS
- 借助js庫，獲得廣泛兼容性
5.5.1 特性查詢
- 涵蓋不支持@support的設備，需要先寫好默認的聲明
.item{
display: inline-block;
}
@supports (display: flex;) {
.item{
display: inline-flex;
}
}
5.5.2 組合條件
@supports ((display: flex;) and (pointer: coarse)) or (transform: translate3d(0, 0, 0)) {
.item{
display: inline-flex;
}
}
5.5.3 Modernizr
- 實現分支的最可靠方式
- 在head中引入Modernizr.js
- 檢測特性后，會在html上加一些類
5.6 新CSS3選擇符
5.6.1 屬性選擇符
/*選擇包含alt屬性的img元素*/
img[alt]{
// ...
}
/*選擇包含‘data-sausage’的任何元素*/
[data-sausage]{
// ...
}
/*具體值屬性*/
img[alt="sausage"]{
// ...
}
5.6.2 CSS3子字符串匹配屬性選擇符
- 以。。。開頭
- ^=
<img alt="film-china" src="...">img[alt^="film"]{}
- 包含。。。
- *=
<p data-xxx="aa bb cc">...</p>p[data-xxx*="bb"]{}
- 以。。。結尾
- $=
<p data-xxx="aa bb cc">...</p>p[data-xxx$="cc"]{}
5.6.3 屬性選擇符發注意事項
- 對屬性選擇符來說，屬性是一個字符串
- 某兩個子字符串存在為依據選擇元素
[data-xxx*="aa"][data-xx*="bb"]{
...
}
5.6.4 屬性選擇符選擇以數值為開頭的ID & class
- H5之前，以數字開頭的ID & class是無效的
- H5之后允許了，但是ID中不能有空格
- 但css不允許使用以數值開頭的選擇符
- 用屬性選擇符可以繞開限制
5.7 CSS3 結構化偽類
5.7.1 last-child
- CSS2.1中有匹配第一子項的偽類：
div:first-child {}
- CSS3新添了匹配最后一個子項的偽類：
div:last-child {}
- 還有專門針對只有一項的選擇符 :only-child
p:only-child{...}- 將樣式應用于只有一個p元素的父元素
- Internet Explorer 不支持
5.7.2 nth-child
5.7.3 理解nth
- CSS3 提供了一下幾個基于nth的規則：
- nth-child(n)
- nth-last-child(n)
- nth-of-type(n)
- nth-last-of-type(n)
- 以上n有兩種形式
- 傳入整數
- 傳入表達式
- nth-child(2n+3) 會從第3項開始，然后每2個選1個
- nth-child(3n-2) 會從倒數第2項開始，然后每3個選1個
- nth-child(-2n-3) 先找到第三個的位置，向反方向每2個選1個
- n默認是1
- 區分標記類型的選擇符
- nth-of-type(n)
- nth-last-of-type(n)
-
.nav:nth-of-type(-2n+3) {...}
- 先找到類名為nav的元素集合的第三個位置，看tag為哪種，然后選擇目標就都是這種tag，反方向每2個選1個
- CSS中的索引不是從0開始，而是從1開始
5.7.4 nth與響應式開發的關聯
- 基于nth的偽類選擇符可以鏈式使用
-
.nav:nth-child(4n+1):nth-last-child(-n+4) {} 每4個選1個, 但僅限于最后4項
5.7.5 :not
- :not 為取反的選擇符，即“非。。。”
-
div:not(.list) {} 給所有不是list類的div添加樣式
5.7.6 :empty
- 如果有一個元素只添加了內邊距，但會在將來某個時刻動態插入或隱藏
- 可以用:empty來控制這個元素如果內容為空時，改變一些樣式
div .thing:empty { display: none;}
- 注意事項
5.7.8 :first-line
- 這個偽類選擇的第一行內容會根據視口大小不同而不同
p::first-line{color: red;}
5.8 CSS自定義屬性和變量
- :root偽類可以把自定義的屬性保存在文檔根元素上，調用的時候用var
- 首先：
:root{ --FontSize: 16px; }
- 然后調用
.main{ font-size: var(FontSize);}
5.9 計算屬性 calc
.thing{ width: calc(50% - 10px); }- 加減乘除都沒問題
- 除了安卓4.3及以下版本中的chrome，其他瀏覽器都支持
5.10 Web 排版
5.10.1 @font-face
- 一種字體為了兼容多個瀏覽器，會有多個格式的版本
- @font-face是為了應用在線字體顯示文本
5.10.2 運用
- 瀏覽器依次嘗試屬性列表中的樣式，忽略不能識別的內容
5.10.3 缺點
- 使用@font-face后 ，文件大小是個問題
- 字體大小會影響網站性能
5.12 CSS3 中的透明度新特性 （略）
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。
