css
z-index:1;
	

          border-top-width: 10px;
	

          border-right-width: 10px;
	

          border-bottom-width: 10px;
	

          border-left-width: 10px;
	

          border-top-style: groove;
	

          border-right-style: groove;
	

          border-bottom-style: groove;
	

          border-left-style: groove;
}

body{
	

          padding:50px;
}
#cabecalho
{
	

          height:130px;
	

          background-color:#39F;
	

          margin:0px;
}

#cabecalho h1




                                    utilização de
{
	

         font-family:Verdana, Geneva, sans-serif;
	

         font-size:40px;
	

         font-weight:bold;
	

         color:#C30;
}




                             Cascading Style Sheets (CSS)
#cabecalho h2
{
	

         font-family:Verdana, Geneva, sans-serif;
	

         font-size:14px;
	

         color:#C30;
}

#menu ul
{
	

          float:left;
}

#menu ul li {                                                                         h1{
	

          display: inline;                                                         	

         font-size:3em;
	

          padding-right:40px;                                                      }
}
                                                       http://www.w3schools.com/css   a:link{
                                                                                      	

         text-decoration:none;
                                                                                      	

         font-family:Verdana, Gene
                                                                                      }


                                                                   demo:              .campo:active
                                                                                      {
                                                         http://csszengarden.com      	

                                                                                      	

                                                                                                  border:double;
                                                                                                  border-bottom-color:#F
                                                                                      }

                                                                                      a:hover{
                                                                                      	

         text-decoration:underlin
                                                                                      }

                                                                                      fieldset{
                                                                                      	

         background-color:#FC0;
                                                                                      	

         width:400px;
                                                                                      }

                                                                                      fieldset legend{
                                                                                      	

          font-size:14px;
                                                                                      	

          font-weight:bolder;
                                                                                      }

                                                                                      .caixa {
                                                                                      	

                                                                                      	

         font-family:Verdana, Gene
                                                                                      	

         font-size: 12px;
                                                                                      	

         text-decoration: none;
CSS
no início era... a confusão!




                             HTML
                            Styles...
                           JavaScript
CSS
atualmente: organização em “modelos”
Desenvolvidos de forma independente mas complementam-se!




        (X)HTML                  CSS              JavaScript
         estrutura /
                            apresentação         comportamento
         conteúdo
CSS
introdução
O HTML é usado para estruturar conteúdos. CSS é usado para formatar
conteúdos estruturados.

CSS veio revolucionar o mundo do web design. Os benefícios concretos do
uso de CSS incluem:

 • controle do layout de vários documentos a partir de uma simples folha de
     estilos;
 •   aplicação de diferentes layouts para servir diferentes suportes (ecrã,
     impressora, PDA, smartphone...);
 •   maior velocidade de carregamento;
 •   maior acessibilidade e interoperabilidade;
CSS
introdução
CSS
definições
as definições de CSS permitem-nos separar a estrutura da forma de um
documento (X)HTML.

O (X)HTML é usado para definir a estrutura através das tags mas toda a
formatação (fontes, cores, imagens de fundo, molduras, links, formatação do texto,
etc.) é realizada pelas definições de CSS.

Um ficheiro de CSS não é mais do que um conjunto de definições várias
(embebidas na head do documento ou num ficheiro externo).
CSS
inclusão dos estilos no documento HTML
a CSS pode ser incluída num documento HTML de três formas: inline, embebida
ou como ficheiro externo.
CSS
inclusão dos estilos no documento | CSS inline
esta é a forma mais antiga, ainda do tempo da utilização das tabelas como
elemento de estrutura do HTML. Neste caso a definição é escrita juntamente com
o código HTML.

<p style="text-align: left"> texto bla bla bla</p>
CSS
inclusão dos estilos no documento | CSS embebida
desta forma colocamos o código dentro   <head>
da HEAD da página HTML a que
                                        <style type="text/css">
queremos aplicar a CSS.                 <!--

Com este método os estilos são              body {
aplicados só à página onde estão            margin: 0;
                                            padding: 0;
colocados.                                  text-align: center;
                                            background-color: #333333;
Não é uma boa solução para aplicar a    }
um site dado que se quisermos mudar a
                                        -->
CSS temos que mudar página a página.    </style>

                                        </head>
CSS
inclusão dos estilos no documento | CSS externa
o ficheiro .css é criado externamente ao           ficheiro nomedoficheiro.css
HTML. Só temos que fazer a ligação do
                                                  <style type="text/css">
CSS ao HTML com um link na head                   <!--

<head>                                                body {
<link rel="stylesheet" type="text/css" href="…/       margin: 0;
css/nomedoficheiro.css"/>                              padding: 0;
</head>                                               text-align: center;
                                                      background-color: #333333;
                                                  }
Ou podemos fazer a importação do
                                                  -->
ficheiro CSS                                       </style>

<style type="text/css">
   @import url (http://...../nomedoficheiro.css)
</style>
CSS
inclusão dos estilos no documento | CSS externa
qualquer destes métodos é realizado colocando a instrução de link ou importação
na head do HTML.
Usando um ficheiro externo todas as páginas HTML ligam-se a um ficheiro CSS.
Isto significa que, se for preciso alterar formatação do site só temos que alterar um
ficheiro CSS, e não mudar todas as páginas HTML, uma a uma.

Logo:

 •   A manutenção é mais fácil;
 •   O tamanho é reduzido;
 •   A largura de banda é reduzida;
 •   A flexibilidade é melhorada.

A forma mais usada é a CSS externa. No entanto, é possível ter num mesmo
documento HTML as três formas, ou seja, inline, embebida e externa. É, no
entanto, preciso ter em atenção a ordem de leituras dos vários estilos e a
implicação que têm uns com os outros.
CSS
a ordem da “cascata” | leitura
como sabemos um documento HTML pode conter definições CSS inline,
embebidas e externas. Ora quando coexistem num mesmo documento poderá
haver conflitos o que pode originar situações anómalas e renders estranhos do
documento HTML.

Leitura:
A ordem de leitura destes estilos, quando em simultâneo num HTML, é a seguinte:

 1.   CSS existente no browser
 2.   CSS externa
 3.   CSS embebida
 4.   CSS inline
CSS
a ordem da “cascata” | a cascata
quando existe mais do que um estilo num documento HTML, estes funcionam em
cascata numa folha de estilo virtual com a ordem acima descrita.
A última regra da cascata é a que tem prioridade.

A ordem de prioridade é a seguinte:

 1.   Inline
 2.   CSS embebida
 3.   CSS externa
 4.   CSS do browser

Isto quer dizer que em caso de regras iguais com valores diferentes a inline
sobrepõe-se à embebida e esta à externa.
É importante saber que mesmo quando existem duas declarações iguais na
mesma css, a última regra da lista das declarações é a que prevalece. É, também,
importante a posição das folhas de estilo na head do HTML, a ultima folha CSS na
ordem do HTML é a que tem predominância.
CSS
a ordem da “cascata” | a cascata | inerência
propriedades e valores em tags parent têm inerência sobre as child tags (é como
na vida real!)

Quando um selector está ligado por uma relação de parentesco a outro ou está
contido nele, assume as propriedades do selector onde está contido.

Se, por exemplo, declararmos no selector body a property font-family todo o texto
da página HTML vai assumir esta propriedade.
CSS
a ordem da “cascata” | a cascata | inerência por exemplos
body {font-family: Verdana, serif;}

se quisermos outro estilo dentro do HTML temos que o realizar pelas respectivos
selectores. Por exemplo:

h1 {font-family: Georgia, serif;}
p {font-family: Tahoma, sans-serif;}

Agora as tags <h1> terão a fonte Georgia e não Verdana anteriormente declarada
na tag body.

Mas se declararmos

h1 {font-size: 12px;}

a fonte seria Verdana, a font declarada na tag body.

Por inerência uma tag ganha o estilo da tag pai.
CSS
declaração de um estilo | os seletores
tal como o HTML usa tags, o CSS usa seletores.

O seletor referencia o elemento HTML que queremos formatar. A propriedade é
um atributo do selector que queremos formatar e o valor está intimamente
relacionado com a formatação do elemento.

Cada selector pode ter múltiplas propriedades; e cada propriedade tem valores
independentes.

body {
  background: #eeeeee;
  font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

Neste exemplo o body é o seletor; a definição é o conjunto das instruções
escritas entre as chavetas, background, é uma propriedade de body; #eeeeee é o
valor do background nesta definição.
CSS
declaração de um estilo | os seletores
a propriedade e o valor estão separados por dois pontos (:) e rodeados por
chavetas ({ }).

Quando um valor é constituído por mais que uma palavra, deve estar entre aspas.
Também podemos especificar mais do que uma propriedade na mesma
declaração. Para isto, devemos separar cada propriedade e o respectivo valor com
um ponto e virgula (;)

p{ text-align: center; color: black; font-family: arial }
CSS
declaração de um estilo | os seletores
dos tipos de seletores mais usados (não é uma lista completa) podemos referir
os seguintes:

 •   Element selectors
 •   ID selectors
 •   Class selectors
 •   Group selectors
 •   Descendent selectors
 •   Pseudo-class selectors

Estes tipos de seletores podem ser divididos em dois géneros: tipo e autor. O
primeiro diz respeito aos selectores que identificam os elementos de HTML, o
segundo pode ser criado pelo autor da CSS.
CSS
declaração de um estilo | os seletores




           seletor
           {
             propriedade : valor ;
           }        declaração
CSS
declaração de um estilo | os seletores | element selectors
<p> <h1> <em> <span>, etc.

referenciam as tags HTML que formatam.
Por exemplo: o element selector corresponde à tag <h1>

h1 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 2em;
  color: #333333;
}
CSS
declaração de um estilo | os seletores | element selectors



p                        a:link :visited :hover            h1
{                        {                                 {
    text-align:center;       /*isto é um comentário...*/        color:black;
    color:black;                 text-decoration:none;          font-family:arial
    font-family:arial            color:black;              }
}                                font-family:arial
                         }
CSS
declaração de um estilo | os seletores | ID selectors
definem-se com o sinal cardinal (#) e deve ser usado uma única vez em cada
documento HTML. Pode, no entanto, haver mais do que um seletor com o mesmo
ID, mas não está conforme as especificações da W3C. O documento pode ser
correctamente rendido pelo browser, mas não será validado.

Quando queremos usar vários seletores com o mesmo nome devemos usar classes
em vez de ID.

Os ID são muito usados para definir os elementos estruturais do documento HTML,
como é o caso das DIVs.

#caixa {
      background-color: #FF9900;
      margin: 0px;
      padding: 5px;
      float: left;
      height: 300px;
      width: 300px;
}
CSS
declaração de um estilo | os seletores | ID selectors




#tituloPrinc                     #hiperligacao                    #capa
{                                {                                {
   text-align:center;               /*isto é um comentário...*/       color:black;
   color:black;                         text-decoration:none;         font-family:arial
   font-family:arial                    color:black;              }
}                                       font-family:arial
                                 }



                        <div id="capa"> a infografia em portugal </p>
CSS
declaração de um estilo | os seletores | class selectors
com os seletores de classe podemos definir diferentes estilos para o mesmo
tipo de elemento num documento HTML.

Por exemplo, podemos ter dois tipos de parágrafos no documento:

p .right {text-align: right}
p .left {text-align: left}

Os atributos de classe podem ser usados localmente (inline) no documento
HTML. Os selectores de classe devem começar com um ponto e podem ter o
nome que quisermos. Podemos usar várias vezes a mesma classe no mesmo
documento.

.imagem {
       height: 300px;
       width: 300px;
       border: thin solid #333333;
       margin: 20px;
}
CSS
declaração de um estilo | os seletores | class selectors




.tituloPrinc                  .hiperligacoes                   .capa
{                             {                                {
    text-align:center;           /*isto é um comentário...*/        color:black;
    color:black;                     text-decoration:none;          font-family:arial
    font-family:arial                color:black;              }
}                                    font-family:arial
                              }



                  <p class="tituloPrinc"> atelier de multimédia </p>
                                          ...
                 <p class="tituloPrinc"> a infografia em portugal </p>
CSS
declaração de um estilo | os seletores | group selectors
é possível agrupar selectores e com isso reduzir o código. Os selectores agrupados
devem estar separados com vírgulas (,)

h1, h2, h3, h4, h5, h6 {
                           color: #009900;
                           font-family: Georgia, sans-serif;
}
CSS
declaração de um estilo | os seletores | descendent selectors
podemos usar selectores descendentes.    #lateral h1 {
                                                     font-family: Verdana, Arial,
É útil quando queremos formatar um
                                         Helvetica, sans-serif;
determinado elemento dentro de um                    font-size: 0.97em;
contexto específico, ou só dentro de                  line-height: 1;
uma dada DIV. Deve existir um espaço                 font-weight: 900;
                                                     color: #FF6600;
entre os descent selectors. Neste        }
exemplo estaríamos a formatar os h1
cujo ID fosse lateral.

Já se quisermos formatar o elemento h1   h1 {
para todo o documento, então                 font-family: Verdana, Arial,
                                         Helvetica, sans-serif;
utilizariamos este exempo:                   font-size: 0.97em;
                                             line-height: 1;
                                             font-weight: 900;
                                             color: #FF6600;
                                         }
CSS
declaração de um estilo | os seletores | pseudo-class selectors
permitem definir o aspecto das hiperligações, sendo, portanto, os seletores
relevantes para o aspeto gráfico e manipulação da interface.

Diz-se que é uma pseudo-class, dado que o seu estado é variável por depender da
interação do utilizador. Devem seguir esta ordem: a: link, a: visited, a:hover,
a:active

Geralmente, para uma interação eficaz os seletores a e :visited, têm a mesma
definição e o :active é de pouca utilização. Portanto, são relevantes as definições
dos selectores a e :hover.

a, :visited {                                           a:hover {
           font-family: Arial, Helvetica, sans-serif;            color: #FFF;
           font-size: 0.9em;                                     background-color: #666;
           color: #000;                                 }
           text-decoration: none;
}
ex.                                                             ex.
http://esev.comze.com/demo/HTML/css/selectores.html             http://esev.comze.com/demo/HTML/css/selectores.html
CSS
os comentários
os comentários CSS são uma forma prática de organizarmos código. Servem,
como o próprio nome indica, para inserir texto em forma de comentário que ajuda
o autor a relembrar a organização e a forma das definições ou para organizar o
documento CSS em partes lógicas.

São, também, extremamente úteis para partilhar código, permitindo que outra
pessoa compreenda o porquê daquela organização ou definição.

/*isto é um comentário CSS*/
CSS
definir a CSS de forma concisa
Quando criamos as regras de CSS podemos compactar o código.
Por exemplo esta definição:

.imagem {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
}

pode ser escrita assim:
.imagem {
margin: 20px;
border: thin solid;
}

Isto permite-nos poupar tempo e permitir um render mais rápido do documento.
border-right
                                                   F                 layout-grid-char-spacing      -moz-border-right-colorspadding-top                  speak-numeral
                                                                                                                                                        speak-punctuation
CSS
                        border-right-color                           layout-grid-line              -moz-border-bottom-colors
                                                                                                                           page
                        border-right-style   filter                  layout-grid-mode              -moz-border-left-colors page-break-after             speech-rate
                        border-right-width   float                   layout-grid-type              -moz-opacity            page-break-before            stress


algumas das propriedades
                        border-spacing       font                    left                          -moz-outline            page-break-inside            scrollbar-arrow-color
                        border-style         font-family             letter-spacing                -moz-outline-color      pause                        scrollbar-base-color
                        border-top           font-size               line-break                    -moz-outline-style      pause-after                  scrollbar-dark-shadow-co
                        border-top-color     font-size-adjust        line-height                   -moz-outline-width      pause-before                 scrollbar-face-color
                        border-top-style     font-stretch            list-style                    -moz-user-focus         pitch                        scrollbar-highlight-color
                        border-top-width     font-style              list-style-image              -moz-user-input         pitch-range                  scrollbar-shadow-color
                        border-width         font-variant            list-style-position           -moz-user-modify        play-during                  scrollbar-3d-light-color
                        bottom               font-weight             list-style-type               -moz-user-select        position                     scrollbar-track-color



 A/B                          C                H/I                        M                             O                  Q/R                               T
accelerator             caption-side         height                   margin                        orphans               quotes                        table-layout
azimuth                 clear                ime-mode                 margin-bottom                 outline               -replace                      text-align
background              clip                 include-source           margin-left                   outline-color         richness                      text-align-last
background-attachment   color                                         margin-right                  outline-style         right                         text-decoration
background-color        content                                       margin-top                    outline-width         ruby-align                    text-indent
background-image        counter-increment                             marker-offset                 overflow              ruby-overhang                 text-justify
background-position
background-position-x
background-position-y
                        counter-reset
                        cue
                        cue-after
                                                   L                  marks
                                                                      max-height
                                                                      max-width
                                                                                                    overflow-X
                                                                                                    overflow-Y
                                                                                                                          ruby-position                 text-overflow
                                                                                                                                                        text-shadow
                                                                                                                                                        text-transform
                                             layer-background-color
background-repeat
behavior
border
                        cue-before
                        cursor
                                             layer-background-image
                                             layout-flow
                                                                      min-height
                                                                      min-width
                                                                      -moz-binding                      P                      S                        text-autospace
                                                                                                                                                        text-kashida-space
                                                                                                                                                        text-underline-position
                                             layout-grid                                                                  -set-link-source
border-bottom                                                         -moz-border-radius                                                                top

                          D/E
                                             layout-grid-char                                       padding               size
border-bottom-color                                                   -moz-border-radius-topleft
                                             layout-grid-char-spacing                               padding-bottom        speak
border-bottom-style                                                   -moz-border-radius-topright

                                                                                                                                                          U/V
                                             layout-grid-line                                       padding-left          speak-header
border-bottom-width                                                   -moz-border-radius-bottomrightpadding-right
                        direction            layout-grid-mode                                                             speak-numeral
border-collapse                                                       -moz-border-radius-bottomleft padding-top
                        display              layout-grid-type                                                             speak-punctuation
border-color                                                          -moz-border-top-colors                                                            unicode-bidi
                        elevation            left                                                   page                  speech-rate
border-left                                                           -moz-border-right-colors                                                          -use-link-source
                        empty-cells          letter-spacing                                         page-break-after      stress
border-left-color                                                     -moz-border-bottom-colors                                                         vertical-align
                                             line-break                                             page-break-before     scrollbar-arrow-color
border-left-style                                                     -moz-border-left-colors                                                           visibility
                                             line-height                                            page-break-inside     scrollbar-base-color
border-left-width                                                     -moz-opacity                                                                      voice-family
                                             list-style                                             pause                 scrollbar-dark-shadow-color

                              F
border-right                                                          -moz-outline                                                                      volume
                                             list-style-image                                       pause-after           scrollbar-face-color
border-right-color                                                    -moz-outline-color
                                             list-style-position                                    pause-before          scrollbar-highlight-color
border-right-style                                                    -moz-outline-style
                                             list-style-type                                        pitch                 scrollbar-shadow-color

                                                                                                                                                          W/Z
border-right-width      filter                                        -moz-outline-width            pitch-range           scrollbar-3d-light-color
border-spacing          float                                         -moz-user-focus               play-during           scrollbar-track-color
                        font
                                                   M
border-style                                                          -moz-user-input               position                                            white-space
border-top              font-family                                   -moz-user-modify
                        font-size                                                                                                                       widows

                                                                                                                               T
border-top-color                                                      -moz-user-select
                                                                                                                                                        width
                                                                                                     Q/R
border-top-style        font-size-adjust     margin
border-top-width        font-stretch         margin-bottom                                                                                              word-break
border-width
bottom
                        font-style
                        font-variant
                        font-weight
                                             margin-left
                                             margin-right
                                             margin-top
                                                                          O                         quotes
                                                                                                    -replace
                                                                                                                          table-layout
                                                                                                                          text-align
                                                                                                                          text-align-last
                                                                                                                                                        word-spacing
                                                                                                                                                        word-wrap
                                                                                                                                                        writing-mode
                                                                      orphans                                                                           z-index
                                             marker-offset                                          richness              text-decoration

     C
                                                                      outline                                                                           zoom
                                             marks                                                  right                 text-indent
                                                                      outline-color
                                             max-height                                             ruby-align            text-justify
                                                                      outline-style
CSS
algumas das propriedades | ex. de uma cheat sheet
CSS
algumas das propriedades | ex. de uma cheat sheet
CSS
o modelo de “caixa” que existe em todos os elementos
CSS
posicionamento
CSS
posicionamento
CSS
layout das páginas | tipos de layout
existem quatro tipos de layouts:

 •   Fixo (fixed)
 •   Elástico (elastic)
 •   Liquido (liquid)
 •   Hibrido (hybrid)
CSS
layout das páginas | tipos de layout | layout fixo
no layout fixo, as medidas são fixas, logo não existe alteração da estrutura da
página quando se muda de resolução e ou de dimensão do monitor.




                                 http://esev.comze.com/demo/css/layout/layfixocentrado.html
CSS
layout das páginas | tipos de layout | layout elástico
o layout elástico, tem a aparência de um
layout fixo, mas aumentando ou
diminuindo a fonte o layout acompanha o
redimensionamento da fonte.

É um layout flexível porque é constituído
por unidades de medida relativas e a
largura é relativa à largura da fonte do
browser utilizado.

Temos sempre o mesmo número de linhas
e palavras se aumentarmos ou
diminuirmos o layout com a janela do
browser.
                             http://esev.comze.com/demo/css/layout/layelasticoocentrado.html
CSS
layout das páginas | tipos de layout | layout líquido
o layout liquido usa colunas em
percentagem.

Ao redimensionar a janela do browser o
layout adapta-se ao tamanho.




                              http://esev.comze.com/demo/css/layout/layliquidocentrado.html
CSS
layout das páginas | tipos de layout | layout híbrido
o layout hibrido, é uma
combinação do elástico e do
liquido.

Por exemplo, podemos ter o
conteúdo de uma DIV em ems
(font-size: 1 em;) e o conteúdo
de outra em percentagem (font-
size: 100%).

Logo, uma DIV vai manter
sempre a sua estrutura enquanto
que a outra vai adaptar-se face
ao redimensionamento da janela
do browser.
                                  http://esev.comze.com/demo/css/layout/layhibrido.html
CSS
posicionamento
Existem quatro tipos de posicionamento possíveis para as DIVs:

 •   estático (static)
 •   relativo (relative)
 •   absoluto (absolute)
 •   fixo (fixed)




Exemplos em
http://esev.comze.com/demo/HTML/posicionamento/
CSS
posicionamento | estático
o posicionamento estático corresponde ao fluir normal dos elementos num
documento HTML, ou seja, as DIVs são posicionadas de cima para baixo, da
esquerda para a direita. Se uma DIV for reposicionada através de CSS, a DIV
imediatamente abaixo toma o seu lugar.




Exemplos em
http://esev.comze.com/demo/HTML/posicionamento/
CSS
posicionamento | relativo
o posicionamento relativo é um reposicionamento de uma dada DIV relativamente à
sua posição estática, ou seja, relativamente à sua posição estática a DIV está
deslocada no eixo X tantos pixels e no eixo y outros tantos pixels.




Exemplos em
http://esev.comze.com/demo/HTML/posicionamento/
CSS
posicionamento | absoluto
o posicionamento absoluto é calculado tendo em conta a janela do browser. Neste
caso as coordenadas X e Y da DIV estão em perfeita correlação com as dimensões
da janela do browser.




Exemplos em
http://esev.comze.com/demo/HTML/posicionamento/
CSS
posicionamento | fixo
o posicionamento fixo permite manter uma DIV fixa na janela do browser, que não
mexe com o movimento do Scroll.

Permite-nos criar efeitos como os realizados com os antigos frames.




Exemplos em
http://esev.comze.com/demo/HTML/posicionamento/
CSS
validação do código




                      http://jigsaw.w3.org/css-validator/
CSS
referências
Bibliografia:

 • CSS, Criação Inovadora de Sites - FCA
Webliografia:

 •   http://www.w3schools.com/css/default.asp
 •   http://www.leonelcunha.net/aulas12p/recursos/ppm_2_XHTML_CSS.pdf
 •   http://pt-br.html.net/tutorials/css
 •   http://www.freecsstemplates.org/css-templates (templates em html e css)
 •   http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
 •   http://css-tricks.com/ (artigos e vídeos!)

Exemplos (ótimos) de código fonte (layout, posicionamentos, etc.)
 • http://www.leonelcunha.net/formacao/
o futuro?
CSS3
http://www.w3schools.com/css3/default.asp

curso de CSS

  • 1.
  • 2.
    z-index:1; border-top-width: 10px; border-right-width: 10px; border-bottom-width: 10px; border-left-width: 10px; border-top-style: groove; border-right-style: groove; border-bottom-style: groove; border-left-style: groove; } body{ padding:50px; } #cabecalho { height:130px; background-color:#39F; margin:0px; } #cabecalho h1 utilização de { font-family:Verdana, Geneva, sans-serif; font-size:40px; font-weight:bold; color:#C30; } Cascading Style Sheets (CSS) #cabecalho h2 { font-family:Verdana, Geneva, sans-serif; font-size:14px; color:#C30; } #menu ul { float:left; } #menu ul li { h1{ display: inline; font-size:3em; padding-right:40px; } } http://www.w3schools.com/css a:link{ text-decoration:none; font-family:Verdana, Gene } demo: .campo:active { http://csszengarden.com border:double; border-bottom-color:#F } a:hover{ text-decoration:underlin } fieldset{ background-color:#FC0; width:400px; } fieldset legend{ font-size:14px; font-weight:bolder; } .caixa { font-family:Verdana, Gene font-size: 12px; text-decoration: none;
  • 3.
    CSS no início era...a confusão! HTML Styles... JavaScript
  • 4.
    CSS atualmente: organização em“modelos” Desenvolvidos de forma independente mas complementam-se! (X)HTML CSS JavaScript estrutura / apresentação comportamento conteúdo
  • 5.
    CSS introdução O HTML éusado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados. CSS veio revolucionar o mundo do web design. Os benefícios concretos do uso de CSS incluem: • controle do layout de vários documentos a partir de uma simples folha de estilos; • aplicação de diferentes layouts para servir diferentes suportes (ecrã, impressora, PDA, smartphone...); • maior velocidade de carregamento; • maior acessibilidade e interoperabilidade;
  • 6.
  • 7.
    CSS definições as definições deCSS permitem-nos separar a estrutura da forma de um documento (X)HTML. O (X)HTML é usado para definir a estrutura através das tags mas toda a formatação (fontes, cores, imagens de fundo, molduras, links, formatação do texto, etc.) é realizada pelas definições de CSS. Um ficheiro de CSS não é mais do que um conjunto de definições várias (embebidas na head do documento ou num ficheiro externo).
  • 8.
    CSS inclusão dos estilosno documento HTML a CSS pode ser incluída num documento HTML de três formas: inline, embebida ou como ficheiro externo.
  • 9.
    CSS inclusão dos estilosno documento | CSS inline esta é a forma mais antiga, ainda do tempo da utilização das tabelas como elemento de estrutura do HTML. Neste caso a definição é escrita juntamente com o código HTML. <p style="text-align: left"> texto bla bla bla</p>
  • 10.
    CSS inclusão dos estilosno documento | CSS embebida desta forma colocamos o código dentro <head> da HEAD da página HTML a que <style type="text/css"> queremos aplicar a CSS. <!-- Com este método os estilos são body { aplicados só à página onde estão margin: 0; padding: 0; colocados. text-align: center; background-color: #333333; Não é uma boa solução para aplicar a } um site dado que se quisermos mudar a --> CSS temos que mudar página a página. </style> </head>
  • 11.
    CSS inclusão dos estilosno documento | CSS externa o ficheiro .css é criado externamente ao ficheiro nomedoficheiro.css HTML. Só temos que fazer a ligação do <style type="text/css"> CSS ao HTML com um link na head <!-- <head> body { <link rel="stylesheet" type="text/css" href="…/ margin: 0; css/nomedoficheiro.css"/> padding: 0; </head> text-align: center; background-color: #333333; } Ou podemos fazer a importação do --> ficheiro CSS </style> <style type="text/css"> @import url (http://...../nomedoficheiro.css) </style>
  • 12.
    CSS inclusão dos estilosno documento | CSS externa qualquer destes métodos é realizado colocando a instrução de link ou importação na head do HTML. Usando um ficheiro externo todas as páginas HTML ligam-se a um ficheiro CSS. Isto significa que, se for preciso alterar formatação do site só temos que alterar um ficheiro CSS, e não mudar todas as páginas HTML, uma a uma. Logo: • A manutenção é mais fácil; • O tamanho é reduzido; • A largura de banda é reduzida; • A flexibilidade é melhorada. A forma mais usada é a CSS externa. No entanto, é possível ter num mesmo documento HTML as três formas, ou seja, inline, embebida e externa. É, no entanto, preciso ter em atenção a ordem de leituras dos vários estilos e a implicação que têm uns com os outros.
  • 13.
    CSS a ordem da“cascata” | leitura como sabemos um documento HTML pode conter definições CSS inline, embebidas e externas. Ora quando coexistem num mesmo documento poderá haver conflitos o que pode originar situações anómalas e renders estranhos do documento HTML. Leitura: A ordem de leitura destes estilos, quando em simultâneo num HTML, é a seguinte: 1. CSS existente no browser 2. CSS externa 3. CSS embebida 4. CSS inline
  • 14.
    CSS a ordem da“cascata” | a cascata quando existe mais do que um estilo num documento HTML, estes funcionam em cascata numa folha de estilo virtual com a ordem acima descrita. A última regra da cascata é a que tem prioridade. A ordem de prioridade é a seguinte: 1. Inline 2. CSS embebida 3. CSS externa 4. CSS do browser Isto quer dizer que em caso de regras iguais com valores diferentes a inline sobrepõe-se à embebida e esta à externa. É importante saber que mesmo quando existem duas declarações iguais na mesma css, a última regra da lista das declarações é a que prevalece. É, também, importante a posição das folhas de estilo na head do HTML, a ultima folha CSS na ordem do HTML é a que tem predominância.
  • 15.
    CSS a ordem da“cascata” | a cascata | inerência propriedades e valores em tags parent têm inerência sobre as child tags (é como na vida real!) Quando um selector está ligado por uma relação de parentesco a outro ou está contido nele, assume as propriedades do selector onde está contido. Se, por exemplo, declararmos no selector body a property font-family todo o texto da página HTML vai assumir esta propriedade.
  • 16.
    CSS a ordem da“cascata” | a cascata | inerência por exemplos body {font-family: Verdana, serif;} se quisermos outro estilo dentro do HTML temos que o realizar pelas respectivos selectores. Por exemplo: h1 {font-family: Georgia, serif;} p {font-family: Tahoma, sans-serif;} Agora as tags <h1> terão a fonte Georgia e não Verdana anteriormente declarada na tag body. Mas se declararmos h1 {font-size: 12px;} a fonte seria Verdana, a font declarada na tag body. Por inerência uma tag ganha o estilo da tag pai.
  • 17.
    CSS declaração de umestilo | os seletores tal como o HTML usa tags, o CSS usa seletores. O seletor referencia o elemento HTML que queremos formatar. A propriedade é um atributo do selector que queremos formatar e o valor está intimamente relacionado com a formatação do elemento. Cada selector pode ter múltiplas propriedades; e cada propriedade tem valores independentes. body { background: #eeeeee; font-family: "Trebuchet MS", Verdana, Arial, sans-serif; } Neste exemplo o body é o seletor; a definição é o conjunto das instruções escritas entre as chavetas, background, é uma propriedade de body; #eeeeee é o valor do background nesta definição.
  • 18.
    CSS declaração de umestilo | os seletores a propriedade e o valor estão separados por dois pontos (:) e rodeados por chavetas ({ }). Quando um valor é constituído por mais que uma palavra, deve estar entre aspas. Também podemos especificar mais do que uma propriedade na mesma declaração. Para isto, devemos separar cada propriedade e o respectivo valor com um ponto e virgula (;) p{ text-align: center; color: black; font-family: arial }
  • 19.
    CSS declaração de umestilo | os seletores dos tipos de seletores mais usados (não é uma lista completa) podemos referir os seguintes: • Element selectors • ID selectors • Class selectors • Group selectors • Descendent selectors • Pseudo-class selectors Estes tipos de seletores podem ser divididos em dois géneros: tipo e autor. O primeiro diz respeito aos selectores que identificam os elementos de HTML, o segundo pode ser criado pelo autor da CSS.
  • 20.
    CSS declaração de umestilo | os seletores seletor { propriedade : valor ; } declaração
  • 21.
    CSS declaração de umestilo | os seletores | element selectors <p> <h1> <em> <span>, etc. referenciam as tags HTML que formatam. Por exemplo: o element selector corresponde à tag <h1> h1 { font-family: Arial, Helvetica, sans-serif; font-size: 2em; color: #333333; }
  • 22.
    CSS declaração de umestilo | os seletores | element selectors p a:link :visited :hover h1 { { { text-align:center; /*isto é um comentário...*/ color:black; color:black; text-decoration:none; font-family:arial font-family:arial color:black; } } font-family:arial }
  • 23.
    CSS declaração de umestilo | os seletores | ID selectors definem-se com o sinal cardinal (#) e deve ser usado uma única vez em cada documento HTML. Pode, no entanto, haver mais do que um seletor com o mesmo ID, mas não está conforme as especificações da W3C. O documento pode ser correctamente rendido pelo browser, mas não será validado. Quando queremos usar vários seletores com o mesmo nome devemos usar classes em vez de ID. Os ID são muito usados para definir os elementos estruturais do documento HTML, como é o caso das DIVs. #caixa { background-color: #FF9900; margin: 0px; padding: 5px; float: left; height: 300px; width: 300px; }
  • 24.
    CSS declaração de umestilo | os seletores | ID selectors #tituloPrinc #hiperligacao #capa { { { text-align:center; /*isto é um comentário...*/ color:black; color:black; text-decoration:none; font-family:arial font-family:arial color:black; } } font-family:arial } <div id="capa"> a infografia em portugal </p>
  • 25.
    CSS declaração de umestilo | os seletores | class selectors com os seletores de classe podemos definir diferentes estilos para o mesmo tipo de elemento num documento HTML. Por exemplo, podemos ter dois tipos de parágrafos no documento: p .right {text-align: right} p .left {text-align: left} Os atributos de classe podem ser usados localmente (inline) no documento HTML. Os selectores de classe devem começar com um ponto e podem ter o nome que quisermos. Podemos usar várias vezes a mesma classe no mesmo documento. .imagem { height: 300px; width: 300px; border: thin solid #333333; margin: 20px; }
  • 26.
    CSS declaração de umestilo | os seletores | class selectors .tituloPrinc .hiperligacoes .capa { { { text-align:center; /*isto é um comentário...*/ color:black; color:black; text-decoration:none; font-family:arial font-family:arial color:black; } } font-family:arial } <p class="tituloPrinc"> atelier de multimédia </p> ... <p class="tituloPrinc"> a infografia em portugal </p>
  • 27.
    CSS declaração de umestilo | os seletores | group selectors é possível agrupar selectores e com isso reduzir o código. Os selectores agrupados devem estar separados com vírgulas (,) h1, h2, h3, h4, h5, h6 { color: #009900; font-family: Georgia, sans-serif; }
  • 28.
    CSS declaração de umestilo | os seletores | descendent selectors podemos usar selectores descendentes. #lateral h1 { font-family: Verdana, Arial, É útil quando queremos formatar um Helvetica, sans-serif; determinado elemento dentro de um font-size: 0.97em; contexto específico, ou só dentro de line-height: 1; uma dada DIV. Deve existir um espaço font-weight: 900; color: #FF6600; entre os descent selectors. Neste } exemplo estaríamos a formatar os h1 cujo ID fosse lateral. Já se quisermos formatar o elemento h1 h1 { para todo o documento, então font-family: Verdana, Arial, Helvetica, sans-serif; utilizariamos este exempo: font-size: 0.97em; line-height: 1; font-weight: 900; color: #FF6600; }
  • 29.
    CSS declaração de umestilo | os seletores | pseudo-class selectors permitem definir o aspecto das hiperligações, sendo, portanto, os seletores relevantes para o aspeto gráfico e manipulação da interface. Diz-se que é uma pseudo-class, dado que o seu estado é variável por depender da interação do utilizador. Devem seguir esta ordem: a: link, a: visited, a:hover, a:active Geralmente, para uma interação eficaz os seletores a e :visited, têm a mesma definição e o :active é de pouca utilização. Portanto, são relevantes as definições dos selectores a e :hover. a, :visited { a:hover { font-family: Arial, Helvetica, sans-serif; color: #FFF; font-size: 0.9em; background-color: #666; color: #000; } text-decoration: none; } ex. ex. http://esev.comze.com/demo/HTML/css/selectores.html http://esev.comze.com/demo/HTML/css/selectores.html
  • 30.
    CSS os comentários os comentáriosCSS são uma forma prática de organizarmos código. Servem, como o próprio nome indica, para inserir texto em forma de comentário que ajuda o autor a relembrar a organização e a forma das definições ou para organizar o documento CSS em partes lógicas. São, também, extremamente úteis para partilhar código, permitindo que outra pessoa compreenda o porquê daquela organização ou definição. /*isto é um comentário CSS*/
  • 31.
    CSS definir a CSSde forma concisa Quando criamos as regras de CSS podemos compactar o código. Por exemplo esta definição: .imagem { margin-top: 20px; margin-right: 20px; margin-bottom: 20px; margin-left: 20px; border-top-width: thin; border-right-width: thin; border-bottom-width: thin; border-left-width: thin; } pode ser escrita assim: .imagem { margin: 20px; border: thin solid; } Isto permite-nos poupar tempo e permitir um render mais rápido do documento.
  • 32.
    border-right F layout-grid-char-spacing -moz-border-right-colorspadding-top speak-numeral speak-punctuation CSS border-right-color layout-grid-line -moz-border-bottom-colors page border-right-style filter layout-grid-mode -moz-border-left-colors page-break-after speech-rate border-right-width float layout-grid-type -moz-opacity page-break-before stress algumas das propriedades border-spacing font left -moz-outline page-break-inside scrollbar-arrow-color border-style font-family letter-spacing -moz-outline-color pause scrollbar-base-color border-top font-size line-break -moz-outline-style pause-after scrollbar-dark-shadow-co border-top-color font-size-adjust line-height -moz-outline-width pause-before scrollbar-face-color border-top-style font-stretch list-style -moz-user-focus pitch scrollbar-highlight-color border-top-width font-style list-style-image -moz-user-input pitch-range scrollbar-shadow-color border-width font-variant list-style-position -moz-user-modify play-during scrollbar-3d-light-color bottom font-weight list-style-type -moz-user-select position scrollbar-track-color A/B C H/I M O Q/R T accelerator caption-side height margin orphans quotes table-layout azimuth clear ime-mode margin-bottom outline -replace text-align background clip include-source margin-left outline-color richness text-align-last background-attachment color margin-right outline-style right text-decoration background-color content margin-top outline-width ruby-align text-indent background-image counter-increment marker-offset overflow ruby-overhang text-justify background-position background-position-x background-position-y counter-reset cue cue-after L marks max-height max-width overflow-X overflow-Y ruby-position text-overflow text-shadow text-transform layer-background-color background-repeat behavior border cue-before cursor layer-background-image layout-flow min-height min-width -moz-binding P S text-autospace text-kashida-space text-underline-position layout-grid -set-link-source border-bottom -moz-border-radius top D/E layout-grid-char padding size border-bottom-color -moz-border-radius-topleft layout-grid-char-spacing padding-bottom speak border-bottom-style -moz-border-radius-topright U/V layout-grid-line padding-left speak-header border-bottom-width -moz-border-radius-bottomrightpadding-right direction layout-grid-mode speak-numeral border-collapse -moz-border-radius-bottomleft padding-top display layout-grid-type speak-punctuation border-color -moz-border-top-colors unicode-bidi elevation left page speech-rate border-left -moz-border-right-colors -use-link-source empty-cells letter-spacing page-break-after stress border-left-color -moz-border-bottom-colors vertical-align line-break page-break-before scrollbar-arrow-color border-left-style -moz-border-left-colors visibility line-height page-break-inside scrollbar-base-color border-left-width -moz-opacity voice-family list-style pause scrollbar-dark-shadow-color F border-right -moz-outline volume list-style-image pause-after scrollbar-face-color border-right-color -moz-outline-color list-style-position pause-before scrollbar-highlight-color border-right-style -moz-outline-style list-style-type pitch scrollbar-shadow-color W/Z border-right-width filter -moz-outline-width pitch-range scrollbar-3d-light-color border-spacing float -moz-user-focus play-during scrollbar-track-color font M border-style -moz-user-input position white-space border-top font-family -moz-user-modify font-size widows T border-top-color -moz-user-select width Q/R border-top-style font-size-adjust margin border-top-width font-stretch margin-bottom word-break border-width bottom font-style font-variant font-weight margin-left margin-right margin-top O quotes -replace table-layout text-align text-align-last word-spacing word-wrap writing-mode orphans z-index marker-offset richness text-decoration C outline zoom marks right text-indent outline-color max-height ruby-align text-justify outline-style
  • 33.
    CSS algumas das propriedades| ex. de uma cheat sheet
  • 34.
    CSS algumas das propriedades| ex. de uma cheat sheet
  • 35.
    CSS o modelo de“caixa” que existe em todos os elementos
  • 36.
  • 37.
  • 38.
    CSS layout das páginas| tipos de layout existem quatro tipos de layouts: • Fixo (fixed) • Elástico (elastic) • Liquido (liquid) • Hibrido (hybrid)
  • 39.
    CSS layout das páginas| tipos de layout | layout fixo no layout fixo, as medidas são fixas, logo não existe alteração da estrutura da página quando se muda de resolução e ou de dimensão do monitor. http://esev.comze.com/demo/css/layout/layfixocentrado.html
  • 40.
    CSS layout das páginas| tipos de layout | layout elástico o layout elástico, tem a aparência de um layout fixo, mas aumentando ou diminuindo a fonte o layout acompanha o redimensionamento da fonte. É um layout flexível porque é constituído por unidades de medida relativas e a largura é relativa à largura da fonte do browser utilizado. Temos sempre o mesmo número de linhas e palavras se aumentarmos ou diminuirmos o layout com a janela do browser. http://esev.comze.com/demo/css/layout/layelasticoocentrado.html
  • 41.
    CSS layout das páginas| tipos de layout | layout líquido o layout liquido usa colunas em percentagem. Ao redimensionar a janela do browser o layout adapta-se ao tamanho. http://esev.comze.com/demo/css/layout/layliquidocentrado.html
  • 42.
    CSS layout das páginas| tipos de layout | layout híbrido o layout hibrido, é uma combinação do elástico e do liquido. Por exemplo, podemos ter o conteúdo de uma DIV em ems (font-size: 1 em;) e o conteúdo de outra em percentagem (font- size: 100%). Logo, uma DIV vai manter sempre a sua estrutura enquanto que a outra vai adaptar-se face ao redimensionamento da janela do browser. http://esev.comze.com/demo/css/layout/layhibrido.html
  • 43.
    CSS posicionamento Existem quatro tiposde posicionamento possíveis para as DIVs: • estático (static) • relativo (relative) • absoluto (absolute) • fixo (fixed) Exemplos em http://esev.comze.com/demo/HTML/posicionamento/
  • 44.
    CSS posicionamento | estático oposicionamento estático corresponde ao fluir normal dos elementos num documento HTML, ou seja, as DIVs são posicionadas de cima para baixo, da esquerda para a direita. Se uma DIV for reposicionada através de CSS, a DIV imediatamente abaixo toma o seu lugar. Exemplos em http://esev.comze.com/demo/HTML/posicionamento/
  • 45.
    CSS posicionamento | relativo oposicionamento relativo é um reposicionamento de uma dada DIV relativamente à sua posição estática, ou seja, relativamente à sua posição estática a DIV está deslocada no eixo X tantos pixels e no eixo y outros tantos pixels. Exemplos em http://esev.comze.com/demo/HTML/posicionamento/
  • 46.
    CSS posicionamento | absoluto oposicionamento absoluto é calculado tendo em conta a janela do browser. Neste caso as coordenadas X e Y da DIV estão em perfeita correlação com as dimensões da janela do browser. Exemplos em http://esev.comze.com/demo/HTML/posicionamento/
  • 47.
    CSS posicionamento | fixo oposicionamento fixo permite manter uma DIV fixa na janela do browser, que não mexe com o movimento do Scroll. Permite-nos criar efeitos como os realizados com os antigos frames. Exemplos em http://esev.comze.com/demo/HTML/posicionamento/
  • 48.
    CSS validação do código http://jigsaw.w3.org/css-validator/
  • 49.
    CSS referências Bibliografia: • CSS,Criação Inovadora de Sites - FCA Webliografia: • http://www.w3schools.com/css/default.asp • http://www.leonelcunha.net/aulas12p/recursos/ppm_2_XHTML_CSS.pdf • http://pt-br.html.net/tutorials/css • http://www.freecsstemplates.org/css-templates (templates em html e css) • http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/ • http://css-tricks.com/ (artigos e vídeos!) Exemplos (ótimos) de código fonte (layout, posicionamentos, etc.) • http://www.leonelcunha.net/formacao/
  • 50.
  • 51.