HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用-阿里云开发者社区

文章目录

1、CSS基础知识
2、css样式
- 2.1、代码：
- 2.2 测试结果
3、CSS的语法
- 3.1 代码
4、块元素和行内元素
- 4.1 代码
- 4.2 测试结果
5、常用的选择器
- 5.1 代码块
- 5.2 测试结果
6、父类和子类选择器
- 6.1 代码
- 6.2 测试结果
7、列表
- 7.1 代码
- 7.2 测试结果
8、盒子模型
- 8.1 代码
- 8.2 测试结果
9、内边距
- 9.1 代码块
- 9.2 测试结果
10、外边距
- 10.1 代码块
- 10.2 测试结果
11、块元素和行内元素、display
- 11、代码
- 11.2 测试结果
12、overflow
- 12.1 、代码
- 12.2 测试结果

1、CSS基础知识

在这里插入图片描述

2、css样式

内联样式
写在head中的style
外部引入（使用最多）

2.1、代码：

外部css样式

  p{
               color: green;
               font-size: 20px;
           }

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css样式</title>

    <!-- 写在head中的style标签里，
       将样式写在style标签中，通过css选择器选择指定的元素
       同时给这些元素设置样式，复用 
    <style type="text/css">
           p{
               color: goldenrod;
               font-size: 20px;
           }
    </style>
-->

        <!-- 将样式写在外部文件中，然后通过link标签一引入外部css文件 -->
    <link rel="stylesheet" type="text/css" href="stylecss/style.css">
</head>

<body>

    <p>我是style里边的样式设置</p>

     <!-- 内联样式:
            将样式直接写在style样式中，只在当前有效果。耦合性大 -->
    <span style="color: red; font-size: 24px;">我是内联样式</span>

</body>

</html>

2.2 测试结果

在这里插入图片描述

3、CSS的语法

3.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css语法</title>
    <style type="text/css">

                   /*
                      css的注释，必须写在style标签中，或者是css文件中

                      css的语法：
                              选择器：声明块

                              选择器：可以选中页面中的指定元素，将声明块中的样式应用到选择器对应的元素上
                              声明块：紧跟在选择器后，使用{}括起来，名值对结构，一组一组的名值对称为声明，声明
                                      和声明之前用；隔离

                   */

         p{
               color: goldenrod;
               font-size: 20px;
           }


    </style>
</head>

<body>
    <p>我是css样式</p>

</body>

</html>

4、块元素和行内元素

4.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>块元素和行内元素</title>
</head>

<body>

    <!-- 块元素：
              所谓块元素就是独占一行的元素：div h1 p

              div这个标签不会给里边的元素设置默认样式，主要对页面进行布局

        行内元素：
               只占自身大小的元素，不会占一行：span iamge a  iframe

        块元素进行页面的布局，内联元素进行文本的样式设置。块元素可以包含行内元素。反之不可以


         ... -->
    <div style="background-color: red; width: 100px; height: 50px;">div1</div>
    <div style="color: green; ">div2</div>
    <hr>
    <span>我是块元素</span><span>我是块元素</span><span>我是块元素</span>

</body>

</html>

4.2 测试结果

在这里插入图片描述

5、常用的选择器

5.1 代码块

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>常用选择器</title>
    <style type="text/css">

    /*
              id选择器：通过元素的id属性值 选中唯一的元素
                    语法：
                        #id属性值{}

    */
    #pid{
        color: red;
    }

    /*
            类选择器：通过元素的class属性值选中一组元素
                   语法：
                      .class属性值{}
    */
    .pid1{
        color: green;
    }

    /*
            选择器分组：可以同时选中多个选择器对应的元素
                  语法：选择器1，选择器2...选择器N{}
    */
    .pid1,#pid{
        background-color: yellow;
    }

    /*
           通配选择器：可以选中页面中的所有元素
                语法：*{}
    */

    </style>

</head>

<body>
    <p>我要学html</p>
    <p id="pid">我要学html</p>
    <p class="pid1">我要学html</p>
    <p class="pid1">我要学html</p>
    <p  >我要学html</p>

</body>

</html>

5.2 测试结果

在这里插入图片描述

6、父类和子类选择器

