JavaWeb学习之路(25)–CSS如何应用到网页上

水深无声 2022-08-28 06:54 80阅读 0赞

***[点此查看全部文字教程、视频教程、源代码][Link 1]***

### 本文目录 ###

*  1. 前言
 *  2. 样式的应用对象
 *  3. 样式的应用方式
 *  4. CSS代码解析
 *  5. 小结

# 1. 前言 #

上一篇介绍了CSS的作用，就是用来设置网页的样式的。本篇就用一个最基础的入门实例，来展示下CSS是如何将样式设置给网页的。

# 2. 样式的应用对象 #

首先明白第一点，CSS样式的应用对象是什么。

CSS是用来设置网页样式的，它是给内容添加装饰的，所以CSS样式需要设置到网页内容——也就是要设置到HTML元素上的。

一个网页可能有很多元素，例如有table、form、div、span、img等等，我们在设置样式的时候，需要选择设置到具体哪个元素上。

例如下面一段代码，我们希望修改`春晓 作者：孟浩然`的文本颜色为绿色，那么我们就需要将样式应用到第一个p标签。

<!DOCTYPE html>
 <html>
 <head>
 <title>CSS第一个实例</title>
 <meta charset="utf-8">
 </head>
 <body>
 
 春晓 作者：孟浩然
 
 
 春苗不觉晓
 
 
 处处闻啼鸟
 
 
 夜来风雨声
 
 
 花落知多少
 
 </body>
 </html>

# 3. 样式的应用方式 #

好的，现在我们想将绿色这个样式应用到上面的第一个标签，也就是下面这段代码上。

春晓 作者：孟浩然

那么如何应用呢，其实可以通过HTML的`style`属性来实现。也就是说，style属性的值就是我们要编写的CSS代码部分。

通过style属性，我们可以将CSS样式代码应用到指定的标签上。

看下面的代码，我们给p标签设置了style样式，style属性的值`color:green;`就是CSS代码。

春晓 作者：孟浩然

# 4. CSS代码解析 #

我们已经对HTML很熟悉了，HTML是标签式的语言，它的格式如下代码，其中labelName 为标签名，content为标签内容，propertyName为属性名，propertyValue为属性值。

<labelName propertyName="propertyValue">content</labelName>

那么CSS的格式时怎么样的呢，我们分析下，如下代码中，`color`表示样式名，`:`用于区分前面名和后面的值，`green`表示值，`;`表示结束符号。

color:green;

所以这一段代码解释一下，就是将color颜色，设置为green绿色，结束！

大家可以猜想下效果了，就是将标签内文本颜色设置为绿色了。

我们打开网页预览，效果如下，OK已经如我们所愿了。  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_14_color_FFFFFF_t_70_g_se_x_16]

# 5. 小结 #

从上面的例子其实可以发现，CSS通过style属性将CSS代码应用与标签。

我们只需要记住一些CSS样式的名称和取值，就能掌握CSS了。

大家可以试一下将green修改为其他颜色，例如red、black，能否有效?

[Link 1]: https://studyingpanda.blog.csdn.net/article/details/105329926
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA54aK54yr5aSn5ZOl5aSn_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/296420ebb0f245899f0f2a25395494d4.png