desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web発展途上ウェブ-のX HTML、 C SS、 W eb標準、ユーザビリティ、アクセシビリティ、ウェブデザイン、ソ、ブログやウェブの技術を開発する

Neste artigo, apresento uma proposta para um arquivo CSS mínimo, quer dizer, as declarações que, ao meu ver, são indispensáveis para uma folha de estilos.この資料では、最小の提案を提示するCSSファイル、これは、ステートメントが、私の考えで、スタイルシートを参照して下さいが欠かせない。

O que me levou a escrever este artigoこの記事れたら、私は何を書く

Nos últimos dias, tive alguns problemas com arquivos CSS que tive que alterar - e que não fui eu, originalmente, quem os fiz.最近の日中に、私はいくつかの問題が発生ていたCSSファイルを変更する-そして自分自身ていないことでした、もともと、 w hoでした。 Cada desenvolvedor web tem seu estilo de codificação, isso é fato; outro fato é que fica complicado de prestar manutenção no trabalho alheio, caso os desenvolvedores não tenham acordado padrões de codificação entre si.それぞれのスタイルのウェブ開発者がコーディング、これは実際には、実際には別のことを提供することが困難な外部の保守作業を、開発者の場合、 1つのタグ付けの基準を合意されていない別のです。 Foi o meu caso…それは、私の場合は…

Neste artigo, não tentarei apresentar modelos de codificação CSS, sugestões de como se deve posicionar as chaves, e como deve ser a identação dos textos.この資料では、モデルのないよう努力をしてCSSのコーディング、提案をどのようにする位置にキー、およびどのようにidentaçãoのテキストでなければなりません。 Estou focando nas regras, propriamente ditas, e não em como cada um prefere organizar seu código.私のルールに焦点を当て、自身、および特定する方法については、各コードを整理する1つのを好む。 Para tal, o Bruno Dulcetti já tratou muito bem , em seu blog .そのためには、 ブルーノdulcetti既に処理で大変よくあなたのブログです。

Como não desejo que o mesmo aconteça com as outras pessoas, decidi apresentar como seria, na minha opinião e não muito extensos conhecimentos em CSS, algumas regras indispensáveis para qualquer folha de estilos.同じ発生しないようにする方法について、他の人々を持ち込むことを決定するように、私の意見で、非常に広範な知識がないのCSS 、いくつかのルールに欠かせない任意のスタイルシートです。

Para constar, gostaria de deixar registrado que uma das bases do que vou apresentar aqui foi tirada da compilação 70 Expert Ideas For Better CSS Coding , do Smashing Magazine - e traduzida pelo Maujor , em seu blog ; outra, vem do meu próprio conhecimento e experiência com CSS.が表示される、私のような記録を残しては、現在の基盤を私はここではコンパイルの70の専門家のアイデアをより良いCSSのコーディングは、 スマッシングマガジン -と訳m aujorにあなたのブログ;別の、よりは自分自身の知識や経験をCSSで。

Sem mais enrolações, vamos ao que interessa!他のenrolaçõesなく、私たちの問題をどのような！

“Zerar” os elementos "リセット"の要素

Para começar, é mais do que importante zerar, no o seletor universal, margin e padding :を開始すると、 よりもっと重要なことは 、明確では、ユニバーサルセレクタ、 マージンおよびパディング：

* { * （
margin:0;余白： 0 ;
padding:0;パディング： 0 ;
} ）


