6-2CSS样式的优势 · 初识HTML+CSS

为什么使用css样式来设置网页的外观样式呢？右边编辑器是一段文字，我们想把“`超酷的互联网`”、“`服务及时贴心`”、“`有趣易学`”这三个短语的文本颜色设置为红色，这时就可以通过设置样式来设置，而且只需要编写一条css样式语句。第一步：把这三个短语用括起来。（见右边代码编辑器`13`行）第二步：写入下列代码：（见右边代码编辑器`7-8`行） ~~~ span{ color:red; } ~~~ 观察结果窗口文字的颜色是否变为红色了。 ### 任务我来试一试：我们现在想把“超酷的互联网”、“服务及时贴心”、“有趣易学”这三个短语的文本颜色改为蓝色在右边编辑器第`8`行，修改代码`color:red;`为`color:blue;` ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>CSS样式的优势</title> <style type="text/css"> span{ color:blue; } </style> </head> <body> <p>慕课网，<span>超酷的互联网</span>、IT技术免费学习平台，创新的网络一站式学习、实践体验；<span>服务及时贴心</span>，内容专业、<span>有趣易学</span>。专注服务互联网工程师快速成为技术高手！</p> </body> </html> ```