21/08/2016 1 PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi [email protected]http://fabianotaguchi.wordpress.com CSS As folhas de estilo em cascata são mecanismos usados para adicionar estilos em documentos Web. O princípio da HTML não está na formatação dos elementos, portanto cabe ao CSS cuidar do aspecto visual do documento.
42
Embed
PROGRAMAÇÃO EM AMBIENTE WEB I - Fabiano Taguchi › 2016 › 08 › int-css.pdf · 21/08/2016 3 REGRAS CSS UmaregraCSSconsisteemumadeclaração quesegueumasintaxedefinindocomoserá
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
21/08/2016
1
PROGRAMAÇÃO EM AMBIENTE WEB I Prof. Esp. Fabiano Taguchi
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.
21/08/2016
2
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.
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.
21/08/2016
3
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;
}
21/08/2016
4
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;
}
21/08/2016
5
VALOR
Consiste na característica específica a serassumida pela propriedade. Font pode serArial, cor azul, cor de fundo verde....
seletor {propriedade: valor;
}
REGRA CSS – ESTILO INTERNO
<head><style type=“text/css”>
p{font-size: 12px;color: #993366;
}</style>
</head><body>
<p> Teste </p></body>
21/08/2016
6
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;
}
21/08/2016
7
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>
21/08/2016
8
REGRA CSS – CLASSES
<head><style type=“text/css”>
.cor-um{background-color: gray;
}.cor-dois{
background-color: lightblue;}
</style></head>
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>
21/08/2016
9
ID
Outro seletor bastante usado é o por ID. Esteseletor só pode ser utilizado uma vez dentrode um código HTML.
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
21/08/2016
14
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
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>
21/08/2016
15
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.
21/08/2016
16
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>
21/08/2016
17
COMENTÁRIOS
Comentários em CSS são descritos atravésdos códigos /* no inicio e */ ao final.
01 – Crie uma regra CSS para formatação deparágrafo com as seguintes configurações:
Cor da fonte: brancaTipo da face: ArialCor de fundo: verdeBorda superior com 2 px na cor azul e dashedBorda esquerda com 2 px, na cor amarela e dottedBorda inferior com 2 px, na cor vermelha e doubleSem borda direita
EXERCÍCIOS
02 – Utilizando tabelas eregras CSS, crie um menupara uma página HTML,como o menu apresentadoao lado.
21/08/2016
29
EXERCÍCIOS
03 – Utilizando tabelas e regras CSS, crie a tabelaabaixo:
EXERCÍCIOS
04- Crie a seguinte página HTML:
21/08/2016
30
CORES
PSEUDOELEMENTO
FIRST-LETTERAplica a formatação do recurso de capitalizarum parágrafo, sua sintaxe é:
p:first-letter{font-size: 300%;
}
21/08/2016
31
PSEUDOELEMENTO
FIRST-LINEApenas a primeira linha de um parágrafo ficarcom letras maiúsculas, sua sintaxe é:
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
21/08/2016
40
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.
21/08/2016
41
EXERCÍCIOS
03 – Utilizando os recursos HTML e CSS, crie apágina HTML apresentada abaixo.
EXERCÍCIOS
04 – Utilizando os recursosHTML e CSS, crie a páginamostrada ao lado.