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

简介: 该博客文章详细介绍了HTML和CSS的基础知识,包括CSS样式的应用方式、语法规则、选择器的使用、盒子模型、内边距、外边距、元素的显示类型以及overflow属性处理溢出内容的方法,并通过代码示例和测试结果截图展示了这些知识点在网页设计中的应用。

文章目录

  • 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 测试结果

在这里插入图片描述

相关文章
|
6天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
20 6
|
20天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
18天前
|
前端开发
CSS 盒子模型
CSS 盒子模型
23 4
|
19天前
HTML 速查列表4
本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
|
17天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
72 1
|
19天前
|
数据安全/隐私保护
HTML 速查列表5
表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
|
22天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
35 3
|
20天前
HTML 速查列表3
文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
|
20天前
HTML 速查列表3
本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。