Bogger PauloSSPacheco

>
  1. Objetivo 
  2. O que é CSS.
  3. Sintaxe CSS
  4. Atributos globais
  5. Como adicionar CSS
  6. Seletores CSS.
    1. Seletores Simples
      1. Seletor de elemento
      2. Seletor ID
      3. Seletor de classe
      4. O seletores de agrupamento CSS:
      5. Seletor universal (*)
    2. Seletor combinadores
      1. Seletor descendente (espaço)
      2. Seletor Filho (>)
      3. Seletor Irmão Adjacente (+)
      4. >Seletor irmão geral (~)
    3. Seletores pseudo-classe
      1. Sintaxe da pseudo classe.
      2. Pseudo classe âncora.
      3. Pseudo classes e classes CSS
  7. Tree View
    1. JQuery
  8. CSS Website Layout
  9. Barra de navegação
  10. Formulários
    1. Modal
    2. Lista de imagens
    3. Tabs
    4. Tab vertical
  11. Consultas de mídia CSS
  12. Propriedade de layout de tabela CSS
  13. Cores CSS
  14. Referência css
    1. Seletores


  1. Objetivo.
    1. Objetivo deste documento é registrar minhas anotações de estudo da linguagem css.
  2. O que é CSS?
    1. Cascading Style Sheets (CSS) é um mecanismo simples para adicionar estilo (por exemplo, fontes, cores, espaçamento) a documentos da web e a tradução para o português : folhas de estilo em cascata.
    2. Com CSS modificamos o comportamento padrão dos tags XHTML, mudando a aparência das páginas.
    3. CSS significa C ascading S tyle S heets.
    4. CSS descreve como os elementos HTML devem ser exibidos na tela, no papel ou em outra mídia.
    5.  CSS economiza muito trabalho . Ele pode controlar o layout de várias páginas da web de uma só vez.
    6. Folhas de estilo externas são armazenadas em arquivos CSS
    7. Documentação oficial do código css...

  3. Sintaxe CSS.
    1. Um conjunto de regras CSS consiste em um seletor e um bloco de declaração:.
      1. Seletor CSS
      2. .
    2. O seletor aponta para o elemento HTML que você deseja estilizar.
    3. O bloco de declaração contém uma ou mais declarações separadas por ponto e vírgula.
    4. Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos.
    5. Várias declarações CSS são separadas por ponto-e-vírgula e os blocos de declaração são cercados por chaves.
  4. Atributos globais.
    1. Atributos globais são atributos comuns a todos os elementos HTML; eles podem ser usados ​​em todos os elementos, embora possam não ter efeito em alguns elementos. Veja mais... 
  5. Como adicionar css em um arquivo html.
    1. Este documento foi produzido tomando como refência o documento: CSS how to.  e o documento : Linking Style Sheets to HTML
    2. Uma folha de estilo externa pode ser vinculada a um documento HTML por meio do elemento LINK do HTML : 
      1. <LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>

<LINK REL=StyleSheet HREF="color-8b.css" TYPE="text/css" TITLE="8-bit Color Style" MEDIA="screen, print">

<LINK REL="Alternate StyleSheet" HREF="color-24b.css" TYPE="text/css" TITLE="24-bit Color Style" MEDIA="screen, print">

