0% acharam este documento útil (0 voto)

0 visualizações143 páginas

Slide CSS

O documento apresenta uma introdução ao CSS 3, explicando suas funções na separação de conteúdo, estilo e comportamento em desenvolvimento web. Ele detalha métodos de aplicação de CSS, como inline, embarcado e externo, além de discutir propriedades e seletores CSS. O texto também aborda a importância do cascateamento de estilos e a utilização de unidades de medida em CSS.

Enviado por

williamlapa25

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

0 visualizações143 páginas

Slide CSS

Enviado por

williamlapa25

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Introdução ao CSS 3

Prof. David Fernandes de Oliveira

Instituto de Computação
UFAM
Introdução ao CSS 3

Conforme já visto, o desenvolvimento client-side é baseado
em 3 camadas principais:
―
Conteúdo, viabilizado pelo HTML
―
Estilo, viabilizado pelo CSS
―
Comportamento, viabilizado pelo JavaScript

As camadas possibilitam o desenvolvimento independente de
cada área da produção
―
Se quisermos modificar o design, podemos fazê-lo editando
apenas o CSS, sem se preocupar com HTML ou Javascript

Nesta primeira parte do curso, iremos abordar a segunda
camada: o Estilo, viabilizado pelo CSS
Introdução ao CSS 3

CSS é uma abreviação de Cascading Style Sheet

Tem por finalidade especificar a apresentação ou estilo dos
elementos de uma página

Segundo a W3C (World Wide Consortium):
―
O CSS é um mecanismo simples para adicionar estilos, por
exemplo, fontes, cores e espaçamentos aos documentos HTML

O principal benefício do CSS é a separação do conteúdo,
viabilizado pelo HTML, do estilo do documento HTML

É possível mudar completamente o estilo de uma página
alterando apenas seu código CSS
―
Exemplo: [Link]
Introdução ao CSS 3
Introdução ao CSS 3

Usado para separar o layout das páginas do seu conteúdo e
estrutura
– Exemplo: [Link]

Validador CSS:
– [Link]/css-validator/
– Esta ferramenta é útil para garangir que seu código CSS está
correto e funcionará nos browsers compatíveis com essa
tecnologia
Estilos Inline

Podemos aplicar CSS a um documento através de três métodos
distintos:
―
Método inline, método embarcado, e método externo

Estilos inline declaram o formato de um elemento usando o
atributo style do HTML 5
<h1 style="font-size: 22px; color: red">
Instituto de Computação
</h1> Cada propriedade
CSS é seguida
por dois pontos e
As propriedades o valor da
são separadas propriedade
por ponto e
vírgula
Estilos Inline

Podemos aplicar CSS a um documento através de três métodos
distintos:
―
Método inline, método embarcado, e método externo

Estilos inline declaram o formato de um elemento usando o
atributo style do HTML 5
<h1 style="font-size: 22px; color: red">
Instituto de Computação
</h1> Cada propriedade
CSS é seguida
por dois pontos e
As propriedades o valor da
são separadas propriedade
por ponto e
vírgula
Estilos Inline

Podemos aplicar CSS a um documento através de três métodos
distintos:
Método inline, método embarcado, e método externo
― No entanto, note que estilos inline não são capazes de

separar o conteúdo (criado HTML) dos estilos (criado pelo CSS),


Estilos inline
e por isso seudeclaram o evitado
uso deve ser formato de um elemento usando o
atributo style do HTML 5
<h1 style="font-size: 22px; color: red">
Instituto de Computação
</h1> Cada propriedade
CSS é seguida
por dois pontos e
As propriedades o valor da
são separadas propriedade
por ponto e
vírgula
Estilos Embarcados

Uma segunda opção para incorporar código CSS nas páginas
Web é através dos estilos embarcados

Nessa técnica, as diretrizes CSS são adicionadas ao conteúdo
HTML através do elemento <style>
―
Tais estilos são adicionados no cabeçalho da página, entre <head>
e </head>
<style>
h1 {
font-size: 22px;
color: red;
}
</style>

<h1>Instituto de Computação</h1>
Estilos Embarcados

Uma segunda opção para incorporar código CSS nas páginas
Web é através dos estilos embarcados

