JavaWeb（2） CSS入门

  <input type="button" value="按钮"
     style="
        width: 60px;
        height: 40px;
        background-color: rgb(168, 251, 223);
        color: white;
        font-size: 20px;
        font-family: '楷书';
        border: 5px solid rgb(141, 141, 234);
        border-radius: 5px;
        "
    >

（3）效果图

（图1 行内式效果图）

（4）说明

html代码和css样式代码交织在一起,增加阅读难度和维护成本
css样式代码仅对当前元素有效,代码重复量高,复用度低

2.内嵌式

（1）代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        /*元素选择器，通过标签名确定样式的作用元素*/
        input {
        width: 60px;
        height: 40px;
        background-color: rgb(168, 251, 223);
        color: rgb(88, 129, 242);
        font-size: 20px;
        font-family: '隶书';
        border: 2px solid rgb(32, 245, 32);
        border-radius: 5px;
        }
    </style>
</head>

<body>
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
</body>

（2）效果图

（图2 内嵌式效果图）

（3）说明

内嵌式样式需要在head标签中,通过一对style标签定义CSS样式
CSS样式的作用范围控制要依赖选择器
CSS的样式代码中注释的方式为 /* */
内嵌式虽然对样式代码做了抽取,但是CSS代码仍然在html文件中
内嵌样式仅仅能作用于当前文件,代码复用度还是不够,不利于网站风格统一

3.连接式/外部样式表

（1）介绍

可以在项目单独创建css样式文件,专门用于存放CSS样式代码
在head标签中,通过link标签引入外部CSS样式即可

（2）代码

/*btn.css*/
input {
    width: 60px;
    height: 40px;
    background-color: rgb(168, 251, 223);
    color: rgb(88, 129, 242);
    font-size: 20px;
    font-family: '隶书';
    border: 2px solid rgb(32, 245, 32);
    border-radius: 5px;
    }