<LINK REL=StyleSheet HREF="aural.css" TYPE="text/css" MEDIA=aural>
      2. A tag <LINK> é colocada no documento HEAD . O atributo opcional TYPE é usado para especificar um tipo de mídia - text / css para uma folha de estilo em cascata - permitindo que os navegadores ignorem os tipos de folha de estilo que eles não suportam. Configurar o servidor para enviar texto / css como o tipo de conteúdo para arquivos CSS também é uma boa ideia.
        1. As folhas de estilo externas não devem conter marcas HTML como <HEAD> ou <STYLE> . A folha de estilo deve consistir apenas em regras ou instruções de estilo. Um arquivo que consiste apenas em P { margin: 2em } pode ser usado como uma folha de estilo externa.
      3. A tag <LINK> também possui um atributo opcional MEDIA , que especifica a mídia à qual a folha de estilo deve ser aplicada. Os valores possíveis são:
        1. screen para apresentação em ecrãs de computador não paginados;
        2. print , para saída para uma impressora;
        3. projection , para apresentações projetadas;
        4. aural,  para sintetizadores de voz;
        5. braille , para apresentação em dispositivos de feedback tátil em braille;
        6. tty , para exibições de células de caracteres (usando uma fonte de tamanho fixo);
        7. tv , para televisores;
        8. all , para todos os dispositivos de saída.
      4. O atributo REL é usado para definir o relacionamento entre o arquivo vinculado e o documento HTML. REL = StyleSheet especifica um estilo persistente ou preferido , enquanto REL = "Alternate StyleSheet" define um estilo alternativo . Um estilo persistente é aquele que sempre é aplicado quando as folhas de estilo estão ativadas. A ausência do atributo TITLE , como na primeira tag <LINK> no exemplo , define um estilo persistente.
      5. Um estilo preferido é aquele que é aplicado automaticamente, como na segunda tag <LINK> no exemplo . A combinação de REL = StyleSheet e um atributo TITLE especifica um estilo preferido. Os autores não podem especificar mais de um estilo preferido.
      6. Um estilo alternativo é indicado por REL = "Alternate StyleSheet" . A terceira tag no exemplo define um estilo alternativo, que o usuário pode escolher para substituir a folha de estilo preferida. Obs: Os navegadores atuais geralmente não têm a capacidade de escolher estilos alternativos.
      7. Um único estilo também pode ser fornecido por meio de várias folhas de estilo:
        1. <LINK REL=StyleSheet HREF="basics.css" TITLE="Contemporary">

<LINK REL=StyleSheet HREF="tables.css" TITLE="Contemporary">

<LINK REL=StyleSheet HREF="forms.css" TITLE="Contemporary">
        2. Neste exemplo, três folhas de estilo são combinadas em um estilo "Contemporary" que é aplicado como uma folha de estilo preferencial. Para combinar várias folhas de estilo em um único estilo, deve-se usar o mesmo TITLE com cada folha de estilo.
        3. Uma folha de estilo externa é ideal quando o estilo é aplicado a várias páginas. Com uma folha de estilo externa, um autor pode mudar a aparência de um site inteiro simplesmente mudando um arquivo. Da mesma forma, a maioria dos navegadores armazenará em cache uma folha de estilo externa, evitando atrasos na apresentação da página depois que a folha de estilo for armazenada em cache.

  6. Seletores CSS.
    1. Os seletores CSS são usados ​​para "encontrar" (ou selecionar) os elementos HTML que você deseja estilizar e temos 5 tipos de seletores:
      1. Seletores Simples são divididos em 3 (Seleciona elementos baseado pelo nome, ID e classe).
        1. O seletor de elemento seleciona elementos HTML com base no nome do elemento.
          1. Exemplo:
            1. p {text-align: center; color:red;}.
            2. Toda a tag <p> </p> será alinhada no centro e terá a cor do texto vermelho;
            3. <!DOCTYPE html>
<html>

