{"id":76,"date":"2016-05-31T11:16:00","date_gmt":"2016-05-31T14:16:00","guid":{"rendered":"https:\/\/blog.wieczorek.com.br\/novo\/?p=76"},"modified":"2022-02-24T16:09:44","modified_gmt":"2022-02-24T19:09:44","slug":"13-dicas-para-trabalhar-com-css-uma-introducao","status":"publish","type":"post","link":"https:\/\/blog.wieczorek.com.br\/index.php\/2016\/05\/31\/13-dicas-para-trabalhar-com-css-uma-introducao\/","title":{"rendered":"13 dicas para trabalhar com CSS &#8211; Uma introdu\u00e7\u00e3o"},"content":{"rendered":"\n<p>Ol\u00e1 Mais uma vez. Neste artigo ser\u00e3o mostradas&nbsp;algumas dicas para projetar Folhas de Estilos para os iniciantes em&nbsp;CSS.&nbsp;Espero que elas se constituam em uma fonte de consulta \u00fatil para voc\u00ea que est\u00e1&nbsp;iniciando&nbsp;o desenvolvimento&nbsp;CSS.<\/p>\n\n\n\n<p><strong>1-&nbsp;Organize&nbsp;sua Folha de Estilos agrupando blocos de regras CSS similares e colocando coment\u00e1rios no in\u00edcio e no fim de cada bloco.<\/strong><\/p>\n\n\n\n<p>Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Estilizacao geral de links *\/\r\na:link {\r\n  ......\r\n  }\r\na:visited {\r\n  ......\r\n  }\r\na:hover {\r\n  ......\r\n  }  \r\na:active {\r\n  ......\r\n  }\r\n\/* Fim da estilizacao geral de links *\/<\/code><\/pre>\n\n\n\n<p><strong>2-&nbsp;Ordene&nbsp;suas regras CSS em uma sequ\u00eancia que fa\u00e7a algum sentido.<\/strong><\/p>\n\n\n\n<p>Exemplo:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>regras CSS para elementos gerais do HTML;<\/li><li>regras CSS para links gerais;<\/li><li>regras CSS para listas;<\/li><li>regras CSS para as divs na ordem que aparecem no HTML<br>seguidas por regras CSS para elementos dentro das divs;<\/li><li>regras CSS para classes gerais;<\/li><li>outras.<\/li><\/ul>\n\n\n\n<p><strong>Nota:<\/strong>&nbsp; Voc\u00ea dever\u00e1 criar uma sequ\u00eancia que atenda suas necessidades.<a><\/a><\/p>\n\n\n\n<p><strong>3-&nbsp;Escolha&nbsp;uma ordem para declarar propriedades dentro de uma regra CSS e mantenha esta ordem para todos os seletores.<\/strong><\/p>\n\n\n\n<p>Exemplo: (ordem alfab\u00e9tica)<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\r\n  background: #fff;\r\n  color: #000;\r\n  font-size: 14px;\r\n  margin: 0;\r\n  padding: 0;\r\n  }\r\n#conteudo {\r\n  background: #ffc;\r\n  color: #333;\r\n  float: left;\r\n  height: 600px;\r\n  width: 180px;\r\n  }<\/code><\/pre>\n\n\n\n<p><strong>4-&nbsp;Agrupe&nbsp;seletores sempre que for poss\u00edvel e conveniente.<\/strong><\/p>\n\n\n\n<p>Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1, h2, h3, h4, p, ul, li {\r\n  margin: 0;\r\n  padding: 0;\r\n  }<\/code><\/pre>\n\n\n\n<p><strong>5-&nbsp;Use&nbsp;a heran\u00e7a CSS para simplificar sua Folha de Estilos.<\/strong><\/p>\n\n\n\n<p>Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>body {\r\n  .......;\r\n  font: 14px Arial, Helvetica, Sans-serif;\r\n  .......;\r\n  }\r\n#principal {\r\n  .......;\r\n  font-style: italic;\r\n  .......;\r\n  }<\/code><\/pre>\n\n\n\n<p>A div#principal herdar\u00e1 font-size e font-family de body, n\u00e3o sendo necess\u00e1rio declar\u00e1-las.<\/p>\n\n\n\n<p><strong>6-&nbsp;Tire proveito&nbsp;do efeito cascata para simplificar sua Folha de Estilos.<\/strong><\/p>\n\n\n\n<p>Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>h1, h2, h3, h4, h4, h5, h6 {\r\n  background: #ffc;\r\n  border: 1px solid #f00;\r\n  color: #000;\r\n  text-align:right;\r\n  }\r\nh1 {\r\n  color: #036;\r\n  }<\/code><\/pre>\n\n\n\n<p>Todos os cabe\u00e7alhos (do n\u00edvel 1 ao 6) ter\u00e3o a mesma cor de fundo, cor da fonte, borda e ser\u00e3o alinhados \u00e0 direita. Para o cabe\u00e7alho de n\u00edvel 1 altera-se a cor da fonte, n\u00e3o havendo necessidade de se repetir as regras CSS comuns.<br><strong>Importante:<\/strong>&nbsp;Para que se aplique o efeito cascata como sugerido, faz-se necess\u00e1rio que a regra para h1 seja escrita&nbsp;<strong>ap\u00f3s<\/strong>&nbsp;a regra para todos os n\u00edveis.<\/p>\n\n\n\n<p><strong>7-&nbsp;Escreva&nbsp;regras CSS de forma abreviada para as propriedades que assim as admitem.<\/strong><\/p>\n\n\n\n<p>Exemplo:<\/p>\n\n\n\n<p>CSS<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><\/td><td><code>\/* Escreva assim: *\/<\/code><\/td><\/tr><tr><td><\/td><td><code>p {<\/code><\/td><\/tr><tr><td><\/td><td><code>&nbsp;&nbsp;margin: 10px 8px 0 20px;<\/code><\/td><\/tr><tr><td><\/td><td><code>&nbsp;&nbsp;}<\/code><\/td><\/tr><tr><td><\/td><td><code>\/* E n\u00e3o assim: *\/<\/code><\/td><\/tr><tr><td><\/td><td><code>p {<\/code><\/td><\/tr><tr><td><\/td><td><code>&nbsp;&nbsp;margin-top: 10px;<\/code><\/td><\/tr><tr><td><\/td><td><code>&nbsp;&nbsp;margin-right: 8px;<\/code><\/td><\/tr><tr><td><\/td><td><code>&nbsp;&nbsp;margin-bottom: 0;<\/code><\/td><\/tr><tr><td><\/td><td><code>&nbsp;&nbsp;margin-left: 20px;<\/code><\/td><\/tr><tr><td><\/td><td><code>&nbsp;&nbsp;}<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p><strong>8-&nbsp;Fam\u00edlia&nbsp;de fontes deve ser declarada em uma regra CSS para fontes e n\u00e3o uma fonte \u00fanica. Termine sempre com uma fonte gen\u00e9rica (p ex: serif, sans-serif, mono, etc\u2026)<\/strong><\/p>\n\n\n\n<p>Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Escreva assim: *\/\r\np {\r\n  font-family: Verdana, Arial, Helvetica, Sans-Serif;\r\n  }\r\n\/* E n\u00e3o assim: *\/\r\np {\r\n  font-family: Verdana;\r\n  }<\/code><\/pre>\n\n\n\n<p><strong>9-&nbsp;Nomes&nbsp;para classes, divs e seletores em geral devem ser escolhidos considerando-se sua fun\u00e7\u00e3o (ou desempenho estrutural no c\u00f3digo). Evite escolha de nomes que lembrem sua posi\u00e7\u00e3o ou apar\u00eancia.<\/strong><\/p>\n\n\n\n<p>Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Boas escolhas: *\/\r\n#principal\r\n#navegacao-secundaria\r\n#menu-principal\r\n.link-um\r\n.tit-um\r\n \r\n\/* M\u00e1s escolhas: *\/\r\n#direita\r\n#menu-superior\r\n.link-verde\r\n.tit-grande<\/code><\/pre>\n\n\n\n<p><strong>10-&nbsp;Background-image&nbsp;n\u00e3o requer uso de aspas na declara\u00e7\u00e3o do caminho para a imagem na regra CSS.<\/strong><\/p>\n\n\n\n<p>Exemplo:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/* Prefira assim: *\/\r\nbody {\r\n  background-image: url(\/imagens\/bg-geral.gif)\r\n\/* A assim: *\/\r\nbody {\r\n  background-image: url(\"\/imagens\/bg-geral.gif\")<\/code><\/pre>\n\n\n\n<p><strong>11-&nbsp;Links&nbsp;e suas pseudo classes devem ter regras CSS declaradas em uma ordem r\u00edgida para funcionarem convenientemente.<\/strong><\/p>\n\n\n\n<p>Esta \u00e9 a ordem:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>a:link {...)\r\na:visited {...)\r\na:hover {...)\r\na:active {...)<\/code><\/pre>\n\n\n\n<p><strong>12-&nbsp;Sublinhados&nbsp;identificam hist\u00f3rica e claramente os links. Ao decidir retir\u00e1-los certifique-se de que eles (links) ser\u00e3o facilmente identificados no documento, quer seja por estarem agrupados em uma coluna de navega\u00e7\u00e3o por exemplo, ou por outra caracter\u00edstica inequ\u00edvoca.<\/strong><\/p>\n\n\n\n<p><strong>13-&nbsp;Habitue-se&nbsp;a usar somente letras para nomear classes e seletores CSS. Eventualmente use h\u00edfen para separar. O uso de n\u00fameros, underscore e caracteres especiais, quando n\u00e3o proibidos s\u00e3o permitidos com restri\u00e7\u00f5es ou mesmo est\u00e3o sujeitos a regras de uso e particularidades que n\u00e3o conv\u00e9m decorar. Com esta pr\u00e1tica, se voc\u00ea n\u00e3o conhece as regras de uso, estar\u00e1 evitando problemas com m\u00e1 escolha sint\u00e1tica.<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Ol\u00e1 Mais uma vez. Neste artigo ser\u00e3o mostradas&nbsp;algumas dicas para projetar Folhas de Estilos para os iniciantes em&nbsp;CSS.&nbsp;Espero que elas se constituam em uma fonte de consulta \u00fatil para voc\u00ea que est\u00e1&nbsp;iniciando&nbsp;o desenvolvimento&nbsp;CSS. 1-&nbsp;Organize&nbsp;sua Folha de Estilos agrupando blocos de regras CSS similares e colocando coment\u00e1rios no in\u00edcio e no [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59,20,28,4],"tags":[60,61,64,63,65,67,66],"class_list":["post-76","post","type-post","status-publish","format-standard","hentry","category-css","category-desenvolvimento","category-internet","category-tecnologia","tag-css","tag-desenvolvimento","tag-folha-de-estilos","tag-html","tag-site","tag-stylesheet","tag-web"],"_links":{"self":[{"href":"https:\/\/blog.wieczorek.com.br\/index.php\/wp-json\/wp\/v2\/posts\/76","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.wieczorek.com.br\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wieczorek.com.br\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wieczorek.com.br\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wieczorek.com.br\/index.php\/wp-json\/wp\/v2\/comments?post=76"}],"version-history":[{"count":2,"href":"https:\/\/blog.wieczorek.com.br\/index.php\/wp-json\/wp\/v2\/posts\/76\/revisions"}],"predecessor-version":[{"id":265,"href":"https:\/\/blog.wieczorek.com.br\/index.php\/wp-json\/wp\/v2\/posts\/76\/revisions\/265"}],"wp:attachment":[{"href":"https:\/\/blog.wieczorek.com.br\/index.php\/wp-json\/wp\/v2\/media?parent=76"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wieczorek.com.br\/index.php\/wp-json\/wp\/v2\/categories?post=76"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wieczorek.com.br\/index.php\/wp-json\/wp\/v2\/tags?post=76"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}