JavaWeb-CSS

最新推荐文章于 2022-07-18 12:48:03 发布

UndefinedException

最新推荐文章于 2022-07-18 12:48:03 发布

阅读量338

点赞数

分类专栏： JavaWeb 文章标签：前端 css

本文链接：https://blog.csdn.net/weixin_62427168/article/details/125680541

版权

JavaWeb 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、基本

1.1 基本结构

    <head>    
        <!-- 内部样式表 -->
		<style type="text/css">
		/* 被style标签包围的范围是CSS环境，可以写CSS代码 */
			css代码
		</style>
		<!-- 引用外部的CSS样式表文件 -->
		<link rel="stylesheet" type="text/css" href="css/demo.css">
    </head>

1.2 样式分类

标签样式表（标签）

/* 标签样式 */
div{
    color:blue;
}
/* 全局生效 */

类样式表（class）

/* 类样式 */
.cls1{
    font-size:20px;
}
/* 生效标签应设置class属性 */

ID样式表（id）

/* ID样式 */
#id_4{
	background-color:pink;
	font-size:24px;
	font-weight:bolder;
	font-style:italic;
	font-family:"华文彩云";
}
/* 生效标签应设置id属性 */

组合样式

/* 组合样式 */
div .cls_1{
	font-size:32px;
	font-family:"黑体";
}
/* 所有div标签、class属性为cls_1的标签同时生效 */

二、盒子模型

CSS盒子模型：

Margin(外边距) - 清除边框外的区域，外边距是透明的。（上/下/左/右）
Border(边框) - 围绕在内边距和内容外的边框。（粗细/样式/颜色）
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			#div1{
				width:400px;
				height:400px;
				background-color:greenyellow;

				/* 边框样式 */
				border-width:1px;	/*边框粗细*/
				border-style:solid;	/*边框样式：solid(实线) , dotted(点状线) ... */
				border-color:blue;	/*边框颜色*/

                /*可以直接合并为下面格式*/
				/* border-top : 4px dotted blue;*/
			}

			#div2{
				width:150px;
				height:150px;
				background-color:darkorange;
				
				margin-top:100px;
				margin-left:100px;

				/* padding : 填充 */
				padding-top:50px;
				padding-left:50px;
			}

			#div3{
				width:100px;
				height:100px;
				background-color:aquamarine;
				
			}
			#div4{
				width:200px;
				height:200px;
				margin-left:100px;
				background-color:greenyellow;
			}
			body{
				margin:0;
				padding:0;
			}
		</style>
	</head>

	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3">&nbsp;</div>
			</div>
		</div>
		<div id="div4">&nbsp;</div>

	</body>
</html>

div1包含div2，div2又包含了div3，div4在div1下面

三、定位

position: absolute -- 绝对定位 , 需要配合使用 left , top
relative -- 相对定位 , 一般会和 float , margin , padding .... 一起使用

#div1{
		width:200px;
		height:50px;
		background-color:greenyellow;

		/* 绝对定位 */
		position:absolute;
		left:100px;
		top:100px;
}

#div2{
		width:200px;
		height:50px;
		background-color:aqua;

        /*相对定位*/
		float:left;
}

对于float：float 属性定义元素在哪个方向浮动。

举例：

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body{
				margin:0;
				padding:0;
			}
			#div1{

				width:200px;
				height:50px;
				background-color:green;
				/* 绝对定位 */
				position:absolute;
				left:50px;
				top:50px;
			}

			#div2{
				width:200px;
				height:50px;
				background-color:pink;

				position:relative;
				float:left;
				margin-left:100px;
			}

			#div3{
				width:100px;
				height:50px;
				background-color:blue;
				position:relative;
				float:right
			}

			div{
				position:relative;
			}
		</style>
	</head>
	<body>
		
		<div id="div1">
			<div id="div2">&nbsp;</div>
			<div id="div3">&nbsp;</div>
		</div>
	</body>
</html>

效果：

我们再测试一个div模板：

