Tutorial Css Parte 2

Cascading Style Sheets – CSS
(Parte 2)

Centro Universitário de Patos de Minas
FACIA – Faculdade de Ciências Administrativas
Desenvolvimento para Web I
Prof. Me. Willyan Silva

http://wjsilva.com.br/cursos/desenvWebI

CSS – Atributos de texto
2

 As propriedades desta seção tratam de
transformações e atributos aplicados a texto, não
afetando a exibição das fontes.
 Os atributos tipográficos afetam a forma como o
texto é apresentado na tela como o espaçamento
entre linhas, entre palavras, entre letras, o
alinhamento de parágrafos e a indentação.

CSS – text-transform
3

 Realiza transformações no formato caixa-alta ou
caixa-baixa do texto. Sintaxe:
text-transform: capitalize
text-transform: uppercase
text-transform: lowercase
text-transform: none (valor default)

 Exemplo:
h1 { text-transform: capitalize }

CSS – text-transform
4 Ver exemplos: “01 - text-transform.html” e “arquivos/estilos.css”

 Capitalize coloca a primeira letra de cada
palavra em maiúsculas.
 Uppercase coloca todo o texto em maiúsculas e
 Lowercase coloca todo o texto em minúsculas.
 None remove qualquer transformação deixando o
texto da forma como foi definido antes das
transformações.

CSS – text-decoration
5

 Permite colocar (ou tirar) sublinhados, linhas sobre e
atravessando o texto, etc. Sintaxe:
text-decoration: underline (default em links)
text-decoration: overline
text-decoration: line-through
text-decoration: blink
text-decoration: none (default)

 Exemplos:
h1 {text-decoration: overline}
<a href="link.html" style="text-decoration: none">
Link sem sublinhado</a>

CSS – text-decoration
6 Ver exemplos: “02 - text-decoration.html” e “arquivos/estilos.css”

 Links são normalmente sublinhados na maior parte
dos browsers.
 O sublinhado pode ser removido com a
propriedade text-decoration: none.
 O Internet Explorer e o Google Chrome não
suportam a propriedade blink.

CSS – text-align e vertical-align
7

 Permitem controlar o alinhamento horizontal do texto, seu
alinhamento vertical e indentação do texto na primeira linha.
 O alinhamento horizontal é o mesmo conseguido com o
atributo align do HTML, só que o da folha de estilos tem
precedência. Sintaxe:
text-align: left | right | center | justify
 O alinhamento só se aplica a elementos de bloco (<p>,
<div>, <h1>, etc.) e elementos como applets e imagens.
 A característica é herdada para sub-blocos.
 O valor default é sempre left. Exemplo:
div { text-align: center; }

8

 Alinhamento vertical em HTML só pode ser aplicado a tabelas
e imagens.
 Com CSS, essa propriedade é estendida a qualquer elemento
de texto e imagens. Sintaxe:
vertical-align: baseline | top | text-top |
middle | bottom | text-bottom
vertical-align: sub | super
vertical-align: porcentagem %
 O valor default é baseline.

9 Ver exemplo: 03 - text-align_vertical-align.html

 As porcentagens referem-se à altura da linha
(line-height) do próprio elemento.
 Usando porcentagens negativas é possível se
sobrepor elementos.

CSS – text-indent
10

 Aplica-se a elementos de bloco e realiza a indentação da
primeira linha. Sintaxe:
text-indent: comprimento
text-indent: porcentagem %
 A porcentagem ocorre em relação à largura do elemento que
contém o seletor. Pode ser a largura total da página, a largura
da célula de uma tabela, etc. Exemplos:
p { text-indent: 1 cm }
<p style="text-indent: 1in">
 A indentação tratada aqui é apenas para uma linha de texto.
 Para indentar blocos inteiros, deve-se usar margem – margin –
ou preenchimento – padding – (explicado mais à frente).

