百度前端技术学院 第三天（下）

 

 

1、css介绍

层叠样式表，用于表示页面的样式

2、css实际上如何工作？

        1、浏览器将HTML和CSS转化成DOM（文档对象模型）。DOM在计算机中表示文档，它把文档内容和其样式结合在一起

        2、浏览器显示DOM的内容

3、什么是DOM？

DOM是一种树形结构，标记语言中的每个元素，属性，文本片段都变成为一个DOM节点，这些节点由它们与其它DOM节点的关系来定义，有些元素是某些子节点的父节点，且这些子节点有兄弟节点，DOM是CSS与文档内容的相遇之处。

4、css三种引用方式，这里不再多介绍，之前文章有介绍过

5、从基本的层次看，css是由两块内容组合而成的

        1、属性（property），值（value）

6、css声明块：声明块里的每一个声明必须用半角分号（;）分隔，否则代码会不生效（至少不会按预期结果生效）。声明块里的最后一个声明结束的地方，不需要加分号，但是最后加分号是个好习惯，因为可以防止在后续增加声明时忘记加分号。

7、通过在每个声明块前加上选择器（selector）来完成这一动作，选择器是一种模式，它能在页面上匹配一些元素。这将使相关的声明仅被应用到被选择的元素上。选择器加上声明块被称为规则集（ruleset），通常简称规则（rule）。

8、该@-规则向当前 CSS 导入其它 CSS 文件

@import 'custom.css';

 9、嵌套语句

嵌套语句 是@-规则中的一种，它的语法是 CSS 规则的嵌套块，只有在特定条件匹配时才会应用到文档上。特定条件如下：

• @media 只有在运行浏览器的设备匹配其表达条件时才会应用该@-规则的内容；
• @supports 只有浏览器确实支持被测功能时才会应用该@-规则的内容；
• @document 只有当前页面匹配一些条件时才会应用该@-规则的内容。

@media (min-width: 801px) {
  body {
    margin: 0 auto;
    width: 800px;
  }
}

表示嵌套语句只有在页面宽度超过801像素时才会应用

10、CSS中的注释以 /* 开始并以 */ 结束。   注释

11、简写属性： font，background，padding，border，和 margin 被称为简写属性

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

12、选择器分类：

• 简单选择器： id和class
• 属性选择器： 
•      [attr]：该选择器选择包含 attr 属性的所有元素，不论 attr 的值为何。     
•      [attr=val]：该选择器仅选择  attr                属性被赋值为 val 的所有元素。     
•      [attr~=val]：该选择器仅选择具有 attr 属性的元素，而且要求 val 值                       是 attr 值包含的被空格分隔的取值列表里中的一个。
• 伪类和伪元素：一个 CSS  伪类（pseudo-class） 是一个以冒号(:)作为前缀，被添加到一个选择器末尾的关键字，当你希望样式在特定状态下才被呈现到指定的元素时，你可以往元素的选择器后面加上对应的伪类（pseudo-class）。
•               常用的是a,超链接的使用
•                        伪元素（Pseudo-element）跟伪类很像，但它们又有不同的地方。它们都是关键字，但这次伪元素前缀是两                      个冒号 (::) ， 同样是添加到选择器后面去选择某个元素的某个部分。
•  
• 组合器和多用选择器：A,B  表示A和B都可以

                                           A B   匹配A后面的子代B

                                          A>B   匹配A下面的直接子元素B

                                           A+B  匹配A相邻的B，AB有相同的父结点，并且B紧跟在A的后面

                                           A~B  匹配A相邻的B，AB有相同的父节点，B在A之后，但不一定是紧挨着A