css

最新推荐文章于 2024-08-31 21:18:22 发布

转载最新推荐文章于 2024-08-31 21:18:22 发布 · 78 阅读

* CSS
       * CSS的简介
           * CSS：cascading style sheet   ：层叠样式表。
           * 做什么用：设置网页的显示效果（设置样式）。
           * CSS将网页显示的效果和内容分离。（耦合性）

               超<font>文本</font>标签语言

           * HTML只需要把文本内容封装起来，不用属性，用CSS的代码来控制显示效果。
           * 如果开发了多套CSS的代码，都不用修改HTML的代码。

       * CSS和HTML的结合（*****）
           * CSS与HTML的结合方式（4种）
           * 在html的标签上，提供了一个(属性)，style="CSS的代码"

               <div style="color:lime;background-color:red">你好</div>

           * 在HTML的文件，提供了一个(标签)

               <style type="text/css">CSS的代码：
                   div{color:fuchsia;background-color:yellow}
               </style>

               这个标签放在<head></head>的中间

           * 引入外部的文件的方式（引入CSS的文件，定义一个css文件（后缀名名 demo.css））（经常使用的方式）
               * @import url("CSS文件的地址");   属性必须要写<style></style>内部。大写和小写都没有问题。（注意：必须有;）


               <style type="text/css">
                   @import url("demo.css");
               </style>


           * 引入外部文件的方式，通过一个<link>       写在<head></head>中间，不要放在<style>中间（经常使用）
               * rel：代表当前和引入文件之间的关系
               * type：
               * href：引入CSS文件的地址
               <link rel="stylesheet" type="text/css" href="zong.css">

       * CSS的优先级（*****）和规范
           * 从上到下，由外到内，优先级是从低到高的。（一般情况下）（*****）
           * 标签名选择器 < 类选择器 < ID选择器 < style属性   （特殊情况下）（*****）

           * 规范
               * CSS的写法：   div{CSS的属性名:值;CSS的属性名:值;...}
               * 如果一个属性有多个值，值与值之间使用空格隔开
                   * 例子 div{ xx:yy zz aa }


       * CSS的选择器（*****）
           * CSS的选择器
               * 告诉CSS的代码作用在哪个标签上。
                   * 基本选择器
                       * 标签名选择器       div{}   span{}
                       * 类选择器：在HTML的标签上，提供了属性   class，定位到div的标签（美工经常使用的方式）
                           <div class="hehe">这是div区域一</div>
                           * 写法：   .class的名称   (.hehe{CSS的代码})
                               div.hehe[font-size:25px;]
                           * 设置不同的标签，具有相同的样式
                               .hehe[font-size:25px;]
                       * ID选择器
                           * 在HTML的标签上，提供的属性设置样式
                               * 写法：   #id的名称   (#haha{CSS的代码})
                           * 一般情况下：设置不同的ID
                               * 一般情况下给js语言来使用。

                   * 扩展选择器
                       * 关联选择器：标签可以嵌套，标签与标签之间的关系。
                           * 写法：   中间用空格隔开   例子（div font{CSS的代码}）

                       * 组合选择器：对多个不同的选择器进行相同的样式
                           * 写法：在多个不同的选择器之间用 ,   隔开

                       * 伪元素选择器：   定义好的一些选择器，用就ok。
                           * 如果使用超链接伪元素选择器：使用顺序：代码书写的顺序   L V H A
                                               未访问link 悬停hover 点击active 访问完成visited

       * CSS的布局（了解）（CSS+DIV进行布局）
           <div>
               <div>
                   <img />
               </div>
               <div>
                   <font>领导很忙</font>
               </div>
           </div>