网站优化|站长必学的基本HTML及CSS语法入门

接着上一集继续。你好不容易挑了一个简洁的主题,但还是觉得不顺眼,主题样式太窄(两边空间很大),文字太小(看不清楚),行距太近(感觉很挤),你想要调整,听说就是到后台调整CSS样式表,你去了一看,这是什么东西?一大堆英文及数字,实在看不懂,怎么办?

网站优化|站长必学的基本HTML及CSS语法入门

你现在有两条路:

  • 第一条路:自学CSS样式(我保证这个真的不难)
  • 第二条路:花钱请人设计符合自己的主题

自学CSS层叠样式

自学CSS,如果只是在「原有主题」中更改文字大小、颜色、行距、字距、内距、边框、背景图,这个我觉得不难,说穿了就是找到关键字,然后改一下数值即可。

但如果您是要「自行设计主题」,这就有点难度了,例如您必需要搞懂什么叫绝对位置、相对位置,还要有浮动位置的概念等等。

本文的目标是让你在原本的主题样式中来更改,这样比较简单,你也可以现学现卖。

您必需先要有以下基础

  1. HTML语法(你可以理解成:网页的源代码)
  2. CSS语法(你可以理解成:主题样式的源代码)

html的语法都是一对一对的,有开始就有结尾。例如标记一段文字的起点是<p>,那么终点就是</p>(结尾多了一个斜线)。

在所有的html语法中,你一定要看的懂两个语法,<p>这个标签是分段的意思;另一个就是<a>这是超链接的意思。

你一开始记不住这些语法都没有关系,你只要先知道有这个东西,以后需要用时,可以直接百度一下「html语法」就可以了。

CSS样式表的名称一定是#号开头或是.号开头。

有两点要特别注意:一定要有大括号{}包起来,这个道理跟HTML语法成对出现是一样的,再来就是每一个CSS语法最后要用分号;代表结束。

在此提醒你,如果您明明更改了CSS源代码却发现网页没改变,通常有二个可能,一是您的语法写错了,二是您忘了在最后打上分号。

网站主题样式CSS的修改,其实就是找到你要修改的样式名称,然后更改CSS内容即可。

这时您肯定会问了:我怎么知道,我要改的样式名称是什么啊?

1)在电脑浏览器中按F12,源代码视窗出现

2)点箭头

3)再指向要查找的地方

4)下方会出现对应的源代码。

这样您就可以找到网站页面中任何一个您想要更改的CSS样式名称了。

假设我要改网站的名称文字的颜色。通过刚刚的方法,我就可以找到网站名称的CSS叫什么。

例如在主题CSS样式表中有#banner h1 a:hover{ color:#fff;}

就是网站标题的CSS,目前只有一行color:#fff,也就是文字是白色的意思,您可以自行加上去其他的css语法,这样就能通过更改CSS源代码,让网站前段的网页改变。

说到这里,你可能会问:为什么有些css样式名称是#号开头,有些是.号开头,有什么区别吗?

答:其实都可以,在使用上其实是一样的。通常大框架会用<div id =”XXX”>,一般设定会用<div class =”XXX”>,这个XXX就是自订的CSS样式名称。

如果前台是id对应的后台css样式名称就会以#号开头;如果前台是class对应的后台css样式名称就会以.号开头。

因为网站的前台架构及后台的样式名称都已经设计好了,所以设定的名称是什么,您就是跟着用使用即可。

就像刚刚讲的网站名称,你查到是<div id=”banner”>,那么你去后台找,就一定是#banner,而不可能是.banner。

关于网站主题样式的修改,说白了就是修改CSS样式表,而要修改CSS,您还必须要有一点点HTML语法的基础,也就是说你必需要能大概看得懂网页源代码的语法。

这时你一定会问:我只是想运营个人网站,有需要学习HTML及CSS吗?

答:如果可以,请花一点点时间学习一下,这个不难就是一种语法,刚刚上面已经有跟您说明了。

未经允许不得转载:藤条部落 » 网站优化|站长必学的基本HTML及CSS语法入门