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.
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 和 CSS[ | ]
WordPress 主题通过组合使用 模板文件, 模板标签, 以及 CSS 样式表以生成你的 WordPress 网站的外观
- 模板文件
- 模板文件 是共同构建你的网站的基石。在文章WordPress 主题结构中介绍过,标题,侧栏,内容,以及页脚均individual files. They join together to create 你的页面. This allows you to customize the building blocks. For example, in the Default WordPress Theme, the multi-post view found on the front 页面, category, archives, and search web 页面s on 你的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 你的页面, and customize them individually, allowing for a different header or sidebar to appear on all 页面s within a specific category. And more. For a more extensive introduction to Templates, see Stepping Into Templates.
- 模板标签
- 模板标签 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 你的website. You can learn more about 模板标签 in Stepping Into 模板标签.
- CSS Style Sheets
- This is where it all comes together. On every template file within 你的site, there are XHTML tags and CSS references wrapped around 你的模板标签 and content. In the style sheet within each Theme are commands for the 页面's structure. Without these instructions, 你的页面 would simply look like a long typed 页面. With these instructions, you can move the building block structures around, making 你的header very long and filled with graphics or photographs, or simple and narrow. 你的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 页面. 你的sidebar can be on the right or left, or even start midway down the 页面. How you style 你的页面 is up to you. But the instructions for styling are found in the style.css file within each Theme folder.
To 帮助 you understand more about how CSS works in relationship to 你的web 页面, here are some sites that will 帮助 you learn more and improve the design layout of 你的website.
- CSS 资源
- Using Themes
- Blog Design and Layout
- Finding 你的CSS Styles
- Stepping Into Templates
- Stepping Into 模板标签
- Templates
- 模板标签
- Styling Lists with CSS
- WordPress Lessons
- Theme Development
- Using Themes
- Lessons on Designing 你的WordPress Site
- Upgrade_1.2_to_1.5
- The Loop in Action
- Creating Individual 页面s
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 possible resources:
- Lessons on Designing Your WordPress Site
- Site Architecture 1.5
- CSS Troubleshooting
- CSS Fixing Browser Bugs
- Know Your Sources
- Validating a Website
- FAQ Layout and Design
- Theme Development References and Resources
- WordPress Support Forums
There are many resources for CSS on the Internet and we've listed just a few to help you get started. If you need help with a specific CSS tag or selector, search Google or Yahoo for more specific help.
Introduction to CSS[ | ]
Whether you are a beginner or advanced web page designer, sometimes going back to the basics can help you with your layout design elements and problems.
- HTML Source's Introduction to CSS Stylesheets
- HTMLdog's Guide to CSS for Beginners
- Web Page Design for Designers - CSS From the Ground Up]
- W3Schools CSS Tutorials
- Westciv's CSS Hands on Tutorial
- Digitalweb's CSS 101
- Official Cascading Style Sheets Level 2 Specification
- The Web Developer's Network
- CSS Vault
- Mezzoblue's CSS Cribsheet
- Community MX free resources
- Flumpcakes CSS Optimizer
- Brain Bliss
Layout Guides[ | ]
The following sites will help you learn how to layout your site using CSS in general and help with specific problems such as formating blockquotes, menus and sidebars, graphics, and columns.
- MaxDesign's CSS Layout Examples and Guides
- Positioniseverything.net
- A List Apart's Designing Faux Columns
- Bluerobot's CSS Layouts
- Eric Meyer's Articles on CSS
- Glish CSS Tips, Techniques, and Resources
- CSS Layout Tutorial
- Mandarian Design's CSS Examples, Tips, and Tricks for Bloggers and More
- RuthsarianLayouts's CSS Layout Templates and Tips
- The Noodle Incident's Tutorials on CSS Boxes
- CSSLayouts Tips and Techniques
- Ruthsarian Layouts Examples
- WebColor's WebMaster Kit for CSS Colors
- CSS Tips and Tricks from Camera on the Road
- CSS HowTo at Intensivstation
CSS Inspiration and Motivation[ | ]
Learning from others includes expanding your horizons, to see beyond what you imagine possible. The following sites will help you to learn more about CSS and expand your imagination.
Forums and Mailing Lists[ | ]
If you want to learn more about CSS, especially cutting edge CSS and web page designs, visit one of these forums and mailing lists to share your thoughts and learn from others.
Books[ | ]
The following are some of the best books to help you learn more about CSS and web page design.