Css

CSS
Eduardo Ogasawara
Centro Federal de Educação Tecnológica Celso Suckow da Fonseca

CEFET-RJ
1
Bibliografia básica
• Powers, S., (2010), Aprendendo Javascript. 2 ed. O'Reilly -
Novatec.
• W3Schools, (2005), W3 Schools. http://www.w3schools.com.
Slides Obtidos em W3Schools, (2005), W3 Schools. http://www.w3schools.com

Atualizado em: 26/02/2011 2
Propósito de CSS
• HTML nunca foi destinado a conter tags para a formatação de um
documento.
• HTML destinava-se a definir o conteúdo de um documento, como:
• <h1> Este é um título </ h1>
• <p> Este é um parágrafo. </ p>
• Quando as tags como <font> e atributos de cor foram adicionados à
especificação HTML 3.2, começou um pesadelo para os
desenvolvedores web. Desenvolvimento de web sites de grande
porte, onde as fontes e informações sobre as cores foram adicionadas
a cada página, tornou-se um processo longo e caro.
• Para resolver este problema, a World Wide Web Consortium (W3C)
criou o CSS.
3
O que é CSS?
• CSS significa C ascading S tyle S heets
• Os estilos definem como exibir os elementos HTML
• Os estilos foram adicionados ao HTML 4.0 para resolver problemas
de formatação
• Folhas de Estilo Externas pode evitar retrabalho de formatação
• Folhas de Estilo Externas são armazenados em arquivos CSS
• A partir do HTML 4.0, toda a formatação pode ser removido do
documento HTML, e armazenado em um arquivo CSS separado.
• Atualmente todos os navegadores apoiam o CSS.
4
Sintaxe CSS
• O seletor é normalmente o elemento HTML que deseja estilo.
• Cada declaração consiste de uma propriedade e um valor.
• A propriedade é o atributo de estilo que deseja alterar. Cada
propriedade tem um valor.
5
Exemplo de CSS
• body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:20px;
}
6
Seletores de id e class
• Além de definir um estilo para um elemento HTML, CSS permite que
você especifique seu próprio seletores chamado "id" e "classe".
• O seletor id
• O seletor id é usado para especificar um estilo para um elemento
único e exclusivo.
• O seletor id usa o atributo id do elemento HTML, e é definido com
um "#".
• A regra de estilo abaixo será aplicado para o elemento com id =
"para1":
#para1
{
text-align:center;
color:red;
7
}
Seletores de classe
• O seletor classe é usada para especificar um estilo para um grupo de
elementos. Ao contrário do seletor id, o seletor classe é mais
frequentemente usado em vários elementos.
• Isso permite que você defina um estilo particular para qualquer
elemento HTML com a mesma classe.
• O seletor de classe usa o atributo class de HTML e é definido com um
"."
• No exemplo abaixo, todos os elementos HTML com class = "center"
será alinhado ao centro:
.center {text-align:center;}
• Você também pode especificar que apenas os elementos HTML
específicos deverão ser afectados por uma classe.
• Numa página HTML os elementos <p class = "center“> ficam 8
alinhados ao centro
Três modos de definir CSS
• Existem três maneiras de definir estilos:
o Folha de Estilo Externa
o Folha de Estilo Interna
o Estilo em linha
• Folha de Estilo Externa
• Uma folha de estilo externa é ideal quando o estilo é aplicado a
muitas páginas. Com uma folha de estilo externa, você pode mudar a
aparência de um site inteiro mudando um arquivo. Cada página tem
link para a folha de estilo usando a tag <link>. A tag <link> vai dentro
da seção head:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
9
Folha de estilo interna
• Uma folha de estilo interna deve ser utilizado quando um único
documento tem um estilo único. Você define estilos internos na
seção head de uma página HTML, usando a tag <style>, como este:
<head>
<style type="text/css">
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
10
Estilos Inline
• Um estilo inline perde muitas das vantagens das folhas de estilo,
misturando conteúdo com apresentação. Utilize este método com
moderação!
• Para usar estilos inline você usar o atributo de estilo na tag relevante.
O atributo de estilo pode conter qualquer propriedade CSS. O
exemplo mostra como mudar a cor ea margem esquerda de um
parágrafo:
<p style="color:sienna;margin-left:20px">This is a paragraph.</p>
11
Definição múltipla de estilo
• Se algumas propriedades foram definidas para o mesmo seletor em diferentes
folhas de estilo, os valores serão herdados da folha de estilo mais específico.
• Por exemplo, uma folha de estilo externa tem estas propriedades para o seletor h3:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
• E uma folha de estilo interna tem estas propriedades para o seletor h3:
h3
{
text-align:right;
font-size:20pt;
}
Se a página com a folha de estilo interna também se vincula à folha de estilo externa
12
as propriedades para h3 são: color:red; text-align:right; font-size:20pt;
Regras em cascata
• Que estilo será usado quando houver mais de um estilo especificado para um
elemento HTML?
• De um modo geral, podemos dizer que todos os estilos serão "cascata" em uma
nova folha de estilo "virtual" pelas seguintes regras, onde o número quatro tem a
maior prioridade:
• Browser padrão
• Folha de Estilo Externa
• Interno folha de estilo (na seção de cabeça)
• Estilo em linha (dentro de um elemento HTML)
• Então, um estilo inline (dentro de um elemento HTML) tem a maior prioridade, o
que significa que ele irá substituir um estilo definido dentro da tag <head>, ou em
uma folha de estilo externa, ou em um navegador (um valor padrão).
13
Cor de fundo
• A propriedade background-color especifica a cor de fundo de um elemento.
• A cor de fundo de uma página é definida no seletor do corpo:
body {background-color:#b0c4de;}
• A cor de fundo pode ser especificado por:
nome - nome de uma cor, como "vermelho"
RGB - um valor RGB, como "rgb (255,0,0)"
Hex - um valor hexadecimal, como "# ff0000“
• No exemplo abaixo, o h1, p, div e elementos têm diferentes cores de fundo:
h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
14
Imagem de fundo
• A propriedade background-image especifica uma imagem para usar como fundo de
um elemento.
• Por padrão, a imagem é repetida para que ele cobre todo o elemento.
• A imagem de fundo para uma página pode ser definida assim:
body {background-image:url('paper.gif');}
Se a imagem é repetida somente horizontalmente (repeat-x), o fundo vai ficar
melhor:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
15
Cor do texto
• A propriedade cor é usada para definir a cor do texto. A cor pode ser especificada
por:
• nome - nome de uma cor, como "vermelho"
• RGB - um valor RGB, como "rgb (255,0,0)"
• Hex - um valor hexadecimal, como "# ff0000"
• A cor padrão para uma página é definida no seletor do corpo.
body {color:blue;}
h1 {color:#00ff00;}
h2 {color:rgb(255,0,0);}
16
Alinhamento de texto
• A propriedade text-align é usado para definir o alinhamento horizontal de um
texto.
• O texto pode ser centralizado ou alinhado à esquerda ou à direita ou justificado.
• Quando alinhar o texto é definido para "justificar", cada linha está esticada de
modo que cada linha tenha largura igual, e as margens esquerda e direita são retas
(como em revistas e jornais).
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify;}
17
Decoração de texto
• A propriedade text-decoration é usado para definir ou remover decorações de
texto.
• A propriedade text-decoration é utilizado principalmente para retirar sublinhados
de links para fins de projeto:
• a {text-decoration:none;}
• Também pode ser usado para decorar o texto:
• h1 {text-decoration:overline;}
h2 {text-decoration:line-through;}
h3 {text-decoration:underline;}
h4 {text-decoration:blink;}
18
Família de fontes
• família de fonte de um texto é definido com a propriedade font-family.
• A propriedade font-family deve manter os nomes de fontes diversas como um
sistema de "retorno". Se o navegador não suporte a primeira fonte, ele tenta a
próxima fonte.
• Comece com a fonte que você quer, e terminam com uma família genérica, para
deixar o browser pegar uma fonte semelhante na família genérico, se não houver
outras fontes disponíveis.
• Nota : Se o nome de uma família de fontes é mais do que uma palavra, ele deve
estar entre aspas, como fonte para a família: "Times New Roman".
• Mais do que uma família de fonte é especificado em uma lista separada por
vírgulas:
• p{font-family:"Times New Roman", Times, serif;}
19
Estilo da Fonte
• A propriedade font-style é utilizada principalmente para especificar o texto em
itálico.
• Esta propriedade tem três valores:
• normal - O texto é exibido normalmente
• itálico - O texto é mostrado em itálico
• oblíquo - O texto é "encostado" (oblíqua é muito semelhante ao itálico, mas menos
compatível)
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
20
Tamanho da Fonte
• A propriedade font-size define o tamanho do texto.
• Ser capaz de gerenciar o tamanho do texto é importante em web design. No
entanto, você não deve usar os ajustes tamanho da fonte para fazer parágrafos
parecem títulos ou posições parecem parágrafos.
• Sempre use o bom tags HTML, como <h1> - <h6> para títulos e <p> para
parágrafos.
• O valor de font-size pode ser uma dimensão absoluta ou relativa.
• tamanho absoluto:
o Define o texto a um tamanho especificado
o Não permite que um usuário altere o tamanho do texto em todos os navegadores (ruim por
motivos de acessibilidade)
o tamanho absoluto é útil quando o tamanho físico da produção é conhecido
• Tamanho relativo:
o Define o tamanho em relação a elementos ao redor
o Permite ao usuário mudar o tamanho do texto nos navegadores
21
Estilos para links
• Os links podem ser decorados com qualquer propriedade CSS (por exemplo: cor,
font-family, fundo, etc.)
• Especial para as ligações são de que eles podem ser decorados de forma diferente
dependendo do estado que estão dentro
• Os quatro estados links são:
o a: link - uma ligação normal, não visitado
o a: visited - um link que o usuário tenha visitado
o a: hover - um link quando o usuário passa o mouse sobre ele
o a: active - uma ligação no momento em que for clicado
a:link {color:#FF0000;} /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;} /* mouse over link */
a:active {color:#0000FF;} /* selected link */
22
Listas
• Em HTML, existem dois tipos de listas:
• listas não ordenadas - os itens da lista são marcados com marcadores
• listas ordenadas - os itens da lista são marcados com números ou letras
• Com CSS, as listas podem ser decorados mais, e as imagens podem ser utilizadas
como marcador de item da lista.
ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
ol.c {list-style-type: upper-roman;}

ol.d {list-style-type: lower-alpha;}
O a, b, c e d são classes associadas aos elementos de lista.
23
Tabelas
• Para especificar as bordas da tabela em CSS, use a propriedade border.
• O exemplo abaixo especifica uma borda preta de mesa, th e td elementos:
table, th, td
{
border: 1px solid black;
}
• Tabela Largura e Altura
• A largura ea altura de uma tabela é definido pelas propriedades de largura e altura.
• O exemplo a seguir define a largura da tabela para 100%, ea altura dos elementos ª
a 50px:
table
{
width:100%;
}
th
{
height:50px;
24
}
Tabelas – Alinhamento de texto
• O texto em uma tabela está alinhada com as propriedades text-align e vertical-
align.
• A propriedade text-align define o alinhamento horizontal, como a esquerda, direita
ou centro:
td
{
text-align:right;
}
• A propriedade vertical-align define o alinhamento vertical, como superior, inferior
ou médio:
td
{
height:50px;
vertical-align:bottom;
}
25
O modelo de Box em CSS
• Todos os elementos HTML podem ser considerados como caixas. Em CSS, o
"modelo" caixa termo é usado quando se fala em design e layout.
• O modelo de caixa CSS é essencialmente uma caixa que envolve elementos HTML,
e é composto por: margens, bordas, padding e conteúdo real.
• O modelo de caixa que nos permite colocar uma borda em torno dos elementos e
os elementos de espaço em relação a outros elementos.
• A imagem abaixo ilustra o modelo de caixa:
26
Tamanho real de um elemento
• Quando você especificar a largura e altura propriedades de um elemento com CSS,
você está apenas definindo a largura e altura da área de conteúdo. Para saber o
tamanho total do elemento, você também deve adicionar o espaçamento, borda e
margem.
• A largura total do elemento no exemplo abaixo é 300px:
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
27
Bordas
• As propriedades das fronteiras CSS permitem que
você especifique o estilo e a cor da borda de um
elemento.
p.one
{
border-style:solid;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
} 28
Outline, Margin e Padding
• Outline
o http://www.w3schools.com/css/css_outline.asp
• Margin
o http://www.w3schools.com/css/css_margin.asp
• Padding
o http://www.w3schools.com/css/css_padding.asp
29
Exposição e Visibilidade
• A propriedade display especifica se / como um elemento é
exibido e, a propriedade de visibilidade especifica se um
elemento deve ser visível ou oculto.
• Escondendo um elemento - display: none e visibility:
hidden
• Escondendo um elemento pode ser feito definindo a
propriedade display como "none" ou a propriedade de
visibilidade para "oculto".
30
CSS Display - Bloco e elementos inline
• elemento de bloco é um elemento que ocupa a largura total
disponível, e tem uma quebra de linha antes e depois dele.
• Exemplos de elementos de bloco:
o <h1>
o <p>
o <div>
• Um elemento inline ocupa apenas a largura quanto necessário, e não
forçar quebras de linha.
• Exemplos de elementos em linha:
o <span>
o <a>
31
Exemplo de visibilidade
• visibility: Hidden oculta um elemento, mas ainda vai
demorar até o mesmo espaço de antes. O elemento será
escondido, mas ainda afeta o layout.
h1.hidden {visibility:hidden;}
• display: none esconde um elemento, e não pegará nenhum
espaço. O elemento será escondido, e da página será
exibido como o elemento não existe:
h1.hidden {display:none;}
32
Posicionamento
• As propriedades de posicionamento CSS permitem a posição de um
elemento. Também pode colocar um elemento atrás do outro, e
especificar o que deve acontecer quando o conteúdo de um
elemento é muito grande.
• Os elementos podem ser posicionados com o superior, inferior,
esquerda e direita propriedades. No entanto, essas propriedades não
funcionará a menos que a propriedade position seja definida em
primeiro lugar. Eles também funcionam de forma diferente
dependendo do método de posicionamento.
• Há quatro diferentes métodos de posicionamento: estático, fixo,
relativo e absoluto
33
Tipos de posicionamento
estático e fixo
• Posicionamento estático
o elementos HTML são estáticos posicionados por padrão. Um elemento estático
posicionado sempre é posicionado de acordo com o fluxo normal da página.
o elementos estáticos posicionados não são afetados por cima, em baixo,
esquerda, direita e propriedades.
• Posicionamento fixo
o Um elemento com posição fixa é posicionado em relação à janela do
navegador.
o Não vai mudar, mesmo quando a janela é rolada:
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}
34
Tipos de posicionamento
relativo e absoluto
• Posicionamento relativo
o Um elemento é posicionado em relação à sua posição normal.
h2.pos_top
{
position:relative;
top:-50px;
}
• Posicionamento absoluto
o Um elemento de posição absoluta é posicionado em relação ao primeiro
elemento pai que tem uma posição que não seja estática. Se nenhum elemento
for encontrado, o bloco é <html>:
h2
{
position:absolute;
left:100px;
top:150px;
} 35
Flutuação
• Com float do CSS, um elemento pode ser empurrado para a esquerda ou direita,
permitindo que outros elementos se embrulhem em torno dele.
• Flutuar é muitas vezes utilizado para imagens, mas também é útil quando se
trabalha com layouts.
• Elementos flutuam horizontalmente, isto significa que um elemento só pode ficar
flutuando a esquerda ou direita, não para cima ou para baixo.
• Os elementos depois do elemento flutuante irá fluir ao redor dele.
• Os elementos antes que o elemento flutuante não são afetados.
• Se uma imagem é lançada para a direita, o texto seguinte flutua em torno dela, à
esquerda:
img
{
float:right;
}
36

Css

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Css

Transféré par

Droits d'auteur :

Formats disponibles

CSS

Centro Federal de Educação Tecnológica Celso Suckow da Fonseca

Slides Obtidos em W3Schools, (2005), W3 Schools. http://www.w3schools.com

ol.c {list-style-type: upper-roman;}

O a, b, c e d são classes associadas aos elementos de lista.

Vous aimerez peut-être aussi