• JavaWeb——CSS的使用

    CSS 层叠样式表(英文全称:(cascading stle sheets)能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力,简单来说,CSS用来美化页面

    一、CSS的引入方式:

    1.行内式：通过元素开始标签的style属性引入

    语法:style = "样式名:样式值; 样式名:样式值;......"

    缺点:

    代码复用度低，不利于维护

    CSS样式和HTML结构代码交织在一起，影响阅读和文件大小，同时影响性能

    1. <input
    2.     type="button"
    3.     value="按钮"
    4.     style="
    5.         display: block;
    6.         width: 60px;
    7.         height: 40px;
    8.         background-color:rgb(148,235,108);
    9.         color: white;
    10.         border: 3px solid green;
    11.         font-size:22px;
    12.         font-family:'隶书';
    13.         line-height: 30px;
    14.         border-radius:5px;
    15. "/>

    2.内嵌式:通过head标签中的style标签定义本页面的公共样式。需要使用选择器确定样式作用的元素。可以提高代码的复用度

    1. <head>
    2.     <style>
    3.     input{
    4.         display: block;
    5.         width: 60px;
    6.         height: 40px;
    7.         background-color:rgb(148,235,108);
    8.         color: white;
    9.         border: 3px solid green;
    10.         font-size:22px;
    11.         font-family:'隶书';
    12.         line-height: 30px;
    13.         border-radius:5px;
    14.     }
    15.     style>
    16. head>

    3.外部样式表:将css代码单独放入到一个.css文件中，这时哪个html文件需要使用这些代码就在head标签中通过link标签引入即可。

    1. input{
    2.      display: block;
    3.      width: 60px;
    4.      height: 40px;
    5.      background-color:rgb(148,235,108);
    6.      color: white;
    7.      border: 3px solid green;
    8.      font-size:22px;
    9.      font-family:'隶书';
    10.      line-height: 30px;
    11.      border-radius:5px;
    12.     }
    1. <head>
    2.       <link href = "btn.css" ref = "stylesheet">
    3. head>

    二、CSS选择器:

    1.元素选择器:

    (1)根据标签名确定样式的作用范围

    (2)语法为:元素名{具体的样式内容}

    (3)样式只能作用到同名标签上,其他标签不可用

    (4)相同的标签未必需要相同的样式,会造成样式的作用范围太大

    1. <head>
    2.     <style>
    3.     input{
    4.         display: block;
    5.         width: 60px;
    6.         height: 40px;
    7.         background-color:rgb(148,235,108);
    8.         color: white;
    9.         border: 3px solid green;
    10.         font-size:22px;
    11.         font-family:'隶书';
    12.         line-height: 30px;
    13.         border-radius:5px;
    14.     }
    15.     style>
    16. head>

    2.id选择器:

    (1)根据元素id属性的值确定样式的作用范围

    (2)语法为:#id值{具体的样式内容}

    (3)id属性的值在页面上具有唯一性,所有id选择器也只能影响一个元素的样式

    (4)因为id属性值不够灵活,所以使用该选择器的情况较少

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <style>
    4.     #btn1{
    5.         display: block;
    6.         width:80px;
    7.         height: 40px;
    8.         background-color:rgb(140,235,100);
    9.         color: white;
    10.         border:3px solid green;
    11.         font-size:22px;
    12.         font-family:'隶书';
    13.         line-height:30px;
    14.         border-radius:5px;
    15.     }
    16.     style>
    17. head>
    18. <body>
    19.     <input id="btn1" type="button" value="按钮1"/>
    20.     <input id="btn2" type="button" value="按钮2"/>
    21.     <input id="btn3" type="button" value="按钮3"/>
    22. body>

    3.class选择器:

    (1)根据元素的class属性值确定样式的作用元素

    (2)元素的的class属性值可以重复,而且一个元素的class属性可以有多个值

    (3)语法:.class属性值{}

    1. <head>
    2.     <meta charset="UTF-8">
    3.     <style>
    4.         .shapeClass{
    5.             display: block;
    6.             width:88px;
    7.             height: 40px;
    8.             border-radius:5px;
    9.         }
    10.         .colorClass{
    11.             background-color:rgb(140,230,108);
    12.             color:white;
    13.             border:3px solid green;
    14.         }
    15.         .fontClass{
    16.             font-size:22px;
    17.             font-family:'隶书';
    18.             line-height:30px;
    19.         }
    20.     style>
    21. head>
    22. <body>
    23.     <input id="btn1" class="shapeClass colorClass fontClass" type="button" value="按钮1"/>
    24. body>

    三、CSS浮动:

    CSS的Float(浮动)使元素脱离文档流，按照指定的方向(左或右发生移动)，直到它的外边缘碰到包含框或另一个浮动框的边框为止。浮动设计的初衷为了解决文字环绕图片问题，浮动后一定不会将文字挡住，这是设计初衷。文档流是是文档中可显示对象在排列时所占用的位置/空间，而脱离文档流就是在页面中不占位置了。

    通过设置块元素的float属性，可以使其保存块元素的特征的同时能够进行浮动，float属性的可取值为left，right以及none。

    值描述
    left元素向左浮动
    right元素向右浮动
    none默认值，元素不浮动，并会显示在其文本中出现的位置

    四、CSS定位:

    position属性指定了元素的定位类型,这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。元素可以使用的顶部，底部，左侧和右侧属性定位。然而这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

    值描述
    absolute

    生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。

    定位后元素会让出原来的位置，其他元素可以占用

    元素的位置通过"left”,"top","right”以及"bottom"属性进行规定。

    fixed

    生成绝对定位的元素，相对于浏览器窗口进行定位。不会随着页面的上下移动而移动。

    元素定位后会让出原来的位置，其他元素可以占用

    元素的位置通过"left”,"top","right”以及"bottom"属性进行规定

    relative

    生成相对定位的元素，相对于其原本位置进行定位。

    定位后保留原先的占位，其他元素不会移动到该位置
    "left:20"会向元素的 LEFT 位置添加 20 像素，

    static

    默认值,没有定位,元素出现在正常的流中。

    元素出现在该出现的位置。块级元素垂直排列，行内元素水平排列

    (忽略"left”,"top","right”以及"bottom"或者z-index声明)

    五、CSS盒子模型

    所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括:边距(margin)，边框(border)，填充(padding)和实际内容(content)。

    (1)Margin(外边距):清除边框外的区域，外边距是透明的;

    (2)Boarder(边框):围绕在内边距和内容外的边框;

    (3)Padding(内边距):清除内容周围的区域，内边距是透明的;

    (4)Content(内容):盒子的内容，显示文本和图像;

    1. <head>
    2.        <meta charset="UTF-8">
    3.        <style>
    4.         .outerDiv {
    5.             width: 800px;
    6.             height: 300px;
    7.             border: 1px solid green;
    8.             background-color: rgb(230, 224, 224);
    9.             margin: 0px auto;
    10.        }
    11.         .innerDiv{
    12.             width: 100px;
    13.             height: 100px;
    14.             border: 1px solid blue;
    15.             float: left;
    16.             /* margin-top: 10px;
    17.            margin-right: 20px;
    18.            margin-bottom: 30px;
    19.            margin-left: 40px; */
    20.            margin: 10px 20px 30px 40px;
    21.         }
    22.         .d1{
    23.            background-color: greenyellow;
    24.            /* padding-top: 10px;
    25.            padding-right: 20px;
    26.            padding-bottom: 30px;
    27.            padding-left: 40px; */
    28.            padding: 10px 20px 30px 40px;
    29.        }
    30.        .d2{
    31.           background-color: rgb(79, 230, 124);
    32.        }
    33.        .d3{
    34.           background-color: rgb(26, 165, 208);
    35.        }
    36.        style>
    37. head>
    38.  <body>
    39.        <div class="outerDiv">
    40.             <div class="innerDiv d1">框1div>
    41.             <div class="innerDiv d2">框2div>
    42.             <div class="innerDiv d3">框3div>
    43.        div>
    44. body>
    45.
  • 相关阅读:
    网页html产生随机MAC地址
    一、2023.9.27.C++基础.1
    从简历被拒到收割8个大厂offer，我用了3个月成功破茧成蝶
    PE文件解析（5）：重定位表详解
    滚动条样式修改
    【自动化测试框架】关于unitttest你需要知道的事
    k8s提交spark应用消费kafka数据写入elasticsearch7
    《跟我一起学“网络安全”》——等保风评加固应急响应
    探索ABP基础架构-下
    计算机毕业设计ssm+vue基本微信小程序的今日菜谱系统
  • 原文地址：https://blog.csdn.net/m0_50460160/article/details/140948079