簡(jiǎn)介
這兩天在搞一個(gè)實(shí)時(shí)錄音和獲取音頻流的需求,忙的有些焦頭爛額,所以今天我只整理一些基礎(chǔ)知識(shí),先從css入手吧.
內(nèi)容
- css是什么?
CSS是Cascading Style Sheets的簡(jiǎn)稱，中文稱為層疊樣式表。其有很多屬性值,并且屬性和屬性值用冒號(hào)隔開，以分號(hào)結(jié)尾。 - CSS 三種引入方式：
- 行內(nèi)樣式
行內(nèi)式是在標(biāo)簽的style屬性中設(shè)定CSS樣式。并且具有最高優(yōu)先級(jí).
<div style="border: 1px solid red"></div>
- 內(nèi)嵌式
內(nèi)嵌式是將CSS樣式集中寫在網(wǎng)頁(yè)的<head>標(biāo)簽的<style></style>標(biāo)簽對(duì)中:
<head>
<style>
....這里寫樣式
</style>
</head>
- 外聯(lián)式(鏈接式)
將一個(gè)獨(dú)立的.css文件引入到HTML文件中，使用<link>標(biāo)記寫在<head>標(biāo)記中。
鏈接式會(huì)以網(wǎng)頁(yè)文件主體裝載前裝載CSS文件。
<link href="main.css" rel="stylesheet" type="text/css">
- 樣式的優(yōu)先級(jí)
- 行內(nèi)樣式優(yōu)先級(jí)最高
2.相同樣式并且相同屬性，呈現(xiàn)方式在<head>中的順序決定，后面會(huì)覆蓋前面屬性
-
css選擇器
-
通用元素選擇器
表示應(yīng)用到所有的標(biāo)簽。
* {margin:0;padding:0;} -
通用元素選擇器
標(biāo)簽選擇器
匹配所有使用某標(biāo)簽的元素
div {color: yellow}
-
類選擇器
匹配所有class屬性中包含info的元素。
.box {
height: 150px;
width: 150px;
border: 1px dashed palegreen;
}
<div class="box">a box</div>
- ID選擇器
使用id屬性來調(diào)用樣式，在一個(gè)網(wǎng)頁(yè)中id的值都是唯一的（是W3C規(guī)范而不是規(guī)則，所以不會(huì)報(bào)錯(cuò)）。
語法：#ID名{樣式}（ID名不能以數(shù)字開頭）
-
多元素選擇器
同時(shí)匹配h3,h4標(biāo)簽，之間用逗號(hào)分隔。
h3,h4 {color: yellow;}
-
后代元素選擇器
匹配所有div標(biāo)簽里嵌套的P標(biāo)簽，之間用空格分隔。
div p {corlor:red}
- 子代選擇器
匹配所有div標(biāo)簽里嵌套的子P標(biāo)簽，用>分隔。
div > p {color: gray;}
-
毗鄰元素選擇器
匹配所有緊隨div標(biāo)簽之后的同級(jí)標(biāo)簽P，之間用+分隔（只能匹配一個(gè)）。div + p {color: yellow;} <div>hello world</div> <p>我是p標(biāo)簽</p> 選擇器的優(yōu)先級(jí)
內(nèi)聯(lián)樣式表的權(quán)值為 1000
ID 選擇器的權(quán)值為 100
Class 類選擇器的權(quán)值為 10
HTML 標(biāo)簽選擇器的權(quán)值為 1
混合使用則權(quán)值相加,如 div .box{color:red}的權(quán)值就是1+10=11.
