AULA 04 · O princípio da HTML não está na formatação dos elementos, portanto cabe ao CSS...

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.


}

PROPRIEDADE

A propriedade é o atributo do elemento HTMLao qual será aplicada a regra, por exemplo:font, color, background...


}

VALOR

Consiste na característica específica a serassumida pela propriedade. Font pode serArial, cor azul, cor de fundo verde....


}

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


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


.formatacao1{font-family: “Comic Sans MS”;

}.formatacao2{

font-size: 20px;font-family: Arial;

}</style>

</head>

REGRA CSS – CLASSES


.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


#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.


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


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


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


.box{margin-top: 20px;margin-right: 30mm;margin-bottom: 5pt;margin-left: 20px;

}</style>

</head>

ABREVIANDO MARGIN


.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


.box{padding-top: 20px;padding-right: 30mm;padding-bottom: 5pt;padding-left: 20px;

}</style>

</head>

ABREVIANDO PADDING


.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


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


div {border-width: 1px;border-style: solid;border-color: #f00;

}

div {border: 1px solid #f00;

}</style>

</head>

06/02/2016

16

ABREVIANDO BORDER


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


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


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

17

EFEITOS COM BORDAS

EFEITOS COM BORDAS

EFEITOS COM BORDAS

06/02/2016

18

EFEITOS COM BORDAS

EFEITOS COM BORDAS

BORDAS ARREDONDADAS


#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).


img{position: absolute;top: 100px;left: 100px;

}


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.

06/02/2016

28

EXERCÍCIOS

04 – Utilizando os recursosHTML e CSS, crie a páginamostrada ao lado.

EXERCÍCIOS

AULA 04 · O princípio da HTML não está na formatação dos elementos, portanto cabe ao CSS...

Documents

Transcript of AULA 04 · O princípio da HTML não está na formatação dos elementos, portanto cabe ao CSS...