HTML5学习：第一阶段03

最新推荐文章于 2024-05-28 09:20:40 发布

诺卡先生

最新推荐文章于 2024-05-28 09:20:40 发布

阅读量157

点赞数

分类专栏： HTM5

本文链接：https://blog.csdn.net/weixin_44202489/article/details/109899586

版权

HTM5 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

一、css基础引入

css是什么？cascading style sheet   层叠样式表

    细品：

        刘航今天穿蓝白相间的毛衣，真是一个帅小伙呀~~~

        刘航{

            毛衣：蓝色白色；

            帽子：黑色；

            鞋子：黄色；

        }



    css语法：

        选择符   和  声明（属性和属性值）

    语法说明：

        选择符{

            属性1:属性值1;

            属性2:属性值1 属性值2 属性值3;

        }

        a:css声明必须放到花括号里面

        b:属性和属性值之间用冒号进行连接

        c:每一条声明用  分号结束

        d:多个属性值用空格隔开

        f:选择符指的就是找到那个标签

        举例：

           div{

               width:100px;

               height:100px;

               background:pink;

           }

    注意：css必须写在样式表里面！！！

二、css样式示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部样式表 -->
    <!-- <style>
        p{
            width:100px;
            height:100px;
            background:red;
        }
    </style> -->
    

    <!-- 外部样式表 -->
    <!-- <link rel="stylesheet" href="../css/a.css"> -->
    <style>
        @import url("../css/a.css");
    </style>
</head>
<body>
    <!-- 内联样式表 -->
    <!-- <p style="width:100px;height:100px;background:pink;"></p> -->

    <p></p>
   
</body>
</html>
<!-- 
    内联样式表
       <标签名 style="width:100px;"></标签名> 

    内部样式表
       <style>
           p{
               width:100px;
               height:100px;
               background:red;
           }
       </style>

    外部样式表
        第一种方式：(重点使用！！！！！)
            <link rel="stylesheet" href="css文件路径"></link> 

        第二种方式：
            <style>
               @import url("文件路径"); 
            </style>
 -->

三、css样式权重

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
     <!-- 外部样式表 -->
     <link rel="stylesheet" href="../css/a.css">

    <!-- 内部样式表 -->
    <style>
        div{
            width:200px;
            height:200px;
            background:#999;
        }
    </style>

   
</head>
<body>
    <!-- 内联样式表 -->
    <!-- <div style="width:100px;height:100px;background:tomato;"></div> -->
    <div></div>
</body>
</html>

四、网页的外围结构（公司规范用法）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       #header{
           width:1000px;
           height:100px;
           background:teal;
       }
       #nav{
           width:1000px;
           height:58px;
           background:magenta;
       }
       #banner{
           width:1000px;
           height:464px;
           background:skyblue;
       }
       #con{
           width:1000px;
           height:547px;
           background:mediumaquamarine;
       }
       #links{
           width:1000px;
           height:250px;
           background:#ccc;
       }
       #footer{
           width:1000px;
           height:82px;
           background:purple;
       }
    </style>
</head>
<body>
    <!-- 头部 -->
    <div id="header"></div>

    <!-- 导航 -->
    <div id="nav"></div>

    <!-- 轮播 -->
    <div id="banner"></div>

    <!-- 内容 -->
    <div id="con"></div>

    <!-- 链接 -->
    <div id="links"></div>

    <!-- 底部 -->
    <div id="footer"></div>
</body>
</html>

五、选择符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部样式表 -->
    <style>
        #div1{
            width:100px;
            height:100px;
            background:linear-gradient(to left top,pink,skyblue,orange);
        }
        .p1{
            width:110px;
            height:200px;
            background:red;
        }
    </style>
</head>
<body>
    <div id="div1"></div>
    <div></div>
    <p class="p1 p2" ></p>
    <h1 class="p1"></h1>
</body>
</html>

