领先的免费Web技术教程,涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

13.CSS添加文本样式

nixiaole 2025-04-26 20:13:21 知识剖析 2 ℃

文本样式


h1 {
  color: blue;
}


  • 回顾上一节的内容,我们让h1标题的文字变成了蓝色,注意如果html中有多个h1标签,那我们这种写法所有的h1标签都会变成蓝色,除了颜色,本节我们将学习更多的CSS属性


文字大小font-size


h1 {
  color: blue;
  font-size:26px;
}


  • 上述将h1的文字大小设置成26像素。


设置字体:font-family


h1 {
  color: blue;
  font-size: 26px;
  font-family: sans-serif;
}


  • 上述将h1的字体设置成无衬线字体


字体转换:text-transform


h1 {
 color: blue;
 font-size: 26px;
 font-family: sans-serif;
 text-transform: uppercase;
}


  • 上述将h1的字母全部转换为大写


文本样式:font-style


h1 {
  color: blue;
  font-size: 26px;
  font-family: sans-serif;
  text-transform: uppercase;
  font-style: italic;
}


  • 上述将h1的内容全部变为斜体


设置段落的行高:line-height


p {
  font-size: 22px;
  font-family: sans-serif;
  line-height: 1.5;
}


  • 上述将h1的行高设置成文字大小的1.5倍


设置文字对齐方式:text-align


h4 {
  text-align: center;
}


  • 上述将h4内容居中显示
最近发表
标签列表