前端之HTML样式篇(三)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单</title>
		<style>
			/* 权重值:
				*选择器:0
				标签选择器:10
				类选择器:100
				id选择器:1000
			*/
			/* 优先级:行内选择器 > id选择权 > 类选择器 > 标签选择器 > **/
			/* id选择器 */
			#navigation {
				text-align: center;
				border: 1px;
			}
			
			/* id选择器下的类选择器 */
			#navigation .last {
				border: none;
			}
			
			/* 类选择器 */
			.term {
				border-right: solid 1px #808080;
				padding: 0 15px;
				/* 无文本装饰,超链接无下划线 */
				text-decoration: none;
				color: black;
			}
            /* css的文本属性 */
			/* 颜色 */
			.p1 {
				color: red;
			}
			/* 字体类型 */
			.p2 {
				font-family: "华文中宋";
			}
			/* 文字大小 */
			.p3 {
				font-size: 24px;
			}
			/* 文字加粗 */
			.p4 {
				font-weight: bold;
			}
			/* 文字倾斜 */
			.p5 {
				font-style: italic;
			}
			/* 首行缩进 */
			.p6 {
				text-indent: 60px;
			}
			/* 水平对齐方式 */
			.p7 {
				text-align: center;
			}
			/* 行高 */
			.p8 {
				line-height: 100px;
			}
			/* 背景颜色 */
			.p9 {
				height: 100px;
				background-color: gray;
			}
			/* 文本修饰 */
			.p10 {
				text-decoration: underline;
			}
		</style>
	</head>
	<body>
		<!-- 容器标签,可以包含任意内容,也可以相互包容 -->
		<!-- margin:auto让元素本身居住 color为文字颜色-->
		<div style="color: blue;margin: auto; width: 600px;">
			<!-- p标签独占一行,所以此行的空白部分也会有样式 -->
			<!--  text-align属于文本对其方式,background-color是背景颜色 -->
			<p style="text-align: center;background-color: gray;">
				嘉巴网络
			</p>
			
			<p style="text-align: center;">
				<!-- span为容器标签,不具备特殊功能,用于包裹文本来进行增加样式,因此只有文本才会有样式 -->
				<!-- color表示字体颜色, font-size表示字体大小-->
				<span style="background-color: gray; color: white; font-size: 24px;">
					嘉巴网络
				</span>
			</p>
			<p>
				2021年2月4日,湖南嘉巴网络科技有限公司在湖南长沙市长沙县成立,公司业务涉及软件和信息技术服务业,
				主要经营包括:广告设计、劳动保障事务咨询服务、贸易咨询服务、广告制作服务、单位后勤管理服务、应用软件开发、
				企业管理咨询服务、物流代理服务、企业形象策划服务、人力资源服务外包、发布服务、企业营销策划、电子产品、
				市场调研服务、教育咨询,湖南嘉巴网络科技有限公司自成立以来就以,质量求生存、品质求发展,不断开拓创新水泵的发展领域。
				客户们的满意与成功就是度量我们工作成绩的重要的标尺,希望通过不断改进产品和服务,提高客户的满意度,
				<!-- 只改变容器的样式 -->
				<span style="color: green;">公司办公地址位于:中国自由贸易试验区长沙片区泉塘街道小塘路社区泉塘安置区E区10栋111号,届时欢迎广大客户参观指导!</span>
			</p>
			<P>
				应用软件开发;计算机网络系统工程服务;广告设计;图文制作;会议、展览及相关服务;信息系统集成服务;信息技术咨询服务;
				企业管理咨询服务;教育咨询;贸易咨询服务;市场调研服务;单位后勤管理服务;企业营销策划;企业形象策划服务;
				电子产品、计算机、软件、计算机辅助设备销售;通讯设备的批发;广告制作服务、发布服务、国内代理服务;文化活动的组织与策划;
				人力资源服务外包;劳动保障事务咨询服务;职业中介(含人力资源招聘服务);建筑劳务分包;档案管理服务;物流代理服务;非许可电信业务代理。
				(依法须经批准的项目,经相关部门批准后方可开展经营活动)
			</P>
			<P>
				注册地址:中国(湖南)自由贸易试验区长沙片区泉塘街道小塘路社区泉塘安置区E区10栋111号
			</P>
		</div>
		<div id="navigation">
			<a href="#" class="term">首页</a>
			<a href="#" class="term">母婴</a>
			<a href="#" class="term">秒杀</a>
			<a href="#" class="term">书籍</a>
			<a href="#" class="term last">产品</a>
		</div>
		<p class="p1">这是一段话</p>
		<p class="p2">这是一段话</p>
		<p class="p3">这是一段话</p>
		<p class="p4">这是一段话</p>
		<p class="p5">这是一段话</p>
		<p class="p6">这是一段话</p>
		<p class="p7">这是一段话</p>
		<p class="p8">这是一段话</p>
		<p class="p9">这是一段话</p>
		<p class="p10">这是一段话</p>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值