注解

    基本选择器：

        标签选择器（类型选择器）

        id选择器

        class类选择器

    1.类型选择器：

         说明：所有的html标签都能当作是选择器来用

               例如：html/body/a/div/p/h1/i/em/b...

         特点：能选中页面中所有的当前标签

         作用：

             a:如果相对某个标签都设置相同样式的时候（清除默认样式、统一）

    2.id选择器：

         语法：

             <标签名 id="自己起的名字"></标签名>

             #自己写的名字{

                 属性:属性值;

                 ....

             }

         特点：id具有唯一性，在一个页面中不能有相同的id名

         作用：只应用于网页的最外围结构！！！

    3.class类选择器：

          语法：

              <标签名 class="自己起的名字"></标签名>

              .自己起的名字{

                  属性：属性值;

              }

          特点：一个标签可以取多个名字

               class类名可以重复使用



起名字的方法：

         小写的英文字母开头

         字母、数字、下划线、连接符的组合

         语义化：名字能可能反应内容板块的内容或者用途

    下划线：

        news_left

        news_center

        news_right



    连字符：

        news-left

        news-center

        news-right

    驼峰式：

        newsLeft

        newsCenter

        newsRight

    注意：

        每个项目的命名风格保持一致

        起名字不要用关键字（所有的标签名和属性都是关键字）

六、包含选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div p{
            width:100px;
            height:100px;
            background:orange;
        }
    </style>
</head>
<body>
    <div>
        <p>小明</p>
    </div>
    <p>小明</p>
</body>
</html>

<!-- 

    包含选择器（后代选择器）：
        说明：根据父元素找子元素
        语法：
            父元素的选择器 子元素的选择器{
                css样式
            }
 -->

七、浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #news{
            width:1000px;
            height:244px;
            background:yellow;
        }
        .news_left{
            width:500px;
            height:244px;
            background:greenyellow;
            float:left;
        }
        .news_center{
            width:242px;
            height:244px;
            background:hotpink;
            float:left;
        }
        .news_right{
            width:258px;
            height:244px;
            background:red;
            float:left;
        }
    </style>
</head>
<body>
    <!-- div#news -->
    <div id="news">
        <div class="news_left"></div>
        <div class="news_center"></div>
        <div class="news_right"></div>
    </div>
    <p>哈哈哈哈哈</p>
</body>
</html>

<!-- 
    浮动：float
        取值：left right none
        ***注意：如果想要多个兄弟元素排列在一行，需要给每一个兄弟元素都添加浮动

        特点：会脱离文档流，不占据页面空间，
            *** 处理：给父元素设置固定的高度
 -->

八、浮动-脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #one{
            width:100px;
            height:100px;
            background:#999;
            float:left;
        }
        #two{
            width:300px;
            height:300px;
            background:#111;
        }
    </style>
</head>
<body>
    <div id="one"></div>
    <div id="two"></div>
</body>
</html>

<!-- 
    浮动会脱离文档流
 -->

九、知识梳理

    1.css语法：

         选择符{

             属性:属性值;

             属性:属性值属性值2；

         }

    2.样式表：

         内联样式表

            <标签名 style="width:100px;"></标签名>



        内部样式表

            <style>

                选择符{

                    属性:属性值;

                }

            </style>

        外部样式表

            第一种：

            <link rel="stylesheet" href="css文件路径"></link>



            第二种：

            <style>

                @import url("css文件路径");

            </style>

    3.样式表的权重：

        内联样式表权重最大，内部和外部样式表遵从就近原则！！（谁离标签近就显示谁）

    4.选择符：

        a:类型选择符（标签选择符）

             div{

                 css样式

             }



        b:id选择符

            <标签名 id="起的名字"></标签名>

            #起的名字{

                css样式

            }

            特点：唯一性

            使用：只能最外围结构使用！！！！

        c:class类选择器

            <标签名 class="起的名字"></标签名>

            .起的名字{}



        d:后代选择器（包含选择器）

             父元素的选择器子元素的选择器{

                 css样式

             }

    5.浮动：float:left/right/none;

        特点：脱离文档流，不占据页面空间

        解决：给父元素设置固定高度（暂时用法！！！）

        注意：如果多个同级元素排列在一行，需要给**每一个同级元素**都添加浮动！！！