JavaWeb(2) CSS入门

目录

一、CSS引入方式

1.行内式

(1)格式

(2)代码

(3)效果图

(4)说明

2.内嵌式

(1)代码

(2)效果图

 (3)说明

3.连接式/外部样式表

(1)介绍

(2)代码

(3)效果图

(4)效果图

二、CSS选择器

1.元素选择器

(1)代码

(2)效果图

(3)说明

2.id选择器

(1)代码

(2)效果图

(3)说明

3.class选择器

(1)代码

(2)效果

(3)说明

三、CSS浮动

1.介绍

2.原理

3.格式

4.代码

5.效果图

四、CSS定位

1.介绍

2.static静态定位

(1)代码

(2)效果图

3.absolute绝对定位

(1)代码

(2)效果图

(3)说明

4.relative相对定位

(1)代码

(2)效果图

(3)说明

5.fixed固定定位

(1)代码

(2)效果图

(3)说明

五、CSS盒子模型

1.介绍

2.代码

3.效果图

总结


一、CSS引入方式

1.行内式

(1)格式

行内式,通过元素开始标签的style属性引入, 样式语法为 样式名:样式值; 样式名:样式值;

(2)代码

  <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>

3.效果图

(图12 盒子模型效果图) 


总结

        本篇为大家介绍了JavaWeb中有关CSS的基础知识,便于调用和复习。部分内容源于网络,如有侵权,请联系作者删除,谢谢!

  • 11
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值