CSS

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

O Problema do HTML

A linguagem HTML surgiu para definir a estrutura da sua página
Antigamente, o HTML foi incrementado com tags específicas para estilo

Resultado: As páginas HTML viraram uma bagunça!!

Exemplo

Solução

Solução: Isolar estilo do conteúdo

CSS: Cascading Style Sheets

CSS

Separação física da estrutura (HTML) e apresentação (CSS)
Centralização do código relacionado ao estilo da página
Facilidade de manutenção
Disponíveis a partir do HTML 4.0


body {
  background-color: #ff0;
}
div {
  background-color: #f00;
  padding: 20px;
}

CSS: Sintaxe básica

              
div {
  color: #f00;
  padding: 20px;
}

Seletor: Elemento a ser customizado

Atributo: Propriedade que será alterada

Valor: Novo valor da propriedade

              
<html>
<head>
<title>Introdução HTML</title>
<style type="text/css">
h1{
  text-align: center;
  font-family: Arial;
}
p{
  font-family: Arial;
  text-align: justify;
}
</style>
</head>
<body>
<h1>Primeiro Capítulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
nisi ut aliquip ex ea commodo consequat.</p>
<h1>Segundo Capítulo</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
nisi ut aliquip ex ea commodo consequat.</p>
</body>
</html>

CSS + HTML

A ligação entre CSS e HTML pode ser feita de três formas principais:

Inline (propriedade style)
Interno (elemento <style>)
Externo (elemento <link> + arquivo.css)

CSS: inline

Customização é feita dentro do elemento específico

          
    <div style="float: right; width: 60%; display: block;">
    <h3>About me</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>

CSS: Interno

Deve estar dentro da tag <style>, que por sua vez deve estar dentro do header da página

          
  <head>
  <title>Introdução HTML</title>
  <style type="text/css">
  h1{
    text-align: center;
    font-family: Arial;
  }
  p{font-family: Arial;}
  </style>
  </head>

CSS: Externo

As informações de estilo devem ser armazenadas em uma folha de estilo separadamente (.css)
No arquivo HTML, deve-se referenciar essa folha de estilo através da tag <link>

              
h1{
  text-align: center;
  font-family: Arial;
}
p{font-family: Arial;}

              
<head>
<title>Introdução HTML</title>
<link rel="stylesheet" type="text/css"
    href="estilo.css">
</head>

CSS: id e class

O CSS também permite atribuir estilos para elementos específicos ou para um grupo de elementos
Elementos específicos: através do termo #id
Grupos de elementos: através do termo .class

CSS: id

                
<h1 id="titulo">Título
  do Livro</h1>

                
h1{
  text-align: center;
  font-family: Arial;
}
p{font-family: Arial;}
#titulo {
  text-align: center;
  font-family: cursive;
}

CSS: class

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

                
.center {
  text-align: center;
}

CSS: Principais Propriedades

Background

background-color
background-image

Fontes

font-family
font-style
font-size

Bordas

border-style
border-width

Margens

margin-top
margin-left
margin-right
margin-bottom

Posição

left
right
center

Dimensão

height
width
max-height
max-widht

CSS: Box Model

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

Introdução

Todo elemento HTML é visualizado como uma "caixa" pelo navegador

Bordas
Espaçamento interno
Espaçamento externo

Introdução

Box Model: "Caixa" que envolve o conteúdo dos elementos HTML da página

content
padding
border
margin

`Margin`

Espaçamento externo entre o elemento e a página

Os valores podem ser dados em:

Percentual
Fixo: px, cm, pt
inherit
auto

`Margin`

              
p {
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 15px;
  margin-left: 8px;
}

`Border`

Permite customizar a o estilo, largura, e cor da borda do elemento

border-style
border-width
border-color

`Border`

              
p {
  border-top-style: solid;
  border-bottom-style: solid;
  border-right-style: dotted;
  border-left-style: dotted;
  
  border-color: darkgreen;
  
  border-top-width: 10px;
  border-bottom-width: 10px;
}

`Padding`

Espaçamento interno entre a borda do elemento e seu próprio conteúdo

Os valores podem ser dados em:

Percentual
Fixo: px, cm, pt
inherit
auto

`Padding`

              
div {
  padding-bottom: 20px;
  padding-top: 20px;
  padding-left: 5%;
  padding-right: 5%;
}

