• CSS入门基础学习（中）

    CSS显示模式

    作用：网页标签特别多，在不同地方用不到相同类型，了解他们的特点可以方便给页面进行布局。

     元素显示模式就是元素（标签）以什么方式进行显示，例如

    占一行,一行内可以放多个，HTML元素一般分为块元素和行内元素，两种类型。

    块元素：

    常见的块元素：

    ~

    、

    、

    、
      、
        、
      1. 等，其中
        是最典型的块级元素。

        特点：

        1. 自己独占一行
        2. 高度、宽度、外边距以及内边距都可以控制
        3. 宽度默认是容器（父级宽度）
        4. 是一个容器及盒子，里面可以放行内元素或块级元素

        下面我们进行书写一些行内块元素来看一下各自的效果样式：

        代码如下：

        1. <body>
        2.     
        3.     <h1>小侯不躺平h1>
        4.     
        5.     <p>本人暂就读于xuptp>
        6.     
        7.     <div>计算机科学与技术专业div>
        8.     
        9.     <ul>等风来不如追风而去ul>
        10.     
        11.     <ol>平安喜乐!ol>  
        12. body>

        结果如图所示：

        cb371f245e694c82a2dd4fa224876edb.png

         注意：文字类的元素内不能使用块级元素

        主要存放文字则

        里不可以存放块级元素

        同理标题的元素也不可以存放块级元素

        行内元素：

        常见的行内元素：、、、、、、、、、，其中是最典型的行内元素，有的地方也称行内元素为内联元素。

        特点：

        1. 相邻行内元素在一行上，一行可以显示多个
        2. 高、宽直接设置是无效的需进行显示模式的转换
        3. 默认宽度就是它内容本身的宽度
        4. 行内元素只能容纳文本和其他行内元素

        下面我们进行书写行内元素来观察之中的区别：

        代码如下：

         

        1. <body>
        2.     
        3.     <a href="#">我是小侯a>
        4.     <a href="#">我是小侯a>
        5.     
        6.     <strong>xuptstrong>
        7.     <strong>xuptstrong>
        8.     
        9.     <b>计算机科学与技术专业b>
        10.     <b>计算机科学与技术专业b>
        11.     
        12.     <em>平安喜乐em>
        13.     <em>平安喜乐em>
        14.     
        15.     <i>未来可期i>
        16.     <i>未来可期i>
        17.     
        18.     <del>父母在不远游del>
        19.     <del>父母在不远游del>
        20.     
        21.     <s>散人乐队s>
        22.     <s>散人乐队s>
        23.     
        24.     <ins>狮童乐队ins>
        25.     <ins>狮童乐队ins>
        26.     
        27.     <u>浅尝即止u>
        28.     <u>人间风月u>
        29.     
        30.     <span>潮起潮落span>
        31.     <span>潮起潮落span>
        32. body>

        结果如下图所示：

        7f44f832fd7048618cdbd608626efbec.png

        注意：链接里面不可以再放链接

        特殊情况链接中可以放块级元素。但是给转换一下块级模式最安全

         行内块元素：

        在行内块元素中有几个特别的标签——、、，它们同时具有块元素和行内块元素的特点。

        特点：            

        1. 和相邻的元素在一行上，但是它们存在空隙。一行内可以显示多个
        2. 默认宽度就是它本身的内容宽度
        3. 高度，行高，外边距都可以控制

        下面我们来尝试书写一下观察区别：

        代码如下：

        1. <body>
        2.     <img src="D:\360Downloads\Software\案例\1.jpg" height="60px" width="60px" >
        3.     <img src="D:\360Downloads\Software\案例\2.jpeg" height="60px" width="60px">
        4.  
        5.     <input>input>
        6.     <input>input>
        7.  
        8.     <td>表格td>
        9.     <td>表格td>
        10. body>

        结果图如下所示：

        69eb6e448fcf420383be1f131707d6d0.png

         总结：

        块级元素一行只可放一个块级可设置高度和宽度默认宽度为100%容器可以包含任何标签
        行内元素一行可以放多个行内标签不可以直接设置高度和宽度本身内容（宽度）容纳文本或者其他行内元素
        行内块元素一行可以放多个行内块度可以设置宽度和高度宽度为本身内容 

        显示模式转换：

        特殊情况下，需要元素转换。一个模式元素需要转换为另一种模式的特点，比如想要增加链接的触发单位就可以将其转换为块级元素。

        • 转换为块元素：display：block        
        • 转换为行元素：display：inline
        • 转换为行内块元素：display：inline-block

        下面我们就使用实例来进行内容的讲解：

        代码如下所示：

         

        1. <style>
        2.         /* 将行内元素转换为块元素则可以使其设置宽高 */
        3.         a{
        4.             display:block;
        5.             height:50px;
        6.             width:150px;
        7.             background-color: pink;
        8.             text-decoration: none;
        9.             text-indent: 2em;
        10.         }
        11.         /* 将块元素转换为行内元素则设置的宽高不可使用 */
        12.         div{
        13.             display: inline;
        14.             height: 10px;
        15.             width: 40px;
        16.             text-align: center;
        17.             background-color: aqua;
        18.         }
        19.         /* 将行内元素转换为行内块元素 */
        20.         span{
        21.             display: inline-block;
        22.             width: 50px;
        23.             height:60px;
        24.             background-color: brown;
        25.             text-align: center;
        26.         }
        27. style>
        28. <body>
        29.     <a href="#" >小侯a>
        30.  
        31.     <div>
        32.         等风来不如追风而去！
        33.     div>
        34.  
        35.     <span>我是行内元素span>
        36. body>

        运行结果如图：

        e2ae36bcb2bc441d8a32db44af0a4216.png

         案例示范：简洁的侧边栏

        案例的核心思路分为两步：

        1.把链接a转换为块级元素，这样链接可以独占一行，并且有宽度和高度的设置

        2.鼠标经过a给链接设置背景颜色

        代码如下：

        1. <style>
        2.         a{
        3.             display: block;
        4.             /* 行高设置方便将文字居中显示 */
        5.             height: 40px;
        6.             width: 130px;
        7.             background-color:darkslategrey;
        8.             color:white;
        9.             text-indent: 2em;
        10.             text-decoration: none;
        11.             /* 将文字居中显示，上下间隔相等将文字挤在了中间位置 */
        12.             line-height: 40px;
        13.         }
        14.         a:hover{
        15.             background-color: coral;
        16.         }
        17. style>
        18. <body>
        19.     <a href="#">手机 电话卡a>
        20.     <a href="#">电视 盒子a>
        21.     <a href="#">笔记本 平板a>
        22.     <a href="#">出行 穿戴a>
        23.     <a href="#">智能 路由器a>
        24.     <a href="#">健康 儿童a>
        25.     <a href="#">耳机 音响a>
        26. body>

        运行结果如下图所示：

        da8712b3d83c4f4591972327d21804e9.png

         由上可知单行文字垂直居中即让行高等于文本高度即可：

        原理如下图所示：

        f83952d9abb64769b48bc833fc08e4f1.png

         当行高小于盒子高度则偏上，大于盒子高度则偏下。

        CSS背景

        背景属性可以设置：背景颜色、背景图片、背景平铺、背景图片的位置、背景图像固定等。

        背景颜色：

        该属性定义了元素的背景颜色

        语法：background-color:颜色值;

        一般情况下背景颜色默认为transparent（透明），也可以手动调节（透明即没有颜色设置）

        背景图片：

        background-image属性描述了元素的背景图片。实际开发中常见的一些logo或者一些装饰性的小图片或大图。优点：便于控制位置

        语法：background-image:none/url();

        如下示例：

        1. body{
        2.         background-image: url(D:/360Downloads/Software/案例/1.jpg);
        3.     }

        将大图设置为整个页面的背景方式。

        背景平铺：

        如果需要在HTML页面上对背景图像进行平铺，可以使用background-repeat属性。

        参数值作用
        repeat背景图片在纵向和横向上平铺（默认的）
        no-repeat背景图片不平铺
        repeat-x背景图片在横向上平铺
        repeat-y背景图片在纵向上平铺

        示例：

        不设置平不平铺：

        47d054c009ad4f318f7c9f58508927b5.png

         代码如下：

        1. <style>
        2.     div{
        3.         height: 700px;
        4.         width: 1000px;
        5.         background-color: pink;
        6.         background-image: url(D:/360Downloads/Software/案例/2.jpeg);
        7.     }
        8. style>
        9. <body>
        10.     <div>div>
        11. body>

        设置不平铺：

        即在样式中添加相应的代码即可，这项任务可以下去自己试着尝试完成一下，这里就不详细解释了。

        背景图片位置（可以调节图片在什么位置）：

        利用background-position属性可以改变图片在背景中的位置

        语法：background-position:x y;

        参数代表的意思是：x坐标，y坐标。同时也可以使用方位名词或精确位置

        length 百分数|浮点数字和长度单位标识符组成的长度值

        position top | center | botton | left | right  方位名词

        1.参数是方位名词：

        如果指定的两个值是方位名词，则两值的前后顺序无关，比如left top(左上)和top left(左上)效果是一样的，如果指定了一个方位名词，另一个省略则第二个默认为居中对齐。

        2.精确单位：

        如果参数是精确单位，那么第一个为x坐标，第二个为y坐标，如果只指定一个数值，那么该数值一定是x坐标，另一个默认为垂直居中

        3.参数为混合单位：

        第一个为x坐标，第二个为y坐标

        示例：

        代码如下：

        1. <style>    
        2. body{
        3.         background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
        4.         background-repeat: no-repeat;
        5.         background-position: left bottom;
        6.     }
        7. style>

        78b89bd5f07944bf802c669e892ca3a7.png

        1. <style>
        2.     body{
        3.         background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
        4.         background-repeat: no-repeat;
        5.         background-position: left center;
        6.     }
        7. style>

        0babc79c27f74ac8ac07029ccb38cdb0.png

        1.     <style>
        2.     body{
        3.         background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
        4.         background-repeat: no-repeat;
        5.         background-position: left top;
        6.     }
        7. style>

        32d8eb73f851459b953351ea617d49c2.png

        1.     <style>
        2.     body{
        3.         background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
        4.         background-repeat: no-repeat;
        5.         background-position: 80px 190px;
        6.     }
        7. style>

        6057058519ce4563873bcb8fa61798b3.png

        由上述示例可知，使用方位和数值相差不大可以根据自己网页的需要进行选择。

        背景图像的固定（背景附着）： 

        background-attachment属性设置背景图像是否固定或者随着页面其余部分滚动

        background-attachment后期可以制作视差滚动效果

        语法：background-attachment：scroll | fixed

        scroll  背景图片是随着对象的滚动而滚动的

        fixed   背景图片固定

        这一块的内容在博客中显示出来效果是一样的所以这一部分希望大家可以下去实验一下。

        背景复合写法：

        background：black  url(images/bg.jpg)  no-repeat  fixed  center  top ；

        可以省略其中的任何一项，其中复合写法顺序不定可以任意。

        背景颜色半透明：

        background:raba(0,0,0,0.3)

        最后一个参数是alpha透明度，取值范围0~1之间，1代表不透明

        注意背景半透明指的是盒子背景半透明，盒子里面的内容不受其影响

        代码如下： 

        1. <style>
        2.     div{
        3.         background:rgba(0,0,0,0.3);
        4.         width: 100px;
        5.         height: 60px;
        6.     }
        7. style>
        8. head>
        9. <body>
        10.     <div>
        11.         小侯不想放弃
        12.     div>
        13. body>

        a0c8ea8da10f49f19b9e15598ad53096.png

        背景总结： 

        属性作用值
        background-color背景颜色预定义的颜色值/十六进制/RGB代码
        background-image背景图片url(图片路径)
        background-repeat是否平铺repeat/no-repeat/repeat-x/repeat-y
        background-position背景位置length/position  分别是x和y坐标
        background-attachment背景附着scroll(背景滚动)/fixed(背景固定)
        背景简写书写更加简单背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
        背景色半透明背景颜色半透明background:rgba(0,0,0,0.3);后面必须是四个值

        综合案例：

        1.链接属于行内元素，但是此时需要设置宽度高度需要模式转换

        2.里面文字需要水平居中和垂直居中，因此需要单行文字垂直居中的代码

        3.链接里面需要设置背景图片，因此需要用到背景的相关属性

        4.鼠标经过变化背景图片，因此需要用到链接伪类选择器

        因为本人没有找到相应的背景素材所以找了一些其他图片来替换

        代码如下： 

        1. <style>
        2.         .bg1{
        3.             display: inline-block;
        4.             width:130px;
        5.             height:120px;
        6.             background-image: url(D:/360Downloads/Software/案例/1.jpg);
        7.             text-decoration: none;
        8.             text-align: center;
        9.             line-height: 120px;
        10.             background-position: 400px 200px;
        11.         }
        12.         .bg1:hover{
        13.             background-image: url(D:/360Downloads/Software/案例/对角巷.webp);
        14.         }
        15.         .bg2{
        16.             display: inline-block;
        17.             width:130px;
        18.             height:120px;
        19.             background-image: url(D:/360Downloads/Software/案例/2.jpeg);
        20.             text-decoration: none;
        21.             text-align: center;
        22.             line-height: 120px;
        23.             background-position: left center;
        24.         }
        25.         .bg2:hover{
        26.             background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
        27.         }
        28.         .bg3{
        29.             display: inline-block;
        30.             width: 130px;
        31.             height:120px;
        32.             background-image: url(D:/360Downloads/Software/案例/对角巷.webp);
        33.             text-decoration: none;
        34.             text-align: center;
        35.             line-height: 120px;
        36.             background-position: left center;
        37.         }
        38.         .bg3:hover{
        39.             background-image: url(D:/360Downloads/Software/案例/1.jpg);
        40.         }
        41.         .bg4{
        42.             display: inline-block;
        43.             width: 130px;
        44.             height:120px;
        45.             background-image: url(D:/360Downloads/Software/示例文件/16680863355383.webp);
        46.             text-decoration: none;
        47.             text-align: center;
        48.             line-height: 120px;
        49.             background-position: left center;
        50.         }
        51.         .bg4:hover{
        52.             background-image: url(D:/360Downloads/Software/案例/1.jpg);
        53.         }
        54. style>
        55. <body>
        56.     <a src="#" class="bg1">彩色导航a>
        57.     <a src="#" class="bg2">彩色导航a>
        58.     <a src="#" class="bg3">彩色导航a>
        59.     <a src="#" class="bg4">彩色导航a>
        60. body>

        8aec7c962e684cdbb87d2ffb7bfa0974.png

        CSS的三大特性 

        CSS有三个非常重要的三个特性：层叠性、继承性、优先级

        层叠性：

        相同选择器给设置相同的样式，此时一个样式就会覆盖（层叠）；另一个冲突的样式。层叠性主要解决样式冲突的问题

        层叠性原则：

        • 样式冲突，遵循的原则就是就近原则，那个样式离结构近，就执行哪个样式
        • 样式冲突，不会层叠

        6d070a26b10b4af79b0afc9aaa1a2f10.png 

        71cd49a62d7d4a4e89da7dfb2df46360.png

         由上所示字体颜色会被离得近的样式所覆盖掉

        继承性：

        现实中的继承：我们继承了父亲的姓

        CSS中的继承：子标签会继承父标签的某些样式，如文本颜色和字号。简单理解就是子承父业

        • 恰当地使用继承可以简化代码，降低CSS样式的复杂性
        • 子元素可以继承父元素的样式(text-,font-,line-这些元素开头的都可以继承，以及color属性)

        ec973872e9834c108e8038949a92874e.png 

        be9e2b90f4954d6db4ddd79e2bc5035b.png 

        由上图可知div继承了body的颜色但没有继承字体大小而使用了本身设置的字体大小，p继承了body的字体颜色。 

        行高的继承性

        • 行高可以跟单位也可以不跟单位
        • 如果子元素没有设置行高，则会继承父元素的行高为1.5
        • 此时子元素的行高是：当前子元素的文字大小*1.5
        • body行高1.5 这样写法最大的优势就是里面子元素可以根据自己文字大小自动调节行高

         优先级：

        当同一个元素指定多个选择器，就会有优先级的产生

        • 选择器相同，则执行层叠性
        • 选择器不同，则根据选择器权重执行

        选择器权重如下表所示：

        选择器选择器权重
        继承或*0,0,0,0
        元素选择器0,0,0,1
        类选择器，伪类选择器0,0,1,0
        ID选择器0,1,0,0
        行内样式 style=""1,0,0,0
        ！important 重要的无穷大

        代码如下：

        1. <style>
        2.         .test{
        3.             color:red;
        4.         }
        5.         #demo{
        6.             color:green;
        7.         }
        8.         div{
        9.             color:pink;
        10.         }
        11.     style>
        12. <body>
        13.     <div class="test" id="demo" style="color :purple">你笑起来真好看div>
        14. body>

        6861e1c336a04f97b255fec153f2022d.png

         首先执行行内样式。权重大的优先执行。

        61f233d550d64d749f5b7338da1e97f2.png 

        06d111c5003c4addb1fc2645b9f43aab.png

         d79879eb7a6546f6b89cd75d1a45d0d3.png

         fc8334f5ad97492a9cd5c8d215ac0e7c.png

         本篇博客先讲述在这里，后续会两周一更新 ，也会更新JS的相关内容，希望这篇博客对你有所帮助

         

  • 相关阅读:
    设计模式：装饰器模式
    操作系统(2.8)--线程的实现
    FDM（傅里叶分解）
    Flink开发语言大比拼：Java与Scala怎么选好？
    Landsat数据下载
    讲座回顾丨基于 OpenYurt 和 EdgeX 的云边端协同新可能
    基于C语言实现的LL(1)分析
    Springboot快递管理系统1k61h计算机毕业设计-课程设计-期末作业-毕设程序代做
    javaFx DialogPane 对话框
    SQL server 根据子级查询根父级
  • 原文地址：https://blog.csdn.net/m0_61886762/article/details/127813685