Tutorial Css Parte 2
-
Upload
renato-alves -
Category
Documents
-
view
477 -
download
3
Transcript of Tutorial Css Parte 2
![Page 1: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/1.jpg)
Centro Universitário de Patos de Minas FACIA – Faculdade de Ciências Administrativas
Desenvolvimento para Web I
Prof. Me. Willyan Silva
Cascading Style Sheets – CSS (Parte 2)
http://wjsilva.com.br/cursos/desenvWebI
![Page 2: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/2.jpg)
CSS – Atributos de texto
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.
2
![Page 3: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/3.jpg)
CSS – text-transform
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 }
3
![Page 4: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/4.jpg)
CSS – text-transform
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.
4 Ver exemplos: “01 - text-transform.html” e “arquivos/estilos.css”
![Page 5: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/5.jpg)
CSS – text-decoration
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>
5
![Page 6: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/6.jpg)
CSS – text-decoration
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.
6 Ver exemplos: “02 - text-decoration.html” e “arquivos/estilos.css”
![Page 7: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/7.jpg)
CSS – text-align e vertical-align
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; }
7
![Page 8: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/8.jpg)
CSS – text-align e vertical-align
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.
8
![Page 9: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/9.jpg)
CSS – text-align e vertical-align
As porcentagens referem-se à altura da linha (line-height) do próprio elemento.
Usando porcentagens negativas é possível se sobrepor elementos.
9 Ver exemplo: 03 - text-align_vertical-align.html
![Page 10: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/10.jpg)
CSS – text-indent
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).
10
![Page 11: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/11.jpg)
CSS – line-height
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.
11
![Page 12: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/12.jpg)
CSS – line-height
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 */
12
![Page 13: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/13.jpg)
CSS – line-height
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.
13 Ver exemplos: “04 - line-height.html” e “arquivos/estilos.css”
![Page 14: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/14.jpg)
CSS – letter-spacing
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 \).
14
![Page 15: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/15.jpg)
CSS – Cores
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.
15
![Page 16: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/16.jpg)
CSS – Cores
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.
16
![Page 17: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/17.jpg)
Combinação de Cores
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
17
![Page 18: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/18.jpg)
CSS – color
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)
18
![Page 19: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/19.jpg)
CSS – color
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%).
19 Ver exemplos: “05 - color.html” e “arquivos/estilos.css”
![Page 20: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/20.jpg)
CSS – background-color
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)
20
![Page 21: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/21.jpg)
CSS – background-color
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.
21 Ver exemplo: 06 - background-color.html”
![Page 22: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/22.jpg)
CSS – background-image
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>
22
![Page 23: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/23.jpg)
CSS – background-image
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).
23
![Page 24: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/24.jpg)
CSS – background-repeat
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 }
24
![Page 25: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/25.jpg)
CSS – background-repeat
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.
25
![Page 26: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/26.jpg)
CSS – background-attachment
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
}
26
![Page 27: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/27.jpg)
CSS – background-position
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
27
![Page 28: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/28.jpg)
CSS – background-position
Exemplos: body {background-image: url(img.jpg);
background-repeat: no-repeat;
background-position: 50% 100% }
body {background-image: url(img.jpg);
background-repeat: no-repeat;
background-position: 25pt 2.5cm }
body {background-image: url(img.jpg);
background-repeat: no-repeat;
background-position: center top }
28
![Page 29: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/29.jpg)
CSS – background-position
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.
29
![Page 30: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/30.jpg)
CSS – background-position
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%).
30
![Page 31: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/31.jpg)
CSS – background
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%}
31
![Page 32: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/32.jpg)
CSS – Modelo de Caixas
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).
32
![Page 33: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/33.jpg)
CSS – Modelo de Caixas 33
![Page 34: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/34.jpg)
CSS – Modelo de Caixas 34
![Page 35: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/35.jpg)
CSS – Modelo de Caixas
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:
35
![Page 36: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/36.jpg)
CSS – Modelo de Caixas 36 Ver exemplo: 07 - Modelo de Caixa.html”
![Page 37: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/37.jpg)
CSS – margin e padding
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; }
37
![Page 38: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/38.jpg)
CSS – margin e padding
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
38
![Page 39: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/39.jpg)
CSS – margin e padding
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;... */
39
![Page 40: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/40.jpg)
CSS – margin e padding
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 %;
40
![Page 41: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/41.jpg)
CSS – margin e padding
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;
41
![Page 42: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/42.jpg)
CSS – border-width
Controla a espessura das bordas. As espessuras de todos os lados ou espessuras individuais através de
border-top-width, border-bottom-width, border-right-width e border-left-width. Sintaxe: border-top-width: comprimento | thin | medium | thick;
border-bottom-width: comprimento | thin |
medium | thick;
border-right-width: comprimento | thin |
medium | thick;
border-left-width: comprimento | thin | medium | thick;
42
![Page 43: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/43.jpg)
CSS – border-width
Exemplos: border-bottom-width: thick;
border-right-width: 5.5px;
border-left-width: 0.2cm;
43
![Page 44: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/44.jpg)
CSS – border-width
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;
44
![Page 45: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/45.jpg)
CSS – border-width
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*/
45
![Page 46: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/46.jpg)
CSS – border-color
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);
46
![Page 47: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/47.jpg)
CSS – border-color
Exemplos: border-bottom-color: rgb(231,45,112);
border-right-color: #0fa97b;
border-left-color: navy;
47
![Page 48: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/48.jpg)
CSS – border-color
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;
48
![Page 49: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/49.jpg)
CSS – border-color
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) */
49
![Page 50: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/50.jpg)
CSS – border-style
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;
50
![Page 51: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/51.jpg)
CSS – border-style
Exemplos: border-bottom-style: none;
border-right-style: solid;
border-left-style: inset;
51
![Page 52: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/52.jpg)
CSS – border-style
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;
52
![Page 53: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/53.jpg)
CSS – border-style
Exemplos: border-style: solid none inset outset;
border-style: solid;
border-style: inset outset;
53
![Page 54: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/54.jpg)
CSS – border
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
54
![Page 55: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/55.jpg)
CSS – border
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
55
![Page 56: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/56.jpg)
CSS – float
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
56
![Page 57: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/57.jpg)
CSS – clear
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;
57
![Page 58: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/58.jpg)
CSS – clear 58
![Page 59: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/59.jpg)
CSS – position, top, left, right e bottom
position, top, left, right e bottom Permitem definir o posicionamento de um objeto. Sintaxe:
position: fixed | relative | absolute | static
left: comprimento | porcentagem | auto
top: comprimento | porcentagem | auto
right: comprimento | porcentagem | auto
bottom: comprimento | porcentagem | auto
As coordenadas para as propriedades left, top, etc. são em relação aos cantos superiores esquerdos dos objetos.
59
![Page 60: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/60.jpg)
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.
60
CSS – position, top, left, right e bottom
![Page 61: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/61.jpg)
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).
61
CSS – position, top, left, right e bottom
![Page 62: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/62.jpg)
Exemplo: considere as 4 imagens a seguir:
62
CSS – position, top, left, right e bottom
![Page 63: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/63.jpg)
Aplicando a seguinte folha de estilos para posicionar as quatro imagens relativamente à sua localização original obtemos a imagem ao lado.
63
<div class="imagem1"> <img src="T1.gif" width=113 border=1> 1 Posição 0 0 </div> <div class="imagem2"> <img src="T2.gif" width=113 border=1> 2 Posição 0 200 </div> <div class="imagem3"> <img src="T3.gif" width=113 border=1> 3 Posição -25 -25 </div> <div class="imagem4"> <img src="T4.gif" width=113 border=1> 4 Posição 100 0 </div>
CSS – position, top, left, right e bottom
![Page 64: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/64.jpg)
64
CSS – position, top, left, right e bottom
div.imagem1 { position: relative; top: 0px; left: 0px; } div.imagem2 { position: relative; top: 0px; left: 200px; } div.imagem3 { position: relative; top: -25px; left: -25px; } div.imagem4 { position: relative; top: 100px; left: 0px; }
![Page 65: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/65.jpg)
Tem-se o seguinte (os retângulos claros indicam a posição original da imagem):
65
CSS – position, top, left, right e bottom Ver exemplo: 08 - relative.html”
![Page 66: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/66.jpg)
Usando posicionamento absoluto, o bloco é movido em relação ao canto superior esquerdo do browser.
66
CSS – position, top, left, right e bottom
div.imagem1 { position: absolute; top: 0px; left: 250px; } div.imagem2 { position: absolute; top: 100px; left: 0px; } div.imagem3 { position: absolute; top: 160px; left: 120px; } div.imagem4 { position: absolute; top: 200px; left: -80px; }
![Page 67: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/67.jpg)
Tem-se o seguinte:
67
CSS – position, top, left, right e bottom Ver exemplo: 09 - absolute.html”
![Page 68: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/68.jpg)
CSS – z-index
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.
68
![Page 69: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/69.jpg)
CSS – display
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.
69
![Page 70: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/70.jpg)
CSS – display
Sintaxe: display: block | inline | list-item | none
Exemplos: p {display: list-item}
img {display: none} /*desliga todas as imagens*/
70
![Page 71: Tutorial Css Parte 2](https://reader038.fdocumentos.tips/reader038/viewer/2022102816/558cf79dd8b42aaa4f8b4654/html5/thumbnails/71.jpg)
CSS – visibility
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 */
71