CSS Programação Web

CSS Programação Web

CSS Cascade Style Sheet (Folha de Estilo em Cascata) E utilizado para unificar as configurações de formatação de conteúdo em um único arquivo. Permite a padronização de um conjunto de páginas estáticas, diminuindo a dificuldade e o tempo de manutenção. Reduz o tamanho das paginas HTML pois não há a necessidade das tags de formatação.

Associar um arquivo CSS ao HTML Como o objetivo do CSS e padronizar a formatação entre todas as páginas do projeto, este deve ser configurado em um arquivo externo com as extensão .CSS. Para associar este arquivo as páginas HTML utilize a seguinte TAG no HTML link rel "stylesheet" type "text/css" href "estilo.css"

Composição Compostas por grupos de propriedades denominadas classes. Estas classes são identificadas por seletores. Exe: P { background: red; color: white; }

Seletores Existem 3 tipos de seletores Seletor por TAG Seletor por ID Seletor por CLASSE

Seletor por TAG Atribui as classes a uma ou mais tags do HTML Body { font-family: arial; color: gray; } Input, select, textarea { background: yellow; font-family: arial; font-size: 10px; }

Seletor por ID Associa propriedades de classe ao uma determinado ID no HTML Exe: #nome { Background: red; Color: white; }

Seletor por Classe Este seletor pode ser definido como uma exceção, definido por um apelido e pode set utilizado como opção de uma formatação. .destaque { Font-weigth: bold; Color: red; }

Seletor por Classe E possível restringir uma classe por tag ou por id colocando o nome do seletor especifico no inicio da classe. p.destaque, #titulo.destaque { Font-weigth: bold; Color: red; }

Sobreposição Quando existem duas ou mais classes que são elegíveis a formatação de um elemento, estas vão mesclar os seus atributos e quando houver atributos coincidentes será aplicado a ultima P { #mensagem { configuração. background: white; color: red; color: black; text-align: center; } font-size:18px; }

Sobreposição A ordem por tipo de seletor na sobreposição é: CLASSE ID TAG

Cascata E possível compor uma hierarquia de classes relacionadas, com o objetivo de criar formatações para áreas especificas, e permitir a hierarquia correta de propriedades. Esta configuração e utilizada amplamente na criação de projetos completos, pois permite esta versatilidade.

Cascata body div id “corpo” div id “topo” h1 Bem Vindos /h1 /div /div /body

Cascata #corpo{ width: 800px; height: 600px; border: thin solid gray; } #corpo #topo h1{ Fontfamily:arial; Font-size:18px; } #corpo #topo{ height:100px; width: 100%; background: green; } h1 { Fontfamily:tahoma; Font-size:24px; }

Media Queries As Media Queries definem condições para que o CSS seja utilizado em cenários específicos. Se essas condições forem aprovadas, ou seja, se o dispositivo de adequar a todas as condições estabelecidas na sua Media Querie, o CSS será aplicado.

Media Queries @media screen and (max-width: 420px) and (min-width: 0px) { #corpo #menu { width:100%; background-color: red; } #corpo #conteudo { width: 100%; background-color: gray; } }