[update] [更新]
O Pedro Rogério falou sobre uma maneira melhor de zerar os elementos . に、 ペドロrogerio話の要素をリセットするには良い方法です。 Maneira essa que coloco aqui, também. 道を与えるには、ここでは、あまりにも。
[/update] [ /更新]

 html , body , div , span , applet , object , iframe , h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre , a , abbr , acronym , address , big , cite , code , del , dfn , em , font , img , ins , kbd , q , s , samp , small , strike , strong , sub , sup , tt , var , b , u , i , center , dl , dt , dd , ol , ul , li , fieldset , form , label , legend , table , caption , tbody , tfoot , thead , tr , th , td { margin : 0; padding : 0; border : 0; outline : 0; vertical-align : baseline ; background : transparent ; } body { line-height : 1 ; } ol , ul { list-style : none ; } blockquote , q { quotes : none ; } :focus { outline : 0; } ins { text-decoration : none ; } del { text-decoration : line-through ; } table { border-collapse : collapse ; border-spacing : 0; } HTMLの、身体、領域、スパン、アプレット、オブジェクト、 iframeの、中間、水素、トンH3 、 H4と、 H5型、 h6 、人、引用は、事前に、 abbrと、頭字語、住所、大きな、引用符、コード、デル、のDFN 、には、 フォント、スペースは、アドイン、のKBD 、問、秒、ひき割りトウモロコシ、小型、ストライキ、強い、サブ、 sup 、ロシア語、 var 、 b 、 uでは、私は、 センターに、 DL 、追加DT 、 DDの、オル、 ul 、私の読み取り、フィールド、フォーム、ラベル、凡例、テーブル名、キャプション、 tbody 、 tfoot 、 thead 、 tr 、日、 td （余白： 0 ; パディング： 0 ; 国境： 0 ; 概要： 0 ; 垂直-整列： ベースライン; 背景： 透明;体（ ） line - heightの： 1 ; ）オル、 ul （リストスタイル： なし; ）引用、問（引用符： なし; ） ： フォーカス （概要： 0 ; アドイン） （テキスト装飾： なし;デル（テキスト） -装飾：ラ インを通じて; ）テーブル（ 国境-崩壊：崩 壊;国 境-間隔： 0 ; ） 

Podem ter certeza de que somente isso evitará, pelo menos, uma dezena de problemas com posicionamento - Eric Meyer , Christian Montoya e Roger Johansson , por exemplo, recomendam tal prática.のみことができますことを確認して問題を避けるために、少なくとも1ダースのポジショニング-エリックマイヤー、キ リスト教のモントーヤとロジャーヨハンソン、例えば、 このような行為を推奨します。

Um font-size “especial” para html フォントサイズの "特別な"を行うためにHTML

O próximo - e, aparentemente, excêntrico - passo é colocar um valor “especial” para font-size , na estilização do html : 、次の-と明らかに偏心-値を配置するステップでは"特別な"のフォントサイズは、デザインのH T ML：

 html { font-size : 100.01 % ; } HTMLの（フォントサイズ： 100.01% ; ） 

Essa veio, também, das 70 dicas , ea explicação é a seguinte:それが来た時、あまりにも、最低70のヒントについては、との説明は以下のとおりです：

Este estranho valor de 100.01% para o tamanho de fonte, corrige uma série de bugs em diversos navegadores.この奇妙なの値を百分の100.01は、フォントサイズ、数多くのバグを修正する様々なブラウザです。 Primeiro, definir um tamanho de fonte no elemento body em percentagem (no lugar de EM) previne um problema no IE/Win que tende a aumentar ou diminuir desproporcionalmente o tamanho de fontes para textos contidos dentro de elementos onde for definido tamanho de fonte em EM.第一に、ソースを定義する要素のサイズを体に占める割合（の代わりにミリ秒）を防ぐに問題がすなわち/不釣り合いに勝つが高くなる傾向のソースのサイズを上げたり下げたりするためのテキストに含まれる要素の大きさはどこに設定されソースをMSです。 E mais, algumas versões do Opera renderizam tamanhos default de 100% para fontes muito menores, comparadas com outros navegadores.さらに、いくつかのバージョンのオペラ renderizamソースのデフォルトサイズを100 ％から他のブラウザに比べてずっと小さい。 Safari, por sua vez não se comporta bem com font-size igual a 101%.電源はありませんが行儀よくサファリでフォントサイズを101 ％に等しいです。

Retirar a borda feia das imagens que são link醜悪な画像を削除するには、エッジにリンク