Nessa técnica,
Seletorasdas
diretrizes CSS são adicionadas ao conteúdo
regiões a serem
HTML através do elemento <style>
estilizadas
―
Tais estilos são adicionados no cabeçalho da página, entre <head>
e </head>
<style>
h1 {
font-size: 22px;
color: red;
}
</style>

<h1>Instituto de Computação</h1>
Estilos Externos

Style sheets externos são arquivos que possuem apenas
diretrizes CSS

São úteis para criar um look-and-feel uniforme para todo o site
―
Diferentes páginas podem usar o mesmo arquivo de estilo

Torna a navegação mais rápida, por causa do cacheamento do
browser

Forma de chamada, adicionada no elemento head:
<link rel="stylesheet" type="text/css" href="[Link]">
Estilos Externos

Style sheets externos são arquivos que possuem apenas
diretrizes CSS
h1 {

São úteis para
<!DOCTYPE criar um look-and-feel
html> uniforme
font-size: para todo o site
22px;
<html> color: red;
―
Diferentes
<head> páginas podem usar o} mesmo arquivo de estilo
<meta charset="utf-8">
Arquivo

Torna<title>Instituto
a navegação mais rápida, por causa do cacheamento
de Computação</title>
do
[Link]
browser
<link rel="stylesheet" href="[Link]">
</head>

Forma de chamada, adicionada no elemento head:
<body>
<h1>Instituto de Computação</h1>
<link rel="stylesheet" type="text/css" href="[Link]">
</body>
</html>
Estilos Externos

Style sheets externos são arquivos que possuem apenas
diretrizes CSS
h1 {

São úteis para
<!DOCTYPE criar um look-and-feel
html> uniforme
font-size: para todo o site
22px;
<html> color: red;
―
Diferentes
<head> páginas podem usar o} mesmo arquivo de estilo
<meta charset="utf-8">
Arquivo

Torna<title>Instituto
a navegação mais rápida, por causa do cacheamento
de Computação</title>
do
[Link]
browser
<link rel="stylesheet" href="[Link]">
</head>

Forma de chamada, adicionada no elemento head:
<body>
<h1>Instituto de Computação</h1>
<link rel="stylesheet" type="text/css" href="[Link]">
</body>
</html>
Propriedade color

A propriedade color é usada para definir a cor de um texto

Nomes de cores e códigos hexadecimais podem ser usados
como valores da propriedade color

Uma lista completa de cores com seus respectivos nomes pode
ser encontrada em [Link]
Propriedade color

Muitas cores possuem nome, alem do código hexadecimal
Propriedade color

O plugin ColorZilla do Chrome e Firefox permite a identificação
de uma cor específica adotada por uma dada página
Seletores CSS

Usamos os seletores CSS para especificar os elementos HTML
que serão estilizados por um conjunto de regras CSS

Por enquanto, veremos três tipos de seletores:
―
Seletores de elementos
―
Seletores de IDs
―
Seletores de Classes
Seletores de Elementos

Os seletores de elementos são usados para especificar o estilo
de um único tipo de elemento HTML
body {
margin: 0;
padding: 0;
border-top: 1px solid #ff0;
}

h1, h2, h3, h4, h5, h6 {

font-family: arial, helvetica, sans-serif;
}
Seletores de ID

O ID permite a seleção de um único elemento da página HTML
<p id="intro">Este é meu texto introdutório</p>

#intro {
border-bottom: 2px solid #FFFFFF;
}


Os ids devem ser únicos, isto é, não pode haver mais de um
elemento com mesmo id em uma página

O ID é reconhecido no CSS pelo sinal de #
Seletores de Classes

O seletores de classes possuem a mesma utilidade que o ID:
identificar elementos

No entanto, ele é usado para criar uma classe de elementos
que terão características de estilo iguais

<p class="intro">Este é meu texto introdutório</p>

.intro {
border-bottom: 2px solid #FFFFFF;
}
Propriedade font-family

A propriedade font-family especifica o nome da fonte a ser
usada por um elemento
―
Diversas fontes podem ser informadas
―
Se o browser não suportar a primeira fonte informada, ele
tentará a fonte seguinte, e assim por diante
―
Fontes genéricas permitem selecionar um tipo de fonte, ao
invés de uma fonte específica
h1 {
font-family: tahoma, helvetica, sans-serif;
}
Propriedade font-family

