aula1-css by ojp13483

VIEWS: 25 PAGES: 9

									                                                 Sumário

              Revisão – 2                        •   Revisão: DOM + Javascript
      CSS (Cascade Style Sheets)                 •   CSS - Histórico e Motivação
                                                 •   Sintaxe Básica
                                                 •   Aplicação
                                                 •   Posicionamento
                                                 •   Exemplos de Uso




Revisão: DOM + Javascript                    Revisão: DOM + Javascript


                                              DOM
                                              - acesso aos elementos de documentos HTML




Revisão: DOM + Javascript                    CSS: Histórico e Motivação

                                              Folhas de estilo:
 DOM
                                              - introduzidas com o Internet Explorer 3
 - acesso aos elementos de documentos HTML
                                              - suportadas na versão 4 do Netscape Navigator
 Javascript
  - manipulação de eventos,
  - interação com o navegador




                                                                                               1
CSS: Histórico e Motivação                          CSS: Histórico e Motivação

 Folhas de estilo:                                   Folhas de estilo:
 - introduzidas com o Internet Explorer 3            - introduzidas com o Internet Explorer 3
 - suportadas na versão 4 do Netscape Navigator      - suportadas na versão 4 do Netscape Navigator

 Recomendações do W3C:                               Recomendações do W3C:
     - CSS 1      - CSS 2                                - CSS 1      - CSS 2

                                                     Working Drafts:
                                                        - CSS 3            - CSS MOBILE 1.0




CSS: Histórico e Motivação                          CSS: Histórico e Motivação


 -Possibilidades de formatação de páginas            -Possibilidades de formatação de páginas
 -Facilidades de aplicação e alteração de estilos    -Facilidades de aplicação e alteração de estilos

                                                     -Template: controle do formato associado aos
                                                     marcadores de documentos HTML




CSS: Histórico e Motivação                          CSS: Sintaxe Básica


 -Possibilidades de formatação de páginas
 -Facilidades de aplicação e alteração de estilos

 -Template: controle do formato associado aos
 marcadores de documentos HTML

 - CSS-P: posicionamento de elementos




                                                                                                        2
CSS: Sintaxe Básica                         CSS: Sintaxe Básica

  Seletor { propriedade : valor }             Seletor { propriedade : valor }

                                               Marcadores
                                               HTML




CSS: Sintaxe Básica                         CSS: Sintaxe Básica

  Seletor { propriedade : valor }             Seletor { propriedade : valor }

   Marcadores                                  Marcadores
   HTML                                        HTML
            Característica a                              Característica a
            ser definida/alterada                         ser definida/alterada

                                                                              Conteúdo atribuído
                                                                              à propriedade selecionada




