java开发工程师入门第二阶段(06-web前端(CSS))

最新推荐文章于 2024-11-22 09:06:54 发布

@吟游诗人

最新推荐文章于 2024-11-22 09:06:54 发布

阅读量116

点赞数

分类专栏： web前端文章标签： java 开发语言

本文链接：https://blog.youkuaiyun.com/javaLkx/article/details/123754267

版权

web前端专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了CSS的基础知识，包括CSS的基本概念、多种选择器的使用方法、盒子模型的构成及元素类型的特性，并通过实例展示了如何应用这些知识来美化HTML页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

- - - 一.CSS

一.CSS

1.什么是CSS

CSS全称叫做层叠样式表stylesheet，是用来修饰HTML网页的一门技术，增强网页的展示能力。

主要是使用CSS属性来实现，最终可以将css代码和HTML网页代码进行分离，也可以提高css代码的复用性。

2.CSS的用法

( 需求::将单元格内文字居中显示 )

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css的使用</title>
		<!-- css方式4 实现css与HTML代码的分离，提高css代码的复用性-->
		<link href="demo.css" rel="stylesheet"/>
		<!-- css方式3 -->
		<style>
			td{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<table border="1" cellspacing="0" width="30%">
			<tr align="center"><!-- css方式1 -->
				<td >你好1</td>
				<td >你好2</td>
			</tr>
			<tr style="text-align:center;"><!-- css方式2 -->
				<td >你好3</td>
				<td >你好4</td>
			</tr>
		</table>
	</body>
</html>

3.标签名选择器

( 选中网页中的所有元素 )

<style> /* 在HTML中加入css*/
	span{ /* 标签名选择器,选中所有span */
	background-color: chartreuse; /* 背景颜色*/				  
        font-size: 24px; /*字号*/
		font-family: 黑体;/* 字体 */
	}
</style>

4.class选择器

( 给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开。 )

<p class="a b">123</p> <!-- b覆盖a-->

<style> /* 在HTML中加入css*/
	 /* 选择class=a的元素 */
	.a{
		background-color: cornflowerblue; /*背景颜色*/
		color:red; /*字体颜色*/
	}
	.b{
		background-color: lightsalmon;
		color: black;
	}
</style>

4.id选择器

id属性的值在整个HTML中作为唯一标识的存在。

可以通过ID值选中指定的元素（#id值）

<p id="p1">123</p>
/* 使用id选中元素 */
#p1{
	text-indent: 200px; /* 首行缩进*/
}

5.分组选择器

/* 分组选择器,将多个选择器选中的元素组合在一起，统一设置样式 */
.a,.b,#p1{
	background-color: #000000;
}

6.属性选择器

<style type="text/css">
	/* 选中指定的元素 */
	input[type='text']{
		background-color: #6495ED;
	}
</style>

7.盒子模型

指的是将HTML中所有元素都看成一个盒子，盒子与盒子之间的距离，包括盒子的边框以及盒子边框和盒子内容的距离都可以设置。
在这里插入图片描述

1.margin（外边距）

<input type="radio" name="sex" value="1" style="margin: 20px;"/>男

2.border（边框）

#div2{
border:10px solid yellow;/*实线*/
border:10px dashed yellow;/*点状*/
border:10px dotted yellow;/*虚线*/
}

3.padding（内边距）

<td style="padding: 20px;">用户名:</td>

8.元素类型的补充

1.块级元素

默认情况下，块级元素独占一行（div , p，h1~h6）

可以设置宽和高。如果不设置宽和高，其中宽是默认填满父元素，而高是由内容

外边距、边框、内边距都可以设置

2.行内元素

默认情况下，多个行内元素处在同一行

不能设置宽和高

左右外边距、边框、内边距都可以设置，上下外边距设置无效

3.行内块元素

既具备行内元素的特征，还具备块级元素的特征

9.案例

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		
		<style>
			/* 语法:选择器{样式1;样式2;样式3;} */
/* 统一网页风格 */
body{
	font-family: "宋体";/* 统一字体 */
	font-size: 15px;/* 统一字号 */
	width: 500px;/* 统一宽度 */
	padding-left: 100px;/* 设置左边距 */
}

/*修饰所有input的样式 */
.a{
	height: 20px;/* 高度 */
	width: 300px;/* 宽度 */
	padding: 15px;/* 调整内容和边框的距离,内边距 */
	font-size:20px ;/* 字号变大 */
	margin: 10px;/* 调整盒子间的距离,外边距 */
}

/* 修饰所有的提示信息 */
.xiao{
	font-size: 8px;/* 字体变小 */
	color: grey;/* 字的颜色 */
	padding-left: 30px;/* 左边距 */
}

/* 修饰同意 */
#note{
	height: 60px;/* 高度 */
	text-indent: 40px;/* 首行缩进 */
	font-size: 12px;/* 字号变大 */
}

/* 修饰立即注册按钮 */
#btn{
	background-color: #E64346;/* 背景色 */
	font-size: 25px;/* 字号变大 */
	color: white;/* 字的颜色 */
	width: 360px;/* 设置宽度 */
	height: 50px;/* 设置高度 */
	border: #E64346;/* 设置边框 */
}
			
		</style>
		
	</head>
	<body>
		<!-- 用户注册的数据需要提交给服务器入库,所以需要form -->
		<form method="get" action="#"> <!-- 指定提交数据的方式-->
			<table>
					<h2 style="padding-left: 130px;font-size:30px;">用户注册</h2>
					<tr>
						<td>
							<input type="text" placeholder="用户名" class="a"/>
						</td>
					</tr>
					<tr>
						<td class="xiao">
							支持中文、字母、数字、“-”、“_”的组合，4-20个字符
						</td>
					</tr>
					<tr>
						<td>
							<input type="password" placeholder="设置密码" class="a" />
						</td>
					</tr>
					<tr>
						<td class="xiao">
							建议使用数字、字母和符号两种以上的组合，6-20个字符
						</td>
					</tr>
					<tr>
						<td>
							<input type="password" placeholder="确认密码" class="a" />
						</td>
					</tr>
					<tr>
						<td class="xiao">
							两次密码输入不一致
						</td>
					</tr>
					<tr>
						<td>
							<input type="password" placeholder="验证手机" class="a"/>
							或
							<a href="#"> 验证邮箱</a>
						</td>
					</tr>
					<tr>
						<td id="note">
							<input type="checkbox" />
							我已阅读并同意 
							<a href="#">《京淘用户注册协议》</a>
						</td>
					</tr>
					<tr>
						<td>
							<!-- type类型必须是submit才能提交数据 -->
							<input  id="btn" type="submit" value="立即注册" />
						</td>
					</tr>
			</table>
	</body>
</html>