CSS

0条评论

CSS

WordPress非常依赖于CSS的表现样式。对WordPress 1.5版本的主题介绍完毕后,用户的页面布局选项激增。如今在WordPress中改变网站外观比以往任何时候都容易,用字段可以更大程度地帮助用户创建自己的主题以及页面布局。

CSS即层叠样式表单。CSS允许用户将样式表现信息(如颜色与布局)与HTML结果分别存放。这样就可以精确控制网站布局,网页加载和更新也更为方便。

本文简要描述了CSS在WordPress中的用法,并列出一些可能用到的引用。CSS自身信息参见 Know Your Sources#CSS

WordPress与CSS

WordPress主题混合使用模板文件模板标签以及CSS共同生成WordPress网站外观版式。

模板文件

模板文件是可共同集合创建网站的构造块。在WordPress主题结构中,页眉、侧边条、内容以及页脚都包含在个人信息中。这些版块联合起来打造网页版式。这样用户就可以自定义构造块。例如,在WordPress默认主题下,首页为多文章浏览模式,页面侧边栏上还显示了文章分类、存档、以及搜索栏。点击任何一篇文章都可以进入该文章的全文浏览模式,侧边栏也相应消失。用户可以自行设置在首页上所显示的文章片段,还可以在某一特定分类内的所有页面中显示不同的页眉或侧边栏。除此还有很多其他功能。更多关于模板的介绍请参阅初识WordPress模板

模板标签

模板标签是这样一群代码,它们可以为存储在WordPress数据库内的信息提供指令和要求。一些模板标签非常容易配置,用户可以通过这些模板标签自定义日期、时间、列表以及其他显示在网页上的元素。要了解更多关于模板标签的信息,请参阅初识WordPress模板标签

CSS样式表单

CSS样式表单聚合了所有元素。在WordPress网站的的每个模板文件中,模板标签和文本都被XHTML标签和CSS引用所围绕。每个主题的样式表单中都含有该页面结构的命令。如果没有这些指令,网页看上去会非常枯燥。用户可通过指令移动构造块结构,使页眉长度有所扩展,并在其中填充图片或照片,也可以简化并缩短页眉。可以在左右添加空格键,这样网页就像“漂浮”在访问者的屏幕中间一样,同样也可以将网页设置填充整个屏幕。页面上的侧边栏可以在左也可以在右,甚至可以放在页面的正下方。总之,页面版块操作权完全在用户手中。但每个版式的指令都会存放在相应主题文件夹的style.css文件中。

WordPress生成的类

WordPress 2.5引进了一些用以对齐图片和区块元素(DIV, P, TABLE等)的类:aligncenter, alignleft and alignright。此外在没有对其的图片中也添加了alignnone类,以便在必要情况下区别对待。

同样的类用于对齐具有标题的图片(自WordPress 2.6起)。标题必需的三个附加CSS类,以及对齐类、标题类有:

.aligncenter,
div.aligncenter {
   display: block;
   margin-left: auto;
   margin-right: auto;
}

.alignleft {
   float: left;
}

.alignright {
   float: right;
}

.wp-caption {
   border: 1px solid #ddd;
   text-align: center;
   background-color: #f3f3f3;
   padding-top: 4px;
   margin: 10px;
   /* optional rounded corners for browsers that support it */
   -moz-border-radius: 3px;
   -khtml-border-radius: 3px;
   -webkit-border-radius: 3px;
   border-radius: 3px;
}

.wp-caption img {
   margin: 0;
   padding: 0;
   border: 0 none;
}

.wp-caption p.wp-caption-text {
   font-size: 11px;
   line-height: 17px;
   padding: 0 4px 5px;
   margin: 0;
}

每个主题的style.css文件中都应包含以上类似样式,以便正确显示图片和标题。

此外还有一些默认生成的WordPress类标签也可以用作设计样式:

.categories {...}
.cat-item {...}
.current-cat {...}
.current-cat-parent {...}
.pagenav {...}
.page_item {...}
.current_page_item {...}
.current_page_parent {...}
.widget {...}
.widget_text {...}
.blogroll {...}
.linkcat{...}

其他资料

为了更好地理解CSS如何在网页中运行,请参考阅读下列文章:

  • 模板——WordPress 主题和模板相关文章的详细列表(初学者可以从使用主题开始看起,列表中也包括很多技术性较强的文章)
  • WordPress进阶使用——WordPress网站设计相关资源列表
  • WordPress课程——全面的WordPress教程

WordPress版块设计帮助

使用WordPress主题或版式出现问题时,可以访问主题作者的网站,看看主题是否有更新,或者能否找到问题的答案。以下还有一些其他可用资源: