【JavaWeb】CSS

文章目录

CSS

1.CSS介绍

CSS是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言.

2.CSS语法规则

在这里插入图片描述
选择器:浏览器根据选择器决定受CSS样式影响的HTML标签.
属性:要改变的样式名,并且每个属性都有一个值.属性和值被冒号分开,并由花括号包围,这样就组成了一个完整的样式声明.
多个声明:如果要定义不止一个声明,则需要用分号将每个声明分开.
注意:一般每行只描述一个属性.

3.CSS与HTML结合使用

第一种:在标签的style属性上设置k:v v 修改标签样式.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="border : 1px solid red;">标签1</div>
<div style="border : 1px solid red;">标签2</div>
<span style="border : 1px solid red;">标签1</span>
<span style="border : 1px solid red;">标签2</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13

第二种:在head标签中,使用style标签来定义各种自己需要的CSS样式.
格式:
xxx{
k:v v;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <style type="text/css">
     /*1*/
     div{
         border : 1px solid red;
     }
     span{
         border : 1px solid red;
     }
 </style>
</head>
<body>
<div >标签1</div>
<div >标签2</div>
<span >标签1</span>
<span >标签2</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

第三种:把CSS样式单独写成一个CSS文件,再通过link标签引入,即可复用.
在这里插入图片描述

div{
    border : 1px solid yellow;
}
span{
    border : 1px solid red;
}
1
2
3
4
5
6

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
 <link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div >标签1</div>
<div >标签2</div>
<span >标签1</span>
<span >标签2</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

4.常用选择器

标签名选择器:
(1).格式:
标签名{
属性 : 值;
}
(2).代码实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         div{
             border : 1px solid red;
             color : blue;
             font-size : 20px;
         }
        span{
            border : 2px dashed yellow;
            color : red;
            font-size : 10px;
        }
    </Style>
</head>
<body>
<div >标签1</div>
<div >标签2</div>
<span >标签1</span>
<span >标签2</span>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

id选择器:
(1).格式:
#id属性值{
属性 : 值;
}
(2).代码实现:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style>
         #id001{
             border : 1px solid red;
             color : blue;
             font-size : 30px;
         }
        #id002{
            border : 5px dashed blue;
            color : red;
            font-size : 20px;
        }
    Style>
head>
<body>
<div id="id001">标签1div>
<div id="id002">标签2div>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

class类型选择器:
(1).格式:
.class属性值{
属性：值;
}
(2).代码实现:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
         .class001{
             border : 1px solid red;
             color : blue;
             font-size : 26px;
         }
        .class002{
            border : 1px dashed blue;
            color : red;
            font-size : 26px;
        }
    Style>
head>
<body>
<div class="class001">标签1div>
<span class="class002">标签2span>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

组合选择器:
(1).格式:
选择器1,选择器2,选择器n{
属性 : 值;
}
(2).代码实现:

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    <style type="text/css">
         .class001,#id002{
             border : 1px solid yellow;
             color : darkmagenta;
             font-size : 20px;
         }

    Style>
head>
<body>
<div class="class001">标签1div>
<span id="id002">标签2span>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

5.CSS常用样式

(1).字体颜色: color : 颜色；
(2).宽度: width : px;
(3).高度: height : px;
注意:使用高度宽度之前,需使用border属性,否则看不到效果.
例如: border : px solid/dashed(实线或虚线) 颜色.
(4).背景颜色: background-color : 颜色;
(5).字体样式: color : 颜色; front-size : 大小；
(6).div居中: margin-left : auto; margin-right : auto;
注意是文本框居中,不是文本居中.
(7).文本居中: text-align : center;
(8).超链接去下划线:text-decoration : none;
(9).表格细线(将边框合并): border-collapse : collapse;
(10).列表去除修饰: list-style : none;

相关阅读:
Session会话追踪的实现机制
 c#简易学生管理系统
 matlab自动生成FPGA rom源码
 淘宝高级关键字搜索淘宝商品 API
PS通过GTX实现SFP网络通信2
Vue（三）——组件化编程
 GDAL Dataset.WriteRaster_Direct
javac不是内部命令
 第10章 MySQL（二）
借助适用于 Android 的 Material 运动效果构建精美的过渡
原文地址：https://blog.csdn.net/qq_53798578/article/details/125459034