CSS

最新推荐文章于 2024-02-27 16:22:56 发布

原创最新推荐文章于 2024-02-27 16:22:56 发布 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

javaweb 专栏收录该内容

16 篇文章

订阅专栏

CSS的简介

            * CSS：cascading style sheet ：层叠样式表。
            * 做什么用：设置网页的显示效果（设置样式）。     
            * CSS将网页显示的效果和内容分离。（耦合性）
            * HTML只需要把文本内容封装起来，不用属性，用CSS的代码来控制显示效果。超<font>文本</font>标签语言
            * 如果开发了多套CSS的代码，都不用修改HTML的代码。

CSS和HTML的结合（*）

* CSS与HTML的结合方式（4种）
            * 在html的标签上，提供了一个(属性)，style="CSS的代码"
            * 在HTML的文件，提供了一个(标签)    <style type="text/css">CSS的代码</style>，这个标签放在<head></head>的中间
            * 引入外部的文件的方式（引入CSS的文件，定义一个css文件（后缀名名  demo.css））（经常使用的方式）
            * @import url("CSS文件的地址");   属性必须要写<style></style>内部。大写和小写都没有问题。（注意：必须有;）
            * 引入外部文件的方式，通过一个<link>写在<head></head>中间， 不要放在<style>中间（经常使用）
                * rel：代表当前和引入文件之间的关系
                * type：
                * href：引入CSS文件的地址

CSS的优先级（*）和规范

* 从上到下，由外到内，优先级是从低到高的。（一般情况下）（*****）
            * 标签名选择器 < 类选择器 < ID选择器 < style属性   （特殊情况下）（*****）
            * 规范
                * CSS的写法：   div{CSS的属性名:值;CSS的属性名:值;...}
                * 如果一个属性有多个值，值与值之间使用空格隔开
                    * 例子 div{ xx:yy zz aa }

CSS的选择器（*）

* CSS的选择器
                * 告诉CSS的代码作用在哪个标签上。
                    * 基本选择器
                        * 标签名选择器        div{}   span{}
                        * 类选择器：在HTML的标签上，提供了属性  class，定位到div的标签（美工经常使用的方式）
                            * 写法：   .class的名称   (.hehe{CSS的代码})
                            * 设置不同的标签，具有相同的样式

                        * ID选择器
                            * 在HTML的标签上，提供的属性 设置样式
                                * 写法：   #id的名称  (#haha{CSS的代码})
                            * 一般情况下：设置不同的ID
                                * 一般情况下给js语言来使用。

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

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

                        * 伪元素选择器：   定义好的一些选择器，用就ok。
                            * 如果使用超链接伪元素选择器：使用顺序：   L V H A

各种选择器代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>002css选择器</title>
        <style type="text/css">
            [nihao]{
                font-size:80pt;
            }
            #iTitel{
                font-size:10pt;
            }
            .cTitle{
                font-size:120pt;
            }
        </style>
       <link rel="stylesheet" type="text/css" href="../css/001.css"/>
    </head>
    <body>
        <!--类选择器 :一类-->
        <div class="cTitle"> 春风十里class </div>
        <hr />
        <!--id选择器 :一个-->
        <div id="iTitel">
            春风十里,都不如你id
        </div>
        <!-- 标签名选择器--> <hr />
        <span>
            将星陨落,天命难违tag
        </span>
        <br />
        <!-- 属性        -->
        <span nihao="xxx" >
             风止于秋水,而我止于你属性
        </span> 
    </body>
</html>

CSS的布局（了解）（CSS+DIV进行布局）

<div>
    <div>
        <img />
    </div>
    <div>
        <font>领导很忙</font>
    </div>
</div>