aula 04 · o princípio da html não está na formatação dos elementos, portanto cabe ao css...
TRANSCRIPT
06/02/2016
1
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi
[email protected]://fabianotaguchi.wordpress.com
CSS
As folhas de estilo em cascata sãomecanismos usados para adicionar estilos emdocumentos Web.
O princípio da HTML não está na formataçãodos elementos, portanto cabe ao CSS cuidardo aspecto visual do documento.
UM POUCO DE HISTÓRIA▸ Até 1993: Estilização era mínima, feita pelospróprios navegadores (Mosaic);▸ 1994: Primeira proposta de adoção de CSS;▸ 1996: CSS passa a ser recomendado pela W3c.
06/02/2016
2
VANTAGENS▸ Facilidade na manutenção, pois mudançassão centralizadas;▸ Funcionalidades não suportadas pelo HTML;▸ Não é mais necessária utilizar tags paraformatação de páginas;▸ Maior eficiência no gerenciamento de layout.
REGRAS CSS
Uma regra CSS consiste em uma declaraçãoque segue uma sintaxe definindo como seráaplicado um estilo a um ou mais elementosHTML.
Quando temos um conjunto de regras CSS,dizemos que existe uma folha de estilos.
REGRAS CSS
Uma regra é composta por:▸ Seletor;▸ Propriedade;▸ Valor.
seletor {propriedade: valor;
}
06/02/2016
3
SELETOR
Um seletor é o elemento HTML identificado poruma tag, classe ou id, que indica para o qual aregra será válida.
seletor {propriedade: valor;
}
PROPRIEDADE
A propriedade é o atributo do elemento HTMLao qual será aplicada a regra, por exemplo:font, color, background...
seletor {propriedade: valor;
}
VALOR
Consiste na característica específica a serassumida pela propriedade. Font pode serArial, cor azul, cor de fundo verde....
seletor {propriedade: valor;
}
06/02/2016
4
REGRA CSS – ESTILO INTERNO
<head><style type=“text/css”>
p{font-size: 12px;color: #993366;
}</style>
</head><body>
<p> Teste </p></body>
REGRA CSS – ESTILO INTERNO
<head><style type=“text/css”>
body{color: #0000cc;
}h1, h2, h3, h4, h5, h6 {
font-family: “Comic Sans MS”;}
</style></head>
CLASSES
Em um site com CSS é comum a existência deuma classe, e nesta a definição de regrasCSS.
.nome_da_classe{propriedade: valor;
}
06/02/2016
5
CLASSES
O objetivo de classes é aplicar regrascomuns a seletores (tags) diferentes.
No CSS sintaxe consiste na combinação dosinal de ponto (.) seguido do nome da classe.
.nome_da_classe{propriedade: valor;
}
REGRA CSS – CLASSES
<head><style type=“text/css”>
.formatacao1{font-family: “Comic Sans MS”;
}.formatacao2{
font-size: 20px;font-family: Arial;
}</style>
</head>
REGRA CSS – CLASSES
<head><style type=“text/css”>
.cor-um{background-color: gray;
}.cor-dois{
background-color: lightblue;}
</style></head>
06/02/2016
6
PÁGINA HTML COM CLASSES
<body><tabel border=“1”>
<tr><th> Disciplina </th> <th> Professores </th>
</tr><tr class=“cor-um”>
<td> Redes </td> <td> Prof. Débora </td></tr><tr class=“cor-dois”>
<td> Eletricidade </td> <td> Prof. Jean </td></tr>
</table></body>
ID
Outro seletor bastante usado é o por ID. Esteseletor só pode ser utilizado uma vez dentrode um código HTML.
#nome_do_id{propriedade: valor;
}
REGRA CSS – ID
<head><style type=“text/css”>
#tecnologia{color: #545454;
}</style>
</head><body>
<p id=“tecnologia”> Parágrafo formatado </p></body>
06/02/2016
7
VINCULANDO FOLHAS CSS
As folhas de estilo são vinculadas nodocumento HTML em três diferentes formas:▸ Estilo inline;▸ Estilo interno;▸ Estilo externo.
ESTILO EXTERNO
Uma folha é dita externa quando as regrasCSS estão declaradas em um documentoseparado.
Uma folha de estilo possui a extensão .css.Uma folha de estilo externa é ideal, pois podemser reaproveitado em várias páginas.
ESTILO EXTERNO
Para incluir uma página externa a um documento éusado a tag <link> entre as tags <head> em umapágina HTML.
<head><link href=“estilo.css” rel=“stylesheet” type=“text/css” />
</head>
06/02/2016
8
ESTILO INTERNO
Uma folha é dita interna quando as regras CSSestão declaradas no próprio documento HTML.
<head><style type=“text/css”>
p{color: #993366;
}</style>
</head>
ESTILO INTERNO
ESTILO INLINE
Uma folha inline é aquela que tem as regrasCSS declaradas dentro da alguma tag HTML.
<body><p style=“color: #0066cc; font-size: 20px;”>
Programação em Ambiente Web I</p>
</body>
06/02/2016
9
PRIORIDADES DAS REGRAS
Como as definições de estilos podem ser feitasde três formas diferentes, em determinadomomento podem haver conflitos, e neste caso aprecedência é:▸ Escrita diretamente na tag (inline)▸ Escrita no cabeçalho da página (interno)▸ Escrita em um arquivo separado (externo)
PROPRIEDADESREGRAS CSS
FONT
font-style Efeitos de formatação (normal, itálico...)
font-variant Aumenta o tamanho da fonte
font-weight Intensidade da fonte (normal, negrito...)
font-size Tamanho da fonte
font-family Altera o tipo da face
06/02/2016
10
PROPRIEDADE FONT
<head><style type=“text/css”>
div {font-style: italic;font-variant: small-caps;font-family: Arial;font-size: 11px;
}div{
font: italic small-caps 11px Arial;}
</style></head>
TEXT
text-decoration Altera a formatação do texto. Podem ser usado osseguintes valores: underline (sublinhado), overline(sobrelinha) ou line-through (tachado)
text-align Define o alinhamento do texto, os possíveis valores são: center, left, right ou justify.
text-indent Define o tamanho do recuo da primeira linha. Osvalores podem ser passados em pontos ou pixels.
text-transform Altera as letras, com os valores: capitalize (letrasiniciais em maiúsculas), uppercase (todas letras emmaiúsculas) e lowercase (todas em minúsculas).
OUTRAS PROPRIEDADES
letter-spacing Define o espaçamento entre os caracteres. Osvalores devem ser passados em pixels.
line-heigth Espaçamento entre as linhas. Os valores devem ser passados em pontos ou pixels.
color Define a cor do texto.
background Define a cor de fundo. Os valores podem serpassados através do nome da cor (inglês) ou docódigo RGB.
06/02/2016
11
BACKGROUND
color Altera a cor do texto
background-image: url (“”)
Insere uma imagem para ser utilizada como plano de fundo
background-attachment
Define se a imagem ficará fixa (fixed) ou se acompanhará a barra de rolagem (scroll)
background-repeat
Define como a imagem será repetida na tela, com os valores: no-repeat, repear, repeat-x e repeat-y.
backgorund-position
Posição inicial da imagem na área de apresentação, com os valores: left, top, bottom e center.
PROPRIEDADE BACKGROUND
<head><style type=“text/css”>
div {background-color: #ffc;background-image: url(fundo.gif);background-repeat: no-repeat;background-position: 20px 10px;
}div{
background: #ffc url(fundo.gif) no-repeat 20px 10px;}
</style></head>
COMENTÁRIOS
Comentários em CSS são descritos atravésdos códigos /* no inicio e */ ao final.
p:first-line{text-align: center; /* Texto centralizado */color: black;font-family: Arial;
}
06/02/2016
12
BOX MODEL
Uma regra CSS considera e tratam todos oselementos HTML como se fossem caixas.
Nessas caixas algumas propriedades podemser alteradas:▸ Largura e altura;▸ Bordas;▸ Margens e espaçamentos.
BOX
06/02/2016
13
MARGIN
Os valores podem ser utilizados de forma
relativa ou absoluto.
margin-top Define o tamanho da margem superior
margin-right Define o tamanho da margem direita
margin-left Define o tamanho da margem esquerda
margin-bottom Define o tamanho da margem inferior
PROPRIEDADE MARGIN
<head><style type=“text/css”>
.box{margin-top: 20px;margin-right: 30mm;margin-bottom: 5pt;margin-left: 20px;
}</style>
</head>
ABREVIANDO MARGIN
<head><style type=“text/css”>
.box{margin-top: 20px;margin-right: 5px;margin-bottom: 10 px;margin-left: 25px;
}
.box{margin: 20px 5px 10px 25px;
</style></head>
06/02/2016
14
PADDING
Os valores podem ser utilizados de forma
relativa ou absoluto.
padding-top Define o tamanho do espaçamento superior
padding-right Define o tamanho do espaçamento à direita
padding-left Define o tamanho do espaçamento à esquerda
padding-bottom Define o tamanho do espaçamento inferior.
PROPRIEDADE PADDING
<head><style type=“text/css”>
.box{padding-top: 20px;padding-right: 30mm;padding-bottom: 5pt;padding-left: 20px;
}</style>
</head>
ABREVIANDO PADDING
<head><style type=“text/css”>
.box{padding-top: 12px;padding-right: 2px;padding-bottom: 6px;padding-left: 1px;
}
.box{paddin: 12px 2px 6px 1px;
</style></head>
06/02/2016
15
BORDER
border-width Define a espessura da borda, com os valores: thin(borda fina), médium (borda média), thick (Borda grossa) e length (medida absoluta).
border-style Define o estilo da borda, com os valores: dotted, dashed, solid, double, groove, ridge, inset e ouset.
border-color Define a cor da borda
PROPRIEDADE BORDER
<head><style type=“text/css”>
p {border-syle: solid;border-bottom-style: dashed;border-color: #ff00bb;border-top-color: #00ff33;border-bottom-width: 10px;border-top-width: 0px;border-right-width: 0px;border-left-width: 0px;
}</style>
</head>
ABREVIANDO BORDER
<head><style type=“text/css”>
div {border-width: 1px;border-style: solid;border-color: #f00;
}
div {border: 1px solid #f00;
}</style>
</head>
06/02/2016
16
ABREVIANDO BORDER
<head><style type=“text/css”>
div {border-top-width: 2px;border-right-width: 1px;border-left-width: 3px;border-bottom-width: 5px;
}
div {border-width: 2px 1px 3px 5px;
}</style>
</head>
ABREVIANDO BORDER
<head><style type=“text/css”>
div {border-top-color: #f00;border-right-color: #ccc;border-left-color: #0ff;border-bottom-color: #999;
}
div {border-color: #f00 #ccc #0ff #999;
}</style>
</head>
ABREVIANDO BORDER
<head><style type=“text/css”>
div {border-top-style: solid;border-right-style: ridge;border-left-style: double;border-bottom-style:dotted;
}
div {border-style: solid ridge double dotted;
}</style>
</head>
06/02/2016
18
EFEITOS COM BORDAS
EFEITOS COM BORDAS
BORDAS ARREDONDADAS
<head><style type=“text/css”>
#bordas {width: 400px;height: 150px;background-color: #09f;border-radius: 10px;
}</style>
</head>
06/02/2016
19
EXERCÍCIOS
01 – Crie uma regra CSS para formatação deparágrafo com as seguintes configurações:▸ Cor da fonte: branca▸ Tipo da face: Arial▸ Cor de fundo: verde▸ Borda superior com 2 px na cor azul e dashed▸ Borda esquerda com 2 px, na cor amarela e dotted▸ Borda inferior com 2 px, na cor vermelha e double▸ Sem borda direita
EXERCÍCIOS
02 – Utilizando tabelas eregras CSS, crie um menupara uma página HTML,como o menu apresentadoao lado.
EXERCÍCIOS
03 – Utilizando tabelas e regras CSS, crie a tabelaabaixo:
06/02/2016
20
EXERCÍCIOS
04- Crie a seguinte página HTML:
CORES
PSEUDOELEMENTO
FIRST-LETTERAplica a formatação do recurso de capitalizarum parágrafo, sua sintaxe é:
p:first-letter{font-size: 300%;
}
06/02/2016
21
PSEUDOELEMENTO
FIRST-LINEApenas a primeira linha de um parágrafo ficarcom letras maiúsculas, sua sintaxe é:
p:first-line{font-variant: small-caps;color: #0000ff;
}
ESTILIZANDO LINKS
São personalizados para que links visitadosfiquem de cor vermelho e não visitado de corazul.
a:link{color: blue;
}a:visited{
color: red;}
ESTILIZANDO LINKS
São personalizados para que links ativosfiquem com a cor de fundo azul e quando ocursor apenas fica sob o link, para que fique decor laranja.
a:active{background-color: blue;
}a:hover{
color: orange;}
06/02/2016
22
LAYOUTHTML + CSS
AGRUPANDO ELEMENTOS
A tag <div> permite que sejam agrupadoselementos a parte de ID CSS. Vejamos:
<div id=“formatação”><ul>
<li> Franklin Roosevelt </li><li> Lydon Johnson </li><li> Bill Clinton </li>
</ul></div>
IMAGENS FLUTUADAS EM BOX
Quando uma imagem é inserida, uma box éfeita automaticamente, assim usando o atributofloat controlamos o posicionamento.
06/02/2016
23
IMAGENS FLUTUADAS EM BOX
<div id=“picture”><img src=“bill.jpeg” />
</div>
CSS:#picture{
float: left;width: 100px;
}
DIVIDINDO TEXTOS – COLUNAS
#coluna1{float: left;width: 33%;
}
#coluna2{float: center;width: 33%;
}
#coluna3{float: right;width: 33%;
}
PROPRIEDADE DISPLAY
Esta propriedade afeta a maneira como talelemento será posicionado.
block Fará com que o elemento posicionado logo abaixo eterá a largura definida pelo atributo width.
inline Os outros elementos serão posicionados um lado aolado do outro, na ordem que forem criados nodocumento HTML.
inline-block Fará com que outros elementos ao seu redor sejamposicionados um do lado do outro. Esse valor faz comque existam elementos inline e block.
06/02/2016
24
PROPRIEDADE POSITION
Esta propriedade determina qual é o modo doposicionamento de um elemento em umapágina.
static Permanece sempre em seu local original, não aceitandovalores.
relative É possível passar coordenadas para o posicionamento deelementos, fazendo com os que os mesmos se encaixem.
absolute O elemento toma como referência algum elemento pai naestrutura obedecendo o valor das coordenadas.
fixed O elemento permanece fixo quanto o posicionamentovertical (left ou right) e horizontal (top ou bottom).
PROPRIEDADE POSITION
img{position: absolute;top: 100px;left: 100px;
}
PROPRIEDADE POSITION
pos1 {position: relative;top: 100px;left: 0px;
}
pos2{position: relative;top: 100px;left: 0px;
}
06/02/2016
25
POSICIONANDO ELEMENTOS
O princípio de posicionamento no CSS ébaseado no sistema de coordenadas.
h1{position:absolute;top: 100px;left: 200px;
}
UTILIZANDO Z-INDEX
O CSS permite trabalhar com layers paramontagem de uma página Web. Sendo assim:
“Elementos com número de índice maior se sobrepõem em relação aqueles com números
menores.
UTILIZANDO Z-INDEX
#ten{position: absolute;left: 100px;top: 100px;z-index: 1;
}
#jack{position: absolute;left: 115px;top: 115px;z-index:2;
}
06/02/2016
26
OUTRO EXEMPLO – Z-INDEX
OUTRO EXEMPLO – Z-INDEX
VALIDADOR CSS
Para saber sobre eventuais erros em folhasCSS, a W3c criou uma página que retorna umrelatório sobre a análise de uma página.
Link da ferramentahttp://jigsaw.w3.org/css-validator
06/02/2016
27
EXERCÍCIOS
01 – Com base neste do topo adaptado do siteGlobo.com, você deverá criar um código HTML paraque este seja apresentado no navegador de formasemelhante a imagem a seguir.
EXERCÍCIOS
02 – O site da Globo utiliza um efeito hover paraadicionar uma borda a uma imagem e sublinhar otexto relativo a um link que irá direcionar a umaoutra página. Construa uma regra CSS para oefeito.
EXERCÍCIOS
03 – Utilizando os recursos HTML e CSS, crie apágina HTML apresentada abaixo.