The CSS Anthology: 101 Essential Tips, Tricks & Hacks
[摘要]:
The CSS Anthology:
101 Essential Tips, Tricks & Hacks
By Rachel Andrew
“The most complete question-and-answer book on CSS”
* Discover practical CSS page layouts you can put to use instantly.
* Combine CSS with images to create impressive visual effects.
* Troubleshoot CSS problems and learn to deal with alternative browsers.
* Save hours of maintenance by creating a site-wide style sheet.
* Customize each CSS solution to meet your specific needs.
http://www.sitepoint.com/article/css-anthology-tips-tricks-1
Table Of Contents
- Here’s a look at the table of contents:
- Preface
- Who Should Read This Book?
- What’s Covered in This Book?
- The Book’s Website
- The SitePoint Forums
- The SitePoint Newsletters
- Your Feedback
- Acknowledgements
- Getting Started with CSS
- The Problem with HTML
- Defining Styles with CSS
- CSS Selectors
- Summary
- Text Styling and Other Basics
- How do I replace font tags with CSS?
- Should I use pixels, points, ems or something else for font sizes?
- How do I specify that my text is shown in a certain font?
- How do I remove underlines from my links?
- How do I create a link that changes color on mouseover?
- How do I display two different styles of link on one page?
- How do I add a background color to a heading?
- How do I style headings with underlines?
- How do I get rid of the large gap between an h1 tag and the following paragraph?
- How do I highlight text on the page without using font tags?
- How do I alter the line-height (leading) on my text?
- How do I justify text?
- How do I style a horizontal rule?
- How do I indent text?
- How do I center text?
- How do I change text to all-capitals using CSS?
- How do I change or remove the bullets on list items?
- How do I use an image for a list item bullet?
- How do I remove the indented left margin from a list?
- How do I display a list horizontally?
- How do I add comments to my CSS file?
- How do I get rid of the page margins without adding attributes to the body tag?
- Summary
- CSS and Images
- How do I add a border to images?
- How do I use CSS to replace the deprecated HTML border attribute on images?
- How do I set a background image for my page with CSS?
- How do I position my background image?
- How do I make a background image that stays still while the text moves when the page is scrolled?
- How do I set background images for other elements?
- How do I place text on top of an image?
- How do I add more than one background image to my document?
- Summary
- Navigation
- How do I replace image-based navigation with CSS?
- How do I style a structural list as a navigation menu?
- How do I use CSS to create rollover navigation without images or JavaScript?
- Can I use CSS and lists to create a navigation system with sub-navigation?
- How do I make a horizontal menu using CSS and lists?
- How do I create button-like navigation using CSS?
- How do I create tabbed navigation with CSS?
- How do I change the cursor type?
- How do I create rollovers in CSS without JavaScript?
- Summary
- Tabular Data
- How do I lay out spreadsheet data using CSS?
- How do I ensure that my tabular data is accessible as well as attractive?
- How do I add a border to a table without using the HTML border attribute?
- How do I stop spaces appearing between the cells of my table when I’ve added borders using CSS?
- How do I display spreadsheet data in an attractive and usable way?
- How do I display table rows in alternating colors?
- How do I change a table row’s background color on hover?
- How do I display a calendar using CSS?
- Summary
- Forms and User Interfaces
- How do I style form elements using CSS?
- How do I apply different styles to fields in a single form?
- How do I stop my form creating additional white space and line breaks?
- How do I make a submit button look like text?
- How do I ensure that users with text-only devices understand how to complete my form?
- How do I lay out a two-column form using CSS instead of a table?
- How do I group related fields?
- How do I style accesskey hints?
- How do I use different colored highlights in a select menu?
- I have a form that allows users to enter data as if into a spreadsheet. How do I style this with CSS?
- How do I highlight the form field that the user clicks into?
- Summary
- Browser and Device Support
- In which browsers should I test my site?
- I only have access to one operating system. How can I test in more of these browsers?
- Is there a service that can show me how my site looks in various browsers?
- Can I install multiple versions of Internet Explorer in Windows?
- How do I test my site in a text-only browser?
- How do I test my site in a screen reader?
- How do I hide CSS from Netscape 4?
- How do I display different styles for Netscape 4?
- How do I add a message, which displays only in version 4 browsers, to explain why my site looks so plain?
- How do I hide CSS from other browsers?
- Why does my site look different in Internet Explorer 6 than it does in Mozilla?
- I think I’ve found a CSS bug! What do I do?
- Some of my content is appearing and disappearing in Internet Explorer 6! What should I do?
- What do the error and warning messages in the W3C Validator mean?
- How do I create style sheets for specific devices, such as screen readers or WebTV?
- How do I create a print style sheet?
- Some browsers allow users to choose a style sheet. How do I add alternate style sheets to my site?
- How do I make a style sheet switcher?
- How do I use alternate style sheets without duplicating code?
- Summary
- CSS Positioning and Layout
- How do I decide when to use a class and when to use an ID?
- Can I make an inline element display as if it were block-level, and viceversa?
- How do margins and padding work in CSS?
- How do I get text to wrap around an image without using the HTML align attribute?
- How do I stop the next element moving up when I use float?
- How do I align my logo and strapline to the left and right without using a table?
- How do I set an item’s position on the page using CSS?
- How do I center a block on the page?
- How do I create a liquid, two-column layout with the menu on the left, and the content on the right?
- Can I reverse this layout and put the menu on the right?
- How do I create a fixed-width, centered, two-column layout?
- How do I create a three-column CSS layout?
- How do I add a footer that works well, using CSS?
- How do I display a thumbnail gallery without using a table?
- Summary
- Experimentation, Browser Specific CSS, and Future Techniques
- How do I build those colored scrollbars?
- How do I create a menu that stays fixed while the page scrolls below it?
- How do I get a fixed menu to work in Internet Explorer?
- Can I create a page footer that remains fixed in position, like a frame, using CSS?
- Can I create pure CSS drop-down menus?
- Can you create rounded corners on CSS borders?
- How do I create cross-browser, rounded corners using CSS?
- How do I make elements translucent both in Mozilla-based browsers, and in Internet Explorer?
- How do I use CSS to indicate to visitors which links are external?
- Can I use CSS to insert text into my document?
- How do I style the first line or first letter of a block?
- Is it a bad thing to use effects that don’t work in some browsers?
- Summary
- Index
