View
108
Download
0
Category
Preview:
Citation preview
1Pedro Costa Introdução ao CSS
Curso de Jornalismo e Ciências da ComunicaçãoDisciplina de Tecnologia dos Media
Introdução ao CSS
2Pedro Costa Introdução ao CSS
CSS(Cascade Style Sheets) são folhas de estilo que permitem controlar a aparência dos elementos HTML
Vantagens: Grande liberdade de formatação Maior produtividade Maior facilidade de actualização
CSS
3Pedro Costa Introdução ao CSS
Os estilos podem ser inseridos nos documentos de três maneiras diferentes:
Externas - Por meio de um link direcionado para um arquivo de style sheet em separado, funcionando para uma ou mais páginas web.
Internas - Por meio de uma inserção de um style sheet numa única página web
Em linha - Pelo acréscimo de atributos de estilo inline em algumas tags
Implementação
4Pedro Costa Introdução ao CSS
Externas
Neste caso temos um ficheiro exterior que pode ser associado a vários ficheiros html
Exemplo do que temos de escrever no ficheiro html
<html><head><link rel=“STYLESHEET” href=“estilo.css” type=“text/css”><title>...</title></head><body>...
5Pedro Costa Introdução ao CSS
<html><head><style type=“text/css”>h1 {color:#00ff00}h2 {color:#ffff00}P {color: #ffffff}</style></head><body><h1>nivel 1</h1><h2>nivel 2</h2><p>paragrafro</p><body></html>
Internas
Definidas num documento específico. Permitem aplicar o estilo apenas a esse documento. O elemento style têm de ser escrito dentro do head.
6Pedro Costa Introdução ao CSS
Pelo acréscimo de atributos de estilo inline em algumas tags como <p>, <div>, ou <span>
Exemplo<div style="margin-left: 0.5in; font-size: 10pt">Este deve ser um bloco indentado com algum<span style="font-weight: bold; background: #FFFF00"> texto selecionado</span>dentro dele</div>
Em linha
7Pedro Costa Introdução ao CSS
Precedência dos CSS
A ordem de precedência dos cascading style sheets é esta:
•atributos de estilos inline têm precedência sobre tags de style inseridas
•tags de style inseridas por sua vez têm precedência sobre style sheets por link
8Pedro Costa Introdução ao CSS
Sintaxe
Sintaxe Exemplo
Selector { propriedade:valor} Body { background-color: #FFFFFF }
Selector { propriedade:valor; propriedade:valor}
P { text-align:center; color:red}
Selector { propriedade:valor; propriedade:valor;Propriedade:valor}
P {text-align: center;Color: black;Font-family:arial}
Selector,selector,selector{ propriedade:valor }
H1,h2,h3{ color: green }
9Pedro Costa Introdução ao CSS
Sintaxe
Exemplo:
Ficheiro HTML no body
<h1>Tecnologia dos Media</h1>
<p> Informática </p>
Ficheiro CSS
H1 { color:red }
P { color:blue }
Resultado:
Tecnologia dos MediaInformática
10Pedro Costa Introdução ao CSS
Tipos de selectoresSelectores de classe
Um selector de classe permite identificar um conjunto de ocorrências de um elemento e atribuir-lhes um estilo comum.A classe pode ser :
• genérica - .rd{ color:blue}
<p class=rd>texto em azul</p><h1 class=rd>texto tambem em azul</h1>
• um tipo de elementos, ou seja só fica associada a um tipo de elementos
p.p1 { color: red }
<p class=p1>texto em vermelho</p>
11Pedro Costa Introdução ao CSS
Tipos de selectoresSelectores de ID
Um selector de ID permite identificar uma única ocorrência de um elemento HTML. Os selectores ID são criados pelo carácter # seguido do nome.
#nome { color:blue; background: black }
<p id=nome>Só este elemento é que é identificado como nome</p>
12Pedro Costa Introdução ao CSS
Herança
Um aspecto importante de algumas propriedades é o facto de se propagarem para os elementos "filhos". Exemplo: <body> <h1>Título</h1> <p>Parágrafo: texto, texto, texto, texto, texto.</p> ... </body>
body { font-family: Verdana, Arial, sans-serif; font-size: 14px; }
Neste exemplo, não é necessário voltar a definir estas propriedades para os elementos H1 e P. Todos os elementos "filhos" do BODY vão herdar as propriedades de texto definidas para o BODY.
13Pedro Costa Introdução ao CSS
DIV e SPAN
Existem dois elementos genéricos que não têm significado semântico nem produzem nenhum efeito, mas permitem definir secções/blocos e são muito usados com CSS. Permitem agrupar conteúdo em unidades lógicas:
<div>: quebra o fluxo normal do documento
<span>:mantém o fluxo normal do conteúdo
<div class="zonaesquerda"> <p>texto, texto, texto</p> </div> <div class="zonacentral"> <h1>Título</h1> <p> texto, texto, texto, <span class="nota">texto, texto</span>, texto</p> <p> texto, texto, texto, texto, texto, texto</p> </div>
14Pedro Costa Introdução ao CSS
DIV e SPAN
Css
.Zonaesquerda { color: green }
.zonacentral { color: yellow }
.nota { color: red }
Resultado:
texto, texto, texto
Títulotexto, texto, texto, texto, texto textotexto, texto, texto, texto, texto, texto
15Pedro Costa Introdução ao CSS
Pseudo-elementos
p:first-line { text-transform: uppercase }p:first-letter {font-size: 200%}
Pseudo elementos são elementos fictícios que não existem em HTML e que se referem a uma sub parte do elemento HTML.
Utiliza-se o separador : entre o nome do elemento e do pseudo-elemento.
16Pedro Costa Introdução ao CSS
Unidades de medida
Unidade Descrição
% Percentagem de qualquer unidade
em 1 em é igual ao tamanho da fonte do elemento corrente
ex 1 ex é aproximadamente metade da altura da fonte
px pixels
Unidade Descrição
cm Centímetros
in Polegadas
mm Milímetros
pt Ponto (1 pt é 1/72 polegadas )
17Pedro Costa Introdução ao CSS
Unidades de cor
Unidade Descrição Exemplo do vermelho
Nome da cor O nome da cor red
rgb(x,y,z) Um valor rgb rgb(255,0,0)
rgb(x%,y%,z%)
Uma percentagem rgb rgb(100%,0%,0%)
#rrggbb Um número hexadecimal
#ff0000
18Pedro Costa Introdução ao CSS
TextoPropriedade Descrição Valores Exemplofont-size (herdado) Ajusta o tamanho
do textotamanho (pt, in, cm, px)percentagem
{ font-size: 12pt }{ font-size: 200% }
font-family (herdado) Ajusta os tipos de letra e as alternativas (em ordem de preferência)
nome do tipo de letranome da família da fonte
{ font-family: Trebuchet MS, Sans-serif }
text-decoration (não herdado)
Efeitos sobre o texto noneunderlineoverlineline-through
{font-decoration: overline}
font-weight (herdado) Ajusta o peso do tipo
normalboldbolderlighter
{ font-weight: bold }
font-style (herdado) Texto em itálico normalitalic
{font-style: italic}
19Pedro Costa Introdução ao CSS
TextoPropriedade Descrição Valores Exemplotext-align (herdado) Alinhamento do
textoleftCenterrightjustify
{ text-align: center }
text-indent (herdado) indentação da primeira linha do texto
tamanho (pt, in, cm, px) { text-indent: 0.5in }
line-height (herdado) Altura das linhas de um bloco de texto.
tamanho (pt, in, cm, px)percentagem
{line-height: 18p t}{ line-height: 200% }
vertical-align (não herdado)
Alinha o texto verticalmente dentro do elemento
baselinesubsupertoptext-topmiddlebottom
{ vertical-align: top }
20Pedro Costa Introdução ao CSS
Padding
Propriedade Descrição Valores Exemplopadding (herdado) Espaço entre a
borda do elemento e o conteudo do elemento
tamanho (pt, in, cm, px)
{ padding: 20px }
padding-toppadding -leftpadding -bottompadding -right(herdado)
Em relação a cada um dos lados
tamanho (pt, in, cm, px) {padding-top: 0.5in }
21Pedro Costa Introdução ao CSS
Cor e background
Propriedade Descrição Valores Exemplocolor (herdado) Cor do texto Unidades da cor { color: red }
background-color (não herdado)
Cor de fundo de um elemento
Unidades da cor { background-color:
black} Background-image (não herdado)
Ajusta as imagens do fundo
url {background-image: url(‘imagem1.jpg’)}
22Pedro Costa Introdução ao CSS
margens
Propriedade Descrição Valores Exemplomargin (não herdado)
Permite especificar a margem do elemento
tamanho (pt, in, cm, px) { margin: 8px }
margin-topmargin-leftmargin-bottommargin-right(não herdado)
Permite especifar cada uma das margens
tamanho (pt, in, cm, px) { margin-top: 12pt }
23Pedro Costa Introdução ao CSS
Contornos
Propriedade Descrição Valores Exemploborder (herdado) Ajusta o contorno
do elementogrossura: em pixels. estilo: none, dotted, dashed, solid, double.cor: valor da cor.
{ border: 4px double green; }
border-topborder-leftborder-bottomborder-right(não herdado)
Ajusta cada um dos contornos
grossura: em pixels. estilo: none, dotted, dashed, solid, double.cor: valor da cor.
{ border-top: 2px dotted red; }
24Pedro Costa Introdução ao CSS
Listas
Propriedade Descrição Valores Exemplo
list-style-type herdado)
define a aparência do marcador de cada item de uma lista.
Não numéricos:disccirclesquare
{ list-style-type: disc; }
Numéricos:decimaldecimal-leading-zerolower-romanupper-romanLower-latinupper-latin
{ list-style-type: upper-roman; }
25Pedro Costa Introdução ao CSS
Posicionamento
Com CSS é possível alterar o fluxo normal de uma página e definir o posicionamento de cada elemento
26Pedro Costa Introdução ao CSS
Posicionamento
Todos os elementos têm a propriedade position que estabelece a forma de "cálculo" da posição de um elemento. 4 alternativas:
static: o elemento é posicionado segundo o fluxo normal. O valor por defeito.
relative: a posição da "caixa" é calculada em relação à posição normal (static).
absolute: permite posicionar relativamente ao elemento pai.
fixed: o cálculo da posição é igual ao método absoluto, mas o elemento pai é a "janela de visualização" (viewport).
27Pedro Costa Introdução ao CSS
Posicionamento
A propriedade position, é usada juntamente com:
top: deslocamento do lado superior do elemento. left: deslocamento do lado esquerdo do elemento. bottom: deslocamento do lado inferior do elemento. right: delocamento do lado direito do elemento.
e: width: largura do elemento. height: altura do elemento.
As unidades podem ser: Fixas: pixels (px), points (pt), centímetros (cm), milímetros (mm). Relativas: em, percentagem (%)
28Pedro Costa Introdução ao CSS
Posicionamento
Exemplo:
<div class=parte1>1º bloco de informação</div><div class=parte2>2º bloco de informação <br><br><div class=parte2a>1º sub bloco de informação <br>Este bloco está inserido no 2º bloco.</div><br><div class=parte2b>2º sub bloco de informação <br>Este bloco também está inserido no 2º bloco, após o bloco anterior.</div><br><div class=parte2c>3º sub bloco de informação <br>Este bloco também está inserido no 2º bloco, após o bloco anterior.</div></div><div class=parte3>3º bloco de informação </div>
Div=parte1
Div=parte2
Div=parte2a
Div=parte2b
Div=parte2c
Div=parte3
29Pedro Costa Introdução ao CSS
Posicionamento
Continuação do exemplo parte CSS:.parte1 {background-color:#cccccc;font-family:arial;font-size:14pt;width:460px;padding:20px;}.parte2 {background-color:#222222;font-family:arial;font-size:14pt;color:#ffffff;width:460px;padding:20px;}.parte2a {background-color:#666666;font-family:arial;font-size:12pt;width:400px;margin-left:30px;}
.parte2b {background-color:#999999;font-family:arial;font-size:12pt;width:400px;margin-left:30px;}.parte2c {background-color:#666666;font-family:arial;font-size:12pt;width:400px;margin-left:30px;}.parte3 {background-color:#cccccc;font-family:arial;font-size:14pt;width:460px;padding:20px;}
30Pedro Costa Introdução ao CSS
Resultado
31Pedro Costa Introdução ao CSS
Posicionamento Relativo
A posição é calculada em relação à localização natural do elemento.
p {position: relative; top: 10px;right: 50px; }
32Pedro Costa Introdução ao CSS
Posicionamento.parte1 {background-color:#cccccc;font-family:arial;font-size:14pt;width:460px;padding:20px;}.parte2 {background-color:#222222;font-family:arial;font-size:14pt;color:#ffffff;width:460px;padding:20px;position:relative; top:20px; left:40px; }.parte2a {background-color:#666666;font-family:arial;font-size:12pt;width:400px;margin-left:30px;}
.parte2b {background-color:#999999;font-family:arial;font-size:12pt;width:400px;margin-left:30px;}.parte2c {background-color:#666666;font-family:arial;font-size:12pt;width:400px;margin-left:30px;}.parte3 {background-color:#cccccc;font-family:arial;font-size:14pt;width:460px;padding:20px;}
33Pedro Costa Introdução ao CSS
Resultado
34Pedro Costa Introdução ao CSS
Posicionamento Absoluto
A posição do elemento é calculada em relação ao "pai". Temos a questão de saber qual é o pai?
p {position: absolute; top: 10px;left: 50px; }
div {position: relative;p {position: absolute; top: 10px;left: 50px; }
Exemplo 1: Uso isolado do position absolute
Neste caso o pai deste elemento passa a ser o body, por isso o elemento foi lá para cima
Exemplo 2: Uso do position absolute com position relativeNeste caso o pai deste elemento passa a ser o elemento que tem a position relative.Nota o elemento que usa o absolute tem de estar dentro do elemento que usa o relative
35Pedro Costa Introdução ao CSS
Posicionamento.parte1 {background-color:#cccccc;font-family:arial;font-size:14pt;width:460px;padding:20px;}.parte2 {background-color:#222222;font-family:arial;font-size:14pt;color:#ffffff;width:460px;padding:20px;}.parte2a {background-color:#666666;font-family:arial;font-size:12pt;width:400px;margin-left:30px;position:absolute; top:0;
right:0; }
.parte2b {background-color:#999999;font-family:arial;font-size:12pt;width:400px;margin-left:30px;}.parte2c {background-color:#666666;font-family:arial;font-size:12pt;width:400px;margin-left:30px;}.parte3 {background-color:#cccccc;font-family:arial;font-size:14pt;width:460px;padding:20px;}
36Pedro Costa Introdução ao CSS
Resultado
37Pedro Costa Introdução ao CSS
Posicionamento.parte1 {background-color:#cccccc;font-family:arial;font-size:14pt;width:460px;padding:20px;}.parte2 {background-color:#222222;font-family:arial;font-size:14pt;color:#ffffff;width:460px;padding:20px;position:relative;}.parte2a {background-color:#666666;font-family:arial;font-size:12pt;width:400px;margin-left:30px;position:absolute; top:0;
right:0; }
.parte2b {background-color:#999999;font-family:arial;font-size:12pt;width:400px;margin-left:30px;}.parte2c {background-color:#666666;font-family:arial;font-size:12pt;width:400px;margin-left:30px;}.parte3 {background-color:#cccccc;font-family:arial;font-size:14pt;width:460px;padding:20px;}
38Pedro Costa Introdução ao CSS
Resultado
39Pedro Costa Introdução ao CSS
Posicionamento Fixo
Igual ao posicionamento absoluto, mas relativamente à janela.
p {position: fixed; top: 50px;left: 10px; }
40Pedro Costa Introdução ao CSS
Posicionamento Float
A propriedade float permite desligar o elemento do fluxo normal e deslocá-lo para a esquerda ou direita da linha. O mais interessante é que o restante conteúdo pode fluir paralelamente ao elemento.
Valores possíveis: none, left, right;
img { float: left; }
Recommended