CSS – line-height
11

 Usado para controlar o espaço que existe antes e depois
de uma linha de texto.
 Especifica a altura total de uma linha de texto.
 Para um texto de 10 pontos e uma line-height de 20
pontos (line-height: 2), haverá 5 pontos antes e 5 pontos
depois de cada linha de texto (espaço duplo).
 O espaço simples equivale geralmente a line-height:
120%.
 Uma line-height menor que o tamanho da fonte produzirá
sobreposição de texto.

CSS – line-height
12

 Sintaxe:
line-height: número_absoluto
line-height: comprimento ou unidade
line-height: porcentagem
 Exemplos:
h1 {line-height: 0 } /*sobreposição de linhas*/
h1 {line-height: 2 } /* espaço duplo */
h1 {line-height: 0.3em }
h1 {line-height: 150% } /* espaço 1 e meio */

CSS – line-height
13 Ver exemplos: “04 - line-height.html” e “arquivos/estilos.css”

 Em caso de valores percentuais menores que
100%, valores absolutos menores que 1 ou
unidades menores que o tamanho da fonte,
haverá sobreposição de linhas.

CSS – letter-spacing
14

 Altera o espaço entre as letras. Sintaxe:
letter-spacing: normal
letter-spacing: comprimento
 As unidades podem ser quaisquer uma das unidades válidas
para tamanho de fontes (pt, px, pc, cm, in, mm, em e ex).
 Na tipografia, é mais comum usar "em" como medida de
espaçamento por ser proporcional ao tamanho da fonte.
 Pode-se usar também valores negativos para sobrepor
caracteres, criar ligaduras (usadas em kerning) e caracteres
especiais (por exemplo, sobrepondo / com ).

CSS – Cores
15

 Com as propriedades de cores, podem-se controlar as
cores de várias partes da página, do texto, do fundo
da página e de elementos HTML.
 As cores definidas em CSS, assim como em HTML,
podem ser especificadas por um número em
hexadecimal (representando um código RGB) ou por
um nome.
 Além dessas duas formas, podem ainda ser
especificadas por três números decimais,
representando também o código RGB da cor.

CSS – Cores
16

 Os códigos RGB informam a quantidade de luz
vermelha, verde e azul que compõe a cor,
respectivamente. Cada cor pode ter 256 níveis de
intensidade (00 a FF, em hexadecimal). O total de
combinações possíveis é de 16.777.216 cores.
 A exibição correta das cores depende da
capacidade do vídeo onde serão vistas. Poucos
sistemas têm capacidade de mostrar mais que
65.536 cores simultâneas.

Combinação de Cores
17

 A combinação de cores tem um papel muito
importante na comunicação visual e também na
acessabilidade de um site web.
 Para mais informações sobre o tema, favor consultar:
http://colorschemedesigner.com/

http://www.universodacor.com.br/index.php?scr=esquemas_cores

http://pt.wikipedia.org/wiki/Cores

CSS – color
18

 Define a cor do texto.
 A propriedade color substitui totalmente o descritor
<font color> com vantagens.
 Pode ser aplicada localmente em um descritor
(usando o atributo style) ou globalmente na página e
no site, como qualquer outra propriedade de estilo.
Sintaxe:
color: nome_de_cor
color: #número_hexadecimal
color: rgb(vermelho, verde, azul)

CSS – color
19 Ver exemplos: “05 - color.html” e “arquivos/estilos.css”

 Exemplos:
