CSS样式表优化方法与技巧

2019年8月6日SEO优化38

HTML好比是构建网页的框架，那么CSS样式表就好比是用来美化装饰网页，外在的视觉体验，往往是影响用户体验的一个重要参考因素；那CSS样式表有哪些优化方法与技巧呢？文章源自MAY的SEO博客-https://may90.com/seo/css.html

CSS样式表优化方法与技巧

有三种方法可以给网站添加CSS样式表，分别是：链接样式、内嵌样式、行内样式。文章源自MAY的SEO博客-https://may90.com/seo/css.html

一. 链接样式

1. 生成一个外部独立的.css文件；

2. 在head标签之间添加link，把外部的.css文件；

3. 把样式表代码书写在这个外部独立的.css文件里。

<link href="example.css" type="text\css" rel="stylesheet"

优点：

①. HTML文件更小，结构更清晰；

②. 网站打开速度更快；

③. 相同的.css文件可以在多个页面上重复使用；

缺点：

在加载外部CSS时，页面可能无法正确呈现。

二. 内嵌样式

1. 在head标签之间添加一对style标签；

2. 把样式表写在这对style标签之间；

<head>
  <style type="text/css">
    p {color: black; font-size: 14px;}
    .example {display: block; margin: 0 auto;}
    #ex-go, #ex-back {border: solid 1px red;}
  </style>
</head>

优点：

①. 只影响到一个页面；

②. HTML和CSS在同一个文件中；

缺点：

①. 页面文件大，增加页面加载时间

②. 只影响到这一个页面，其他页面无法调用。

三. 行内样式

样式表作为一个style属性，添加在任何标签内

<!DOCTYPE html>
<html>
<body style="background-color: white;">
<h1 style="color: red;">CSS样式表</h1>
<p style="color: black;">CSS样式表学习，请关注MAY的SEO博客</p>
</body>
</html>

优点：

①. 每个HTML元素单独设置样式；

②. 测试和预览更改，非常方便；

③. 降低HTTP请求

缺点：

CSS必须应用于每个元素，同样的HTML元素需要多次重复添加CSS。