CSS

dicas para IPad

• http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3891451/iPad-and-iPhone-Development-Using-CSS-Layouts.htm
• http://stackoverflow.com/questions/8271493/css-media-query-to-target-ipad-and-ipad-only
• http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/detect-and-set-the-iphone--ipads-viewport-orientation-using-javascript-css-and-meta-tags.htm

–

espaçamento duplo line-height:200%

<source lang="css">

1. infoTopHeader h1 {

display: inline-block; font: 18px GeogrotesqueRegular, "Trebuchet MS"; color: #c6a012; } </css>

deixa fonte em maísculo text-transform: uppercase;

.topBox { background: #284972 url(/i/front-blue-box.jpg) no-repeat 0 0; border: 1px solid; border-color: #486992 #082952 #082952 #486992; padding: 15px 10px 10px 20px; color: #FFF; float: left; width: 918px; min-height: 200px; } .topBoxLeft { text-align: center; float: left; padding-top: 65px; width: 595px; } .topBoxRight { float: right; width: 301px; } .topBox h1 { font-size: 36px; text-shadow: 0px 1px 4px #91afd5; } .topBox h2 { font-size: 18px; }

html { height: 100%; } body { min-height: 100%; }

• html body ( height: 100%;} /*for IE6*/

/------- degradê background: -webkit-gradient(linear, 0 0, 0 70%, from(#EEF), to(#FFF)); background: -moz-linear-gradient(#EEF, #FFF 70%); background: linear-gradient(#EEF, #FFF 70%); -pie-background: linear-gradient(#EEF, #FFF 70%);

/------ sombreamento -webkit-box-shadow: #CCC 0 0 .25em; -moz-box-shadow: #CCC 0 0 .25em; box-shadow: #CCC 0 0 .25em;

height:auto !important; /* real browsers */ height:100%; /* IE6: treaded as min-height*/ min-height:100%; /* real browsers */ line-height:100%

1. search-spot .search-form{ padding:15px 0 0 0; position:relative }
2. search-spot .search-form input{ border:1px solid #5B261B; width:248px; padding:6px 10px 5px 10px; color:#5B261B; font-size:14px }
3. search-spot .search-form button{ background:url(images/search-btn-trans.png) #5B261B no-repeat; border:none; position:absolute; width:30px; height:30px; top:15px; right:0 }

sobreamento na fonte text-shadow:0px 0px 0px #D3D3D3; text-shadow:0px 10px 10px #999; text-shadow:none; text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5); _text-shadow:1px 1px 1px rgba(0, 0, 0, 0.5); text-shadow:0 0 1px #C2C2C2;

@font-face {

 font-family: 'Yanone Kaffeesatz';
 font-style: normal;
 font-weight: 400;
 src: local('Yanone Kaffeesatz Regular'), local('YanoneKaffeesatz-Regular'), url('http://themes.googleusercontent.com/font?kit=YDAoLskQQ5MOAgvHUQCcLbvy90DtE_Pg_qiF9bHvTzw') format('truetype');

}

1. contact .box-left-main p.fone-number {font-size:35px; font-weight:700; letter-spacing:-2px; margin-bottom:7px}

text-transform: uppercase; white-space: nowrap;

border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;

-moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px;

-webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px;

-khtml-border-bottom-left-radius: 5px; -khtml-border-bottom-right-radius: 5px;

div.search_input { width:184px; height:20px; padding: 0; margin: 0; background: url('/assets/templates/softicons/images/input_search_back.png') no-repeat; border:1px solid #999; }

.entry-title { line-height:48px; font-size:3.2em; letter-spacing:-.05em; margin-bottom:.5em; }

.entry-title a{ color:#000; }

Droid Serif

font-family: 'Droid Serif', Georgia, "Times New Roman", Times, serif;

img.float_left {

  float:left;
  padding: 0 8px 0 0;
  margin: 0;

}

.centered { max-width: 760px; margin: 0px auto; clear: both; }

.left { float: left; }

.right { float: right; clear: right; }

hr { height: 0px; color: white; border-top: 1px dotted #999; margin: 25px 0px 20px; }

1. inherit: Especifica que o valor da propriedade overflow deve ser herdado do elemento pai.

text-decoration: line-through text-decoration: underline text-decoration: none text-decoration: blink; text-decoration:overline

deixa o texto tudo em maísculo font-variant: small-caps;

deixa o texto com sobreado text-shadow: #000 0px 2px 1px;

 font-weight: lighter;

1. geral {

   width:780px;
   margin: 0 auto;
   position:relative;
   margin-top:10px;
   background:#E4E9AB;

}

• {

   margin: 0;
   padding:0;
   text-decoration:none;
   border: none;
   list-style:none;
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#666666;

}

   behavior: url("border-radius.htc");

p {text-indent: 10px; }

p {font-size: 10px; line-height: 2em; }

overflow:auto;

background-color:transparent;

duas formas de chamar css

<style type="text/css">

</style>

ou

<link rel="stylesheet" href="bantinho.css" type="text/css" />

isso dentro de <head>

display: block; display: inline; display: none;

sintaxe

!--- fundo --- cor background-color: #fff;

--- transparente -moz-opacity: 0.3; filter: alpha(opacity=30);

background-attachment: fixed;

!--- imagem ---chama background-image: url("quadro.png");

--- repete e nao-repete background-repeat: repeat; background-repeat: no-repeat;

--- repete somente para lado background-repeat: repeat-x;

--- repete somente para baixo background-repeat: repeat-y; --- posição

right | center | left = (direita | centro | esquerda) top | middle | bottom = (topo | centro | rodapé)

background-position: right bottom;

!-- tamanho --- altura height: 100%;

--- largura width: 100%;

pode ser em porcento ou pixel - % / px

!--- posição margin: 0em 0em 0em 0em;

--- posição: absoluto ou relativo position: absolute; position: relative; position: fixed;

--- base apartir do rodape bottom: 0px;

--- distancia do objeto da margem esquerda margin: 10px;

!--- fonte --- familia font-family: Verdana, "Bitstream Vera Sans", Arial, Helvetica, sans-serif;

--- tamamho font-size: 13px;

--- cor color: #000056;

--- alinhamento text-align: center; vertical-align: middle;

center | right | left | justify = centralizado | direita | esquerda | justificado top | middle | bottom = (topo | centro | rodapé)

--- marcação - negrito font-weight: bold;

- underline text-decoration: underline;

- italico font-style: italic;

- risco no meio da palavra text-decoration: line-through;

!--- borda

--- com cantos arredondados -moz-border-radius:5px 5px 5px 5px;

-moz-border-radius:7px; /* Firefox, etc */ -khtml-border-radius:7px; /* Konqueror, etc */ -webkit-border-radius:7px; /* Safari, Google Chrome, etc */ border-radius:7px; /* Opera */

div { -moz-border-radius-bottomright:7px; /* Firefox, etc */ -moz-border-radius-topleft:7px; /* Firefox, etc */

-khtml-border-top-right-radius:7px; /* Konqueror, etc */ -khtml-border-bottom-left-radius:7px; /* Konqueror, etc */

-webkit-border-top-right-radius:7px; /* Safari, Google Chrome, etc */ -webkit-border-bottom-left-radius:7px; /* Safari, Google Chrome, etc */

border-top-right-radius:7px; /* Opera */ border-bottom-left-radius:7px; /* Opera */ }

se acaso todos os lados for o mesmo tamanho basta deixar como -moz-border-radius:10px;

--- deixando coluna-linha tudo juntos border-collapse: collapse;

--- configuração geral border: #f09090 1px solid;

solid | dashed | dotted | ridge | outset

--- configuração por lado (borda em 1 pixel, sólido e na cor preta) border-bottom: 1px solid #000; border-top: 1px solid #000; border-left: 1px solid #000; border-right: 1px solid #000;

--- espaçamento do conteúdo dentro da tabela em relação a borda padding: 10px;

! --- link

--- cor do link a:link {}

--- cor do link visitado a:visited {}

--- quando passar o curso a:active {}

--- depois que passo o curso a:hover {}

! --- grupo em td se acaso você quiser criar uma configuração para cada coluna de uma tabela (link, cor, fonte, etc) faça:

td.durruti {} td.durruti a:link {} td.malatesta a:visited {}

e assim por diante.

! --- li

--- o preenchimento fica transparente li.transparente {

 list-style-type: circle;

}

--- normal li.normal {

 list-style-type: disc; 

}

--- fica quadrado li.quadrado {

 list-style-type: square;

}

!--- nome de fontes-familia font-family: Verdana, Geneva, Arial, Helvetica, sans-serif, Courier, "Courier New", monospace, Trebuchet MS, Bitstream Vera Sans,

para dar preferência a uma fonte, coloque a mesma dentro de aspas "Arial"

!--- importa outro css @import "../monobook/main.css";

overflow: -moz-scrollbars-vertical; overflow-y: auto; overflow: scroll;

!--- cambia a imagem

a.logo-spip-powered { display: block; background:URL(../images/spip-powered.png); background-repeat: no-repeat; border: 0px; margin: 0px; padding: 0px; width: 85px; }

a.logo-spip-powered:hover { display: block; background:URL(../images/spip-powered-hover.png); background-repeat: no-repeat; border: 0px; margin: 0px; padding: 0px; width: 85px; }

background-image: URL(../images/__contact.png) !important; background-image: URL(../images/__contact.gif);

flutuação float: left, right, clear: both;

margin-top: 3em; font-family: "Trebuchet Sans MS", Verdana, Tahoma, Arial, sans-serif;

.logo img { border: none; }

text-transform: lowercase;