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

简介

这两天在搞一个实时录音和获取音频流的需求,忙的有些焦头烂额,所以今天我只整理一些基础知识,先从css入手吧.

内容

• css是什么?
  CSS是Cascading Style Sheets的简称，中文称为层叠样式表。其有很多属性值,并且属性和属性值用冒号隔开，以分号结尾。
• CSS 三种引入方式：
• 行内样式
  行内式是在标签的style属性中设定CSS样式。并且具有最高优先级.

• 内嵌式
  内嵌式是将CSS样式集中写在网页的标签的标签对中:

• 外联式(链接式)
  将一个独立的.css文件引入到HTML文件中，使用标记写在标记中。
  链接式会以网页文件主体装载前装载CSS文件。

• 样式的优先级

1. 行内样式优先级最高
   2.相同样式并且相同属性，呈现方式在中的顺序决定，后面会覆盖前面属性

• css选择器

  • 通用元素选择器
    表示应用到所有的标签。

   * {margin:0;padding:0;}
  

• 标签选择器
  匹配所有使用某标签的元素

 div {color: yellow}

• 类选择器
  匹配所有class属性中包含info的元素。

 .box {
          height: 150px;
          width: 150px;
          border: 1px dashed palegreen;           
      }
  
a box

• 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;}
  hello world
  我是p标签
  

• 选择器的优先级

• 内联样式表的权值为 1000

• ID 选择器的权值为 100

• Class 类选择器的权值为 10

• HTML 标签选择器的权值为 1

• 混合使用则权值相加,如 div .box{color:red}的权值就是1+10=11.

结束