7-6 换个地方吧,行内太挤了 - 嵌入式css样式
本节编程练习不计算学习进度,请电脑登录imooc.com操作

换个地方吧,行内太挤了 - 嵌入式css样式

现在有一任务,把右侧编辑器中的“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短词文字字号修改为18px。如果用上节课我们学习的内联式css样式的方法进行设置将是一件很头疼的事情(为每一个<span>标签加入sytle="font-size:18px"语句),本小节讲解一种新的方法嵌入式css样式来实现这个任务。

嵌入式css样式,就是可以把css样式代码写在<style type="text/css"></style>标签之间。如下面代码实现把三个<span>标签中的文字设置为红色:

<style type="text/css">
span{
color:red;
}
</style>

嵌入式css样式必须写在<style></style>之间,并且一般情况下嵌入式css样式写在<head></head>之间。如右边编辑器中的代码。

任务

我来试试:用嵌入式css样式设置字体颜色

1、在右边代码编辑器中的段落中,有三个<span>标签,请把这三个<span>标签中的文字颜色都设置为蓝色

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5. <meta charset="UTF-8">
  6. <title>嵌入式css样式</title>
  7. <style type="text/css">
  8. span {
  9.  
  10. }
  11. </style>
  12. </head>
  13.  
  14. <body>
  15. <p>慕课网,<span>超酷的互联网</span>、IT技术免费学习平台,创新的网络一站式学习、实践体验;<span>服务及时贴心</span>,内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手!</p>
  16. </body>
  17.  
  18. </html>
下一节