CSS样式表优化方法与技巧

MAY的SEO博客
MAY的SEO博客
MAY的SEO博客
545
文章
758
评论
2019年8月6日09:36:56 3 3,280

HTML好比是构建网页的框架,那么CSS样式表就好比是用来美化装饰网页,外在的视觉体验,往往是影响用户体验的一个重要参考因素;那CSS样式表有哪些优化方法与技巧呢?

CSS样式表优化方法与技巧

CSS样式表优化方法与技巧

有三种方法可以给网站添加CSS样式表,分别是:链接样式、内嵌样式、行内样式。

一. 链接样式

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。

四. CSS样式表优先级别

我们需要特别注意的是:HTML语言的优先级别是“从上到下,从里到外”;而CSS样式表的优先级,也就是一个网页中CSS三种样式都出现的情况下,优先级别是“从下到上”;从添加CSS样式表的角度,行内样式级别最高,内链样式和链接样式的优先级别看在HTML页面中的位置,在最下面的优先级别高。

五. CSS样式表优化方法与技巧

根据上面我们所谈论的三种CSS样式表的优缺点,对SEO优化的影响主要体现在网站访问速度上,我们不难看出:

  1. 优化网页加载CSS样式表

对于多个页面想要呈现相同的效果,最好使用链接样式,让网页结构更清晰,整体风格更统一,加快网页访问速度;

2. 精简页面代码

对于臃肿多余的页面代码,最好删除,减少服务器请求时间,提高页面加载速度。

3. 整合CSS样式表

相同的CSS样式代码避免重复出现,压缩CSS样式表,减少http请求数,减轻服务器压力等。

以上,就是CSS样式表优化方法与技巧。

  • 我的微信
  • 扫一扫微信,添加好友
  • weinxin
  • 我的微信公众号
  • 关注公众号,了解最新动态
  • weinxin
MAY的SEO博客
  • 本文由 发表于 2019年8月6日09:36:56
  • 转载请务必保留本文链接:https://may90.com/seo/css.html
CSS属性的优先级与继承性 SEO资源

CSS属性的优先级与继承性

May此刻正泡在培训班学习SEO资源CSS相关知识,以下是今天所学内容的总结。 一. 优先级 父级与子级拥有相同属性时,子级优先。 二. 继承性 子级会继承父级的属性; 不是所有的属性都有继承性; 技...
谈谈Web布局的基本认知 SEO建站

谈谈Web布局的基本认知

May最近周末至少会利用一天的时间泡在培训班。回顾一下老师讲的Web布局的基本认知。Web布局大致简单分为浮动布局和不浮动布局。再谈这两种布局之前,我们一定要了解一个概念-盒子模型。 一. 什么是盒子...
什么是SEO?(一文秒懂) SEO优化

什么是SEO?(一文秒懂)

身边很多朋友都在问我:“你说你的职业是SEO,什么是SEO?是不是CEO啊?只相差一个字母耶。”每次我都很尴尬笑一笑。虽然只差一个字母,但是区别还是非常大的。对于没有接触过SEO的人来说问这个问题情有...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:3   其中:访客  2   博主  1
    • 965影视 965影视 1

      965影视:
      博主你好,这个是我的站,请问下换友链不?

        • MAY的SEO博客 MAY的SEO博客

          @ 965影视 新站,不交换,谢谢!

        • wordpress建站吧 wordpress建站吧 6

          css样式表的影响还是比较小的,JS文件的影响估计较大