前端菜鳥筆記 Day-5 CSS 高級

Tony_Zby 發布于2019-08-30 15:55 / 789人閱讀

摘要：絕對長度單位視輸出介質而定，不依賴于環境顯示器分辨率操作系統等。個人靜態博客氣泡的前端日記

文章大綱來源：【Day 5】CSS 高級

CSS 選擇器

CSS 拓展

CSS 單位

CSS 參考手冊

CSS 選擇器

內容引用：CSS 選擇器

元素選擇器

html { ... }

選擇器分組

h2, p { ... }

類選擇器

.important { ... }
p.warning  { ... }
.important.warning { ... }
/* 選擇同時擁有這兩個類名的元素 */

ID選擇器

#intro { ... }

屬性選擇器

a[href] { ... }
a[href][title] { ... }
a[href="..."] { ... }
p[class="important warning"] { ... }
/* 完全匹配的屬性內容 */
p[class~="important"] { ... }
/* 部分匹配的屬性內容 */

后代選擇器

h1 em { ... }

子元素選擇器

h1 > strong { ... }

相鄰兄弟選擇器

h1 + p { ... }

偽類

CSS 偽類用于向某些選擇器添加特殊的效果。

語法是selector : pseudo-class {property: value}。

a:link { color: #FF0000 }        /* 未訪問的鏈接 */
a:visited { color: #00FF00 }    /* 已訪問的鏈接 */
a:hover { color: #FF00FF }    /* 鼠標移動到鏈接上 */
a:active { color: #0000FF }    /* 選定的鏈接 */
p:first-child { font-weight: bold; }

CSS 拓展

內容引用：CSS 高級

水平對齊

使用margin:auto水平對齊

margin-left:auto;
margin-right:auto;

使用position左或右對齊

position:absolute;
right:0px;

使用float左或右對齊

float:right;

尺寸

height：元素高度

width：元素寬度

line-height：行高

max-height：最大高度

max-width：最大寬度

min-height：最小高度

min-width：最小寬度

CSS 單位

內容引用：CSS 單位

相對長度

指定了一個長度相對于另一個長度的屬性，對于不同的設備相對長度更適用。

em：相對于應用在當前元素的字體尺寸，一般瀏覽器字體大小默認為16px，則2em == 32px

ex：依賴于英文子母小 x 的高度

ch：數字 0 的寬度

rem：根元素（html）的 font-size

vw：viewpoint width，視窗寬度，1vw=視窗寬度的1%

vh：viewpoint height，視窗高度，1vh=視窗高度的1%

絕對長度

絕對長度單位是一個固定的值，它反應一個真實的物理尺寸。

絕對長度單位視輸出介質而定，不依賴于環境（顯示器、分辨率、操作系統等）。

cm：厘米

mm：毫米

in：英寸(1in = 96px = 2.54cm)

px：像素 (1px = 1/96th of 1in)

pt：point，大約1/72英寸； (1pt = 1/72in)

pc：pica，大約6pt，1/6英寸； (1pc = 12 pt)

CSS 參考手冊

使用時如果有疑問可以隨時查看【CSS 參考手冊】。

個人靜態博客：

氣泡的前端日記： https://rheabubbles.github.io

GPU云服務器云服務器高級程序設計-筆記 css高級高級css 高級前端

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117346.html

前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

mingzhong 2019-08-30 15:55 評論0 收藏0
前端菜鳥筆記 Day-3 CSS基礎

摘要：派生選擇器依據元素的位置關系來定義樣式。稱其為上下文選擇器，稱其為派生選擇器。在現在布局中，選擇器常常用于建立派生選擇器。和一樣，也可被用作派生選擇器。文章大綱來源：【Day 3】HTML復習 + CSS基礎初識CSS 入門CSS 初識CSS 層疊樣式表（Cascading Style Sheets），即前端常說的CSS。內容引用：CSS 簡介樣式解決了什么問題？ HTML...

DangoSky 2019-08-02 14:12 評論0 收藏0
前端菜鳥筆記 Day-4 CSS布局

摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創建浮動框可以使文本圍繞圖像。文章大綱來源：【Day 3】HTML復習 + CSS基礎 CSS框模型寬度和高度內邊距外邊距 CSS定位浮動 CSS框模型內容引用：CSS 框模型概述 CSS 框模...

go4it 2019-08-30 15:55 評論0 收藏0
前端菜鳥筆記 Day-4 CSS布局

摘要：元素框從文檔流完全刪除，并相對于其包含塊定位。簡單來說就是，元素不再占用任何文檔流的空間，只剩下相對于包含塊的定位顯示。行框和清理浮動框旁邊的行框會被縮短，使行框圍繞浮動框，所以創建浮動框可以使文本圍繞圖像。文章大綱來源：【Day 3】HTML復習 + CSS基礎 CSS框模型寬度和高度內邊距外邊距 CSS定位浮動 CSS框模型內容引用：CSS 框模型概述 CSS 框模...

Honwhy 2019-08-02 14:12 評論0 收藏0
Web前端開發學習推薦--菜鳥必看

Web前端開發是創建Web頁面或app等前端界面呈現給用戶的過程。第一階段：前端基礎（HTML / CSS / JavaScript / jQuery）初識HTML+CSS【學習筆記】HTML基礎完結篇html基礎知識——標簽詳解html基礎知識——與用戶交互!（表單標簽）html基礎知識——css樣式①史上最全Html和CSS布局技巧面試題匯總 HTML+CSS篇CSS 最核心的幾個概念純HTM...

JerryWangSAP 2019-08-02 15:21 評論0 收藏0