<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">
			body{
				margin:0;
				padding:0;
				background-color:#808080;
			}
			div{
				position:relative;
			}
			#div_top{
				background-color: orange;
				height:20%;
			}
			#div_left{
				background-color: greenyellow;
				height:80%;
				width:15%;
				float:left;
			}
			#div_main{
				background-color: whitesmoke;
				height:70%;
				width:85%;
				float:left;
			}
			#div_bottom{
				background-color: sandybrown;
				height:10%;
				width:85%;
				float:left;
			}
			#div_container{
				width:80%;
				height:100%;
				border:0px solid blue;
				margin-left:10%;
				
			}
		</style>
	</head>
	<body>
		<div id="div_container">
			<div id="div_top">div_top</div>
			<div id="div_left">div_left</div>
			<div id="div_main">div_main</div>
			<div id="div_bottom">div_bottom</div>
		</div>
	</body>
</html>

四、表格样式示例

4.1 常用样式

1、 字体颜色

color：red；

颜色可以写颜色名如： black, blue, red, green 等

颜色也可以写 rgb 值和十六进制表示值：如 rgb(255,0,0)， #00F6DE，如果写十六进制值必须加#

2、宽度

width:19px;

宽度可以写像素值： 19px；

也可以写百分比值： 20%；

3、高度

height:20px;

高度可以写像素值： 19px；

也可以写百分比值： 20%；

4、 背景颜色

background-color:#0F2D4C

4、 字体样式：

color： #FF0000；字体颜色红色

font-size： 20px; 字体大小

5、红色 1 像素实线边框

border： 1px solid red;

7、 DIV 居中

margin-left: auto;

margin-right: auto;

8、 文本居中：

text-align: center;

9、 超连接去下划线

text-decoration: none;

10、表格细线

table {

border: 1px solid black; /*设置边框*/

border-collapse: collapse; /*将边框合并*/

}

td,th {

border: 1px solid black; /*设置边框*/

}

11、列表去除修饰

ul {

list-style: none;

}

4.2 商品表格示例

css文件：

*{
	color: threeddarkshadow;
}
body{
	margin:0;
	padding:0;
	background-color:#808080;
}
div{
	position:relative;
	float:left;
}

#div_container{
	width:80%;
	height:100%;
	border:0px solid blue;
	margin-left:10%;
	float:left;
	background-color: honeydew;
	border-radius:8px;
}
#div_fruit_list{
	width:100%;
	border:0px solid red;
}
#tbl_fruit{
	width:60%;
	line-height:28px;
	margin-top:120px;
	margin-left:20%;
}
#tbl_fruit , #tbl_fruit tr , #tbl_fruit th , #tbl_fruit td{
	border:1px solid gray;
	border-collapse:collapse;
	text-align:center;
	font-size:16px;
	font-family:"黑体";
	font-weight:lighter;
	
}
.w20{
	width:20%;
}
.delImg{
	width:24px;
	height:24px;
}
.btn{
	border:1px solid lightgray;
	width:80px;
	height:24px;
}

html文件：

<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" href="css/demo.css">
	</head>
	<body>
		<div id="div_container">
			<div id="div_fruit_list">
				<table id="tbl_fruit">
					<tr>
						<th class="w20">名称</th>
						<th class="w20">单价</th>
						<th class="w20">数量</th>
						<th class="w20">小计</th>
						<th>操作</th>
					</tr>
					<tr>
						<td>苹果</td>
						<td>5</td>
						<td>20</td>
						<td>100</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>西瓜</td>
						<td>3</td>
						<td>20</td>
						<td>60</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>菠萝</td>
						<td>4</td>
						<td>25</td>
						<td>100</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>榴莲</td>
						<td>3</td>
						<td>30</td>
						<td>90</td>
						<td><img src="imgs/del.jpg" class="delImg"/></td>
					</tr>
					<tr>
						<td>总计</td>
						<td colspan="4">999</td>
					</tr>
				</table>
			</div>
		</div>
	</body>
</html>

效果：