最新消息:建议添加本博客到收藏夹,方便您下次查看哦

css样式怎么修改?

seo教程 admin 67浏览 0评论

很多SEOer都会使用模板搭建网站,但是由于不懂代码知识,所以对模板里面的一些内容无法做出相应的修改,从而导致网站优化达不到自己想要的效果。其中比较常见的就是css样式修改,比如SEOer想要更改模板背景颜色、想要更改文章字体大小等等。如果模板后台没有这些选项可以设置,那我们该怎么修改模板指定元素的css样式呢?答案是手动修改指定元素的css代码,从而实现指定元素的样式修改。这里博主以修改字体颜色为例来讲解css样式怎么修改

css样式怎么修改?

由于修改css样式的时候,会碰到很多种情况,目前没有一种通用的方式,能对所有情况都能适用的。所以这里博主讲两个常用的修改方式,掌握了这两种方式,css样式的修改基本上没有什么大的问题了。

 

需要注意的是,演示使用的是谷歌浏览器。

第一种方式:直接修改css文件

以本博客(乐呵seo:www.leheseo.com)首页的“最新消息”这几个字作为例子,如下图:

最新消息

①找到“最新消息”的css代码所在。按F12,点中弹出框的左上角鼠标样式的小框框。这时鼠标可以选择任意一个地方,意思是想要查看这个地方的元素属性。

鼠标样式的小框框

②我们点中“最新消息”,效果如下图。左边框框里面是“最新消息”的html的元素显示,右边框框是该元素css样式显示,可以看到“最新消息”的颜色被设置成了绿色。

点中“最新消息”效果图

点中“最新消息”效果图

③修改css样式。点击右边框框里面的绿色小方块,会出现很多颜色可以选择,这个时候就可以选择我们想要的颜色了。颜色板块下面还有个输入框,如果你有自己想要的颜色,而且已经知道了颜色的数值的话,可以填入进去,这个时候就不用在那个颜色板块里选择颜色了。然后点击颜色板块左边的上下滑动条,这样就可以退出设置,看效果了。

颜色板块

颜色板块

比如这里我选择了蓝色,同时可以在下面的输入框中获取到颜色数值。

选择蓝色

可以看到如下效果:

蓝色效果

④修改css文件。其实上面的修改只是针对自己的浏览器而言的,并没有真的修改到网站的代码,因为网站的代码在服务器上。所以我们要进入服务器,打开对应css文件进行修改。那css文件在哪儿呢?相信聪明的你已经看到了,正是右边的那个css文件。

css文件位置

点击红色的框框,进入到style.css文件,光标会自动定位到当前样式中,如下图,可以看到当前样式是在第41行。然后将鼠标放到style.css?ver=5.1上面,就可以看到这个css文件在服务器的具体位置了。这时我们再打开服务器中的这个css文件,定位到第41行,将这个颜色数值修改成我们要设置的颜色数值,保存就可以了。

css样式

 

第二种方式:添加行内样式

一个元素想要的样式,有可能用一个指定的类或者id来单独设置,比如上面例子中,就有一个类“.text-success”,专门设置“最新消息”的字体颜色。有时候一个元素想要的样式,没有用一个指定的类或者id来单独设置,而是继承了其他类的设置,那该怎么办呢?这时我们可以单独修改这个元素想要的样式即可,添加行内样式可以实现这一点。这里以本博客(乐呵seo:www.leheseo.com)首页的“置顶推荐”这几个字来作为例子。

置顶推荐位置

置顶推荐位置

①定位元素,看到有个类.title设置了“置顶推荐”的样式,但是样式里面没有设置到字体颜色,字体颜色是继承了其他类的。

字体颜色继承了其他类

②添加行内样式,代码:<h2 class=”title” style=”color:red;”>置顶推荐</h2>,其实就是加了这一段style=”color:red;”。

添加行内样式

③找到服务器中本博客的首页html文件进行修改。

这里值得注意的一点是,如果“置顶推荐”元素没有类.title的设置,也可以使用添加行内元素的方式,来修改指定样式。有的SEOer可能不知道css代码怎么写,不过这个没有关系。这里提供一个工具,可以先实现要设置的样式效果,然后获取到对应的css代码。通过效果获取css代码

到目前为止,这两种方式已经介绍完了。只要掌握这两种方式,css样式怎么修改这个问题就基本上可以得到解决了。

如有疑问,可以在下方评论留言哦。

原创文章,作者:乐呵seo,如若转载,请注明出处:http://www.leheseo.com/seojiaocheng/675.html
发表我的评论
取消评论

表情