.verde { color: green; }
.corHexa { color: #115DA2; }
.corRGB { color: rgb(255, 127, 63); }
 Os nomes são qualquer nome válido de cor.
 Se o browser não encontrar o nome ao qual o estilo se refere,
deve exibir a cor default (ou herdada).
 O símbolo "#" é opcional no código hexadecimal.
 A intensidade da cor pode ser expressa em valores absolutos (0
a 255) ou percentagens (0.0-100.0%).

CSS – background-color
20

 As cores de fundo de qualquer elemento podem ser
alteradas através da propriedade background-
color. Sintaxe:
background-color: transparent (valor default)
background-color: nome_de_cor
background-color: #número_hexadecimal
background-color: rgb(vermelho, verde, azul)

CSS – background-color
21 Ver exemplo: 06 - background-color.html”

 Exemplos:
h1 { background-color: green; }
p { background-color: #AADDFF; }
em { background-color: rgb(255, 127, 63); }
 Fundo transparente simplesmente deixa à mostra o fundo do
objeto que o contém.
 Fundo, para texto, ocupa todo o espaço da fonte (inclusive
espaço em branco acima e abaixo que fazem parte da fonte).
 A cor não é estendida quando o espaçamento entre linhas é
aumentado em alguns browsers.

CSS – background-image
22

 Atribui a qualquer elemento HTML uma imagem de fundo.
Sintaxe:
background-image: none (valor default)
background-image: url(URL_da_imagem)
 Exemplos:
h1
{
background-image: url(http://www.img.com/i1.jpg)
}
p { background-image: url(imagem.jpg)}
<td style="background-image: url(img.gif)">...</td>

CSS – background-image
23

 As URLs são relativas à localização do arquivo que
contém a folha de estilos (pode ser a própria
página HTML ou não).
 A cor de backup (background-color) é usada para
'vazar' pelas partes transparentes da imagem ou
prevenir contra o não carregamento do fundo
(para permitir a leitura em fundo escuro pode-se
usar preto como cor de backup de uma imagem
escura).

CSS – background-repeat
24

 Permite maior controle sobre a imagem de fundo, facilitando a
maneira como ela irá se repetir. Sintaxe:
background-repeat: repeat (default)
background-repeat: repeat-x
background-repeat: repeat-y
background-repeat: no-repeat
 Exemplos:
body {background-image: url(img.jpg);
background-repeat: repeat-x }
table {background-image: url(img2.jpg);
background-repeat: no-repeat }

CSS – background-repeat
25

 repeat (default):
 Faz a imagem se repetir e tanto na horizontal quanto na vertical, ocupando
toda a tela.
 repeat-x:
 Faz a imagem se repetir apenas horizontalmente
 repeat-y:
 Faz a imagem se repetir apenas verticalmente.
 no-repeat:
 A imagem não é repetida de forma alguma (aparecerá uma imagem
apenas no canto superior esquerdo).
 Para fazer a imagem aparecer em outros lugares, pode-se usar
as propriedades de posicionamento.

CSS – background-attachment
26

 Define se o fundo irá ou não se mover com o texto
ou ficar fixo na tela.
 Sintaxe:
background-attachment: fixed | scroll (default)

 Exemplo:
body {
background-image: url(img.jpg);
background-repeat: no-repeat;
background-attachment: fixed
}

CSS – background-position
27

 Permite o posicionamento do fundo em um determinado
local da tela.
 Sintaxe:
background-position: porcent_horiz% porcent_vert%
background-position: comprimento comprimento
background-position: pos_vertical pos_horizontal

28

 Exemplos:
background-position: 50% 100% }
background-position: 25pt 2.5cm }
background-position: center top }

29

 Os valores de porcentagem são relativos à posição do
elemento sobre o qual se aplica o estilo.
 As posições são sempre dadas em pares, tendo os valores
separados por espaço(s) em branco.
 O primeiro valor é sempre um valor horizontal e o segundo um
valor vertical.
 O browser coloca o bloco afetado dentro de uma "caixa
invisível" e a posiciona de acordo com as porcentagens.
 Um valor de 100% para o primeiro valor, empurra a margem
direita (oposta) desta "caixa invisível" contra a margem
direita do browser.

30

 As unidades válidas para os comprimentos são as
