CGB2105第二阶段-7前端CSS修饰HTML技术

最新推荐文章于 2022-02-21 19:38:59 发布

心猿意码~~

最新推荐文章于 2022-02-21 19:38:59 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/weixin_58580280/article/details/118523885

版权

一、CSS

1、概述

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

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

2、语法

td{ text-align : center ; }

选择器{ 属性名 : 属性值 ; }

3、选择器

选择器分为5种：

标签选择器：选中网页中的所有元素
class选择器：给需要修饰的元素，加class属性，可以同时使用多个属性，之间用空格隔开
id选择器：id属性的值在整个HTML中作为唯一标识的存在。可以通过ID值选中指定的元素（#id值），注意：id 名称不能以数字开头
分组选择器：将多个选择器选中的元素组合在一起，统一设置样式
属性选择器：根据属性条件选中符合条件的元素来设置样式（逗号隔开）

3.1 标签、class、id选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css 选择器</title>
		<!-- style向HTML中嵌入css代码 -->
		<style>
			/*1.标签名选择器*/
			/*练习1：选中标签div设置所有元素的属性*/
			div{
				color: black;
				background-color:#5F9EA0;
				font-size:18px;/*设置字号大小*/
				font-family: "宋体";/*设置字体*/
			}
			/*练习2：选中标签名叫input的所有元素*/
			input{
				background-color: pink;
				color: black;
			}
			p{
				color: aqua;
				background-color: black;
			}
			/*2.class选择器：先设置class属性+通过.获取class的值*/
			.a{/*选中网页中所有class=a的元素们，其中class的值可以重复*/
				color: yellow;
			}
			/*3.id选择器：先设置id的属性+通过#获取id的值
			id的值最好不要相同*/
			#x{/*选中网页id=x的元素，由于id的值不能相同，所以只选中了一个元素*/
			font-size:calc(1.875rem);/*加大字号*/
			}
			
		</style>
	</head>
	<body>
		<div class="a">我是div1</div>
		<div id="x">我是div2</div>
		<div id="y">我是div3</div>
		
		<span class="a">我是span1</span>
		<span>我是span2</span>
		
		<p>我是p</p>
		
		<input type="text" placeholder="我是input1"/></input>
		<input type="text" placeholder="我是input2"/></input>
	</body>
</html>

3.2分组、属性选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>css 高级选择器</title>
		<!-- html嵌入css -->
		<style >
			/*1.分组选择器：把多种选择器中的元素分成一组，统一设置样式*/
			div,#x{
				color: blueviolet;
			}
			/* 2.属性选择器 ：根据标签的不同属性选择元素*/
			input[type='text']{
				background-color: #6495ed;
				border-radius:5px;
			}

		</style>
	</head>
	<body>
		<div><a href="/index.html" target="_blank">我是div1</div>
	   <div>我是div2</div>
	   <div>我是div3</div>
	   <div>我是div4</div>
	
	<span id="x">我是span1</span><br/>
	<span>我是span2</span>
	
	<p>泡泡泡泡</p>
	
	<input type="text" placeholder="input1" /></input><br/>
	<input type="tel" placeholder="input2" /></input>
	</body>
</html>

二、盒子的模型

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

css把网页中的每个元素看做是一个盒子。
margin：外边距，是指盒子和盒子之间的距离
padding：内边距，是盒子里的内容和边距的距离
width/height：内容的宽度.高度
border：边框

1、练习永和系统用户注册表单

2、HTML文件编写

注意：html引入css文件时要在同级目录之下

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>永和系统用户注册</title>
		<!-- 引入外部css文件 -->
		<link rel="stylesheet" type="text/css" href="new_file.css"/>
	</head>
	<!-- form标签用来提交数据，
	 method属性用来指定数据的提交方式
	 action属性用来指定提交到哪里 -->
	<form method="post" >
	<body>
		<table>
		<tr><td><h2 style="padding-left:120px; font-size: 30px;">用户注册</h2></td></tr>
		<tr>
			<td>
				<input class="a" type="text" name="username" placeholder="用户名"/>
			</td>
		</tr>		
		<tr>
			<td class="b">
				支持中文、数字、字母、"-"、"_"的组合，4-20个字符
			</td>
		</tr>
		<tr>
			<td>
				<input class="a" type="password" name="password" placeholder="设置密码" />
			</td>
		</tr>
		<tr>
			<td class="b">
				建议使用数字、字母和符号两种以上的结合，6-20个字符
			</td>
		</tr>
		<tr>
			<td>
				<input class="a" type="password" name="repassword" placeholder="确认密码"/>
			</td>
		</tr>
		<tr>
			<td class="b">两次密码输入不一致</td>
		</tr>
		<tr>
			<td>
				<input class="a" type="text" name="number" placeholder="验证手机"/>
				或
				<a href="1378523944@qq.com">验证邮箱</a>				
			</td>
		</tr>
		<tr>
			<td id="m">
				<input type="checkbox"/>
				我已阅读并同意
				<a href="#">《京淘用户注册协议》</a>
			</td>
		</tr>
		<tr>
			<td><input type="submit" value="立即注册" /></td>
		</tr>
		</table>
	</body>
 </form>
</html>

3、CSS文件修饰HTML文件--使用link引入

/*修饰输入框*/
.a{
	width: 300px;
	height: 30px;
	padding: 10px;/*内边距*/
	font-size: 20px;
	margin: 10px;/*外边距*/
}
/*修饰小文字*/
.b{
	font-size: 10px;
	color: gray;
	padding-left: 25px;/*左边距*/	
	}
/*修饰阅读协议*/
#m{
	padding-left: 25px;
}
/*修饰立即注册*/
input[type="submit"]{
	background-color: #FF0000;/*背景颜色*/
	color: aliceblue;/*字的颜色*/
	font-size: 20px;/*字大小*/
	height: 40px;/*高度*/
	width: 320px;/*宽度*/
	margin-left: 10px;/*左外边距*/
}
/*修饰整体字体*/
body{
	font-family: "宋体";
}