6.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>父元素和子元素</title>
    <style type="text/css">

            /*
                 后代元素选择器：
                            作用：选中指定后代元素
                            语法：
                               祖先元素 后代元素{}
            */
          div p span{
              color: red;
              font-size: 24px;
          }

    </style>
</head>

<body>
<!-- 
              元素之间的关系：
                           父元素：直接包含子元素
                           子元素：直接被父元素包含
                           祖先元素：直接或者间接包含后代元素，父元素也是祖先元素
                           后代元素：直接或者间接被祖先元素包含的元素，子元素也是后代元素
                           兄弟元素：拥有相同父元素的元素 -->

                           <div>
                               <span>我是div中的span</span>
                               <p><span>我是div中的p中的span</span></p>
                           </div>
                           <span>我是body中的span</span>


</body>

</html>

6.2 测试结果

在这里插入图片描述

7、列表

7.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>标题</title>

    <style type="text/css">
    /*去掉无序列表的符号*/
    ul{
        list-style: none;
    }

    </style>
</head>

<body>
              <!-- 有序列表：
              无序列表：
              定义列表： -->

              <!-- 无序列表 ：
                           ul：创建无序列表
                           li:创建列表项
                        type属性可以修改项目符号
                           disc:实心圆点
                           square：实心方块
                           circle：空心圆

            -->
              <ul type="disc">
                <li>我要学全栈</li>
                <li>我要学全栈</li>
                <li>我要学全栈</li>
              </ul>
<hr>
              <!-- 有序列表：
                          ol:创建无序列表
                          li:创建列表项
                        type属性修改项目符号
                            默认：1、2、3
                            a/A :A、B、C
                            i/I :罗马字符


            -->
              <ol type="A">
                <li>我要学Java</li>
                <li>我要学Java</li>
                <li>我要学Java</li>
              </ol>

<hr>
              <!-- 列表之间是可以相互嵌套的 -->
            <ul type="disc">
                <li>嵌套</li>
                <li>
                        <ol type="A">
                            <li>我要学Java</li>
                            <li>我要学Java</li>
                            <li>我要学Java</li>
                        </ol>
                </li>
                <li>我要学全栈</li>
                <li>我要学全栈</li>
            </ul>

            <!-- 定义列表：dl
                    dt:被定义的内容
                    dd:定义内容的描述 -->

                <dl>
                    <dt>武松</dt>
                    <dd>厉害的很</dd>
                    <dd>打死了老虎</dd>
                    <dt>武大郎</dt>
                    <dd>武松他哥</dd>
                </dl>



</body>

</html>

7.2 测试结果

在这里插入图片描述

8、盒子模型

8.1 代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>盒子模型</title>
    <style type="text/css">
    .box{
        /*
        使用width设置盒子内容区的宽度
        使用height设置盒子内容区的高度

        不是整个盒子的大小。内容区+内边距+边框=盒子大小
        */
        width:400px;
        height: 200px;
        /*设置盒子的背景色*/
        background-color: thistle;

        /*
           为盒子设置边框
           border-width:边框的宽度  
                         上右下左的顺序设置和的宽度。（如果设置了盒子的四个边框）
                         指定三个值，按照  上，左右，下
                         指定两个值：按照 上下，左右
           border-color:边框的颜色
           border-style:边框的样式;
        */
        border-width: 5px 10px 15px 20px;
        border-color: red;
        border-style: solid;

    }

    .box1{
        /*
             简写border:同时设置四条边
             border-left border-right border-tom border-bottom
        */
        width: 200px;
        height: 200px;
        background-color: green;
        /* border:red 5px solid; */
        border-left: red 5px solid;
        border-right:greenyellow 10px solid ;
    }

    </style>
</head>

<body>

       <div class="box">   </div>
       <br><hr>
       <div class="box1"></div>


</body>

</html>

8.2 测试结果

在这里插入图片描述

9、内边距

9.1 代码块

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>盒子模型-内边距</title>
    <style type="text/css">

    .box{
         width:400px;
        height: 400px;
        background-color: thistle;
        border: 5px red solid;

        /*
            内边距：
                内容区和盒子边框的距离
        */
        padding-top: 40px;
        padding-left: 20px;
        padding-right: 30px;
        padding-bottom: 10px;
    }

    .box1{
        /*  占居内容区域*/
        height: 100%;
        width: 100%;
        background-color: yellow;
    }

    </style>