Quando se coloca uma imagem para servir de link , uma borda aparece para indicar isso.画像を配置するときにリンクとして機能する、ことを示すために、境界線が表示されます。 Entretanto, ela é muito feia e, na maioria das vezes, “quebra” toda a harmonia do design web que está sendo utilizado.しかし、それは非常に醜いと、ほとんどの場合、 "破壊" ウェブデザイン全体のラインを使われています。 Para resolver isso, basta zerar o border do elemento img :に対処するには、単純にリセットして国境の要素のスペース：

 img { border : 0; } （スペースの国境： 0 ; ） 

O tal “CSS mínimo”そのような"最小のCSS "

Então, o arquivo final - ou seria “inicial”?次に、ファイルの終わり-またはは"オリジナル"ですか？ :-) - ficaria da seguinte maneira: :-) -は以下のとおり：

* { * （
margin:0;余白： 0 ;
padding:0;パディング： 0 ;
} ）

 html , body , div , span , applet , object , iframe , h1 , h2 , h3 , h4 , h5 , h6 , p , blockquote , pre , a , abbr , acronym , address , big , cite , code , del , dfn , em , font , img , ins , kbd , q , s , samp , small , strike , strong , sub , sup , tt , var , b , u , i , center , dl , dt , dd , ol , ul , li , fieldset , form , label , legend , table , caption , tbody , tfoot , thead , tr , th , td { margin : 0; padding : 0; border : 0; outline : 0; vertical-align : baseline ; background : transparent ; } body { line-height : 1 ; } ol , ul { list-style : none ; } blockquote , q { quotes : none ; } :focus { outline : 0; } ins { text-decoration : none ; } del { text-decoration : line-through ; } table { border-collapse : collapse ; border-spacing : 0; } html { font-size : 100.01 % ; } img { border : 0; } HTMLの、身体、領域、スパン、アプレット、オブジェクト、 iframeの、中間、水素、トンH3 、 H4と、 H5型、 h6 、人、引用は、事前に、 abbrと、頭字語、住所、大きな、引用符、コード、デル、のDFN 、には、 フォント、スペースは、アドイン、のKBD 、問、秒、ひき割りトウモロコシ、小型、ストライキ、強い、サブ、 sup 、ロシア語、 var 、 b 、 uでは、私は、 センターに、 DL 、追加DT 、 DDの、オル、 ul 、私の読み取り、フィールド、フォーム、ラベル、凡例、テーブル名、キャプション、 tbody 、 tfoot 、 thead 、 tr 、日、 td （余白： 0 ; パディング： 0 ; 国境： 0 ; 概要： 0 ; 垂直-整列： ベースライン; 背景： 透明;体（ ） line - heightの： 1 ; ）オル、 ul （リストスタイル： なし; ）引用、問（引用符： なし; ） ： フォーカス （概要： 0 ; アドイン） （テキスト装飾： なし;デル（テキスト） -装飾：ラ インを通じて; ）テーブル（ 国境-崩壊：崩 壊;国 境-間隔： 0 ;のH TML） （ フォントサイズ：百 分の100.01; ） （スペースの国境： 0 ; ） 

Por fim…最後に…

Essas dicas que eu coloquei são meras “medidas de segurança”, a fim de se evitar problemas com estilizações.これらのヒントを提起私は単なる"セキュリティ対策"をestilizaçõesを避けるために問題が発生します。 Certamente outras mais existem, porque, a cada dia, uma nova técnica e/ou maneira de se codificar aparece - e/ou a própria tecnologia é aperfeiçoada.確かには、その他その他のため、毎日、新しい技術および/またはどのようにタグを表示される-および/またはその技術自体が向上します。 Quem conhecer mais dicas, macetes e artimanhas para um CSS mínimo, por favor, coloque um comentário aqui ou me envie um email para eu possa atualizar o artigo. who知って他のヒントについては、 macetesの芸を披露すると、最小のCSS 、下記、ここに置くまたは宛先にメールを送信するコメントをメイン私は更新してください。

Ah!ああ！ E confiram as 70 dicas de CSS , porque realmente são muito boas !して、 70のヒントをCSSのは、 本当にため、 彼らは非常に良い！