Largura & Altura

Qual é a largura do elemento?

              
div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0; 
}

Largura & Altura

element width = width + left padding + right padding + left border + right border

element height = height + top padding + bottom padding + top border + bottom border

CSS: Seletores

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

CSS: Identificando o que estilizar

Estilizar no CSS nem sempre é facil...

"Os links para pdfs deverão aparecer com o símbolo de pdf"

"O 1º elemento de dentro da div deverá ter uma altura de 120 pixels."

"A primeira letra do primeiro parágrafo do capítulo deverá ter destaque"

#comofas?

CSS: Identificando o que estilizar

Os seletores CSS fornecem poderosos meios para estilização dos elementos:

Todos os elementos
Grupos de elementos
Elementos que possuem determinado atributo
etc, etc..

Seletores: Elementos

Método básico de estilização

            
h1 {
  text-align: center;
  color: red;
}

Seletores: `#id`

Utilizado para estilizar um elemento em específico na página

            
#header {
  font-family: arial;
  color: grey;
  font-size: 20px;
}

Seletores: `.class`

Utilizado para estilizar um grupo específico de elementos na página

            
.center {
  text-align: center;
}

Seletores: grupos de elementos

Permite estilizar vários elementos distintos

            
h1, h2, h3, h4, h5, h6 {
  color: red;
}

Seletores: `*`

Seletor universal: estiliza todos os elementos

            
* {
  font-weight: bold;
  font-style: italic;
}

Seletores Descendentes

Permite estilizar elementos com base na hierarquia da página

            
.noticia {
    background-color: yellow;
}
.noticia p {
  color: green;
}

Seletores: Filhos

Estiliza elementos que são filhos de um determinado elemento

            
body > p {
  text-style: italic;
}
p {
  text-style: bold;
}

Seletores adjacentes

Estiliza elementos vizinhos entre si

            
h2+p{
  font-size: 24px;
  color:grey
}

Pseudo-seletores

Algumas vezes desejamos estilizar partes de uma página web que não repesentam um elemento em si (primeira linha, eventos, etc.).

O CSS fornece um conjunto de seletores para detectar a ocorrência de tais situações

Pseudo-seletores: links

a:link: Aplica o estilo a links que não foram visitados pelo usuário ainda
a:visited: Estiliza links que já foram visitados
a:hover: Aplicado quando usuário passa o mouse sobre o elemento
a:active: Aplica o estilo no momento em que o usuário clica no link

Pseudo-seletores: link

            a:link {
    color: green;
}
a:visited {
    color: green;
}
a:hover {
    color: red;
}
a:active {
    color: yellow;
}

Pseudo-seletores: Parágrafos

:first-letter: Aplica o estilo na primeira letra do parágrafo
:first-line: Aplica o estilo na primeira linha

            
p:first-letter {
  font-size: 30px;
}

Pseudo-seletores: `:before` & `:after`

Adiciona conteúdo antes e depois do elemento

            .quote:before {
  content: '\201C';
  font-size: 30px;
}
.quote:after {
  content: '\201D';
  font-size:30px;
  float: right;
  margin-top: 10px;
}

Pseudo-seletores: `:first-child`

Estiliza o primeiro filho de um determinado elemento

            
li:first-child {
  font-weight: bold;
}

Pseudo-seletores: `:focus`

Estiliza um elemento quando ele ganha destaque na página (click, tabbing)

            
input:focus {
  box-shadow: 3px 3px 5px #888888;
}

Seletores: Atributos

Permite que os elementos a serem estilizados sejam selecionados por meio de seus atributos.

            a[href$=".pdf"] {
  background-image: url("pdf-icon.gif") ;
  background-repeat: no-repeat;
  padding-left:17px;
}

CSS: Page Layout

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

Introdução

Um bom layout de página é fundamental para uma boa experiência de navegação do usuário.

Qual seu público alvo?
Qual tipo de informação sua página vai ter?
Em quais dispositivos ela será visualizada?

Quais as técnicas de layout existentes atualmente?

Introdução

Algumas das técnias mais utilizadas:

Layout Fixo
Layout Fluído
Layout Elástico
Layout Híbrido

Layout Fixo Exemplo

Layout que possui dimensões fixas, geralmente definidas em pixels.

Pros:

Controle total do desenvolvedor sobre a página

