目录一、常用元素属性二、字体属性1. 设置字体2. 大小font-size三、设置文本颜色color四、粗细font-weight五、文字样式font-style六、文本对齐text-align七、文本缩进text-indent八、文本装饰text-decoration九、行高line-height十、代码案例实现新闻页面编辑新闻页面代码示例一、常用元素属性CSS属性众多可参考官方文档CSS 参考手册不需要全部背下来而是在使用中学习。二、字体属性1. 设置字体通过font-family属性设置字体示例body { font-family: 微软雅黑; font-family: Microsoft YaHei; }字体名称可以用中文但不建议。2. 大小font-size通过font-size设置字体大小示例p { font-size: 20px; }不同浏览器默认字号不同Chrome 默认 16px最好给明确值。可给body标签统一设置font-size。注意单位px不要忘记。标题标签如h1-h6需要单独指定大小。注意实际设置的是字体中字符框的高度实际字符字形可能比框高或矮。示例代码设置宋体、80pxstyle div { font-family: 宋体; font-size: 80px; } /style body div这是宋体/div /body三、设置文本颜色colorcolor属性用于设置文本颜色支持三种写法color: red; /* 预定义颜色值单词 */ color: #ff0000; /* 十六进制形式最常用 */ color: rgb(255, 0, 0);/* RGB方式 */鼠标悬停在 VSCode 的颜色上会出现颜色选择器可手动调整颜色。color属性值的写法预定义的颜色值直接是单词如red。最常用十六进制形式如#ff0000。RGB 方式如rgb(255, 0, 0)。RGB 原理三原色红、绿、蓝的像素点叠加数字越大颜色越深。例如color: red;红色像素点数字越大红色越深。color: rgb(255, 0, 0);红色拉满绿色、蓝色为 0。十六进制缩写规则若十六进制的两位相同可缩写如#ff0000缩写为#f00。不可缩写的情况如#f00f两位不同无法缩写。四、粗细font-weight通过font-weight设置字体粗细示例p { font-weight: bold; /* 粗体 */ font-weight: 700; /* 数字表示700 等同于 bold */ }可用数字100~900表示粗细。700 bold400 normal默认不粗。取值范围100最细~900最粗。取值说明取值说明normal默认值标准粗细bold粗体bolder更粗相对于父元素lighter更细相对于父元素100~900100 最细900 最粗400normal700bold五、文字样式font-style通过font-style设置文字倾斜/正常示例/* 设置倾斜 */ font-style: italic; /* 取消倾斜 */ font-style: normal;很少把某个文字变倾斜但经常要把em/i改成不倾斜去掉默认倾斜。示例代码div 倾斜p 倾斜style div { /* font-weight: lighter; */ font-style: oblique; } p { font-style: italic; color: rgb(0, 0, 255); } /style body div这是一段话/div p这是第二段话/p /body六、文本对齐text-align控制文字水平方向的对齐也可控制图片等元素居中/靠右示例text-align: [值];center居中对齐。left左对齐。right右对齐。应用示例h1 左、h2 中、h3 右p 左对齐style h1 { text-align: left; } h2 { text-align: center; } h3 { text-align: right; } p { text-align: left; } /style body h1最左/h1 h2居中/h2 h3居右/h3 pLorem/p /body七、文本缩进text-indent控制段落的首行缩进其他行不影响示例text-indent: [值];单位可用px或em。用em更好1 个em 当前元素的文字大小如文字大小 16px则 2em 32px。缩进可为负表示往左缩进会导致文字“冒出去”。示例代码p 缩进 2emstyle p { text-indent: 2em; } /style body div h1这是新闻标题/h1 pLorem/p /div /body八、文本装饰text-decoration通过text-decoration设置文本装饰线示例text-decoration: [值];常用取值underline下划线常用如链接默认下划线。none啥都没有如给a标签去掉下划线。overline上划线不常用。line-through删除线不常用。示例代码h1 上划线、h2 删除线、h3 右对齐、p 下划线style h1 { text-align: left; text-decoration: overline; } h2 { text-align: center; text-decoration: line-through; } h3 { text-align: right; } p { /* text-indent: 20px; */ text-indent: 2em; text-decoration: underline; } a { text-decoration: none; } /style body h1靠左/h1 h2居中/h2 h3居右/h3 pLorem/p a href#不跳转/a /body九、行高line-height通过line-height设置行高示例line-height: [值];十、代码案例实现新闻页面页面内容包含标题居中加粗发布日期右对齐分割线提示可使用hr标签正文/段落左侧缩进插图居中显示落款右对齐新闻页面代码示例!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style .title { text-align: center; font-weight: bolder; font-family: 宋体; font-size: 40px; } .time { text-align: right; } p { text-indent: 2em; } .picture { text-align: center; } img { width: 200px; height: 400px; } .finnaly { text-align: right; } /style /head body div div classtitle这是新闻标题/div p classtime2010年3月10日/p hr /div div p这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段/p p这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段/p div classpicture img src../头像.jpg alt /div p这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段/p p这是新闻第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段/p /div div classfinnaly这是落款/div /body /html
9.零基础学CSS：元素属性设置（字体、颜色、对齐等）全解析
发布时间：2026/5/30 15:45:40
目录一、常用元素属性二、字体属性1. 设置字体2. 大小font-size三、设置文本颜色color四、粗细font-weight五、文字样式font-style六、文本对齐text-align七、文本缩进text-indent八、文本装饰text-decoration九、行高line-height十、代码案例实现新闻页面编辑新闻页面代码示例一、常用元素属性CSS属性众多可参考官方文档CSS 参考手册不需要全部背下来而是在使用中学习。二、字体属性1. 设置字体通过font-family属性设置字体示例body { font-family: 微软雅黑; font-family: Microsoft YaHei; }字体名称可以用中文但不建议。2. 大小font-size通过font-size设置字体大小示例p { font-size: 20px; }不同浏览器默认字号不同Chrome 默认 16px最好给明确值。可给body标签统一设置font-size。注意单位px不要忘记。标题标签如h1-h6需要单独指定大小。注意实际设置的是字体中字符框的高度实际字符字形可能比框高或矮。示例代码设置宋体、80pxstyle div { font-family: 宋体; font-size: 80px; } /style body div这是宋体/div /body三、设置文本颜色colorcolor属性用于设置文本颜色支持三种写法color: red; /* 预定义颜色值单词 */ color: #ff0000; /* 十六进制形式最常用 */ color: rgb(255, 0, 0);/* RGB方式 */鼠标悬停在 VSCode 的颜色上会出现颜色选择器可手动调整颜色。color属性值的写法预定义的颜色值直接是单词如red。最常用十六进制形式如#ff0000。RGB 方式如rgb(255, 0, 0)。RGB 原理三原色红、绿、蓝的像素点叠加数字越大颜色越深。例如color: red;红色像素点数字越大红色越深。color: rgb(255, 0, 0);红色拉满绿色、蓝色为 0。十六进制缩写规则若十六进制的两位相同可缩写如#ff0000缩写为#f00。不可缩写的情况如#f00f两位不同无法缩写。四、粗细font-weight通过font-weight设置字体粗细示例p { font-weight: bold; /* 粗体 */ font-weight: 700; /* 数字表示700 等同于 bold */ }可用数字100~900表示粗细。700 bold400 normal默认不粗。取值范围100最细~900最粗。取值说明取值说明normal默认值标准粗细bold粗体bolder更粗相对于父元素lighter更细相对于父元素100~900100 最细900 最粗400normal700bold五、文字样式font-style通过font-style设置文字倾斜/正常示例/* 设置倾斜 */ font-style: italic; /* 取消倾斜 */ font-style: normal;很少把某个文字变倾斜但经常要把em/i改成不倾斜去掉默认倾斜。示例代码div 倾斜p 倾斜style div { /* font-weight: lighter; */ font-style: oblique; } p { font-style: italic; color: rgb(0, 0, 255); } /style body div这是一段话/div p这是第二段话/p /body六、文本对齐text-align控制文字水平方向的对齐也可控制图片等元素居中/靠右示例text-align: [值];center居中对齐。left左对齐。right右对齐。应用示例h1 左、h2 中、h3 右p 左对齐style h1 { text-align: left; } h2 { text-align: center; } h3 { text-align: right; } p { text-align: left; } /style body h1最左/h1 h2居中/h2 h3居右/h3 pLorem/p /body七、文本缩进text-indent控制段落的首行缩进其他行不影响示例text-indent: [值];单位可用px或em。用em更好1 个em 当前元素的文字大小如文字大小 16px则 2em 32px。缩进可为负表示往左缩进会导致文字“冒出去”。示例代码p 缩进 2emstyle p { text-indent: 2em; } /style body div h1这是新闻标题/h1 pLorem/p /div /body八、文本装饰text-decoration通过text-decoration设置文本装饰线示例text-decoration: [值];常用取值underline下划线常用如链接默认下划线。none啥都没有如给a标签去掉下划线。overline上划线不常用。line-through删除线不常用。示例代码h1 上划线、h2 删除线、h3 右对齐、p 下划线style h1 { text-align: left; text-decoration: overline; } h2 { text-align: center; text-decoration: line-through; } h3 { text-align: right; } p { /* text-indent: 20px; */ text-indent: 2em; text-decoration: underline; } a { text-decoration: none; } /style body h1靠左/h1 h2居中/h2 h3居右/h3 pLorem/p a href#不跳转/a /body九、行高line-height通过line-height设置行高示例line-height: [值];十、代码案例实现新闻页面页面内容包含标题居中加粗发布日期右对齐分割线提示可使用hr标签正文/段落左侧缩进插图居中显示落款右对齐新闻页面代码示例!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style .title { text-align: center; font-weight: bolder; font-family: 宋体; font-size: 40px; } .time { text-align: right; } p { text-indent: 2em; } .picture { text-align: center; } img { width: 200px; height: 400px; } .finnaly { text-align: right; } /style /head body div div classtitle这是新闻标题/div p classtime2010年3月10日/p hr /div div p这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段这是新闻的第一段/p p这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段这是新闻第二段/p div classpicture img src../头像.jpg alt /div p这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段这是新闻第三段/p p这是新闻第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段这是新闻的第四段/p /div div classfinnaly这是落款/div /body /html
