day-3 css如何工作？

什么是CSS？

    css是一种用于向用户指定文档如何呈现的语言。通俗解释就是CSS使用来样式化和排版你的网页的。

CSS是如何工作的？

    浏览器显示文档是时，他将于文档内容与css样式结合之后展示出来

    一共是分为两个步骤的

1.     浏览器将html和css转化成dom（文档对象模型）。dom在计算机内存中表示文档。他把文档内容和css样式结合在一起
2. 浏览器显示dom的内容

    

        (html浏览器解析的流程图)

 

三种方式把CSS样式应用到HTML上面？

1）外部样式表

在html的head部分添加如下代码：href链接都你的css样式文件的位置

<link rel='stylesheet' href='style.css'>

2）内部样式表

在html的head部分添加

<style></style>

3）内联样式（又称行内样式）-不推荐使用

    这种方式不能实现代码分离和以及不易他人的维护

<p style='color:red;'>hello</p>

CSS语法？

1）css声明块与选择器相结合形成一个css规则集（或者css规则）

 模板如下

            a css declaration: {

                        background-color: red;

            }

注意：css的属性和属性值不区分大小写的。但是最好是用小写（按照规范书写）

选择器：选择器是一种模式，他能在页面上匹配一些元素

规则：选择器加声明块成为规则集

2）@-规则：在css中被用来转递数据元数据、条件信息或其他描述性息

例子： @charset；

           @import ‘style.css’

3)嵌套语句

例子： 

@media（min-width：810px）{

                    body{

                        color: red;

}}

上面代码的意思是：只有页面宽度超过810像素是页面才会应用该css样式

注意：任何不是规则集或者@-规则或者嵌套语句的css语句都是无效的，并且会被浏览器忽视掉。