Fontes genéricas permitem selecionar um tipo de fonte, ao
invés de uma fonte específica
Propriedade font-family
Propriedade font-family

Além da propriedade font-family, existe uma série de

outras propridades de fontes, tais como: font-style,
font-weight e font-size.
Fontes de Estilo

Cada elemento de uma página possui um conjunto de proprie-
dades CSS que será usado pelo browser para renderizá-lo

Para identificar essas propriedades, o browser precisa acessar
todas as fontes de estilo disponíveis
―
Até então, já vimos três diferentes formas de definir os estilos de
suas páginas: estilos inline, embarcados, e externos

Além dessas três fontes de estilo, ainda existe a fonte de estilo
padrão de cada browser
Fontes de Estilo

Os estilos do browser são os estilos padrões usados pelo
browser quando nenhum outro estilo é informado
―
Estes estilos podem variar um pouco entre diferentes browsers,
mas eles tendem a ser similares
Cascateamento de Estilos

Para renderizar um elemento de uma página, os browsers
buscam por suas propriedades CSS através da seguinte ordem:
―
Estilos do browser
―
Estilos externos Menor
prioridade
―
Estilos embarcados
―
Estilos Inline style
Maior
prioridade
Cascateamento de Estilos

Qual será a cor do título <h1> da página abaixo?
<html>
<head>
<meta charset="utf-8">
<title>Instituto de Computação</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1 style="color: blue">Instituto de Computação</h1>
<p>
O Instituto de Computação (IComp), antigo (...)
</p>
</body>
</html>
Cascateamento de Estilos

Qual será a cor do título <h1> da página abaixo?
<html>
<head>
<meta charset="utf-8">
<title>Instituto de Computação</title>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1 style="color: blue">Instituto de Computação</h1>
<p>
O Instituto de Computação (IComp), antigo (...)
</p>
</body>
</html>
Estilos Importantes

É possível mudar a ordem de cascateamento através do
comando !important
<html>
<head>
<meta charset="utf-8">
<title>Instituto de Computação</title>
<style>
h1 {
color: red !important;
}
</style>
</head>
<body>
<h1 style="color: blue">Instituto de Computação</h1>
<p>
O Instituto de Computação (IComp), antigo (...)
</p>
...
Estilos Importantes

É possível mudar a ordem de cascateamento através do
comando !important
<html>
<head>
<meta charset="utf-8">
<title>Instituto de Computação</title>
<style>
h1 {
color: red !important;
}
</style>
</head>
<body>
<h1 style="color: blue">Instituto de Computação</h1>
<p>
O Instituto de Computação (IComp), antigo (...)
</p>
...
Tamanhos CSS

Muitas propriedades CSS requerem a especificação de um
tamanho ou distância
―
Exemplo 1: a propriedade width é usada para informar o
comprimento de um elemento
―
Exemplo 2: a propriedade font-size é usada para
informar o tamanho da fonte de um elemento
<style type="text/css">
p {
background: gray;
color: white;
width: 12cm;
font-size: 20pt;
}
</style>
Unidades Absolutas

No exemplo anterior, foram usadas as unidades cm e pt, que
são exemplos de unidades absolutas

O CSS suporta quatro tipos de unidades absolutas:
―
in: inches (polegadas)
―
px: pixels (1/96 de polegada, ou seja, 96px = 1 inch)
―
pt: points (1/72 de polegada, ou seja, 72px = 1 inch)
―
cm: centimetros
―
mm: millimeters
Unidades Relativas

Unidades relativas são medidas em relação ao tamanho de
outros elementos da página

O CSS suporta as seguintes unidades relativas:
– em: relativo ao tamanho da fonte do elemento
– rem: relativo ao tamanho da fonte do elemento html (root)
– %: relativo ao valor da propriedade para o elemento pai
– vw: relativo à largura do viewport (janela do browser ou
app). 1vh = 1/100 da largura do viewport
– vh: relativo à altura do viewport (janela do browser ou app).
1vh = 1/100 da altura do viewport
Unidades Relativas

