标签：CSS 文本 Title text 美化 font 出舱 航天员 页面
1.为什么要美化页面
- 有效的传递页面信息
- 美化网页吸引用户
- 凸显页面主题
- 提高用户体验感
span 标签：重点要突出的字，使用span套起来
div 可以套单纯写内容的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#good1{
background: yellow;
}
</style>
</head>
<body>
欢迎学习 <span id="good1">Java</span>
</body>
</html>2.字体样式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*font-family:字体样式
font-size:字体大小
font-weight:字体粗细
color:字体颜色
*/
body{
/*可以同时应用于中，英文*/
font-family:"Arial Black", 楷体;
}
h1{
font-size: 50px;
color: #ff003b;
}
.p1{
font-weight: bold;
}
</style>
</head>
<body>
<h1>航天员翟志刚成功出舱</h1>
<p class="p1">
这是中国首位出舱航天员翟志刚时隔13年后再次进行出舱活动；王亚平成为中国首位进行出舱活动的女航天员，迈出了中国女性舱外太空行走第一步。
</p>
<p>
两名出舱航天员将在机械臂支持下，配合开展机械臂悬挂装置与转接件安装和舱外典型动作测试等作业。
期间，在舱内的航天员叶光富配合支持两名出舱航天员开展舱外操作。
</p>
<p>
Life was like a box of chocolates, you never know what you're gonna get.
</p>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*字体风格，斜体加粗*/
p{
font:oblique bolder 12px "楷体";
}
</style>
</head>
<body>
<p>
两名出舱航天员将在机械臂支持下，配合开展机械臂悬挂装置与转接件安装和舱外典型动作测试等作业。
期间，在舱内的航天员叶光富配合支持两名出舱航天员开展舱外操作。
</p>
</body>
</html>3.文本样式
- 颜色
- 文本对齐方式
- 首行缩进
- 行高
- 文本装饰
- 文本图片水平对齐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文本样式</title> <style> /*颜色表示方式两种： 英文; #RGB(0-F) RGBA,a显示透明度 */ h1{ color: #ff003b; /*文本排版位置，居中、左、右*/ text-align: center; } .p1{ /*段落首行缩进*/ text-indent: 2em; } .p2{ background: darkorchid; /*行高和块的高度一致，就可以上下居中，通常用于单行文字*/ height: 300px; line-height: 300px; } </style> </head> <body> <h1>鄂尔多斯首度回应年薪60万招教师</h1> <p class="p1"> 针对媒体日前发布的“鄂尔多斯年薪60万招中小学教师”一事，内蒙古自治区鄂尔多斯市伊金霍洛旗教体局官方7日首度作出回应表示，“这是一项人事改革措施，覆盖面非常广。” </p> <p class="p2"> 伊金霍洛旗是中国第三大产煤县和国家重要的能源战略基地之一，也是内蒙古重要的清洁能源输出基地，位居全国百强县前列。 </p> </body> </html><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> /*文本与图片水平对齐，参照物*/ img,span{ vertical-align: middle; } .L1{ /*下划线、中划线、上划线、没有划线或者叫超链接去下划线*/ text-decoration: underline; } .L2{ text-decoration: line-through; } .L3{ text-decoration: overline; } a{ text-decoration: none; } </style> </head> <body> <p> <img src="img01.png" alt=""> <span> 这是一张随便的图片</span> </p> <p class="L1">我爱你</p> <p class="L2">我很爱你</p> <p class="L3">我超级爱你</p> <a href="">你是傻瓜</a> </body> </html>
标签：CSS,文本,Title,text,美化,font,出舱,航天员,页面 来源： https://blog.csdn.net/Sherry1107/article/details/121197613
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。