mesmas usadas em fontes (cm, mm, in, pc, px, pt, em,
ex) e podem ser misturadas nos dois valores do par.
 Os valores de posição (pos_vertical e
pos_horizontal) são palavras-chave usadas
também aos pares. São equivalentes das
porcentagens básicas de alinhamento. O primeiro
valor pode ter left (0%), right (100%) ou center
(50%). O segundo valor pode ser top (0%), bottom
(100%) ou center (50%).

CSS – background
31

 Usada para definir várias características de fundo de uma
única vez. Na sintaxe abaixo, a ordem dos fatores é
importante. Sintaxe:
background: background-color background-image
background-repeat background-attachment
background-position
 Deve haver pelo menos um valor definido, mas qualquer
número de valores pode ser atribuído de uma vez.
 Exemplos:
body {background: blue url(img.gif) no-repeat
fixed 50% 25%}

CSS – Modelo de Caixas
32

 Uma “caixa” é uma propriedade de qualquer
elemento de bloco no HTML (<h1>, <p>, <div>,
etc. que automaticamente definem seu próprio
bloco ou parágrafo).
 A caixa de um objeto consiste das partes seguintes:
O elemento em si (texto, imagem);
 As margens internas do elemento (padding);

 A borda em torno das margens internas (border);

 A margem em torno da borda (margin).

35

 A cor e tamanho da borda podem ser alterados
assim como o fundo (como vimos na seção anterior).
 A margem externa é sempre transparente, mas a
margem interna (preenchimento) herda a cor de
fundo do objeto.
 Também são alteráveis as margens internas e
externas, larguras de borda, cor de borda e estilo
de borda de cada um dos quatro lados de uma
caixa individualmente, identificados pelos nomes
top, right, bottom e left:

36 Ver exemplo: 07 - Modelo de Caixa.html”

CSS – margin e padding
37

 As margens externas são definidas usando a propriedade
margin (que afeta todas as margens ao mesmo tempo) ou as
propriedades margin-top, margin-bottom, margin-right e
margin-left que permitem alterar as margens individualmente.
 Sintaxe:
margin-top: comprimento | porcentagem % | auto
margin-bottom: comprimento | porcentagem % | auto
margin-right: comprimento | porcentagem % | auto
margin-left: comprimento | porcentagem % | auto
 Exemplo:
img { margin-top: 1cm; margin-left: 12pt; }

38

 A propriedade margin afeta vários aspectos das
margens externas de uma vez só.
 A ordem dos fatores é importante. Podem ser incluídos
todos quatro valores, apenas um (todas as margens
iguais) ou dois (margens horizontais e verticais). Sintaxe:
margin: margin-top margin-right margin-bottom margin-left
margin: margin-top% margin-right% margin-bottom% margin-
left%
margin: espaço_vertical espaço_horizontal
margin: margem_de_todos_os_lados

39

 Exemplos:
img { margin: 5cm /* vale p/ as 4 margens */ }

img { margin: 5cm 2cm }
/* 5cm margs verticais, 2cm margs horiz. */

img { margin: 5cm 3cm 2cm 1cm }
/* sent. Horário: top, right, bottom, left */
/* em cima 5; à direita 3; em baixo 2;... */

40

 As margens internas (padding) são definidas usando
a propriedade padding (que afeta todas as
margens internas ao mesmo tempo) ou as
propriedades padding-top, padding-bottom,
padding-right e padding-left.
 Sintaxe:
padding-top: comprimento | porcentagem %;
padding-bottom: comprimento | porcentagem %;
padding-right: comprimento | porcentagem %;
padding-left: comprimento | porcentagem %;

41

 A propriedade padding afeta vários aspectos das
margens internas de uma vez só.
 A ordem dos fatores é importante. Podem ser
incluídos todos 4 valores ou apenas um. Sintaxe:
padding: padding-top padding-right padding-bottom
padding-left;
padding: padding-top% padding-right%
padding-bottom% padding-left%;
padding: espaço_vertical espaço_horizontal;
padding: margem_de_todos_os_lados;

