WordPress: CSS:修订间差异

来自站长百科
跳转至: 导航、​ 搜索
(新页面: WordPress relies heavily on the presentation styles within CSS. With the introduction of WordPress v1.5 Themes, your layout options haven't just expanded, they'...)
 
无编辑摘要
第1行: 第1行:
WordPress relies heavily on the presentation styles within CSS. With the introduction of [[Wordpress:Using Themes|WordPress v1.5 Themes]], your layout options haven't just expanded, they've exploded!  WordPress has made it easier than ever to change your website look, and opened up the field even more to help you [[Wordpress:Theme Development|create your own Theme]] and page layout.
WordPress relies heavily on the presentation styles within CSS. With the introduction of [[Wordpress:Using Themes|WordPress v1.5 Themes]], your layout options haven't just expanded, they've exploded!  WordPress has made it easier than ever to change your website look, and opened up the field even more to help you [[Wordpress:Theme Development|create your own Theme]] and page layout.
WordPress非常依赖于CSS样式表达。通过[[Wordpress:Using Themes|WordPress v1.5 主题]]的介绍,你的设计操作不仅是被扩展了,更是打破了原有的限制!WordPress 比以往更容易更改外观,它拓展了空间甚至更多以帮助你[[Wordpress:Theme Development|建立你自己的主题]]和页面设计。


