web前端---css基础

最新推荐文章于 2025-07-26 21:12:31 发布

原创最新推荐文章于 2025-07-26 21:12:31 发布 · 204 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#css #html #web

web前端基础专栏收录该内容

6 篇文章

订阅专栏

本文介绍了CSS的基础概念，如如何通过CSS实现单元格内文字居中，以及各种选择器的使用方法，包括标签名选择器、class选择器、id选择器等。此外，还详细讲解了盒子模型和元素类型，以帮助理解元素布局。最后，通过实例展示了用户注册表单的设计和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>

二、选择器

所谓的选择器就是在HTML中帮助我们选中想要修饰的标签。
分类：

标签名选择器
class 选择器
id选择器
分组选择器
属性选择器

1、标签名选择器

选中网页中的所有元素，用span{格式代码}包起来

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

2、class选择器

给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开。
可以通过class属性值来选中指定的元素（.class值）

<p class="a b">123</p> /*-- b覆盖a，等于class=“b”*/
	<style> /* 在HTML中加入css*/
		 /* 选择class=a的元素 */
		.a{
			background-color: cornflowerblue; /*背景颜色*/
			color:red; /*字体颜色*/
		}
		.b{
			background-color: lightsalmon;
			color: black;
		}
	</style>

3、id选择器

id属性的值在整个HTML中作为唯一标识的存在。
可以通过ID值选中指定的元素（#id值）

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

4、分组选择器

分组选择器，将多个选择器选中的元素组合在一起，用逗号隔开（，），用统一设置样式。

.a,.b,#p1{
	background-color: #000000;
}

5、属性选择器

据属性条件选中符合条件的元素来设置样式（逗号隔开）
例如：标识[type=属性]｛格式代码｝

<style type="text/css">
	/* 选中指定的元素 */
	input[type='text']{ //input：输入框，text：普通文本
		background-color: #6495ED;
	}
</style>

6、选择器代码.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试css的高级选择器：分组选择器，属性选择器</title>
		<!--html嵌入css-->
		<style>
			div,#s1{ //分组选择器,div的组,id是s1的组
				color: #0000FF;
			}
			
			input[type=text]{ //属性选择器
				  border: 2px solid red;
				  border-radius: 12px;
			}
			a:hover {
			  color:green;
			}
		</style>
	</head>
	<body>
		<div >我是div1</div><!--独占一行，换行-->
		<div >我是div2</div>
		<div>我是div3</div>
		<span id="s1"> 我是span1</span><!-- 不换行-->
		<span>我是span2</span>
		<span>我是span3</span>
		<p>我是p</p><!--上下都空一行 -->
		<input type="text" placeholder="我是input1" ></input><!-- 行插入-->
			<!-- placeholder 属性提供可描述输入字段预期值的提示信息 -->
		<input type="email" placeholder="我是input2" ></input><!-- 行插入-->
		<div>
		<p><b><a href="www.baidu.com" target="_blank">这是一个链接</a></b></p>
			<!--target="_blank"：跳转链接，打开新的窗口 -->
	</body>
</html>

补充、模拟服务器解析浏览器发来的数据

1、按照?切割字符串，得到a数组
	[http: //127.0.0.1:8848/java01/stu.html ,user=1&age=2&sex=1&Like=1&edu=2&time=2021-07-07]
2、重点解析数组里的第二部分a[1]
3、按照&切割字符串，得到b数组
	[user=1,age=2,sex=1,Like=1, edu=2,time=2021-07-07]
4、遍历数组，得到每个数据user=1age=2sex=1
5、再按照=切割
   [user,1] [age,2].....

public class Test {
    public static void main(String[] args) {
        String url = "http://127.0.0.1:8848/java01/stu.html?user=1&age=2&sex=1&Like=1&edu=2&time=2021-07-07";

        //1、按？切割字符串
        /*
            //1.1、按？切割，
              String[] a = url.split("\\?");
              System.out.println(Arrays.toString(s));
            //1.2、获取数组中的值，根据&切割，[ user=1,age=2,sex=1,Like=1, edu=2,time=2021-07-07]
              String[] b = a[1].split("\\&");
              System.out.println(Arrays.toString(b));
         */
        //上面两步合成一个
        String[] sp = url.split("\\?")[1].split("\\&"); 
        System.out.println(Arrays.toString(sp));
   
        //3、遍历数组并将内容根据=进行切割
        for (String str:sp){ //遍历得到每个数据user=1 age=2 sex=1
            //4、根据=进行切割，[user,1][age,2]
            String data = str.split("=")[1];
            System.out.println(data);
        }
    }
}

三、盒子模型

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

1、margin（外边距）

单选框，举例外边框20px

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

三、元素类型的补充

1、块级元素

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

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

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

2、行内元素

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

不能设置宽和高

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

3、行内块元素

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

四、用户注册练习

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册练习</title>
		<link rel="stylesheet" href="2.css">
	</head>
	<body>
		<!-- 用户注册的数据需要提交给服务器入库,所以需要form
				method属性用来指定数据的提交方式
				action属性用来指定交给谁
		-->
		<from>
			<table>
				<tr>
					<td>
						<h2 align="center">用户注册</h2> 
							<!--align="center" 行内居中-->
					</td>
				</tr>
				<tr>
					<td>
						<input type="text" placeholder="用户名" name="name" class="a" />
					</td>
				</tr>

				<tr>
					<td class="b">
						支持中文、字母、数字、“-”、“_”的组合，4-20个字符
					</td>
				</tr>

				<tr>
					<td>
						<input type="password" placeholder="设置密码" name="password" class="a" />
					</td>
				</tr>
				<tr>
					<td class="b">
						建议使用数字、字母和符号两种以上的组合，6-20个字符
					</td>
				</tr>

				<tr>
					<td>
						<input type="password" placeholder="确认密码" name="password" class="a" />
					</td>
				</tr>
				<tr>
					<td class="b">
						两次密码输入不一致
					</td>
				</tr>

				<tr>
					<td>
						<input type="number" placeholder="验证手机" class="a" />
						或
						<a href="#">验证邮箱</a>
					</td>
				</tr>

				<tr>
					<td id="m">
						<input type="checkbox" />我已阅读并且同意
						<a href="#">《京东用户注册协议》<a />
							<!-- a：表示超链接  herf：超链接地址-->
					</td>
				</tr>
				<tr>
					<td>
						<!-- type类型必须是submit才能提交数据 -->
						<input type="submit" value="立即注册" />
					</td>
				</tr>

			</table>
		</from>
	</body>
</html>