本文详细介绍了CSS层叠样式表的作用、语法格式，包括基本选择器如标签选择器、类选择器、id选择器和通用选择器。并通过实例展示了如何使用CSS对文本进行颜色、大小、对齐等样式设置，以及整体架构流程。
概要
css层叠样式表
1.作用：美化网页效果
2.语法格式：
选择器{
属性名：属性值;
属性名：属性值;
属性名：属性值;
}
2.1 基本选择器：
(1)标签选择器
(2)类选择器
(3)id选择器
(4)通用选择器
3.文本样式：
文本大小：font-size: 20px;
无语义化的盒子标签：
无语义化----没有特殊含义的标签---div，span
有语义化----有特殊含义的标签----h1~h6,p,ul,ol,li,dl,dt,dd,a,img,audio,video
4个基本选择器的区别：
标签选择器：标签名称{}---对当前页面中所有的相同的标签都生效
类选择器：.类名称{}-----对当前页面中所有的相同的类都生效---复用性
id选择器：#id名称{}---- 对当前页面中所有的相同的id都生效---唯一性
通用选择器：*{}--------- 对当前页面中所有的标签都生效---整个网站只使用一次
*{
margin: 0;
padding: 0;
box-size: border-box;
}
2.文本常用属性：
2.1 文本颜色 color
---三原色rgb(255,0,0)--- 0-255
---十六进制 #ff0000--- 0-f
红#f00 绿#0f0 蓝#00f 黑#000 白#fff
---颜色单词 red
2.2 文本大小 font-size---单位：px像素,浏览器默认字体大小是16px
2.3 文本对齐方式 text-align---左left，右right，中间center
2.4 文本装饰 text-decoration---下划线underline，去掉线none
2.5 文本缩进 text-indent---2em---em是相对单位，相对于当前元素的直接父级的字体大小
2.6 文本行高 line-height---单位：px像素，
(1)如果height和line-height一样，则文本垂直居中
(2)如果height不写单位直接写数字，则是相对于当前元素的字体大小成比例的
2.7 文本字体 font-family---前提条件：当前运行系统中必须有该字体
2.8 文本粗细 font-weight--- normal正常（400），bold加粗（700）
2.9 文本样式 font-style--- normal正常，italic斜体
整体架构流程
以下以标签选择器对文本属性进行样例举例：
在body内定义两个标签并输入文字。
在head标签内，title标签后添加<style></style>标签，然后在style标签内通过标签选择器对文本进行修饰。
具体效果图如下：
小结
以下为通过css对某一个新闻进行修饰的代码以及效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
h1 {
font-size: 30px;
color: black;
font-weight: normal;
text-align: center;
}
.source {
font-size: 14px;
color: darkgrey;
}
p {
font-size: 18px;
color: black;
text-indent: 2em;
}
.news-img {
text-align: center;
}
</style>
</head>
<body>
<h1>在希望的田野上 | 湖北秋收开镰 各地多举措保增产增收</h1>
<p class="source">来源：央视网 | 2222年12月12日 12:12:12</p>
<p>
<strong>央视网消息：</strong
>眼下，湖北省秋收开镰已有一周多的时间。水稻收割已经超过四成，玉米收割七成。湖北省通过大力推广新品种水稻，建设高标准农田等一系列措施，为秋粮稳产提供有力支撑。
中稻占据了湖北全年粮食产量的一半以上。在湖北的主产区荆门市，370万亩中稻已经收割四成以上。
</p>
<div class="news-img"><img src="./images/news.jpg" alt="" /></div>
<p>
王化林说的新品种，是湖北省研发的杂交水稻“华夏香丝”，不仅产量高，还具有抗病、抗倒、抗高温的特性。在荆门漳河镇的一工程示范田内，像“华夏香丝”这样抗旱节水的品种还有20多个，这些水稻新品将在荆门全面推广，确保来年增产增收。
</p>
<p>
此外，湖北还大力推进高标准农田建设。截至今年6月，已建成3980万亩高标准农田。目前，湖北全省仍有1800多万亩中稻正在有序收割中，预计10月中旬收割完毕。
</p>
</body>
</html>
扫一扫
3222
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
