- A+
所属分类:wrodprss
CSS样式表给WordPress提供了外观显示, 随着WordPress v1.5 主题的推出,你的布局方式已经变得以灵活多样!WordPressWordPress变得比以往更容易改变你的网站的外观,并开辟了更多的空间去帮助创建你自己的主题以及页面布局。
层叠样式表的CSS标准。 它允许你储存你的样式表信息(如颜色和布局),这些信息从HTML结构中分离。这样,可以让你更精确地控 制网站的布局,并且可以让你的页面更快、更容易地更新。
本文简要介绍了CSS在WordPress的使用,并列出了帮助的资料参考。有关的CSS本身的信息,请看了解你的资源#CSS。
WordPress和CSS
模板文件、模板标签以及CSS样式表组合起来,共同构成了WordPress网站的外观。
- 模板文件
- 模板文件就像楼房的砖块,他们相互协作构成了你的网站。在WordPress主题结构里, 头部、侧栏、内容以及底部都包含在单个文件里面。他们结合起来去创建你的网站。允许你自定义你这个“建筑”的“砖块”。 例如,在典型模板里,multi-post在首页、标签归档,以及站内搜索,侧栏都是存在的。 点击任何一个文章页,将出现单个文章页面,这时候侧栏不见了。你可以在你网站上去随意组合这些文件,并且分别定义他们,在特殊分类下你可以去做一个不同的头部或者侧栏,或者更多。有关模板的更多介绍,请查看模板进阶。
- 模板标签
- 模板标签是代码的一小部分,他们提供操作和请求信息,这些信息储存在WordPress数据库里。其中一些是高度可配置的,允许你在网站上自定义日期、时间、列表以及其他元素。你可以在模板进阶里面了解有关模板标签的更多信息。
- CSS样式表
- 这就是它们互相联系的文件。在你网站的每个模板文件里,XHTML标记和CSS参考 贯穿了模板标签和内容。样式表是每个主题的页面的标准。没有样式表,你的页面将看起来像一个长长的简单的白板。有了样式表,你可以让你的“砖块”围绕着叠起来,让你的头部变长并且填充图形和照片,或者简单并变窄。你的网页可以漂浮在中间、或者居左、居右,或者布满整个屏幕。你的侧栏可以居左,也可以居右。或者在页面的下方居中位置。想把网页变成什么样子这取决于你。style.css在每个主题文件夹里均存在。
WordPress生成的类
图片对齐以及块元素(DIV, P, TABLE 等)的类 ,在WordPress 2.5: aligncenter, alignleft 和 alignright。里有介绍。此外,类alignnone 被添加到未排列的图像,以便它们可以被安排不同的样式。
同样的类被应用到有标题的图片(如WordPress 2.6)对齐图片,3个附加的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 {...} .children {...} .pagenav {...} .page_item {...} .current_page_item {...} .current_page_parent {...} .current_page_ancestor {...} .widget {...} .widget_text {...} .blogroll {...} .linkcat{...}
- 我的微信
- 这是我的微信扫一扫
-
- 我的微信公众号
- 我的微信公众号扫一扫
-