43

 Exemplos:
border-bottom-width: thick;
border-right-width: 5.5px;
border-left-width: 0.2cm;

44

 As propriedades das bordas podem ser tratadas em
grupo, com border-width.
 A ordem dos fatores é importante. Podem ser incluídos
todos os quatro valores, dois (referindo-se às bordas
horizontais e verticais) ou apenas um (afetando todas
as bordas).
 Sintaxe:
border-width: border-top-width border-right-width
border-bottom-width border-left-width;

45

 Exemplos:
border-width: 5cm; /* vale p/ as 4 bordas */

border-width: 5cm 2cm; /* 5cm verticais,
2cm horizontais */

border-width: 5cm 3cm 2cm 1cm;
/*sentido horário: top, right, bottom, left*/

CSS – border-color
46

 border-color é um atalho que permite alterar a cor de
uma ou de todas as quatro bordas ao redor de um
elemento que também podem ser definidas
individualmente através de border-top-color, border-
bottom-color, border-right-color e border-left-color.
 Sintaxe:
border-top-color: cor (nome ou código);
border-bottom-color: cor (nome ou código);
border-right-color: cor (nome ou código);
border-left-color: cor (nome ou código);

47

 Exemplos:
border-bottom-color: rgb(231,45,112);
border-right-color: #0fa97b;
border-left-color: navy;

48

 As propriedades das bordas podem ser tratadas em
grupo, com border-color. A ordem dos fatores é
importante.
 Podem ser incluídos todos os quatro valores, dois
(referindo-se às bordas horizontais e verticais) ou
apenas um (afetando todas as bordas).
 Sintaxe:
border-color: border-top-color border-right-color
border-bottom-color border-left-color;

49

 Exemplos:
border-color: red; /* red para as 4 bordas */
border-color: rgb(255, 0, 0); /* red */
border-color: rgb(100%, 0, 0); /* red */
border-color: red #0000ff; /* red verticais,
0000ff horizontais*/
border-color: red blue yellow cyan; /* 4 cores
sentido horário (começando do topo) */

CSS – border-style
50

 Define o estilo de cada uma das quatro bordas.
 Também é possível defini-los individualmente usando
border-top-style, border-bottom-style, border-
right-style e border-left-style.
 Sintaxe:
border-top-style: none | dotted | dashed | solid
| double | groove | ridge | inset | outset;
border-bottom-style: nome_estilo (um dos acima);
border-right-style: nome_estilo;
border-left-style: nome_estilo;

51

 Exemplos:
border-bottom-style: none;
border-right-style: solid;
border-left-style: inset;

52

 border-style é o atalho para alterar todas as bordas.
 A ordem dos fatores é importante.
 Podem ser incluídos todos os quatro valores, dois
(referindo-se às bordas horizontais e verticais) ou
apenas um (afetando todas as bordas).
 Sintaxe:
border-style: border-top-style border-right-style
border-bottom-style border-left-style;

53

 Exemplos:
border-style: solid none inset outset;
border-style: solid;
border-style: inset outset;

CSS – border
54

 As propriedades border-top, border-bottom, border-
left e border-right agrupam as propriedades de cor,
estilo e espessura para cada uma das quatro bordas.
 Sintaxe:
border-top: border-width border-style border-color
border-bottom: border-width border-style border-
color
border-left: border-width border-style border-color
border-right: border-width border-style border-color

CSS – border
55

 border é um atalho para definir todas as
propriedades de uma vez só para todas as bordas
e de forma idêntica (não é possível especificar
valores diferentes para as bordas neste caso).
 Todos os itens não precisam aparecer, mas a ordem
dos fatores é importante.
 Sintaxe:
border: border-width border-style border-color

CSS – float
56

 Permite que um bloco qualquer seja posicionado à
direita ou esquerda da janela do browser, fazendo
com que o texto restante flua em sua volta.
 Permite que qualquer bloco se comporte como uma