CSS: Sintaxe Básica                         CSS: Sintaxe Básica

  Seletor { propriedade : valor }             Seletor { propriedade : valor ; propriedade : valor }


   P   {         color :       #FF00FF; }      P   {            color :     #FF00FF ; }
                                               P   { color: #FF00FF; font-family:Arial; font-size:12pt;}




                                                                                                           3
CSS: Sintaxe Básica                                                 CSS: Aplicação

  seletor, seletor{ propriedade : valor ; propriedade : valor   }
                                                                        -Ligação (linking)

   P {            color :     #FF00FF ; }                               -Incorporação (embeding)
   P { color: #FF00FF; font-family:Arial; font-size:12pt;}
   H1,H2,H3 { color: #FF0000; font-family:Arial; }                      -Inclusão (Inline)




CSS: Aplicação                                                      CSS: Aplicação

-Ligação (linking)                                                  -Ligação (linking)
   - Carga de um arquivo externo ao documento HTML                    - Carga de um arquivo externo ao documento HTML
   contendo as definições de estilo                                   contendo as definições de estilo
   - Uso da extensão “css”                                            - Uso da extensão “css”
   -Uso do marcador LINK dentro do cabeçalho (<head>)                 -Uso do marcador LINK dentro do cabeçalho (<head>)

                                                                      -Formato geral:
                                                                         <LINK REL=StyleSheet
                                                                                HREF=“endereço/nome_arquivo_css
                                                                                TYPE=“text/css”>




CSS: Aplicação - Ligação                                            CSS: Aplicação - Ligação

Exemplo: arquivo externo (.css)
                                                                    Exemplo: arquivo html

body{font-family:Arial, sans-serif; font-size:12pt;                 <html> <head>
      font-style:normal; color:#0000FF}                             <link HREF=”http://www…/estilos/estilo1.css”
H1{font-size:22pt; color:#FF0000}                                   rel=”stylesheet” type=”text/css”>
STRONG{ font-size:20pt; font-style:italic; color:#0000FF}           </head>
                                                                    <body >
                                                                    <p>Aqui inicia o documento.</p>
                                                                    <h1>Aqui temos um H1</h1>
                                                                    <p>texto normal...</p>
                                                                    <strong>... e texto com strong</strong>
                                                                    </body>
                                                                    </html>




                                                                                                                           4
CSS: Aplicação - Ligação                                     CSS: Aplicação - Ligação

 body{font-family:Arial, sans-serif; font-size:12pt;            .html
      font-style:normal; color:#0000FF}
 H1{font-size:22pt; color:#FF0000}
 STRONG{ font-size:20pt; font-style:italic; color:#0000FF}
                                                               link

 <p>Aqui inicia o documento.
 </p>
                                                               .css
 <h1>Aqui temos um H1</h1>
 <p>texto normal...</p>
 <strong>... e texto com strong
 </strong>




CSS: Aplicação - Ligação                                     CSS: Aplicação

                       ........ .html                        -Incorporação (Embedding)
           .html .html
   .html                                                        - Descrição das definições de estilo dentro do documento
                                                                HTML
                                                                - Possibilidade restrita ao documento
 link                                                           - Uso do marcador STYLE, dentro do cabeçalho (head)


 .css




CSS: Aplicação                                               CSS: Aplicação - incorporação
                                                             <html> <head>
-Incorporação (Embedding)                                    <style type=”text/css”>
  - Descrição das definições de estilo dentro do documento   body{font-family:Arial, sans-serif; font-size:12pt;
  HTML                                                              font-style:normal; color:#0000FF}
  - Possibilidade restrita ao documento                      H1{font-size:22pt; color:#FF0000}
  - Uso do marcador STYLE, dentro do cabeçalho (head)        STRONG{ font-size:20pt; font-style:italic; color:#0000FF}
                                                             </style></head>
  -Formato geral:                                            <body >
     <HEAD>                                                  <p>Aqui inicia o documento.</p>
     <STYLE TYPE=“text/css”>                                 <h1>Aqui temos um H1</h1>
     ..... Definições......                                  <p>texto normal...</p>
     </STYLE>                                                <strong>... e texto com strong</strong>
     </HEAD>                                                 </body>
                                                             </html>




                                                                                                                           5
CSS: Aplicação - incorporação                                     CSS: Aplicação

                                                                  -Inclusão (Inline)
   .html                                                             - Com o método Inline a aplicação do estilo ocorre em
                                                                  apenas um elemento
                                                                     - Possibilidade restrita ao elemento
  link                                                               - Uso do atributo STYLE, junto ao marcador desejado

             .html
  .css               .css




CSS: Aplicação                                                    CSS: Aplicação

-Inclusão (Inline)                                                -Inclusão (Inline)
   - Com o método Inline a aplicação do estilo ocorre em             - Com o método Inline a aplicação do estilo ocorre em
apenas um elemento                                                apenas um elemento
   - Possibilidade restrita ao elemento                              - Possibilidade restrita ao elemento
   - Uso do atributo STYLE, junto ao marcador desejado               - Uso do atributo STYLE, junto ao marcador desejado

   -Formato geral:                                                   -Formato geral:
      <MARCADOR STYLE=“propriedade:valor”>                              <MARCADOR STYLE=“propriedade:valor”>
                                                                     -Em seções:
                                                                        <DIV STYLE= “propriedade:valor”>
                                                                             .........
                                                                        <DIV>




CSS: Aplicação - inline                                           CSS: Aplicação - inline

 <html> <head>                                                     <html> <head>
 <link HREF=”http:://www…/estilo1.css” rel=”stylesheet”            <link HREF=”http:://www…/estilo1.css” rel=”stylesheet”
 type=”text/css”>                                                  type=”text/css”>
 </head>                                                           </head>
 <body >                                                           <body >
 <p>Aqui inicia o documento.</p>                                   <p>Aqui inicia o documento.</p>
 <p>texto normal...</p>                                            <p>texto normal...</p>
 <p STYLE=”font-weight:bold; font-style:italic; color=#00FF00”>    <p STYLE=”font-weight:bold; font-style:italic; color=#00FF00”>
 texto com uso de especificação inline ...</p>                     texto com uso de especificação inline ...</p>
 <strong>... e texto com strong</strong>                           <strong>... e texto com strong</strong>
 </body>                                                           </body>
 </html>                                                           </html>




                                                                                                                                    6
CSS: Aplicação                                               CSS: Aplicação

-Uso de classes                                              -Uso de classes
  - Descrição das definições de estilo associadas ou não a     - Descrição das definições de estilo associadas ou não a
  marcadores específicos                                       marcadores específicos
  - Identificação das diferentes definições                    - Identificação das diferentes definições
  - Uso do atributo CLASS, associado ao marcador               - Uso do atributo CLASS, associado ao marcador
  desejado                                                     desejado

                                                               -Formato geral:
                                                                  <STYLE TYPE=“text/css”>
                                                                  .tipo1 {Definições....}
                                                                  ........
                                                                  <P CLASS=“tipo1”>




CSS: Aplicação - classes                                     CSS: Aplicação - classes
 <html>                                                       <html>
 <style type="text/css">                                      <style type="text/css">
 body{font-family:Arial, sans-serif; font-size:12pt;          body{font-family:Arial, sans-serif; font-size:12pt;
        font-style:normal; color:#0000FF}                             font-style:normal; color:#0000FF}
 H1.vermelho{font-size:18pt; color:#FF0000}                   .vermelho{font-size:18pt; color:#FF0000}
 H1.verde{font-size:18pt; color:#00FF00}                      .verde{font-size:18pt; color:#00FF00}
 H1.azul{font-size:18pt; color:#0000FF}                       .azul{font-size:18pt; color:#0000FF}
 </style>                                                     </style>
 <body >                                                      <body >
 <h1 class="vermelho">Aqui temos um H1 vermelho</h1>          <h1 class="vermelho">Aqui temos um H1 vermelho</h1>
 <h1 class="verde">Aqui temos um H1 verde</h1>                <h1 class="verde">Aqui temos um H1 verde</h1>
 <h1 class="azul">Aqui temos um H1 azul</h1>                  <h1 class="azul">Aqui temos um H1 azul</h1>
 </body>                                                      </body>
 </html>                                                      </html>




CSS: Aplicação - classes                                     CSS: Aplicação - classes
 <html>                                                       <html>
 <style type="text/css">                                      <style type="text/css">
 body{font-family:Arial, sans-serif; font-size:12pt;          body{font-family:Arial, sans-serif; font-size:12pt;
         font-style:normal; color:#0000FF}                            font-style:normal; color:#0000FF}
 .vermelho{font-size:18pt; color:#FF0000}                     .vermelho{ color:#FF0000}
 .verde{font-size:18pt; color:#00FF00}                        .verde{ color:#00FF00}
 .azul{font-size:18pt; color:#0000FF}                         .azul{ color:#0000FF}
 </style>                                                     </style>
 <body >                                                      <body >
 <h1 class="vermelho">Aqui temos um H1 vermelho</h1>          <h1 class="vermelho">Aqui temos um H1 vermelho</h1>
 <h1 class="verde">Aqui temos um H1 verde</h1>                <h2 class="verde">Aqui temos um H2 verde</h2>
 <h1 class="azul">Aqui temos um H1 azul</h1>                  <h4 class="azul">Aqui temos um H4 azul</h4>
 </body>                                                      </body>
 </html>                                                      </html>




                                                                                                                          7
CSS: Aplicação - classes                                CSS: Aplicação – classes / ID

 <html>                                                 -Uso do atributo ID
 <style type="text/css">                                   - Descrição das definições de estilo associadas ou não a
 body{font-family:Arial, sans-serif; font-size:12pt;       marcadores específicos
         font-style:normal; color:#0000FF}                 - Identificação das diferentes definições com #
 .vermelho{ color:#FF0000}
 .verde{ color:#00FF00}
                                                           - Uso do atributo ID, associado ao marcador desejado
 .azul{ color:#0000FF}
 </style>                                                  -Formato geral:
 <body >                                                      <STYLE TYPE=“text/css”>
 <h1 class="vermelho">Aqui temos um H1 vermelho</h1>          #tipo1 {Definições....}
 <h2 class="verde">Aqui temos um H2 verde</h2>                ........
 <h4 class="azul">Aqui temos um H4 azul</h4>
 </body>
                                                              <P ID=“tipo1”>
 </html>




CSS: Aplicação – classes / ID                           CSS: Aplicação

  <html>                                                -Selecionadores de pseudo-classe
  <style type="text/css">
  body{font-family:Arial, sans-serif; font-size:12pt;
         font-style:normal; color:#0000FF}
                                                           Ex.:
  #vermelho{font-size:18pt; color:#FF0000}
  #verde{font-size:18pt; color:#00FF00}                    a:link{color:#00FFFF}
  #azul{font-size:18pt; color:#0000FF}                     a:visited{color:#FFFFFF}
  </style>                                                 a:active{color:#FF0000}
  <body >
  <h1 ID="vermelho">Aqui temos um H1 vermelho</h1>
  <h1 ID ="verde">Aqui temos um H1 verde</h1>
  <h1 ID ="azul">Aqui temos um H1 azul</h1>
  </body>
  </html>




CSS: Aplicação                                          CSS: Aplicação

-Sintaxe: javascript
                                                           <html>
                                                           <style type="text/javascript">
   Exemplo: (css)                                          tags.H1.fontFamily="Arial";
     <style type=“text/css”>                               tags.H1.fontStyle="italic";
            H1.classe1 {font-style:italic; color:red}      tags.H1.fontWeight="bold";
     </style>                                              tags.H1.fontSize="18pt";
                                                           tags.H1.color="#F00000";
                                                           </style>
   Exemplo: (Javascript)                                   <body >
     <style type=“text/javascript”>                        <h1 >Aqui temos um H1 vermelho</h1>
       classes.classe1.H1.fontstyle=“italic”;              </body>
       classes.classe1.H1.color=“red”;                     </html>
     </style>




                                                                                                                      8
CSS: Aplicação                                                 CSS: Aplicação
 <html>                                                        <html><head>
 <style type="text/javascript">                                <link HREF="estilo1.css" rel="stylesheet" type="text/css">
 with(classes.estilo_a.H1){                                    </head>
 fontFamily="Arial";                                           <body >
 fontStyle="italic";                                           <p>Aqui inicia o documento.</p>
 fontWeight="bold";                                            <h1>Aqui temos um H1</h1>
 fontSize="18pt";                                              <p>texto normal...</p>
 color="#F00000";}                                             <div STYLE="font-weight:bold; font-style:italic; color=#00FF00">
 </style>                                                      texto com uso de especificação div ...</div>
 <body >                                                       <strong>... e texto com strong</strong>
 <h1 class=”estilo_a”>Aqui temos um H1 vermelho</h1>           </body>
 </body>                                                       </html>
 </html>




CSS: Aplicação                                                 CSS: Posicionamento

 <html>
 <head>
 <link HREF="estilo1.css" rel="stylesheet" type="text/css">
 </head>
 <body >
 <p>Aqui inicia o documento.</p>
 <h1>Aqui temos um H1</h1>
 <p>texto normal...</p>
 <span STYLE="font-weight:bold; font-size:22pt; color=blue">
 texto com uso de especificação span ...</span>
 </body>
 </html>




                                                                                                                                  9

								
To top