菜鸟web笔记

    什么是css？

                表现层，美化html

            cascading   style  sheets

            层叠样式表，css样式表，级联样式表

            作用： 可以设置页面中元素的位置，排版，样式外观等

            语法规范：

                 主要有两部分组成：选择器，样式声明

              语法：

                 选择器{

                    样式声明

                    （属性：属性值；）

                      }  

                 

             行间样式：

             使用场景：单个html标签需要设置特定的 样式

             优点：比较直观

             缺点：相同的样式需要重新定义，造成代码冗余

                  作用范围小不利于后期维护

                   代码不能重复使用，结构 样式不分离

             注意：任何html标签都可以设置行间样式

             

             

             内部样式：

                 <style>

                     选择器{

                        样式声明；

                          属性：属性值；

                     }

                 </style>

             语法：

                使用style标签包裹住样式

             使用场景：

                 单个html文档需要设置特定样式时

             优缺点：相对于行间样式，代码可以复用

                  作用范围大于行间样式的范围，

                   结构与样式半分离。

             

                   

             外部样式：

                   把css代码单独分离出来

                   创建一个新的文件，文件的后缀名为.css

                   具体的css写在css文件中

                   在head内部使用link标签引入刚才新建的css文件

             使用场景：多个html文件具有相同样式时使用

             优点：适用范围广，可以重复使用代码

                   便于修改和维护

                   结构样式彻底分离      

            引入外部css文件

                   <link rel="stylesheet" href="">

                   rel表示引入文件与当前文档的关系，层叠样式表

                   stylesheet：层叠样式表

                   href：资源的链接地址  

            -->

            <!--

                选择器的作用：用于选择需要设置样式的html元素

             

             基本选择器：

               通配符选择器语法：

                   *{

                    样式说明

                   }

              作用：选择页面上所有html元素

             一般通配符用于清除浏览器的默认样式

             权重：0

             *{

                margin：0；

                padding：0；

             }        

             标签名选择器：

                语法：

                标签名称{

                    样式声明;

                }

              作用：选择所有统一元素名称的元素

              权重：1

              类选择器：

                 语法：

                   html中：通过class属性定义

                   css中：以点进行标识

                   .class的名称{

                    样式声明

                   }

              权重：10  

              作用： 选择所有带有指定类名的元素

              一个标签可以使用多类名

              多类名：（词列表）  

             -->