圖解CSS3核心技術與案例實戰（1）

時間 2020-05-28

標籤圖解 css3 css 核心技術案例實戰欄目 CSS 简体版

原文原文鏈接

前言：css

我買了一本《圖解CSS3核心技術與案例實戰》大漠寫的，爲了提升本身的自覺性呢，抓緊看書，把讀書筆記放在這上面，跟你們一塊兒分享，也爲督促本身完成讀書計劃。html

文末有微信公衆號，感謝你的掃一掃關注···編程

第1章揭開CSS3的面紗

漸進加強：開發方式、Web設計理念瀏覽器

網站是否須要在每一個瀏覽器看起來同樣？微信

首先保持最核心的功能能實現，讓低端瀏覽器看到站點內容，而後考慮使用高級但非必要的CSS和JavaScript等加強功能，爲當前和將來的瀏覽器提供更好的支持，帶來用戶體驗。app

優雅降級：先考慮低端設備用戶可否看到全部內容，而後在此基礎之上爲高端用戶進行設計，不只爲高端設備用戶提供一個完美的應用，也要求爲不一樣性能級別設備的用戶設計不用級別的不那麼完美的應用。佈局

一、強大的CSS3選擇器性能

二、拋棄圖片的視覺效果字體

三、背景的變革動畫

四、盒模型變化

五、陰影效果

六、多列布局和彈性盒模型佈局

七、 Web字體和Web Font圖標

八、顏色和透明度

九、圓角和邊框的新法

一、盒模型的變形

二、CSS3過渡和動畫交互效果

三、媒體特性和Responsive佈局

背景漸變、圓角、文本框發光、陰影

第2章 CSS3選擇器

選擇器分類

一、基本選擇器

二、層次選擇器

三、僞類選擇器

一、動態僞類選擇器

二、目標僞類選擇器

三、語言僞類選擇器

四、 UI元素狀態僞類選擇器

五、結構僞類選擇器

六、否認僞類選擇器

四、僞元素

五、屬性選擇器

清除浮動經典方法

<style>

.clearfix:after , . clearfix:before{  display:table;content:」」  }

.clearfix:after{  clear:both;overflow:hidden  }

</style>

<ul class=’clearfix demo’>

         <li></li>

<li></li>

</ul>

class=’clearfix demo’

多類選擇器，經過>=2的類選擇器組合，來定義

層次選擇器

E F 後代選擇器匹配F被包含在E元素內

E>F 子選擇器匹配的F是E元素的子元素

E+F 相鄰兄弟選擇器匹配的F緊鄰E元素後

E~F 通用選擇器匹配的全部F位於E元素後

僞類選擇器

一、動態僞類選擇器

:link :visited :hover :active :focus

二、目標僞類選擇器

E :target F 選取連接的目標元素，提供樣式

手風琴效果、高亮顯示腳註、tabs效果、幻燈片效果、燈箱效果、相冊效果

(有一些使用js效果更佳)

三、語言僞類選擇器

多語言版本網站，不一樣字體風格

一、 HTML5

<!DOCTYPE HTML>

二、< html lang=’fr’>

英文版本

:lang(en)｛quotes:’ 」 ’ ‘ 」 ’;｝

:lang(en) q ｛background:red;｝

法文版本

:lang(fr)｛quotes:’ << ’ ‘ >> ’;｝

:lang(fr) q ｛background:green;｝

四、 UI元素狀態僞類選擇器

a) E:checked 選中狀態

b) E:enabled 啓用狀態

c) E:disabled 不可用狀態

五、結構僞類選擇器

a) E:first-child 等同 E:nth-child(1) 父元素的第一個子元素

b) E:last-child 等同 E:nth-last-child(1) 父元素的最後一個子元素

c) E:root 匹配元素E所在文檔的根元素html

d) E F:nth-child(n) 選擇父元素E的第n個子元素F

n=一、二、3 even odd 或者公式（2n+一、-n+5）

e) E F:nth-last-child(n) 選擇父元素E的倒數的第n個子元素F

f) E:nth-of-type(n) 選擇父元素內具備指定類型的第n個E元素

g) E:nth-last-of-type(n) 選擇父元素內具備指定類型的倒數第n個E元素

h) E:first-of-type 選擇父元素內具備指定類型的第一個E元素等同E:nth-of-type(1)

i) E:last-of-type 選擇父元素內具備指定類型的倒數一個E 等同E:nth-last-of-type(1)

j) E: only-child 選擇父元素只包含一個子元素，且子元素匹配E

k) E: only-of-type 選擇父元素只包含一個同類型子元素，且子元素匹配E

l) E: empty 選擇沒有子元素的元素，且元素不含文本節點

六、否認僞類選擇器

E:not(F) 匹配全部除元素F之外的E元素

.gallery:hover li:not(:hover)｛｝

僞元素

::first-letter{} 下沉字母或者首字母

::first-line{} 匹配第一行文字

::before{} ::after{}

不是指存在於標記內的內容

而是能夠插入額外內容的位置，不會成爲DOM部分

設置頁面上全部外部連接以後的括號中附加他們指向的URL

a[href^=http]::after{

content=」 (「 attr(href) 」) 」;

}

用於連接添加icon效果

@font-face

::selection 匹配突出選中文本 background && color

屬性選擇器

E[attr] 選擇匹配具備屬性attr的E元素，E也能夠省略，表示定義了attr屬性的任意類型

E[attr=val]

E[attr|=val] 匹配val、val開頭

E[attr~=val] 字符串、單詞匹配

E[attr*=val] val在實際val的截取以內

E[attr^=val] 匹配val開頭

E[attr$=val] 匹配val結尾

^匹配起始符 $匹配終止符 *匹配任意字符

分享一下個人微信公衆號，分享攝影與編程，謝謝你們的關注

原文出處：https://www.cnblogs.com/huihappy/p/10732933.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。