Cons:

Rigidez do layout
Ideal apenas em situações que contemplam a resolução definida

Layout Fluído Exemplo

As dimensões da página são definidas em %, permitindo que sua visualização acompanhe qualquer tela.

Pros:

Layout pode se adaptar automaticamente em várias telas

Cons:

Em um modelo multicoluna, a visualização fica comprometida em telas pequenas

Layout Elástico Exemplo

Este layout define o tamanho dos componentes com base no tamanho da fonte do browser.

Isto é, o browser mantem uma largura fixa, porém essa largura é baseada no tamanho da fonte rendererizada pelo Browser.

Pros & Cons: As mesmas de um layout fixo

Layout Híbrido Exemplo

Layout fluído, porém com um limite máximo para largura. O layout da página é medida em colunas, e sua fluidez se baseia na manipulação dessas colunas

Ténica mais utilizada atualmente, uma das bases para Responsive Design

Criando um layout híbrido Exemplo

Para se criar um layout híbrido, deve-se seguir os seguintes passos:

Definir o número de colunas que a página irá suportar
Definir o espaçamento entre as colunas
Implementar um estilo para o container da página
Implementar um estilo para cada uma das colunas
Utilizar as colunas nos div's da página

Técnica: One True Layout

Ao se utilizar um layout em colunas, geralmente encontramos problema ao nivelar colunas de cores distintas:

Técnica: One True Layout

O que está Acontecendo? Os elementos em HTML calculam sua altura com base no conteúdo que possuem.

Solução: Ajustar a altura dos elementos filhos de forma que eles alcancem o elemento pai.

Técnica: One True Layout Resultado

            
.container {
  overflow: hidden;
}
.col_1, col_2, col_3, ..., col_n {
  padding-bottom: 99999px;
  margin-bottom: -99999px;
}

CSS3

João Eduardo Montandon

Desenvolvimento de Aplicativos Web - COLTEC/MG

Introdução

Nova especificação para a linguagem CSS
Novos recursos:

Bordas
Backgrounds
Transformações
etc..

Compatível com versões anteriores

CSS3: Novos Seletores

Implementação de novos seletores que ajudam a especificar melhor os componentes a serem estilizados

            /* Recursos mais precisos de seleção: */
h2:first-child { ... }  // primeiro elemento filho de h2
div.text > div { ... } // toda div que é filha direta de div.text
h2 + header { ... } // todo header que é vizinho de h2

CSS3: Novos Seletores

            
/* seletores de negação */
:not(.box) {
  color: #00c;
}
:not(span) {
  display: block;
}

            
/* Atributos específicos: */
input[type="text"] {
  background: #eee;
}

CSS3: Bordas

CSS3 fornece suporte nativo a bordas de elementos.

            div {
  border: 2px solid;
  border-radius: 25px;
}

Testeeee

CSS3: Backgrounds

CSS3 também provê recursos para manipulação de imagens de fundo.

            body {
  background: url(myImage.png);
  background-size: 80px 60px;
  background-repeat: no-repeat;
}

CSS3: Backgrounds

É possível inserir uma ou mais imagens no mesmo fundo.

            body {
  background: url(img_tree.gif), url(img_flwr.gif);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

CSS3: Backgrounds

Além disso, é possível definir qual os limites que a imagem de fundo deverá respeitar

            div {
  background: url(img_flwr.gif);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-origin: content-box;
}

CSS3: Gradiente

Também é possível aplicar efeitos de gradiente (linear e radial).

            #grad {
  height: 200px;
  background: linear-gradient(red, orange, yellow, green, blue);
}

