<!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>
前端之HTML样式篇(三)
最新推荐文章于 2021-12-06 15:13:35 发布