CSS是什么意思?看完就明白

2021.01.23 -

   

对于许多人来说网站为什么要有CSS?以及CSS到底是作什么用的?一定困惑你很久了吧?但是你在网路上找到的一些CSS教学文章,都是一板一眼地告诉你CSS是什么,还有从头一项一项地讲CSS的构造等等令人乏味的东西,到底有没有比较浅显易懂的方式来了解CSS呢?

基于以上的理由,高登现在要开始这一个新的系列来教大家怎么玩CSS,真的是用玩的心态来学CSS,而且让你在一些实验中了解到:CSS也没有像他们讲的那么难嘛!

CSS的由来

CSS(层叠样式表Cascading Style Sheets)由字面上来看你完全看不懂是什么含意,这个RSS有异曲同工之妙!一般人只知道CSS是用来定义网页元件的显示样式,但是如果我告诉你CSS是为了解救HTML(Hyper Text Markkup Language)而诞生的,不知道你是否可以体会?

为什么要解救HTML?这就要从早期的HTML发展来说了,最早的网页就是全部由HTML的语法所堆砌出来的,而且刚开始的时候真的就是以文字(Text)为主要内容,但是慢慢地大家对网页呈现的方式要求越来越高的时候,大家就开始在网页上加了一些排版的元素进来,像是字体的大小、字型及颜色,文字表格,图片及字的相关位置等等,所以HTML就慢慢变得越来越复杂…

举个例子好了:以现在高登工作室最上面的友站连结以及高登工作室几个大字的Logo和图片来说,在以前的HTML时代你应该也是会要求这个站的每一个网页都有一样的网页标题展示,所以在编写HTML程式码的时候,每一页的HTML里面都要包含这一部份的程式码。

万一有一天我高登觉得蓝色的按钮不好看,要改成绿色的!那工程就是我现在有两百多篇的文章每一篇的HTML标头都要一一的改过!听起来是很恐怖的一件事吧?(当然现在的HTM编辑程式可以让这件事比较简单一点!)

所以就有人把「结构化程式语言」的观念带到HTML里面来,也就是说将一个网页拆成许多的「小网页」零件,这样子作的结果就是10几年前的「框页Frame」架构到处充斥。但是用框页架构有一个很严重的问题:因为你的网页是由许多小网页组合而成,而且每一个小网页都是可以独立显示的,所以当搜寻引擎在检索你的网页的时候,会造成「瞎子摸象」的效应,也就是无法知道你的网页完整的样子,所以没多少大家就开始寻求其他的解决方式。

而CSS就是这种解决方式的产物,所以的说CSS是为了解救HTML而诞生的这样子知道了吗?那CSS为什么可以解救HTML呢?因为它可以帮HTML分担一半的工作!

以前的HTML要内容也要管排版,但是现在有了CSS之后,HTML可以只要轻松地管好他的内容就好了,而排版的部份就交给CSS来负责了,这就是网页分工的一个好例子,而且这样子把排版相关的东西集中起来之后,当你要修改网页中的某一个元素时(像我之前提到的标头部份),你只要在相对应的CSS部份修改之后,所有引用这一段CSS的网页就全部更新了,这样子网页的维护才能变得比较轻松及合理化。

CSS主要概念

所以CSS就是利用许多的<div>或是<span>将你的网页分成许多的「区块Block」,而针对每一个区块的性质去作定义,像我们现在最常看到的部落格或是网站的架构都是类似下面这一张图的管理方式:

在最外层有一个「Body」区块,再来还有一个小一点的「Wrapper」区块,然后是最上面的「Header」区块,以及主要内容的「Content」区块及边栏「Sidebar」区块,最下面是「Footer」区块。

当然每一个区块的名称可能不一样,但是整个的概念都是这样子的比较多,这也是最近这几年网页的一个共同特征,而且每一个区块里面可能又会分成许多的小区块。

所以高登就请大家可以来作一个好玩的实验:看版型每一个区块所包含的范围有多大?当然要玩这个的话你最好有一个测试站来试,或者是用Theme Test Drive之类的外挂,让你自己看得到测试版型修改后的样子,而一样的读者不会受影响。

方法就是找出你的WordPress或是其他程式所用的版型CSS的大区块项目,像我下面的图就是以Pixled这个最近还满多人用的版型来试,首先找到:<code>body { text-align: center; margin: 0; padding: 0 0 15px 0; font-family: trebuchet ms, arial, helvetica, sans-serif; background: #000 url(images/bgbody.jpg) top center no-repeat; }</code>

把它加上红色的这一列body { text-align: center; margin: 0; padding: 0 0 15px 0; font-family: trebuchet ms, arial, helvetica, sans-serif; background: #000 url(images/bgbody.jpg) top center no-repeat; <font color=”red”>border: 1px solid #ffff00;</font> }

这样的语法是在「body」这一个区块的外围加上黄色的边框,这样子你就可以用眼睛实实在在看到「body」这一个区块的管辖范围了。

相同的步骤请你在「#wrapper」、「#header」、「#header #topright」、「#header #logo」、「#catnav」、「#main」、「#contentwrapper」、「.topPost」、 「#main #welcome」、「#sidebars」及「#morefoot」一样都加上边框,但是颜色要用不同框的来替换一下(#后面的6位数十六进位码),这样子你就会有一个有许多彩色框框的网页:

以上的图如果看不清楚你也可以到Gordon’s SEO预览以上的CSS外框,不过这是使用Theme Test Drive作出来的,所以只有首页可以预览,其他的页面点进去又会回复为正常的版面了。

而由这些框框的颜色比对一下你的CSS里面的颜色就可以知道哪一个区块的管辖范围到哪里了,是不是很好玩呀?

事实上经由这样子的方式,你应该可以很清楚地看到每一个div的范围,不过有一些版型的防掉落机制不是很好,当你加上了边框之后有可能会把sidebar或是其他元件挤下来,这个我会再另外发文详细说明解决的方法

本站文章禁止转载,违者必究
阅 64
0

对于许多人来说网站为什么要有CSS?以及CSS到底是作什么用的?一定困惑你很久了吧?但是你在网路上找到的一些C […]

湘公网安备 43011102001693号

    湘ICP备19003021号-1