[[Wordpress:Glossary#CSS|CSS]] stands for '''Cascading Style Sheets'''.  It allows you to store style presentation information (like colors and layout) separate from your HTML structure.  This allows precision control of your website layout and makes your pages faster and easier to update.
[[Wordpress:Glossary#CSS|CSS]] stands for '''Cascading Style Sheets'''.  It allows you to store style presentation information (like colors and layout) separate from your HTML structure.  This allows precision control of your website layout and makes your pages faster and easier to update.


This article briefly describes the use of CSS in WordPress, and lists some references for further information.  For information on CSS itself, see [[Wordpress:Know Your Sources#CSS]].
This article briefly describes the use of CSS in WordPress, and lists some references for further information.  For information on CSS itself, see [[Wordpress:Know Your Sources#CSS]].
[[Wordpress:Glossary#CSS|CSS]],即'''Cascading Style Sheets''',(层叠样式表)。它可以脱离HTML结构存储页面风格信息(比如颜色和设计)。这样可以精确的控制你的网页设计,并让你的网页更快并且更容易更新。
本文简略介绍了CSS在 WordPress中的应用,并列举出了更多信息的一些参数。关于CSS的信息参见[[Wordpress:Know Your Sources#CSS|了解你的资源#CSS]]。


==WordPress and CSS==
==WordPress and CSS==


WordPress Themes use a combination of [[Wordpress:Templates|template files]], [[Wordpress:Template Tags|template tags]], and CSS style sheets to generate your WordPress site's look.
WordPress Themes use a combination of [[Wordpress:Templates|template files]], [[Wordpress:Template Tags|template tags]], and CSS style sheets to generate your WordPress site's look.
==WordPress和CSS==
WordPress 主题是由[[Wordpress:Templates|模板文件]]、[[Wordpress:Template Tags|模板标签]]
,以及 CSS样式表组合而成的,它们共同构成了你的WordPress的页面外观。


;Template Files :[[Wordpress:Stepping Into Templates|Template files]] are the building blocks which come together to create your site. In the [[Wordpress:Site Architecture 1.5|WordPress Theme structure]], the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the Default WordPress Theme, the multi-post view found on the front page, category, [[Wordpress:Creating_an_Archive_Index|archives]], and [[Wordpress:Creating_a_Search_Page|search]] web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can [[Wordpress:The Loop in Action|choose which parts and pieces appear]] on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see [[Wordpress:Stepping Into Templates]].
;Template Files :[[Wordpress:Stepping Into Templates|Template files]] are the building blocks which come together to create your site. In the [[Wordpress:Site Architecture 1.5|WordPress Theme structure]], the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the Default WordPress Theme, the multi-post view found on the front page, category, [[Wordpress:Creating_an_Archive_Index|archives]], and [[Wordpress:Creating_a_Search_Page|search]] web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can [[Wordpress:The Loop in Action|choose which parts and pieces appear]] on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see [[Wordpress:Stepping Into Templates]].
;模板文件:[[Wordpress:Stepping Into Templates|模板文件]]是创建页面所需的材料。在 [[Wordpress:Site Architecture 1.5|WordPress 主题结构]]中,标题、边框、内容和页脚都包含在单独的文件中。他们组合在一起构成了页面。你可以自定义这些参数。例如,在默认WordPress主题中,你的页面上在头版、分类、[[Wordpress:Creating_an_Archive_Index|档案]]以及[[Wordpress:Creating_a_Search_Page|搜索]]页面中可以找到很多缩略条目,边栏都会出现。点击任意文章,都会进入这个文章的显示页面,边栏就会消失。你可以[[Wordpress:The Loop in Action|选择哪一部分显示]]在你的网页上,个别的对他们进行定义,允许不同的标题或者边栏出现在同一个目录下的所有页面上。有关模板的更深的介绍,参见[[Wordpress:Stepping Into Templates|进入模板]]
;Template Tags :Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in [[Wordpress:Stepping Into Template Tags]].
;Template Tags :Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in [[Wordpress:Stepping Into Template Tags]].
;模板标签:模板标签是提供指令和请求以获得存储在WordPres内部数据库信息的二进制代码。有一些是可以配置的,允许你自定义日期、时间、列表以及其他网页上显示出来的元素。查看更多请点击[[Wordpress:Stepping Into Template Tags|进入模板标签]]。
;CSS Style Sheets :This is where it all comes together. On every template file within your site, there are [[Wordpress:Site Architecture 1.5|XHTML tags and CSS references]] wrapped around your template tags and content. In the style sheet within each Theme are commands for the page's structure. Without these instructions, your page would simply look like a long typed page.  With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can "float" in the middle of the viewer's screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the <tt>style.css</tt> file within each Theme folder.
;CSS Style Sheets :This is where it all comes together. On every template file within your site, there are [[Wordpress:Site Architecture 1.5|XHTML tags and CSS references]] wrapped around your template tags and content. In the style sheet within each Theme are commands for the page's structure. Without these instructions, your page would simply look like a long typed page.  With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can "float" in the middle of the viewer's screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the <tt>style.css</tt> file within each Theme folder.
;CSS样式表:在这里它们集合到了一起。在你网页上的每个模板文件中,有[[Wordpress:Site Architecture 1.5|XHTML 标签和CSS参数]]和模板标签和内容掺杂在一起。在每个主题的样式表中,有页面结构的命令。如果没有这些指令,你的页面看起来只是一个很长的打印出来的书页一样。有了这些指令,你可以移动你的材料,把你的标题做的很长,再加上写图片和照片,同样也可以做的短小精练。你的页面可以在两边留有空间的“漂浮”在浏览者屏幕的中央,也可以拉伸穿过整个屏幕,也可以占满整个屏幕。你的边栏可以在左也可在右,甚至可以在页面下方的中间位置。如何设计你的页面完全取决于你自己。当然所有的样式指令都可以在主题目录下的<tt>style.css</tt>文件中找到。


To help you understand more about how CSS works in relationship to your web page, you may wish to read some of the articles cited in these lists:
To help you understand more about how CSS works in relationship to your web page, you may wish to read some of the articles cited in these lists:
第18行: 第37行:
* [[Wordpress:Blog Design and Layout]] - Comprehensive list of resources related to site design in WordPress
* [[Wordpress:Blog Design and Layout]] - Comprehensive list of resources related to site design in WordPress
* [[Wordpress:WordPress Lessons]] - Lessons on all aspects of WordPress
* [[Wordpress:WordPress Lessons]] - Lessons on all aspects of WordPress
为了帮助您了解更多的关于CSS如何与你的网页建立联系,你可以阅读下边列出的资料:
* [[Wordpress:Templates|模板]] – 全面的WordPress主题和模板项目列表([[Wordpress:Using Themes|使用主题]]是一个很好的开始,列表中也还有其他高级应用文章供阅读)
* [[Wordpress:Blog Design and Layout|博客设计与规划]] - WordPress中全面页面设计相关的资源列表
* [[Wordpress:WordPress Lessons| Wordpress课程]] –有关 WordPress各个方面的课程


== WordPress Layout Help ==
== WordPress Layout Help ==
第35行: 第60行:
* [[Wordpress:CSS Shorthand]]
* [[Wordpress:CSS Shorthand]]
* [[Wordpress:HTML to XHTML]] <span style="color:red">NEW!</span>
* [[Wordpress:HTML to XHTML]] <span style="color:red">NEW!</span>
==WordPress规划帮助 ==
如果你对于你的WordPress主题或者规划有什么疑问或者问题,可以从查看主题作者的网站开始,看是否有什么有关你的问题的更新或者答案。以下是一些资源:
* [[Wordpress:WordPress Lessons#Designing Your WordPress Site|设计WordPress网站的相关课程]]
* [[Wordpress:Site Architecture 1.5|页面结构1.5]]
* [[Wordpress:CSS Troubleshooting|CSS问题发现与处理]]
* [[Wordpress:Finding Your CSS Styles|寻找你的CSS风格]]
* [[Wordpress:CSS Fixing Browser Bugs|CSS调试浏览器错误]]
* [[Wordpress:Validating a Website|确认网站]]
* [[Wordpress:FAQ Layout and Design|FAQ规划与设计]]
* [[Wordpress:Templates|模板]]
* [http://www.wordpress.org/support/ WordPress 支持论坛]
* [http://www.tamba2.org.uk/wordpress/graphicalcss/ WordPress CSS 指南 作者:Podz]
* [[Wordpress:CSS Shorthand|CSS速记法]]
* [[Wordpress:HTML to XHTML|从HTML到XHTML]] <span style="color:red">新!</span>

2008年4月3日 (四) 15:53的版本

WordPress relies heavily on the presentation styles within CSS. With the introduction of WordPress v1.5 Themes, your layout options haven't just expanded, they've exploded! WordPress has made it easier than ever to change your website look, and opened up the field even more to help you create your own Theme and page layout.

WordPress非常依赖于CSS样式表达。通过WordPress v1.5 主题的介绍,你的设计操作不仅是被扩展了,更是打破了原有的限制!WordPress 比以往更容易更改外观,它拓展了空间甚至更多以帮助你建立你自己的主题和页面设计。

CSS stands for Cascading Style Sheets. It allows you to store style presentation information (like colors and layout) separate from your HTML structure. This allows precision control of your website layout and makes your pages faster and easier to update.

This article briefly describes the use of CSS in WordPress, and lists some references for further information. For information on CSS itself, see Wordpress:Know Your Sources#CSS.

CSS,即Cascading Style Sheets,(层叠样式表)。它可以脱离HTML结构存储页面风格信息(比如颜色和设计)。这样可以精确的控制你的网页设计,并让你的网页更快并且更容易更新。

本文简略介绍了CSS在 WordPress中的应用,并列举出了更多信息的一些参数。关于CSS的信息参见了解你的资源#CSS

WordPress and CSS

WordPress Themes use a combination of template files, template tags, and CSS style sheets to generate your WordPress site's look.

WordPress和CSS

WordPress 主题是由模板文件模板标签 ,以及 CSS样式表组合而成的,它们共同构成了你的WordPress的页面外观。

Template Files
Template files are the building blocks which come together to create your site. In the WordPress Theme structure, the header, sidebar, content, and footer are all contained within individual files. They join together to create your page. This allows you to customize the building blocks. For example, in the Default WordPress Theme, the multi-post view found on the front page, category, archives, and search web pages on your site, the sidebar is present. Click on any post, you will be taken to the single post view and the sidebar will now be gone. You can choose which parts and pieces appear on your page, and customize them individually, allowing for a different header or sidebar to appear on all pages within a specific category. And more. For a more extensive introduction to Templates, see Wordpress:Stepping Into Templates.
模板文件:模板文件是创建页面所需的材料。在 WordPress 主题结构中,标题、边框、内容和页脚都包含在单独的文件中。他们组合在一起构成了页面。你可以自定义这些参数。例如,在默认WordPress主题中,你的页面上在头版、分类、档案以及搜索页面中可以找到很多缩略条目,边栏都会出现。点击任意文章,都会进入这个文章的显示页面,边栏就会消失。你可以选择哪一部分显示在你的网页上,个别的对他们进行定义,允许不同的标题或者边栏出现在同一个目录下的所有页面上。有关模板的更深的介绍,参见进入模板
Template Tags
Template tags are the bits of code which provide instructions and requests for information stored within the WordPress database. Some of these are highly configurable, allowing you to customize the date, time, lists, and other elements displayed on your website. You can learn more about template tags in Wordpress:Stepping Into Template Tags.
模板标签:模板标签是提供指令和请求以获得存储在WordPres内部数据库信息的二进制代码。有一些是可以配置的,允许你自定义日期、时间、列表以及其他网页上显示出来的元素。查看更多请点击进入模板标签


CSS Style Sheets
This is where it all comes together. On every template file within your site, there are XHTML tags and CSS references wrapped around your template tags and content. In the style sheet within each Theme are commands for the page's structure. Without these instructions, your page would simply look like a long typed page. With these instructions, you can move the building block structures around, making your header very long and filled with graphics or photographs, or simple and narrow. Your site can "float" in the middle of the viewer's screen with space on the left and right, or stretch across the screen, filling the whole page. Your sidebar can be on the right or left, or even start midway down the page. How you style your page is up to you. But the instructions for styling are found in the style.css file within each Theme folder.
CSS样式表:在这里它们集合到了一起。在你网页上的每个模板文件中,有XHTML 标签和CSS参数和模板标签和内容掺杂在一起。在每个主题的样式表中,有页面结构的命令。如果没有这些指令,你的页面看起来只是一个很长的打印出来的书页一样。有了这些指令,你可以移动你的材料,把你的标题做的很长,再加上写图片和照片,同样也可以做的短小精练。你的页面可以在两边留有空间的“漂浮”在浏览者屏幕的中央,也可以拉伸穿过整个屏幕,也可以占满整个屏幕。你的边栏可以在左也可在右,甚至可以在页面下方的中间位置。如何设计你的页面完全取决于你自己。当然所有的样式指令都可以在主题目录下的style.css文件中找到。

To help you understand more about how CSS works in relationship to your web page, you may wish to read some of the articles cited in these lists:

为了帮助您了解更多的关于CSS如何与你的网页建立联系,你可以阅读下边列出的资料:

  • 模板 – 全面的WordPress主题和模板项目列表(使用主题是一个很好的开始,列表中也还有其他高级应用文章供阅读)
  • 博客设计与规划 - WordPress中全面页面设计相关的资源列表
  • Wordpress课程 –有关 WordPress各个方面的课程

WordPress Layout Help

If you are having some problems or questions about your WordPress Theme or layout, begin by checking the website of the Theme author to see if there is an upgrade or answers to your questions. Here are some other resources:

WordPress规划帮助

如果你对于你的WordPress主题或者规划有什么疑问或者问题,可以从查看主题作者的网站开始,看是否有什么有关你的问题的更新或者答案。以下是一些资源: