web开发笔记-css介绍(1)

2016-12-22 本文已影响11人小貔

简介

这两天在搞一个实时录音和获取音频流的需求,忙的有些焦头烂额,所以今天我只整理一些基础知识,先从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.

结束

上一篇下一篇

猜你喜欢

热点阅读