Home Page Johny Lab
Link para a página de contato Fale comigo

siga-me: @JohnyLab

Folha de estilos deste site

Abaixo estão os estilos do arquivo css usado neste site, comentado para estudo da linguagem de folhas de estilos. É uma folha relativamente simples, muitos desenvolvedores preferem posicionar os elementos apenas com css mas eu ainda uso uma tabela de 1 linha para dividir o layout e economizar esforço ajustando o css.

  1. html {
  2.    margin: 0px;
  3.    padding: 0px;
  4. }
  6. /* uma imagem no final da página, não importa o tamanho dela */
  7. body {
  8.    background-image: url(imagens/tubos.jpg);
  9.    background-repeat: no-repeat;
  10.    background-position: right bottom;
  11. }
  12. p, li, td {
  13.    font-family: arial, helvetica, sans-serif;
  14.    font-size: 10pt;
  15. }
  17. /* o texto em itálico fica com tom de suavidade */
  18. em {
  19.    color: #666;
  20. }
  22. /* evitar espaço em branco desnecessário */
  23. ul {
  24.    margin-top: 0px;
  25. }
  27. /* o formulário de contato fica afastado da margem esquerda */
  28. form {
  29.    padding-left: 20px;
  30. }
  31. input, textarea {
  32.    font-size: 8pt;
  33.    background-color: #EEEEEE;
  34.    border: 1px solid #999999;
  35.    padding: 2px;
  36.    font-family: Arial, Helvetica, sans-serif;
  37. }
  39. /* este campo faz parte da minha área restrita, faz os títulos das páginas ficarem maiores */
  40. input#titulo{
  41.    font-size: 18pt;
  42. }
  44. /* estilo dos comentários dos tópicos */
  45. .comentario {
  46.    margin: 5px;
  47.    padding: 10px 10px 10px 55px;
  48.    background-image: url(imagens/balao_coment.jpg);
  49.    background-repeat: no-repeat;
  50.    background-position: left top;
  51.    list-style-type: none;
  52.    background-color: #FFFFFF;
  53. }
  55. /* enunciado de cada comentário */
  56. .comentario span {
  57.    font-size: 9px;
  58.    background-color: #Fee;
  59.    padding-right: 5px;
  60.    padding-left: 5px;
  61. }
  62. .comentario strong {
  63.    font-size: 12px;
  64.    padding: 10px;
  65. }
  67. /* parte da página inicial onde fica o conteúdo principal */
  68. .centro {
  69.    margin: 0px;
  70.    padding: 0px;
  71.    list-style-type: none;
  72. }
  73. .centro li {
  74.    margin: 5px;
  75.    padding: 5px;
  76.    float: left;
  77.    background-color: #fff;
  78.    width: 260px;
  79. }
  80. .centro li a {
  81.    font-weight: bold;
  82.    color: #0066FF;
  83. }
  84. .centro li span {
  85.    font-size: 9px;
  86.    background-color: #eee;
  87.    padding-right: 5px;
  88.    padding-left: 5px;
  89. }
  90. .centro li img {
  91.    margin: 0px;
  92.    float: left;
  93. }
  95. /* área dos links úteis */
  96. .links {
  97.    background-color: #FFFFFF;
  98.    clear: both;
  99. }
  100. .links p {
  101.    border-top-width: 1px;
  102.    border-top-style: solid;
  103.    border-top-color: #CCCCCC;
  104.    border-right-color: #CCCCCC;
  105.    border-bottom-color: #CCCCCC;
  106.    border-left-color: #CCCCCC;
  107.    padding-top: 10px;
  108. }
  110. .data {
  111.    font-size: 9pt;
  112.    color: #999999;
  113.    font-style: italic;
  114. }
  116. /* área como esta, onde são digitados códigos */
  117. .code {
  118.    font-family: "Courier New", Courier, mono;
  119.    font-size: 8pt;
  120.    margin: 0px 10px -10px;
  121.    padding: 10px;
  122.    overflow: auto;
  123.    height: 200px;
  124.    width: 500px;
  125.    background-color: #EEEEEE;
  126. }
  128. h3 {
  129.    line-height: 30px;
  130.    color: #333;
  131.    background-color: #eee;
  132.    height: 30px;
  133.    padding-left: 15px;
  134.    margin-bottom: 0px;
  135.    font-weight: normal;
  136. }
  137. h4 {
  138.    line-height: 30px;
  139.    color: #333333;
  140.    background-color: #EEE;
  141.    background-image: url(imagens/h4.jpg);
  142.    background-repeat: repeat-x;
  143.    height: 30px;
  144.    padding-left: 15px;
  145.    margin-bottom: 0px;
  146. }
  148. /* o próprio nome já diz, é o meio da página */
  149. .meio {
  150.    background-image: url(imagens/fundo.jpg);
  151.    background-repeat: no-repeat;
  152.    background-position: center top;
  153.    padding: 20px;
  154.    height: 200px;
  155. }
  157. /* estilo dos links da esquerda */
  158. .gradualfader a {
  159.    color: #000000;
  160.    text-decoration: underline;
  161. }
  162. .gradualfader a:visited {
  163.    color: #000000;
  164.    text-decoration: underline;
  165. }
  166. .gradualfader a:hover {
  167.    color: #000000;
  168.    text-decoration: underline;
  169. }
  170. .gradualfader a:active {
  171.    color: #000000;
  172.    text-decoration: underline;
  173. }
  175. /* área dos links da esquerda */
  176. #cats {
  177.    margin: auto;
  178.    width: 160px;
  179. }
  180. #cats ul {
  181.    list-style: none;
  182.    text-indent: 0pt;
  183.    padding: 0;
  184.    margin: 0;
  185. }
  186. #cats li {
  187.    list-style: none;
  188.    text-indent: 0pt;
  189.    background-color: #EEE;
  190.    margin-top: 0px;
  191.    margin-right: 15px;
  192.    margin-bottom: 10px;
  193.    margin-left: -10px;
  194.    padding: 0px;
  195.    width: 150px;
  196. }
  197. #cats li a {
  198.    color: #000;
  199.    text-decoration: none;
  200.    font-weight: bold;
  201.    padding: 15px;
  202.    line-height: 30px;
  203. }
  204. #cats li a:hover {
  205.    color: #f00;
  206.    text-decoration: none;
  207. }
  209. /* links da coluna da esquerda */
  210. #contexto {
  211.    margin: 10px;
  212.    width: 160px;
  213.    padding-bottom: 300px;
  214. }
  215. #contexto ul {
  216.    list-style: none;
  217.    text-indent: 0pt;
  218.    padding: 0;
  219.    margin: 0;
  220. }
  221. #contexto li {
  222.    list-style: none;
  223.    text-indent: 0pt;
  224.    padding-bottom: 10px;
  225.    margin: 0;
  226. }
  227. #contexto li a {
  228. }
  229. #contexto li a:hover {
  230.    color: #f00;
  231.    text-decoration: underline;
  232. }
  234. .box {
  235.    border: 1px solid #CCCCCC;
  236.    margin: 3px;
  237.    padding: 3px;
  238.    text-decoration: none;
  239.    background-color: #FFFFFF;
  240. }
  242. /* espaçamento usado no formulário de contato */
  243. #quadro {
  244.    margin-left: 180px;
  245. }


johnylab.net © 2010 - - Contato - Facebook - Twitter - LinkeIn