<head>
    <style>
        p {
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>

    <p>Every paragraph will be affected by the style.</p>
    <p id="para1">Me too!</p>
    <p>And me!</p>

</body>

</html>
        2. O seletor de id CSS.
          1. O seletor de id usa o atributo id de um elemento HTML para selecionar um elemento específico. O id de um elemento é único dentro de uma página, então o seletor de id é usado para selecionar um elemento único! Para selecionar um elemento com um id específico, escreva um caractere hash (#), seguido pelo id do elemento.
            1. Exemplo 1:
              1. #id1 { text-align: center; color: red;}
              2. Toda tag que tiver o id = "id1" será linhada no centro e a cor do texto será vermelha.
              3. <!DOCTYPE html>
<html>

<head>
    <style>
        #id1 {
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>

    <p id="id1">Hello World!</p>
    <p>This paragraph is not affected by the style.</p>

</body>

</html>
        3. O seletor de classe CSS.
          1. O seletor de classe seleciona elementos HTML com um atributo de classe específico. Para selecionar elementos com uma classe específica, escreva um ponto (.), seguido do nome da classe.
            1. Exemplo 1:
              1.  .center { text-align: center; color: red; }
              2. Toda tag que tiver  o atributo class = "center" será alinhado no centro e a cor do texto será vermelho.
              3. <!DOCTYPE html>
<html>

<head>
    <style>
        .center {
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>

    <h1 class="center">Red and center-aligned heading</h1>
    <p class="center">Red and center-aligned paragraph.</p>

</body>

</html>
            2. Exemplo 2:
              1. Neste exemplo, apenas os elementos <p> com class = "center" serão alinhados ao centro. 
              2. <!DOCTYPE html>
<html>

<head>
    <style>
        p.center {
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>

    <h1 class="center">This heading will not be affected</h1>
    <p class="center">This paragraph will be red and center-aligned.</p>

</body>

</html>
        4. O seletor de agrupamento CSS:

          1. O seletor de agrupamento permite definir propriedades comuns de várias tags separadas por virgula..

            1. Exemplo:
              1. <!DOCTYPE html>
<html>

<head>
    <style>
        h1,
        h2,
        p {
            text-align: center;
            color: red;
        }
    </style>
</head>

<body>

    <h1>Hello World!</h1>
    <h2>Smaller heading!</h2>
    <p>This is a paragraph.</p>

</body>

</html>
              2. .
            2. .
          2. .
        5. O seletor universal CSS.
          1. O seletor universal (*) seleciona todos os elementos HTML na página.
            1. Exemplo:
              1. * { text-align: center; color: blue; }
              2. O * informa que todos os textos do documento serão alinhados no  centro e terá cor azul.
              3. <!DOCTYPE html>
<html>

<head>
    <style>
        * {
            text-align: center;
            color: blue;
        }
    </style>
</head>

<body>

    <h1>Hello world!</h1>

    <p>Every element on the page will be affected by the style.</p>
    <p id="para1">Me too!</p>
    <p>And me!</p>

</body>

</html>
        6. .
        7. .
      2. Seletores combinadores.
        1. Um seletor CSS pode conter mais de um seletor simples.
          Entre os seletores simples, podemos incluir um combinador.
          Existem quatro combinadores diferentes em CSS:
          1. Seletor descendente (espaço);
            1. O seletor descendente corresponde a todos os elementos que são descendentes de um elemento especificado.
              O exemplo a seguir seleciona todos os elementos dentro dos elemento <p> e dentro dos elementos <div>
              1. Exemplo:
                1. <!DOCTYPE html	>
<html	>

<head	>
    <style	>
        div p {
            background-color: yellow;
        }
    </style	>
</head	>

<body	>

    <h2	>Descendant Selector</h2	>
    <p	>The descendant selector matches all elements that are descendants of a specified element.</p	>

    <div	>
        <p	>Paragraph 1 in the div.</p	>
        <p	>Paragraph 2 in the div.</p	>
        <section	>
            <p	>Paragraph 3 in the div.</p	>
        </section	>
    </div	>

    <p	>Paragraph 4. Not in a div.</p	>
    <p	>Paragraph 5. Not in a div.</p	>

</body	>

</html	>
          2. Seletor filho (>);
            1. O seletor filho seleciona todos os elementos que são filhos de um elemento especificado.
              O exemplo a seguir seleciona todos os elementos filhos de um elemento:
              1. Exemplo
                1. <!DOCTYPE html>
<html>

<head>
    <style>
        div>p {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <h2>Child Selector</h2>
    <p>The child selector (>) selects all elements that are the children of a specified element.</p>

    <div>
        <p>Paragraph 1 in the div.</p>
        <p>Paragraph 2 in the div.</p>
        <section>
            <p>Paragraph 3 in the div.</p>
        </section> <!-- not Child but Descendant -->
        <p>Paragraph 4 in the div.</p>
    </div>

    <p>Paragraph 5. Not in a div.</p>
    <p>Paragraph 6. Not in a div.</p>

</body>

</html>
          3. Seletor irmão adjacente (+);
            1. O seletor de irmãos adjacentes seleciona todos os elementos que são irmãos adjacentes de um elemento especificado.
              Os elementos irmãos devem ter o mesmo elemento pai e "adjacente" significa "imediatamente a seguir".
              O exemplo a seguir seleciona todos os elementos que são colocados imediatamente após os elementos div:
              1. Exemplo:
                1. <!DOCTYPE html >
<html >
<head >
<style >
div + p {
  background-color: yellow;
}
</style >
</head >
<body >

<h2 >Adjacent Sibling Selector</h2 >
<p >The adjacent sibling selector (+) selects all elements that are the adjacent siblings of a specified element.</p >

<div >
  <p >Paragraph 1 in the div.</p >
  <p >Paragraph 2 in the div.</p >
</div >

<p >Paragraph 3. Not in a div.</p >
<p >Paragraph 4. Not in a div.</p >

</body >
</html >
          4. Seletor irmão geral (~)
            1. O seletor irmão geral
            2. O sele
                  1. seleciona todos os elementos que são irmãos de um elemento especificado. O exemplo a seguir seleciona todos os elementos <p> que são irmãos dos elementos <div>:
                    1. Exemplo:
                      1. <!DOCTYPE html>
<html>

<head>
    <style>
        div~p {
            background-color: yellow;
        }
    </style>
</head>

<body>

    <h2>General Sibling Selector</h2>
    <p>The general sibling selector (~) selects all elements that are siblings of a specified element.</p>

    <p>Paragraph 1.</p>

    <div>
        <p>Paragraph 2.</p>
    </div>

    <p>Paragraph 3.</p>
    <code>Some code.</code>
    <p>Paragraph 4.</p>

</body>

</html>
        2. .
      3. Seletor Pseudo classes CSS Mais
        1. O objetivo da pseudo classe é  definir um estado especial de um elemento.  Veja mais...
        2. Sintaxe da pseudo classe:
          1. selector:pseudo-class {
  property: value;
}
        3. Pseudo-classes âncora.
          1. Os links podem ser exibidos de diferentes maneiras:
            1. Exemplo de como definir o estilo de um elemento quando o usuário passa o mouse sobre ele. 
              1. <!DOCTYPE html>
<html>

<head>
    <style>
        /* unvisited link */
        a:link {
            color: red;
        }

        /* visited link */
        a:visited {
            color: green;
        }

        /* mouse over link */
        a:hover {
            color: hotpink;
        }

        /* selected link */
        a:active {
            color: blue;
        }
    </style>
</head>

<body>

    <h2>CSS Links</h2>
    <p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
    <p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
    <p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>

</body>

</html>
              2. .
            2. .
          2. Estilizar links visitados e não visitados de maneira diferente.

          3. Defina o estilo de um elemento quando ele receber o foco..

        4. Pseudo classes e classes CSS
          1. As pseudo classes podem ser combinadas com classes CSS, no exemplo a seguir  quando você passa o mouse sobre o link ele muda de cor:
            1. Exemplo 1:
              1. <!DOCTYPE html>
<html>

<head>
  <style>
    a.highlight:hover {
      color: #ff0000;
    }
  </style>
</head>

<body>

  <h2>Pseudo-classes and CSS Classes</h2>
  <p>When you hover over the first link below, it will change color:</p>

  <p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
  <p><a href="default.asp">CSS Tutorial</a></p>

</body>

</html>
              2. .
            2. .
          2. O evento :houver é útil quando precisamos destacar o foco de um quadro de informação usando a tag <div>
            1. Exemplo 01:
              1. <!DOCTYPE html>
<html>

<head>
  <style>
    div {
      background-color: green;
      color: white;
      padding: 25px;
      text-align: center;
    }

    div:hover {
      background-color: blue;
    }
  </style>
</head>

<body>

  <p>Mouse over the div element below to change its background color:</p>

  <div>Mouse Over Me</div>

</body>

</html>
              2. .
            2. Exemplo 02 mostra uma ajuda quando o mouse passe em cima do texto.
              1. <!DOCTYPE html >


<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      display: none;
      background-color: yellow;
      padding: 20px;
    }

    div:hover p {
      display: block;
    }
  </style>
</head>

<body>

  <div>Passe o mouse sobre mim para mostrar o elemento p
    <p>Exemplo do evento div:hover </p>
  </div>

</body>

</html>
          3. O pseudo evento input:focus é util para destacar o curso do campo que recebe o foco.
            1. Exemplo:.
              1. <!DOCTYPE html>
<html>

<head>
  <style>
    input:focus {
      background-color: yellow;
    }
  </style>
</head>

<body>

  <p>Click inside the text fields to see a yellow background:</p>

  <form>
    First name: <input type="text" name="firstname"><br>
    Last name: <input type="text" name="lastname">
  </form>

</body>

</html>
                .




      4. .
    2. .
  7. Tree view
    1. How TO - Tree View


Referências?