</head>

<body>
    <div class="box">
        <div class="box1"></div>
    </div>

</body>

</html>

9.2 测试结果

在这里插入图片描述

10、外边距

10.1 代码块

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>盒子模型-外边距</title>
    <style type="text/css">
        .box {
            width: 100px;
            height: 100px;
            background-color: thistle;

            /*   

               如果值为负：代表反向移动的距离
               margin-top: 距离上方距离;
               margin-left:距离左边距离
               margin-right:距离右边距离
               margin-bottom:距离下边距离

               如果只是指定margin-left或者margin-right。就自动设置边距为最大。同时设置则会居中


            */
            margin-top: 20px;
            margin-bottom: 20px;
            margin-left: auto;
            margin-right: auto;


        }

        .box1 {
            /*  占居内容区域*/
            height: 100px;
            width: 100px;
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>

    <div class="box1"></div>

</body>

</html>

10.2 测试结果

在这里插入图片描述

11、块元素和行内元素、display

11、代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>块元素和行内元素</title>
    <style type="text/css">
        a{
          height: 100px;
          width: 100px;
          background-color:  red;

          /*
                  通过display可以修改元素的类型
                       可选值：
                             inline：将一个元素作为行内元素
                             block:将一个元素作为块元素

                             display:none 使用该方式隐藏元素，不会在页面中显示，不会占据页面内容

                    通过visibility:设置元素的隐藏和显示
                                  visible:默认值，显示
                                  hidden:隐藏
          */
          display: block;
          visibility: hidden;
          text-decoration: none;
        }
    </style>
</head>

<body>

    <a href="http://www.baidu.com">百度</a>
    <sapn>hello</sapn>

</body>

</html>

11.2 测试结果

在这里插入图片描述

12、overflow

12.1 、代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>overflow处理子类溢出</title>
    <style type="text/css">

        .box{
            height: 200px;
            width: 200px;
            background-color: red;

            /*
                 子元素是默认在父元素的内容区，正常情况不应该从内容区域跑出来。父元素会将溢出的内容显示在外部
                 可以使用overflow进行处理
                             可选值：
                                 visible： 不做处理
                                 hidden:溢出的内容会被修改
                                 scroll：内容滚动
                                 auto:自动添加水平或者垂直滚动条
            */
            overflow: auto;
        }

        .box1{
            height: 300px;
            width: 100px;
            background-color: yellow;
        }

    </style>
</head>

<body>

    <div class="box">
        <div class="box1">

        </div>
    </div>

</body>

</html>

12.2 测试结果

在这里插入图片描述

HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用

文章目录

1、CSS基础知识

2、css样式

2.1、代码：

2.2 测试结果

3、CSS的语法

3.1 代码

4、块元素和行内元素

4.1 代码

4.2 测试结果

5、常用的选择器

5.1 代码块

5.2 测试结果

6、父类和子类选择器

6.1 代码

6.2 测试结果

7、列表

7.1 代码

7.2 测试结果

8、盒子模型

8.1 代码

8.2 测试结果

9、内边距

9.1 代码块

9.2 测试结果

10、外边距

10.1 代码块

10.2 测试结果

11、块元素和行内元素、display

11、代码

11.2 测试结果

12、overflow

12.1 、代码

12.2 测试结果

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

HTML+CSS基础知识（2）选择器的使用、盒子模型的讲解、列表的使用

文章目录

1、CSS基础知识

2、css样式

2.1、代码：

2.2 测试结果

3、CSS的语法

3.1 代码

4、块元素和行内元素

4.1 代码

4.2 测试结果

5、常用的选择器

5.1 代码块

5.2 测试结果

6、父类和子类选择器

6.1 代码

6.2 测试结果

7、列表

7.1 代码

7.2 测试结果

8、盒子模型

8.1 代码

8.2 测试结果

9、内边距

9.1 代码块

9.2 测试结果

10、外边距

10.1 代码块

10.2 测试结果

11、块元素和行内元素、display

11、代码

11.2 测试结果

12、overflow

12.1 、代码

12.2 测试结果

热门文章

最新文章

相关课程

相关电子书

相关实验场景