关于在网页中使用CSS样式
一.目前在网页中要使用CSS有三中方法。
1.行内样式(行内式)
优点：直接就可以在标签内写，是比较快，直接作用于标签。
缺点：代码臃肿，不利与维护。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS</title> </head> <body align="center"> <div style="font-size: 20px; color: blanchedalmond;">此文字是CSS样式中的行内式 </body> </html>代码中添加了:<aling>标签进行居中，<font-size>属性并设置了属性值为20px，<color>属性为奶白色
渲染后：
2.内部样式表(内嵌式)
写在文件中的<head>标签内
优点：样式和结构还在同一个文件内，比内行式要好维护。
缺点：只能作用与当前网页。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS</title> <style> p{ font-size: 15px; color: brown;} </style> </head> <body align="center"> <p>此文字是CSS样式中的内嵌式</p> </body> </html>代码中添加了:<aling>标签进行居中，<font-size>属性并设置了属性值为15px，<color>属性为红色
渲染后：
3.链入外部样式表(外链式)
把CSS写入独立的(.css)文件中，再用<link>标签引入网页中。
优点：CSS样式与html结构完全分离，加载速度更快。
缺点：需要额外请求一次CSS文件。
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS</title> <link rel="stylesheet" href="style.CSS"> </head> <body align="center"> <p>此文字是CSS样式中的外链式</p> </body> </html>此代码中通过<link>标签链接了（style.css）文件并增加了<aling>标签进行居中
CSS文件代码：
p{ font-size: 30px; color: aquamarine;}代码中添加了:<font-size>属性并设置了属性值为30px，<color>属性为青色
渲染后：