desenvolvimento para web - xhtml, css, padrões da web, usabilidade, acessibilidade, web design, SEO, blogs e tecnologias para desenvolver a web In via di sviluppo web - XHTML, CSS, standard web, usabilità, l'accessibilità, web design, SEO, blog e della tecnologia per sviluppare il web

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. In questo articolo, presentare una proposta per un minimo file CSS, che è, dichiarazioni che, a mio parere, sono essenziali per un foglio di stile.

O que me levou a escrever este artigo Che cosa mi ha spinto a scrivere questo articolo

Nos últimos dias, tive alguns problemas com arquivos CSS que tive que alterar - e que não fui eu, originalmente, quem os fiz. Negli ultimi giorni, ho avuto alcuni problemi con i file CSS che ha dovuto cambiare - e che non ero io, inizialmente, che ha fatto. 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. Ogni sviluppatore ha loro stile di codifica web, questo è, infatti, un altro fatto è che diventa difficile fornire i lavori di manutenzione sulla parte esterna, se gli sviluppatori non hanno concordato norme per la codifica l'un l'altro. Foi o meu caso… E 'stato il mio 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. In questo articolo, non provare a fare modelli di codifica CSS, suggerimenti su come posizione dei tasti, e come debba essere la identação di testi. Estou focando nas regras, propriamente ditas, e não em como cada um prefere organizar seu código. Io sono incentrati sulle norme in materia, le quali a loro, e non su come ciascuno preferisce organizzare il vostro codice. Para tal, o Bruno Dulcetti já tratou muito bem , em seu blog . A tal fine, la Bruno Dulcetti già trattati molto bene nel tuo blog.

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. Come non desidera lo stesso accade con altre persone, ha deciso di proporre in quanto, a mio parere, non molto ampia conoscenza di CSS, alcune regole essenziali per qualsiasi foglio di stile.

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. A comparire, vorrei lasciare un verbale che le basi di cui voglio qui presenti è stata presa la compilazione di 70 esperti Idee per una migliore CSS di codificazione delle merci, il Smashing Magazine - e tradotto da Maujor nel tuo blog; un altro, proviene dalla mia conoscenza ed esperienza con i CSS.

Sem mais enrolações, vamos ao que interessa! Senza più enrolações, a ciò che importa!

“Zerar” os elementos "Reset", gli elementi

Para começar, é mais do que importante zerar, no o seletor universal, margin e padding : Per cominciare, è più importante che chiaro, nel selettore universale, i margini e padding:

* { * (
margin:0; margin: 0;
padding:0; padding: 0;
} )