A unidade em é usada para estabelecer tamanhos relativos ao
tamanho da fonte do elemento atual
<style>
p {
color: white;
background: grey;
height: 2em;
}
</style>

<p style="font-size: 20px">

Instituto de Computação
</p>
<p style="font-size: 14px">
Universidade Federal do Amazonas
</p>
Seletor Universal

O seletor universal seleciona todos os elementos em um
documento
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
* {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="[Link]
<p>Estou aprendendo <span>CSS</span>.</p>
<a href="[Link] o website da W3C</a>
</body>
</html>
Seletor Universal

O seletor universal seleciona todos os elementos em um
documento
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
* {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="[Link]
<p>Estou aprendendo <span>CSS</span>.</p>
<a href="[Link] o website da W3C</a>
</body>
</html>
Seleção por elementos

Para selecionar todas as instâncias de um elemento (tag),
basta usar o nome do elemento como seletor
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="[Link]
<p>Estou aprendendo <span>CSS</span>.</p>
<a href="[Link] o website da W3C</a>
</body>
</html>
Seleção por elementos

Para selecionar todas as instâncias de um elemento (tag),
basta usar o nome do elemento como seletor
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
a {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a href="[Link]
<p>Estou aprendendo <span>CSS</span>.</p>
<a href="[Link] o website da W3C</a>
</body>
</html>
Seleção por classes

Para selecionar todas as instâncias de um elemento (tag),
basta usar o nome do elemento como seletor
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
.cl1 {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a href="[Link] o website da W3C</a>
</body>
</html>
Seleção por classes

Para selecionar todas as instâncias de um elemento (tag),
basta usar o nome do elemento como seletor
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
.cl1 {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a href="[Link] o website da W3C</a>
</body>
</html>
Seleção por classes

Também é possível combinar seleção por elemento e por
classe
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
span.cl1 {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a href="[Link] o website da W3C</a>
</body>
</html>
Seleção por classes

Também é possível combinar seleção por elemento e por
classe
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
span.cl1 {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a href="[Link] o website da W3C</a>
</body>
</html>
Seleção por ID

A seleção por ID permite a seleção de elementos pelo valor do
atributo global id
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
#w3clink {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a id="w3clink" href="[Link] a W3C</a>
</body>
</html>
Seleção por ID

A seleção por ID permite a seleção de elementos pelo valor do
atributo global id
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
#w3clink {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a id="w3clink" href="[Link] a W3C</a>
</body>
</html>
Seleção por atributo

A seleção por atributo permite a seleção de elementos a partir
de condições sobre seus atributos
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
[href*=w3c] {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a id="w3clink" href="[Link] a W3C</a>
</body>
</html>
Seleção por atributo

A seleção por atributo permite a seleção de elementos a partir
de condições sobre seus atributos
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
[href*=w3c] {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a id="w3clink" href="[Link] a W3C</a>
</body>
</html>
Seleção por atributo

Tipos de condições na seleção por atributo
União de Seletores

Seletores separados por vírgulas selecionam todos os
elementos que casam com um dentre os seletores informados
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
.cl2, [href*=w3c] {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a id="w3clink" href="[Link] a W3C</a>
</body>
</html>
União de Seletores

Seletores separados por vírgulas selecionam todos os
elementos que casam com um dentre os seletores informados
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
.cl2, [href*=w3c] {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a id="w3clink" href="[Link] a W3C</a>
</body>
</html>
Selecionando Descendentes

O seletor de descendentes é usado para selecionar elementos
contidos dentro de outro elemento
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p .cl1 {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a id="w3clink" href="[Link] a W3C</a>
</body>
</html>
Selecionando Descendentes

O seletor de descendentes é usado para selecionar elementos
contidos dentro de outro elemento
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p .cl1 {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a id="w3clink" href="[Link] a W3C</a>
</body>
</html>
Selecionando Descendentes

O seletor de descendentes é usado para selecionar elementos
contidos dentro de outro elemento
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p .cl1 {
border: thin black solid;
padding: 4px;
}
O primeiro seletor é aplicado, e então os descendentes
</style>
dos elementos selecionados são avaliados de acordo
</head>
com o segundo seletor.
<body>
<a class="cl1" href="[Link]
O segundo
<p>Estou seletor <span
aprendendo irá avaliar todos cl2">CSS</span>.</p>
class="cl1 os elementos dentro
<ado primeiro seletor,
id="w3clink" e não apenas seus filhos
href="[Link] imediatos.
a W3C</a>
</body>
</html>
Selecionando Filhos

Usando o seletor de filhos, podemos selecionar os
descendentes imediados de um dado elemento
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p > .cl1 {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a id="w3clink" href="[Link] a W3C</a>
</body>
</html>
Selecionando Filhos

Usando o seletor de filhos, podemos selecionar os
descendentes imediados de um dado elemento
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p > .cl1 {
border: thin black solid;
padding: 4px;
}
</style>
</head>
<body>
<a class="cl1" href="[Link]
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a id="w3clink" href="[Link] a W3C</a>
</body>
</html>
Selecionando Filhos

Usando o seletor de filhos, podemos selecionar os
descendentes imediados de um dado elemento
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style type="text/css">
p > .cl1 {
border: thin black solid;
padding: 4px;
}
</style>
Exercício
</head> Acesse o site [Link]
<body> e identique os seletores apropriados em
<a class="cl1" href="[Link]
cada caso.
<p>Estou aprendendo <span class="cl1 cl2">CSS</span>.</p>
<a id="w3clink" href="[Link] a W3C</a>
</body>
</html>
Box Model

O box model do CSS é essencialmente uma caixa que envolve
todos os elementos do tipo block

Esta caixa possui quatro elementos, conforme mostrado na
figura abaixo:
Bordas

Existem três propriedades CSS básicas para bordas: border-
width, border-style, e border-color
<style type="text/css">
p {
border-width: 5px;
border-style: solid;
border-color: blue;
}
</style>

<p>
O Instituto de Computação é o mais novo
instituto da UFAM, tendo sido formado a
partir do antigo Departamento de Ciência
da Computação (DCC).
</p>
Bordas

Existem três propriedades CSS básicas para bordas: border-
width, border-style, e border-color
<style type="text/css">
p {
border-width: 5px;
border-style: solid;
border-color: blue;
}
</style>

<p>
O Instituto de Computação é o mais novo
instituto da UFAM, tendo sido formado a
partir do antigo Departamento de Ciência
da Computação (DCC).
</p>
Bordas

A tabela ao lado mostra as
opções disponíveis para a
propriedade border-style

Além destas, existe a opção
none, que força a não
apresentação da borda.
Bordas

Ao invés de usar cada propriedade individualmente, podemos
adotar um atalho:
<style type="text/css">
p {
border: 5px solid blue;
}
</style>

<p>
O Instituto de Computação é o mais novo
instituto da UFAM, tendo sido formado a
partir do antigo Departamento de Ciência
da Computação (DCC).
</p>
Bordas

Ao invés de usar cada propriedade individualmente, podemos
adotar um atalho:
<style type="text/css">
p {
border: 5px solid blue;
}
</style>

<p>
O Instituto de Computação é o mais novo
Para usardaoUFAM,
instituto atalho, é preciso
tendo obedecer
sido formado a a
ordem:
partir do width
antigo style color de Ciência
Departamento
da Computação (DCC).
</p>
Bordas Arredondadas

Podemos criar bordas arredondadas usando as propriedades
border radius

Existem 5 propriedades associadas com essa capacidade
Bordas Arredondadas

No exemplo abaixo, apenas a borda superior à esquerda será
arredondada
<style type="text/css">
p {
border: 5px solid blue;
border-top-left-radius: 16px;
}
</style>

<p>
O Instituto de Computação é o mais novo
instituto da UFAM, tendo sido formado a
partir do antigo Departamento de Ciência
da Computação (DCC).
</p>
Exercício

Codifique uma página html/css cujo resultado seja similar ao
da figura abaixo
github
CSS1
Padding

Padding (acolchoamento) é o espaço entre o conteúdo do
elemento e sua borda
Padding

É possível atribuir um valor de padding para cada lado de um
elemento caixa, ou atribuir um único valor de padding para o
elemento inteiro
Padding

É possível atribuir um valor de padding para cada lado de um
elemento caixa, ou atribuir um único valor de padding para o
elemento inteiro

Quando informamos o
padding usando
porcentagens, a
porcentagem é sempre
relativa ao comprimento
do elemento pai.
A altura não é levada
em conta.
Padding

Declarando os valores de padding para cada lado
<style type="text/css">
div {
border: 10px double black;
background-color: lightgray;
background-clip: content-box;
padding-top: 10px;
padding-right: 16px;
padding-bottom: 6px;
padding-left: 12px;
}
</style>
Padding

O padding também pode ser feito em uma única declaração

Para isso, basta usar o comando padding e definir os valores
na seguinte ordem: topo, direita, fundo e esquerda
top
padding-top: 10px;
padding-right: 16px;
padding-bottom: 6px;
padding-left: 12px;

padding: 10px 16px 6px 12px;

left right

Os estilos acima
produzem o
mesmo efeito
bottom
Margin

Margin é o espaço entre a borda do elemento e aquilo que o
rodeia na página Web
Margin

É possível atribuir um valor de margin para cada lado de um
elemento caixa, ou atribuir um único valor de margin para o
elemento inteiro
Margin

É possível atribuir um valor de margin para cada lado de um
elemento caixa, ou atribuir um único valor de margin para o
elemento inteiro

Quando informamos a
margem usando
porcentagens, a
porcentagem é sempre
relativa ao comprimento
do elemento pai.
A altura não é levada
em conta.
Margin

Declarando os valores de margin vertical e horizontal
<style type="text/css">
img {
border: 4px solid black;
background: lightgray;
margin: 4px 6px;
}
</style>
...
<body>
<img src="imgs/css_pq.png" alt="CSS3">
<img src="imgs/css_pq.png" alt="CSS3">
</body>
Margin

Declarando os valores de margin vertical e horizontal
<style type="text/css">
img {
border: 4px solid black;
background: lightgray;
margin: 4px 6px;
}
</style>
...
<body>
<img src="imgs/css_pq.png" alt="CSS3">
<img src="imgs/css_pq.png" alt="CSS3">
</body>
Sombra de Caixas

Uma das ferramentas mais aguardadas do CSS3 foi a
habilidade de adicionar sombras aos elementos

A sompra é feita através da propriedade box-shadow, que
veremos a seguir
Sombra de Caixas

Os valores da propriedade box-shadow seguem o seguinte
formato:
box-shadow: hoffset voffset blur spread color inset


hoffset, a offset horizontal, que é um valor de comprimento
– Valores positivos criam uma sombra pra direita, e negativos
para a esquerda

voffset, a offset vertical, que é um valor de comprimento
– Valores positivos criam uma sombra pra baixo, e negativos para
cima
Sombra de Caixas

Os valores da propriedade box-shadow seguem o seguinte
formato:
box-shadow: hoffset voffset blur spread color inset


blur, especifica o tamanho do borrão. Quanto maior o
valor, mais borrada fica a sombra. Opcional.

spread, especifica o grau de espalhamento. Opcional.

color, especifica a cor da sombra. Se omitodo, o browser irá
escolher a cor. Opcional.

inset, causa uma sombra dentro da caixa, e não for a.
Opcional.
Sombra de Caixas

Exemplo de sombra externa à caixa:
<style type="text/css">
div {
margin: 100px;
border: medium solid black;
box-shadow: 4px 4px 10px 2px gray;
}
</style>

Ordem dos valores:

hoffset voffset blur
spread color inset
Sombra de Caixas

Exemplo de sombra externa à caixa:
<style type="text/css">
div {
margin: 100px;
border: medium solid black;
box-shadow: 2px 2px 4px 2px gray inset;
}
</style>

Ordem dos valores:

hoffset voffset blur
spread color inset
Sombra de Caixas

Exemplo de sombra interna à caixa: É possível definir
múltiplas sombras
<style type="text/css"> em uma única
div { declaração da
margin: 100px; propriedade
border: medium solid black; box-shadow
box-shadow: 4px 4px 10px 2px gray,
2px 2px 4px 2px gray inset;
}
</style>

Ordem dos valores:

hoffset voffset blur
spread color inset
Acesse o site da w3schools e faça os seguintes exercícios de CSS:
Seletores, How to, Border, Margin, Padding, Height/Width e Box
Model.
Background

Propriedades relacionadas com o background:
Background

Propriedades relacionadas com o background:
<style type="text/css">
div {
border: medium solid black;
background-color: lightgray;
background-image: url(imgs/css_pq.png);
background-size: 40px;
background-repeat: repeat-x;
}
</style>

<div>
O Instituto de Computação é o mais novo instituto
da UFAM, tendo sido formado a partir do antigo
Departamento de Ciência da Computação (DCC).
</div>
Background

Propriedades relacionadas com o background:
<style type="text/css">
div {
border: medium solid black;
background-color: lightgray;
background-image: url(imgs/css_pq.png);
background-size: 40px;
background-repeat: repeat-x;
}
</style>

<div>
O Instituto de Computação é o mais novo instituto
da UFAM, tendo sido formado a partir do antigo
Departamento de Ciência da Computação (DCC).
</div>
Background

Possíveis valores para a propriedade background-repeat
Background

A propriedade background-position seta a localização da
imagem de background
– É mais útil quando a imagem não está sendo repetida
<style type="text/css">
div {
border: medium solid black;
background-color: lightgray;
background-image: url(imgs/css_pq.png);
background-size: 40px;
background-repeat: no-repeat;
background-position: 30px 10px;
}
</style>
Background

A propriedade background-position seta a localização da
imagem de background
– É mais útil quando a imagem não está sendo repetida
<style type="text/css">
div {
border: medium solid black;
background-color: lightgray;
background-image: url(imgs/css_pq.png);
background-size: 40px;
background-repeat: no-repeat;
background-position: 30px 10px;
}
</style>
Exercício

Codifique uma página html/css cujo resultado seja similar
ao da figura abaixo
github
CSS3
Tamanho dos Elementos

As propriedades abaixo são usadas para definir o tamanho
dos elementos das páginas
Tamanho dos Elementos

As propriedades abaixo são usadas para definir o tamanho
dos elementos das páginas

O valor padrão de todas essas propriedades é auto,

para que o browser procure estimar o tamanho
correto dos elementos com base no fluxo do
conteúdo da página
Tamanho dos Elementos

Pode-se usar as propriedades min- and max- para limitar o
quanto o browser pode redimensionar um elemento
<style type="text/css">
.bloco {
background: lightgray;
border: 4px solid black;
margin: 2px;
box-sizing: border-box;
<div class="bloco">
min-width: 100px;
<img src="/img/[Link]" />
width: 50%;
</div>
max-width: 200px;
padding: 8px;
}
.bloco > img {
width: 100%;
}
</style>
Tamanho dos Elementos

Pode-se usar as propriedades min- and max- para limitar o
quanto o browser pode redimensionar um elemento
<style type="text/css">
img {
background: lightgray;
border: 4px solid black;
margin: 2px;
box-sizing: border-box;
min-width: 100px;
width:50%;
max-width: 200px;
}
</style>
Lidando com Transbordamento

Quando diminuímos o tamanho de um elemento, seu
conteúdo pode não caber mais em seu interior

Por padrão, quando isso ocorre, o browser deixa o
conteúdo do elemento transbordar para fora
<style type="text/css">
div {
width: 200px;
height: 100px;
border: medium double;
}
</style>
Lidando com Transbordamento

Quando diminuímos o tamanho de um elemento, seu
conteúdo pode não caber mais em seu interior

Por padrão, quando isso ocorre, o browser deixa o
conteúdo do elemento
No entanto, transbordar para
esse comportamento fora
padrão
pode ser mudado através das propriedades
<style type="text/css">
div {
overflow
width: 200px;
height: 100px;
border: medium double;
}
</style>
Lidando com Transbordamento

Propriedades overflow existentes
Lidando com Transbordamento

Possíveis valores para a propriedade overflow:
Lidando com Transbordamento

overflow: hidden - o conteúdo é truncado, e apenas a
porção dentro da caixa é apresentada
<style type="text/css">
div {
width: 200px;
height: 100px;
overflow: hidden;
border: medium double;
}
</style>
Lidando com Transbordamento

overflow: auto – a barra de rolagem aparece caso haja
transbordamento
<style type="text/css">
div {
width: 200px;
height: 100px;
overflow: auto;
border: medium double;
}
</style>
Lidando com Transbordamento

overflow: scroll – a barra de rolagem aparece, havendo
transbordamento ou não
<style type="text/css">
div {
width: 200px;
height: 100px;
overflow: scroll;
border: medium double;
}
</style>
Tipos de Caixas dos Elementos

Através da propriedade display podemos mudar o tipo de
caixa de um elemento

Alguns valores da propriedade display:
Tipos de Caixas dos Elementos

Quando usamos display: block, é criado um elemento do
tiplo bloco
– Este elemento é verticalmente separado dos demais elementos
que estão à sua volta
– O elemento faz uma quebra de linha antes e depois de si
mesmo

O elemento p, usado para criar parágrafos, inclui essa
propriedade/valor em seu estilo padrão
Tipos de Caixas dos Elementos

Usando o valor block para a propriedade display
<style type="text/css">
div {
border: medium solid black
}
span {
display: block;
border: medium double black;
margin: 2px;
}
</style>
...
<div>
Dentro do estilo CSS, a propriedade CSS display é
utilizada para indicar a forma como
os <span>elementos HTML</span> serão dispostos
na página ou em espaços delimitados.
</div>
Tipos de Caixas dos Elementos

Usando o valor block para a propriedade display
<style type="text/css">
div {
border: medium solid black
}
span {
display: block;
border: medium double black;
margin: 2px;
}
</style>
...
<div>
Dentro do estilo CSS, a propriedade CSS display é
utilizada para indicar a forma como
os <span>elementos HTML</span> serão dispostos
na página ou em espaços delimitados.
</div>
Tipos de Caixas dos Elementos

Quando usamos display: inline, o elemento não se separa
do fluxo do conteúdo

Certas propriedades típicas de blocos, tais como width e
height, são ignoradas
<style type="text/css">
div {
display: inline;
}
span {
display: inline;
border: medium double black;
margin: 20em;
width: 100em;
height: 200em;
}
</style>
Tipos de Caixas dos Elementos

Usando display: inline-block, criamos um elemento com
características bloco e inline
– Não existe quebras de linha antes e depois do elemento
– Entretando, dentro do elemento, propriedades tais como width
e height podem ser aplicadas
<style type="text/css">
div {
display: inline;
}
span {
display: inline-block;
border: medium double;
width: 10em;
height: 2em;
margin: 3px;
}
</style>
Tipos de Caixas dos Elementos

Usando display: none, o elemento não aparece na página
<p>A declaração display: block faz com que o elemento HTML
seja renderizado como bloco, tal como os parágrafos e os
cabeçalhos o são.</p>
<p id="toggle">A declaração display: none faz com que o elemento
HTML não seja renderizado.</p>

<button>Block</button><button>None</button>

const buttons = [Link]("BUTTON");

for (var i = 0; i < [Link]; i++) {
buttons[i].onclick = function(e) {
[Link]("toggle").[Link]=
[Link];
};
}
Tipos de Caixas dos Elementos

Usando display: none, o elemento não aparece na página
<p>A declaração display: block faz com que o elemento HTML
seja renderizado como bloco, tal como os parágrafos e os
cabeçalhos o são.</p>
<p id="toggle">A declaração display: none faz com que o elemento
HTML não seja renderizado.</p>

<button>Block</button><button>None</button>

const buttons = [Link]("BUTTON");

for (var i = 0; i < [Link]; i++) {
buttons[i].onclick = function(e) {
[Link]("toggle").[Link]=
[Link];
};
}
Alinhamento de Textos

A propriedade text-align é usada para configurar o
alinhamento do conteúdo textual

Seus possíveis valores são: left, right, center e justify
Alinhamento de Textos

A propriedade text-align é usada para configurar o
alinhamento do conteúdo textual

Seus possíveis valores são: left, right, center e justify

Além da propriedade text-align, existe uma série de

outras propridades de textos: text-indent, text-transform,
text-decoration, word-spacing e letter-spacing.
Posicionamento de conteúdo

A propriedade position define o método com que um
elemento é posicionado na página

Possíveis valores da propriedade position:
Posicionamento de conteúdo
Podemos usar as propriedades

Exemplo de uso do position top, bottom, left, e right para
img { deslocar o elemento
top: 20px; especificado pela propriedade
left: 200px; position
}