imagem que faz uso dos atributos align=left e
align=right no HTML.
 Sintaxe:
float: left | right | none

CSS – clear
57

 Para evitar que um bloco flua em torno de uma imagem
ou bloco que utiliza a propriedade float, existe a
propriedade clear, que deve ser atribuída a um bloco
ou parágrafo que é afetado pela flutuação de um
bloco.
 Faz a mesma coisa que o atributo clear, usado no <br>
em HTML, só que aqui ela é suportada em qualquer
elemento (bloco ou não).
 Sintaxe:
clear: none | left | right | both;

60

 fixed
 Fixa a posição do elemento na coordenada definida.
À medida que a página é rolada, o elemento continua
fixo na posição em que foi definido e o conteúdo da
página rola normalmente.
 relative
 Gera um posicionamento relativo para o elemento em
relação a sua posição normal.
 Ex.: "left:20" desloca o elemento 20 pixels para a
direita.

61

 absolute
 Gera um posicionamento absoluto para o elemento que
é posicionado relativamente ao primeiro elemento
parente cuja propriedade position seja diferente de
static.
 static
 Default. Nenhum posicionamento, o elemento é
mostrado no fluxo normal (ignora qualquer declaração
top, bottom, left, right, ou z-index).

62

 Exemplo: considere
as 4 imagens a
seguir:

63

 Aplicando a seguinte folha de estilos para
posicionar as quatro imagens relativamente à sua
localização original obtemos a imagem ao lado.
<div class="imagem1">
<img src="T1.gif" width=113 border=1> 1 Posição 0 0
</div>
</div>
<img src="T3.gif" width=113 border=1> 3 Posição -25 -25
</div>
</div>

64

div.imagem1 { position: relative; top: 0px; left: 0px; }


div.imagem3 { position: relative; top: -25px; left: -25px; }


65 Ver exemplo: 08 - relative.html”

 Tem-se o seguinte (os
retângulos claros
indicam a posição
original da imagem):

66

 Usando posicionamento absoluto, o bloco é movido
em relação ao canto superior esquerdo do browser.
div.imagem1 { position: absolute; top: 0px; left: 250px; }



div.imagem4 { position: absolute; top: 200px; left: -80px; }

67 Ver exemplo: 09 - absolute.html”

 Tem-se o seguinte:

CSS – z-index
68

 Permite ordenar os objetos em camadas. É um eixo de
profundidade. Para usá-la, basta definir em cada objeto:
z-index: número (onde número é a camada de exibição).
 Quanto maior o número, mais alta a camada.
 0 corresponde à camada do texto.
 Se um objeto tiver z-index menor que zero aparecerá atrás
do texto.
 Se z-index for maior que zero, aparecerá na frente.
 Quando não é definido ou quando z-index: 0, o bloco
ocupará a mesma camada que o texto.

CSS – display
69

 Define como um elemento é mostrado.
 A propriedade none desliga o elemento e fecha o
espaço que o objeto antes ocupava (torna o objeto
invisível).
 block abre uma nova caixa onde o objeto é
posicionado, relativo aos outros blocos.
 list-item é um bloco com um marcador de lista.
 inline define um elemento como parte de um bloco.

CSS – display
70

 Sintaxe:
display: block | inline | list-item | none

 Exemplos:
p {display: list-item}
img {display: none} /*desliga todas as imagens*/

CSS – visibility
71

 Serve para tornar um bloco visível ou invisível.
 Difere de display porque não remove o espaço
antes ocupado pela imagem. Sintaxe:
visibility: hidden | visible

 Exemplo:
img {visibility: hidden} /* torna invisíveis
todas as imagens */

Tutorial Css Parte 2

Recomendados

Mais conteúdo relacionado

Destaque (10)

Semelhante a Tutorial Css Parte 2 (20)

Tutorial Css Parte 2