简介
这两天在搞一个实时录音和获取音频流的需求,忙的有些焦头烂额,所以今天我只整理一些基础知识,先从css入手吧.
内容
- css是什么?
CSS是Cascading Style Sheets的简称，中文称为层叠样式表。其有很多属性值,并且属性和属性值用冒号隔开，以分号结尾。 - CSS 三种引入方式：
- 行内样式
行内式是在标签的style属性中设定CSS样式。并且具有最高优先级.
<div style="border: 1px solid red"></div>
- 内嵌式
内嵌式是将CSS样式集中写在网页的<head>标签的<style></style>标签对中:
<head>
<style>
....这里写样式
</style>
</head>
- 外联式(链接式)
将一个独立的.css文件引入到HTML文件中，使用<link>标记写在<head>标记中。
链接式会以网页文件主体装载前装载CSS文件。
<link href="main.css" rel="stylesheet" type="text/css">
- 样式的优先级
- 行内样式优先级最高
2.相同样式并且相同属性，呈现方式在<head>中的顺序决定，后面会覆盖前面属性
-
css选择器
-
通用元素选择器
表示应用到所有的标签。
* {margin:0;padding:0;} -
通用元素选择器
标签选择器
匹配所有使用某标签的元素
div {color: yellow}
-
类选择器
匹配所有class属性中包含info的元素。
.box {
height: 150px;
width: 150px;
border: 1px dashed palegreen;
}
<div class="box">a box</div>
- ID选择器
使用id属性来调用样式，在一个网页中id的值都是唯一的（是W3C规范而不是规则，所以不会报错）。
语法：#ID名{样式}（ID名不能以数字开头）
-
多元素选择器
同时匹配h3,h4标签，之间用逗号分隔。
h3,h4 {color: yellow;}
-
后代元素选择器
匹配所有div标签里嵌套的P标签，之间用空格分隔。
div p {corlor:red}
- 子代选择器
匹配所有div标签里嵌套的子P标签，用>分隔。
div > p {color: gray;}
-
毗邻元素选择器
匹配所有紧随div标签之后的同级标签P，之间用+分隔（只能匹配一个）。div + p {color: yellow;} <div>hello world</div> <p>我是p标签</p> 选择器的优先级
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
混合使用则权值相加,如 div .box{color:red}的权值就是1+10=11.
