CSS学习笔记-01

1、CSS的引入方式

		CSS的引入方式有三种,分别为外部引入,内部引入,和行内引入。
		外部引入:外部引入需要在外部创建CSS文件,然后在html文件的head标签中用<link rel="stylesheet" href="css/test.css"/>
	引入,href是CSS文件的地址,rel是文件类型,注意rel是必不可少的,负责CSS文件样式将不可用。
		内部引入:内部引入需要在html文件的head标签中添加<style></style>标签,在该标签中写CSS代码即可实现对元素样式的改变
		行内引入:行内引入是将CSS样式设置在元素的属性中,只需要为元素添加style属性即可,如<p style="color: red;">hello css</p>

2、CSS的语法

	selector{
		property:value;
	}
	即:选择器{
		属性:值;
	}

3、CSS选择器

	选择器主要分为三种,分别为元素选择器,id选择器和类选择器
	元素选择器:直接写元素的名称即为元素选择器,将对所有该类元素进行属性设置,如:
			p{
				color:red;
			}
	id选择器:根据元素设置的id来为元素设置样式,在id前加#号即可,假如有个P标签<p id="test">hello css</p>,可以写成这样
			#test{
				color:red;
			}
	类选择器:根据元素设置的class来为元素设置样式,在class前加.即可,假如有个P标签<p class="test">hello css</p>,可以写成
	这样
		.test{
			color:red;
		}

4、在CSS中使用注释

		CSS的注释和java中的多行注释类似,写法为/* 注释内容 */

5、设置元素尺寸大小

			为元素设置大小可以用两个属性来设置,分别为width和height,对应元素的宽和高,在CSS中,宽和高的单位为像素px,假如为P元
		素设置宽为50px,高为50px。可以写成
			p{
				width:50px;
				height:50px;
			}
		这种写法为元素设置的是绝对大小,另外宽和高还可以用相对大小来表示,如
			p{
				width:50%;
				height:50%;
			}
		表示将该元素的长和宽设置为父元素大小的一半。

6、为元素设置背景

		在CSS中,元素的背景可以设置为背景颜色和背景图片。
		要为元素设置背景颜色,用到的属性是background-color,颜色可以用英文单词,十六进制和rgb表示,如:
			<style>
				#div1{
					background-color:red;
				}
				#div2{
					background-color:rgb(250,0,250);
				}
				#div3{
					background-color#00ff0;
				}
			</style>
		要为元素设置背景图片,用到的属性是background-image,同时要为该属性设置图片地址url,ru:
			<style>
				div{
					background-image:url(/img/background.jpg);
				}
			</style>
		然而,由于图片大小和我们的元素大小可能并不相同,所有经常需要对图片进行处理,CSS中对图片处理主要分为两种,分别是让图片
		循环展示铺满元素和将图片进行拉升铺满元素,写法分别为:
			<style>
				/*循环展示*/
				#div1{
					background-repeat:repeat;
				}
				/*自动拉伸*/
				#div2{
					background-size:contain;
				}
			</style>

7、CSS文本操作

  1. 文本颜色
 	对文本的颜色进行修改,直接使用color属性即可,如:
		<style>
			p{
				color:red;
			}
		</style>
  1. 文本对其
	本文对齐使用的属性是text-align,分为左对齐、居中和右对齐,如:
		<style>
			#p1{
				text-align:left;
			}
			#p2{
				text-align:center;
			}
			#p3{
				text-align:right;
			}
		</style>
  1. 文本修饰
	对文本进行修饰使用的是text-decoration属性,常用的有上划线(overline)、下划线(underline)、删除线(line-through)和无(none)
   如:
   	<style>
   	
   		/* 上划线*/
   		#p1{
   			text-decoration:overline;
   		}
   		/* 下划线*/
   		#p2{
   			text-decoration:underline;
   		}
   		/* 删除线*/
   		#p3{
   			text-decoration:line-though;
   		}
   		/* 无线*/
   		#p4{
   			text-decoration:none;
   		}
   	</style>
1. 用户与权限管理模块 角色管理: 学生:查看实验室信息、预约设备、提交耗材申请、参与安全考核 教师:管理课题组预约、审批学生耗材申请、查看本课题组使用记录 管理员:设备全生命周期管理、审核预约、耗材采购与分发、安全检查 用户操作: 登录认证:统一身份认证(对接学号 / 工号系统,模拟实现),支持密码重置 信息管理:学生 / 教师维护个人信息(联系方式、所属院系),管理员管理所有用户 权限控制:不同角色仅可见对应功能(如学生不可删除设备信息) 2. 实验室与设备管理模块 实验室信息管理: 基础信息:实验室编号、名称、位置、容纳人数、开放时间、负责人 功能分类:按学科(计算机实验室 / 电子实验室 / 化学实验室)标记,关联可开展实验类型 状态展示:实时显示当前使用人数、设备运行状态(正常 / 故障) 设备管理: 设备档案:名称、型号、规格、购置日期、单价、生产厂家、存放位置、责任人 全生命周期管理: 入库登记:管理员录入新设备信息,生成唯一资产编号 维护记录:记录维修、校准、保养信息(时间、内容、执行人) 报废处理:登记报废原因、时间,更新设备状态为 "已报废" 设备查询:支持按名称、型号、状态多条件检索,显示设备当前可用情况 3. 预约与使用模块 预约管理: 预约规则:学生可预约未来 7 天内的设备 / 实验室,单次最长 4 小时(可设置) 预约流程:选择实验室→选择设备→选择时间段→提交申请(需填写实验目的) 审核机制:普通实验自动通过,高危实验(如化学实验)需教师审核 使用记录: 签到 / 签退:到达实验室后扫码签到,离开时签退,系统自动记录实际使用时长 使用登记:填写实验内容、设备运行情况(正常 / 异常),异常情况需详细描述 违规管理:迟到 15 分钟自动取消预约,多次违规限制预约权限 4. 耗材与安全管理模块 耗材管理: 耗材档案:名称、规格、数量、存放位置、
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值