CSS3: Gradiente

            
#radial {
  height: 200px;
  /* Safari 5.1 to 6.0 */
  background: -webkit-radial-gradient(center, circle cover, red, #000 73%);
  /* For Opera 11.6 to 12.0 */
  background: -o-radial-gradient(center, circle cover, red, #000 73%);
  /* For Firefox 3.6 to 15 */
  background: -moz-radial-gradient(center, circle cover, red, #000 73%);
  /* Standard syntax */
  background: radial-gradient(center, circle cover, red, #000 73%);
}

CSS3: Efeitos de Texto

CSS3 fornece uma série de novos efeitos a serem aplicados no texto, entre eles sombra, wrapping, overflow, etc.

            
h1 {
  text-shadow: 5px 5px 5px #FF0000;
}

CSS3: Transformações 2D/3D

CSS3 disponibiliza uma série de transformações que podem ser realizadas em elementos HTML, ex.: rotacionar, girar, transladar, etc.

            #div {
  -ms-transform: rotate(30deg);
  -webkit-transform: rotate(30deg);
  transform: rotate(30deg);
}

CSS3: Transformações 2D

            
#div1 { transform: translate(50px,100px); }
#div2 { transform: scale(2,4); }
#div3 { transform: skew(30deg,20deg); }

Para mais informações sobre as transformações consulte este link.

CSS3: Transformações 2D

Além disso, CSS3 disponibiliza os mesmos recursos para transformações 3D dos elementos.

            
#div1 {
  transform: rotateX(120deg);
}
#div2 {
  transform: rotateY(130deg);
}

3D

2D

CSS3: Transições

Transições: Efeitos que permitem que um elemento transite de um estilo para outro gradualmente.

CSS3: Hover me

Para implementar uma transição:

Definir quais propriedades irão se transformar, e seu tempo
Definir quando essas propriedades irão mudar e seus novos valores

CSS3: Transições

            div {
  width: 100px;
  height: 100px;
  background: red;
  -webkit-transition: width 2s, height 2s;
  transition: width 2s, height 2s;
}
div:hover {
  width: 200px;
  height: 150px;
}

CSS3: Animações

Animações se comportam de forma similar às transições, porém não necessitam de interferência do usuário para serem executadas.

Para implementar uma animação:

Definir os estágios da animação na propriedade @keyframe
Definir as propriedades da animação no componente a ser animado

CSS3

CSS3: Animações

            div {
  /* ... */
  -webkit-animation: myfirst 5s;
  -webkit-animation-iteration-count: infinite;
  animation: myfirst 5s;
  animation-iteration-count: infinite;
}
@-webkit-keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}
@keyframes myfirst {
  from {background: red;}
  to {background: yellow;}
}

Referências

CSS: The missing manual; McFarland, David; O'Reilly; 2009 - 2a Edição

CSS Avançado; Joseph R. Lewis e Meitar Moskovitz; Novatec; 2010

w3Schools: CSS

CSS

O Problema do HTML

Solução

CSS: Cascading Style Sheets

CSS

CSS: Sintaxe básica

CSS + HTML

CSS: inline

CSS: Interno

CSS: Externo

CSS: id e class

CSS: id

CSS: class

CSS: Principais Propriedades

CSS: Box Model

Introdução

Introdução

Margin

Margin

Border

Border

Padding

Padding

Largura & Altura

Largura & Altura

CSS: Seletores

CSS: Identificando o que estilizar

CSS: Identificando o que estilizar

Seletores: Elementos

Seletores: #id

Seletores: .class

Seletores: grupos de elementos

Seletores: *

Seletores Descendentes

Seletores: Filhos

Seletores adjacentes

Pseudo-seletores

Pseudo-seletores: links

Pseudo-seletores: link

Pseudo-seletores: Parágrafos

Pseudo-seletores: :before & :after

Pseudo-seletores: :first-child

Pseudo-seletores: :focus

Seletores: Atributos

CSS: Page Layout

Introdução

Introdução

Layout Fixo Exemplo

Layout Fluído Exemplo

Layout Elástico Exemplo

Layout Híbrido Exemplo

Criando um layout híbrido Exemplo

Técnica: One True Layout

Técnica: One True Layout

Técnica: One True Layout Resultado

CSS3

Introdução

CSS3: Novos Seletores

CSS3: Novos Seletores

CSS3: Bordas

CSS3: Backgrounds

CSS3: Backgrounds

CSS3: Backgrounds

CSS3: Gradiente

CSS3: Gradiente

CSS3: Efeitos de Texto

CSS3: Transformações 2D/3D

CSS3: Transformações 2D

CSS3: Transformações 2D

CSS3: Transições

CSS3: Transições

CSS3: Animações

CSS3: Animações

Referências

`Margin`

`Margin`

`Border`

`Border`

`Padding`

`Padding`

Seletores: `#id`

Seletores: `.class`

Seletores: `*`

Pseudo-seletores: `:before` & `:after`

Pseudo-seletores: `:first-child`

Pseudo-seletores: `:focus`