0 Всего найдено: 5

miminari Сообщение 10/06/2011 13:39 Копия темы
How many CSS files should I use? Ideally – one. Avoid unnecessary HTTP requests, the less the better.

Note, the use of @import does not save you from additional query. @import can be used only for development purposes – you should join, minify and gzip CSS files on the server side.

Last 3 posts in a few words

- Use smart CSS Reset
- Use as less as possible CSS files. Avoid unnecessary HTTP requests
- Avoid the use of inline CSS
- Use embeded styles only when there is no way to place them to an external file
- @import should be used only for development purposes
- You should join, minify and gzip CSS files on the server side

miminari Сообщение 08/06/2011 15:28 Копия темы
This was planned at the next entry.

miminari Сообщение 08/06/2011 14:16 Копия темы
Methods of adding CSS to HTML There are several ways to add CSS to the HTML document. Theoretically, you can use them all. Practically, it is necessary to avoid some of them.

Inline CSS

You can use this method when you're just starting to develop HTML / CSS. If you are a real coding ninja – do not do it! Be wise, separate content from design.

<h1 style="color: black; background: grey">I'm Black Heading with the Grey Background

Embedding CSS into HTML

Stylesheet can be embedded into the <head> of HTML document with the <style> tag.


<head>
<style type="text/css">
.rule_one
.rule_two
.rule_three
...
</style>
</head>

Notes:
Should I use this method? – Yes, if you use just a few lines of code, specific for the current page.
Will it work within the <body> element? – Yes. Would that be right? – No! First of all this is a misstep, as well as no separation of content from design.

Linking to a separate CSS file

This is a base way to add stylesheets to your HTML. Style rules are contained in a single text file with the *.css extension, wich plugs to the every page.


<head>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>

Notes:
Will it work within the <body> element? – Yes. Would that be right? – As in the previous – No!
The media attribute is optional, and allow you to specify how documents will be presented in different media.

Import CSS file into another

The @import rule allows you to load a CSS file from another one.

/* Import CSS file into another */
@import "style.css";
@import "print.css" print;

Notes:
@import is not permitted to insert after any CSS rule, except @charset or another @import.
IE 7< does not support media types when you import the style file.

miminari Сообщение 08/06/2011 07:14 Копия темы
Следите за апдейтами – новое будет появляться регулярно ;)

miminari Сообщение 07/06/2011 17:41 Копия темы
Use reset.css This is the first post from a set of HTML / CSS rules & guidelines.

Note 1: all posts will be in English.
Note 2: you can ask / comment me for anything.

Stay tuned :)

Use reset.css

Reset (or Normalise, Base Stylesheet, etc.) is used to bring all elements into a single form, common to all browsers, which makes future editing more comfortable. It also allows you to save the right semantics of a document, use HTML elements according to their appointment.

Reset – this is the first thing that the browser should see. All other rules have to go after it.

This is only a good starting point. Reset, without further redefinition of styles is useless.

Feel free to modify and expand Reset / Base stylesheets in accordance with the current project or your preferences.

You can see a few variants below, but I recommend to use the Eric Meyer's Reset v2.0 (meyerweb.com/eric/tools/c... and not "Simple Reset" or something like "A Simple Base Stylesheet" – this complicates the process of editing pages.

Old-style (or Simple) CSS Reset

* { margin: 0; padding: 0; border: 0 }

Eric Meyer's Reset

v1.0 (200802) meyerweb.com/eric/tools/c...
v2.0 (20110126) meyerweb.com/eric/tools/c...

YUI's CSS Reset

YUI 2 CSS Reset developer.yahoo.com/yui/r...
YUI 3 CSS Reset developer.yahoo.com/yui/3...

A Simple Base Stylesheet

A Simple Base Stylesheet (CSS Reset Alternative) covertprestige.info/css/b...

Normalize CSS

normalize.css necolas.github.com/normal...