/*连接式.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>

    <link href="css/btn.css" rel="stylesheet"> 
</head>
<body>
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
    <input type="button" value="按钮">
</body>
</html>

（3）效果图

（图3 连接式效果图）

（4）效果图

CSS样式代码从html文件中剥离,利于代码的维护
CSS样式文件可以被多个不同的html引入,利于网站风格统一

二、CSS选择器

1.元素选择器

（1）代码

<head>
    <meta charset="UTF-8">
   <style>
        input{
            width: 80px;
            height: 40px;
            background-color: rgb(179, 114, 240);
            color: white;
            border: 3px solid rgb(49, 228, 241);
            font-size: 22px;
            font-family: '楷书';
            line-height: 30px;
            border-radius: 5px;
        }
   </style>
</head>
<body>
    <input id="btn1" type="button" value="按钮">
    <input id="btn2" type="button" value="按钮">
    <input id="btn3" type="button" value="按钮">
    <input id="btn4" type="button" value="按钮">
    <button id="btn5">按钮</button>
</body>

（2）效果图

（图4 元素选择器效果图）

（3）说明

根据标签名确定样式的作用范围
语法为元素名 {}
样式只能作用到同名标签上,其他标签不可用
相同的标签未必需要相同的样式,会造成样式的作用范围太大

2.id选择器

（1）代码

<head>
    <meta charset="UTF-8">
   <style>
        #btn4{
            width: 80px;
            height: 40px;
            background-color: rgb(179, 114, 240);
            color: white;
            border: 3px solid rgb(49, 228, 241);
            font-size: 22px;
            font-family: '楷书';
            line-height: 30px;
            border-radius: 5px;
        }
   </style>
</head>
<body>
    <input id="btn1" type="button" value="按钮">
    <input id="btn2" type="button" value="按钮">
    <input id="btn3" type="button" value="按钮">
    <input id="btn4" type="button" value="按钮">
    <button id="btn5">按钮</button>
</body>

（2）效果图

（图5 id选择器代码图）

（3）说明

根据元素id属性的值确定样式的作用范围
语法为 #id值 {}
id属性的值在页面上具有唯一性,所有id选择器也只能影响一个元素的样式
因为id属性值不够灵活,所以使用该选择器的情况较少

3.class选择器

（1）代码

<head>
    <meta charset="UTF-8">
   <style>
        .shapeClass{
            width: 80px;
            height: 40px;
            border-radius: 5px;
        }
        
        .colorClass{
            background-color: rgb(242, 33, 33);
            color: white;
            border: 3px solid rgba(108, 204, 241, 0.359);
        }
        .fontClass{
            font-size: 24px;
            font-family: '楷书';
            line-height: 30px;
        }
   </style>
</head>
<body>
    <input id="btn1" class="shapeClas colorClass fontClass" type="button" value="按钮">
    <input id="btn2" type="button" value="按钮">
    <input id="btn3" type="button" value="按钮">
    <input id="btn4" type="button" value="按钮">
    <button id="btn5">按钮</button>
</body>

（2）效果

（图6 class选择器效果图）

（3）说明

根据元素class属性的值确定样式的作用范围
语法为 .class值 {}
class属性值可以有一个,也可以有多个,多个不同的标签也可以是使用相同的class值
多个选择器的样式可以在同一个元素上进行叠加
因为class选择器非常灵活,所以在CSS中,使用该选择器的情况较多

三、CSS浮动

1.介绍

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

2.原理

当把框 1 向右浮动时，它脱离文档流并且向右移动，直到它的右边缘碰到包含框的右边缘。

当框 1 向左浮动时，它脱离文档流并且向左移动，直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中，所以它不占据空间，实际上覆盖住了框 2，使框 2 从视图中消失。如果把所有三个框都向左移动，那么框 1 向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。

如果包含框太窄，无法容纳水平排列的三个浮动元素，那么其它浮动块向下移动，直到有足够的空间。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。

3.格式

float：方向（可没有）

浮动的样式名:float
left 元素向左浮动。
right 元素向右浮动。
null 默认值。元素不浮动，并会显示在其在文本中出现的位置。

4.代码

<!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>
        .outerDiv{
            width: 500px;
            height: 300px;
            border:1px solid greenyellow;
            background-color: aliceblue;
        }
        .innerDiv{
            width: 100px;
            height:100px;
            border:1px solid blue;
            /* display: inline; bolck块 inline：行内元素 */
        }
        .d1{
            background-color: rgba(244, 78, 78, 0.807);
            float: right;
        }
        .d2{
            background-color: rgb(76, 179, 244);
            float: right;
        }
        .d3{
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv d1">div1</div>
        <div class="innerDiv d2">div22</div>
        <div class="innerDiv d3">div333</div>
    </div>
</body>
</html>

5.效果图

（图7 浮动效果图）

四、CSS定位

1.介绍

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

absolute 生成绝对定位的元素，相对于static定位以外的第一个交元素进行定位。元素的位置通过"eft", "top","right"以及"bottom"属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过"eft","top","right"以及"bottom"属性进行规定。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20"会向元素的LEFT位置添加20像素。
static 默认值。没有定位，元素出现在正常的流中(忽略top， bottom,left,right或者z-index声明).

2.static静态定位

（1）代码

/*
position:
    static 默认
    absolute 绝对,根据页面边缘移动
    relative 相对,根据元素原本的位置移动
    fixed 相对，相对浏览器窗口的位置
left
right
top
bottom 
*/

<!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>
        .innerDiv{
            width: 100px;
            height:100px;
            border:1px solid blue;
            /* display: inline; bolck块 inline：行内元素 */
        }
        .d1{
            background-color: rgba(244, 78, 78, 0.807);
            position:static;
            top:30px;
            left: 30px;
            
        }
        .d2{
            background-color: rgb(76, 179, 244);
            
        }
        .d3{
            background-color: yellow;
            
        }

    </style>
</head>
<body>  
        <div class="innerDiv d1">div1</div>
        <div class="innerDiv d2">div22</div>
        <div class="innerDiv d3">div333</div>
</body>
</html>

（2）效果图

（图8 static定位效果图）

（3）说明

不设置的时候的默认值就是static，静态定位，没有定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列

3.absolute绝对定位

（1）代码

position:absolute;
/*其余同上*/

（2）效果图

（图9 absolute定位效果图）

（3）说明

absolute ,通过 top left right bottom 指定元素在页面上的固定位置
定位后元素会让出原来位置,其他元素可以占用

4.relative相对定位

（1）代码

position:relative;
/*其余同上*/

（2）效果图

（图9 relative定位效果图）

（3）说明

relative 相对于自己原来的位置进行地位
定位后保留原来的站位,其他元素不会移动到该位置

5.fixed固定定位

（1）代码

position: fixed;
/*其余同上*/

（2）效果图

（图11 fixed定位效果图）

（3）说明

fixed 失踪在浏览器窗口固定位置,不会随着页面的上下移动而移动
元素定位后会让出原来的位置,其他元素可以占用

五、CSS盒子模型

1.介绍

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

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

2.代码

<!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>
        .outerDiv{
            width: 500px;
            height: 300px;
            border:1px solid greenyellow;
            background-color: aliceblue;
            margin: 0px auto;
        }
        .innerDiv{
            width: 100px;
            height:100px;
            border:1px solid blue;
            /* display: inline; bolck块 inline：行内元素 */
            float: left;
        }
        /*
        padding
        margin 外边距

        */

        .d1{
            background-color: rgba(244, 78, 78, 0.807);
            /* margin-right: 10px;
            margin-top: 10px;
            margin-left: 10px;
            padding-left: 20px;
            padding-right: 20px;
            padding-top: 20px;
            padding-bottom: 20px; */
            /* margin: 10px 20px 30px 40px; 顺时针：上右下左*/
            padding: 30px 20px 10px 5px;
            

        }
        .d2{
            background-color: rgb(76, 179, 244);
            margin-left: 10px;
        }
        .d3{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="outerDiv">
        <div class="innerDiv d1">div1</div>
        <div class="innerDiv d2">div22</div>
        <div class="innerDiv d3">div333</div>
    </div>
</body>
</html>