[update] [Update]
O Pedro Rogério falou sobre uma maneira melhor de zerar os elementos . Il Pedro Rogerio parlato di un modo migliore per reimpostare gli elementi. Maneira essa que coloco aqui, também. A mettere in modo che anche qui.
[/update] [/ 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, corpo, div, span, applet, oggetto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citazione, codice, del, dfn, in, font, IMG, ins, kbd, q, s, supp, piccole, sciopero, forte, sub, sup, TT, var, b, e, i, centro, dl, dt, dd, ol, ul, ho letto, fieldset, la forma, etichetta, leggenda, tabella, una didascalia, tbody, tfoot, thead, tr, th, td (margin: 0; padding: 0; border: 0; schema: 0; vertical-align: basale; sfondo: trasparente; Organismo () line-height: 1;) olo, ul (list-style: none;) blockquote, q (virgolette: none;): focus (schema: 0; ins) (text-decoration: none; del (testo) -- Decoration: line-through;) tabella (border-crollo: crollo; border-spacing: 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. Essi possono solo fare in modo che evitare almeno una dozzina di problemi con il posizionamento - Eric Meyer, Christian Montoya e Roger Johansson, ad esempio, consigliamo di questa pratica.

Um font-size “especial” para html Un font-size "speciali" in HTML

O próximo - e, aparentemente, excêntrico - passo é colocar um valor “especial” para font-size , na estilização do html : L'ordine del giorno - e apparentemente eccentrico - passo è luogo un valore "speciale" per i font-dimensione, lo stile di HTML:

 html { font-size : 100.01 % ; } html (font-size: 100,01%;) 

Essa veio, também, das 70 dicas , ea explicação é a seguinte: Ne è venuto anche da 70 suggerimenti, e la spiegazione è la seguente:

Este estranho valor de 100.01% para o tamanho de fonte, corrige uma série de bugs em diversos navegadores. Questo strano valore di 100,01% per la dimensione del carattere, corregge un certo numero di bug in vari browser. 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. In primo luogo, definire una dimensione del corpo fonte elemento in percentuale (invece di MS) impedisce un problema in IE / Win che tende a sproporzionatamente aumentare o ridurre le dimensioni delle fonti per il testo contenuto all'interno di elementi in cui la dimensione è impostato su fonte nella SM . E mais, algumas versões do Opera renderizam tamanhos default de 100% para fontes muito menores, comparadas com outros navegadores. Che cosa c'è di più, alcune versioni di Opera renderizam dimensioni di default da 100% a fonti molto più piccola rispetto ad altri browser. Safari, por sua vez não se comporta bem com font-size igual a 101%. Safari, a sua volta, non si comportano bene con font-size pari al 101%.

Retirar a borda feia das imagens que são link Rimuovere il bordo della brutta immagini che sono link

Quando se coloca uma imagem para servir de link , uma borda aparece para indicar isso. Quando si effettua una immagine per servire come un link, una frontiera sembra indicare che. Entretanto, ela é muito feia e, na maioria das vezes, “quebra” toda a harmonia do design web que está sendo utilizado. Tuttavia, è molto brutto e, nella maggior parte dei casi, "spezzare" l'intera linea di progettazione di siti web in uso. Para resolver isso, basta zerar o border do elemento img : A questo indirizzo, è sufficiente reimpostare la frontiera dello elemento img:

 img { border : 0; } (img border: 0;) 

O tal “CSS mínimo” Quali il "minimo CSS"

Então, o arquivo final - ou seria “inicial”? Quindi, il file fine - o sarebbe "originale"? :-) - ficaria da seguinte maneira: :-) - Sarebbe la seguente:

* { * (
margin:0; margin: 0;
padding:0; padding: 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, corpo, div, span, applet, oggetto, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronimo, indirizzo, grande, citazione, codice, del, dfn, in, font, IMG, ins, kbd, q, s, supp, piccole, sciopero, forte, sub, sup, TT, var, b, e, i, centro, dl, dt, dd, ol, ul, ho letto, fieldset, la forma, etichetta, leggenda, tabella, una didascalia, tbody, tfoot, thead, tr, th, td (margin: 0; padding: 0; border: 0; schema: 0; vertical-align: basale; sfondo: trasparente; Organismo () line-height: 1;) olo, ul (list-style: none;) blockquote, q (virgolette: none;): focus (schema: 0; ins) (text-decoration: none; del (testo) -- Decoration: line-through;) tabella (border-crollo: crollo; border-spacing: 0; html) (font-size: 100,01%;) (img border: 0;) 

Por fim… Infine…

Essas dicas que eu coloquei são meras “medidas de segurança”, a fim de se evitar problemas com estilizações. Questi suggerimenti che ho sollevato sono solo "misure di sicurezza" per evitare problemi con 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. Certamente ci sono altri più, perché ogni giorno, una nuova tecnica e / o il modo di etichetta appare - e / o la tecnologia in sé è migliorato. 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. Che saperne di più suggerimenti e macetes Trick per un minimo di CSS, per favore, inserire un commento qui o inviare email a me possa aggiornare l'articolo.

Ah! E confiram as 70 dicas de CSS , porque realmente são muito boas ! E dare il 70 suggerimenti per CSS, perché sono davvero molto buono!