Css概要與選擇器，刻度單位
web前端開發者最最注的內容是三個：HTML、CSS與JavaScript，他們分別在不一樣方面發揮本身的做用，HTML實現頁面結構，CSS完成頁面的表現與風格，JavaScript實現一些客戶端的功能與業務。固然內容與用戶資源也是不能忽視的。儘可能不要跨職責範圍使用，有點「SRP單一職責」的意思，如字體大小應該是CSS控制的，就不該該使用HTML標籤完成，若是CSS能解決的問題儘可能不要用JavaScript完成。css
1、CSS3概要
CSS（Cascading Style Sheet）是層疊樣式表的意思，CSS3就是在CSS2.1的基礎上升級的CSS新版本，屬於HTML5的一部分。它能夠有效地對頁面的佈局、字體、顏色、背景、動畫和其它效果實現。CSS3是CSS技術的升級版本，CSS3語言開發是朝着模塊化發展的。之前的規範做爲一個模塊實在是太龐大並且比較複雜，因此，把它分解爲一些小的模塊，更多新的模塊也被加入進來。這些模塊包括： 盒子模型、列表模塊、超連接方式 、語言模塊 、背景和邊框 、文字特效 、多欄佈局等。html
1.一、特色
1.二、效果演示
純CSS3畫出小黃人並實現動畫效果前端
HTML頁面：java
View Code
CSS樣式：git
View Code
相冊演示的代碼能夠在示例中下載到。github
1.三、幫助文檔與學習
權威的幫助文檔是最好的學習資料，CSS2的幫助，很是詳細：web
CSS3的幫助文檔：算法
點擊下載幫助文檔chrome
2、選擇器
在使用CSS時咱們首先要作的事情是找到元素，在寫相應的樣式，在CSS2.1中最常使用的是三種選擇器：
a)、ID選擇器：以#開始，引用時使用id，如id="div1"
#div1
{
color:red;
}
b)、類選擇器：以.開始，使用class屬性引用，能夠有多個，如class="cls1 cls2 cls3"
.cls1
{
}
c)、標籤選擇器：以標籤名稱開始，如p,span,div,*
div span
{
font-size:14px;
}
固然還有如僞類選擇，a:hover，a:link，a:visted，a:active。
在CSS3中新增了不少的選擇器，若是你們會jQuery，jQuery中多數選擇器在CSS3中均可以直接使用。
1.一、基礎的選擇器
紅色字體中選擇器的區別是：p.info的意思是p元素中必須有class="info"屬性將被選擇，p .info是選擇後代元素，示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選擇器</title>
<style type="text/css">
p.info{
color: red;
}
p .info{
color: blue;
}
</style>
</head>
<body>
<h2>選擇器</h2>
<p class="info">p1</p>
<p>
<span class="info">span1</span>
<p>p3</p>
</p>
</body>
</html>
運行結果：
1.二、組合選擇器
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>組合選擇器</title>
<style type="text/css">
#div1 span
{
color: red;
}
</style>
</head>
<body>
<h2>組合選擇器</h2>
<div id="div1">
<span>span1</span>
<div id="div2">
<span>span2</span>
</div>
</div>
<span>span3</span>
</body>
</html>
運行結果：
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>組合選擇器</title>
<style type="text/css">
#div1 > span
{
color: red;
}
</style>
</head>
<body>
<h2>組合選擇器</h2>
<div id="div1">
<span>span1</span>
<div id="div2">
<span>span2</span>
</div>
</div>
<span>span3</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>組合選擇器</title>
<style type="text/css">
#div1 + span
{
color: red;
}
</style>
</head>
<body>
<h2>組合選擇器</h2>
<div id="div1">
<span>span1</span>
<div id="div2">
<span>span2</span>
</div>
</div>
<span>span3</span>
<span>span4</span>
</body>
</html>
1.三、屬性選擇器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>屬性選擇器</title>
<style type="text/css">
div[id][class~=cls1] {
background: lightgreen;
}
</style>
</head>
<body>
<h2>組合選擇器</h2>
<span>span0</span>
<div id="div1" class="cls1">
div1
</div>
<div id="div2" class="cls1 cls2">
div2
</div>
</body>
</html>
運行結果：
1.四、僞類
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>僞類</title>
<style type="text/css">
td:first-child
{
background: lightcoral;
}
</style>
</head>
<body>
<h2>組合選擇器</h2>
<table border="1" width="100%">
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
<hr />
<table border="1" width="100%">
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
<tr>
<td> </td><td> </td><td> </td><td> </td><td> </td><td> </td>
</tr>
</table>
</body>
</html>
運行結果：
練習：實現隔行換色，當鼠標懸停在每一行上時高亮顯示爲黃色，按下時高亮紅色。
<style type="text/css">
tr:nth-child(2n+1){
background:lightblue;
}
tr:hover{
background: yellow;
}
tr:active{
background: orangered;
}
</style>
1.五、僞元素
標準的僞元素應該使用::，但單:也行，只是爲了兼容。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>僞類</title>
<style type="text/css">
a::before {
content: "網站";
display: inline-block;
background: red;
color: white;
}
</style>
</head>
<body>
<h2>僞元素</h2>
<a href="http://www.baidu.com">百度</a>
<a href="http://best.cnblogs.com">博客園</a>
</body>
</html>
運行結果：
3、特殊性（優先級）
a)、同類型，同級別的樣式後者先於前者
b)、ID > 類樣式 > 標籤 > *
c)、內聯>ID選擇器>僞類>屬性選擇器>類選擇器>標籤選擇器>通用選擇器(*)>繼承的樣式
d)、具體 > 泛化的，特殊性即css優先級
e)、近的 > 遠的 (內嵌樣式 > 內部樣式表 > 外聯樣式表)
內嵌樣式：內嵌在元素中，<span style="color:red">span</span>
內部樣式表：在頁面中的樣式，寫在<style></style>中的樣式
外聯樣式表：單獨存在一個css文件中，經過link引入或import導入的樣式
f)、!important 權重最高，比 inline style 還要高
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>優先級</title>
<style type="text/css">
* {
color: yellow;
}
p {
color: red !important;
}
.cls1 {
color: deeppink;
}
.cls2{
color: blueviolet;
}
#p1{
color:blue;
}
</style>
</head>
<body>
<div>
<p id="p1" class="cls2 cls1" style="color:#ccc">p1</p>
<span>span1</span>
</div>
</body>
</html>
運行結果：
3.二、計算特殊性值
important > 內嵌 > ID > 類 > 標籤 | 僞類 | 屬性選擇 > 僞對象 > 繼承 > 通配符
權重、特殊性計算法：
CSS樣式選擇器分爲4個等級，a、b、c、d
1.若是樣式是行內樣式（經過Style=「」定義），那麼a=1，1,0,0,0
2.b爲ID選擇器的總數 0,1,0,0
3.c爲屬性選擇器，僞類選擇器和class類選擇器的數量。0,0,1,0
4.d爲標籤、僞元素選擇器的數量 0,0,0,1
5.!important 權重最高，比 inline style 還要高
好比結果爲：1093比1100，按位比較，從左到右，只要一位高於則當即勝出，不然繼續比較。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>優先級</title>
<style type="text/css">
html body #div1
{
background: red;
}
.cls1 #div1{
background: blue;
}
</style>
</head>
<body>
<div class="cls1">
<div id="div1">div1
</div>
<div id="div2">div2
</div>
</div>
</body>
</html>
運行結果：
由於html body #div1的特殊性值爲：0102，而.cls1 #div1的特殊性值爲0110，後者勝出。
4、刻度
在CSS中刻度是用於設置元素尺寸的單位。
特殊值0能夠省略單位。例如：margin:0px能夠寫成margin:0
一些屬性可能容許有負長度值，或者有必定的範圍限制。若是不支持負長度值，那應該變換到可以被支持的最近的一個長度值。
長度單位包括包括：相對單位和絕對單位。
相對長度單位包括有： em, ex, ch, rem, vw, vh, vmax, vmin
絕對長度單位包括有： cm, mm, q, in, pt, pc, px
4.一、絕對長度單位
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px
4.二、文本相對長度單位
em
相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人爲設置，則相對於瀏覽器的默認字體尺寸。(相對父元素的字體大小倍數)
body { font-size: 14px; }
h1 { font-size: 16px; }
.size1 p { font-size: 1em; }
.size2 p { font-size: 2em; }
.size3 p { font-size: 3em; }
瀏覽器的默認字體大小爲16像素，瀏覽器默認樣式也稱爲user agent stylesheet，就是全部瀏覽器內置的默認樣式，多數是能夠被修改的，但chrome不能直接修改，能夠被用戶樣式覆蓋。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em與rem</title>
<style type="text/css">
#div2{
background: blue;
height: 5em;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
結果：
div2的高度爲80px，是由於user agent stylesheet默認樣式中字體大小爲16px，按照這個規則咱們能夠手動修改字體大小，div2的高度將發生變化。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em與rem</title>
<style type="text/css">
#div1 {
font-size: 20px;
}
#div2 {
color: white;
background: blue;
height: 5em;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
結果：
rem
rem是CSS3新增的一個相對單位（root em，根em），相對於根元素(即html元素)font-size計算值的倍數
只相對於根元素的大小
rem（font size of the root element）是指相對於根元素的字體大小的單位。簡單的說它就是一個相對單位。看到rem你們必定會想起em單位，em（font size of the element）是指相對於父元素的字體大小的單位。它們之間其實很類似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。（相對是的HTML元素的字體大，默認16px）
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em與rem</title>
<style type="text/css">
#div1 {
font-size: 20px;
}
#div2 {
color: white;
background: blue;
height: 5rem;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
運行結果：
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em與rem</title>
<style type="text/css">
html {
font-size: 10px;
}
body {
font-size: 16px;
}
#div1 {
font-size: 20px;
}
#div2 {
color: white;
background: blue;
height: 5rem;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
Hello em
</div>
</div>
</body>
</html>
結果：
按理說高度爲5*10px=50像素高度，但這裏爲60，是由於chrome瀏覽器限制了最小字體大小爲12px，從上圖能夠看出。
4.三、Web App與Rem
爲了實現簡單的響應式佈局，能夠利用html元素中字體的大小與屏幕間的比值設置font-size的值實現當屏幕分辨率變化時讓元素也變化，之前的tmall就使用這種辦法，示例以下：
示例一：
View Code
運行結果：
示例二：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>web app 與rem</title>
<style type="text/css">
html {
font-size: 20px;
}
body {
font-size: 16px;
}
#div2 {
color: white;
background: blue;
height: 3rem;
width: 3rem;
font-size: .7rem;
}
</style>
</head>
<body>
<div id="div2">
Hello rem
</div>
<script type="text/javascript">
function resize() {
var w = document.documentElement.clientWidth;
document.documentElement.style.fontSize = w * 20 / 290 + "px";
}
window.onresize =resize;
resize();
</script>
</body>
</html>
運行結果：
變屏幕變寬時元素大小也隨之發生變化，但這裏並無考慮高度，但爲響應式佈局與hack提供了思路。
- 1. CSS3與頁面佈局——概要、選擇器、特殊性與刻度單位
- 2. CSS定位與CSS屬性選擇器
- 3. CSS3與頁面佈局學習總結（一）——概要、選擇器、特殊性與刻度單位
- 4. css選擇器概述
- 5. CSS—01.概念&選擇器
- 6. CSS選擇器概述
- 7. jQuery選擇器與CSS選擇器
- 8. 表單和CSS選擇器
- 9. 【CSS】【選擇器】CSS選擇器種類
- 10. css -- css選擇器
- 更多相關文章...
- • jQuery Mobile 表單選擇菜單 - jQuery Mobile 教程
- • ionic 單選框 - ionic 教程
- • Docker容器實戰(六) - 容器的隔離與限制
- • Docker容器實戰(七) - 容器眼光下的文件系統
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 字節跳動21屆秋招運營兩輪面試經驗分享
- 2. Java 3 年，25K 多嗎？
- 3. mysql安裝部署
- 4. web前端開發中父鏈和子鏈方式實現通信
- 5. 3.1.6 spark體系之分佈式計算-scala編程-scala中trait特性
- 6. dataframe2
- 7. ThinkFree在線
- 8. 在線畫圖
- 9. devtools熱部署
- 10. 編譯和鏈接
- 1. CSS3與頁面佈局——概要、選擇器、特殊性與刻度單位
- 2. CSS定位與CSS屬性選擇器
- 3. CSS3與頁面佈局學習總結（一）——概要、選擇器、特殊性與刻度單位
- 4. css選擇器概述
- 5. CSS—01.概念&選擇器
- 6. CSS選擇器概述
- 7. jQuery選擇器與CSS選擇器
- 8. 表單和CSS選擇器
- 9. 【CSS】【選擇器】CSS選擇器種類
- 10. css -- css選擇器