Pedro Costa Introdução ao CSS 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao CSS

1Pedro Costa Introdução ao CSS

Curso de Jornalismo e Ciências da ComunicaçãoDisciplina de Tecnologia dos Media

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


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


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>...


<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.


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


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


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 }


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


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>


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>


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.


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>


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


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.


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 )


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


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}


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 }


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 }


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’)}


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 }


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; }


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; }


Posicionamento

Com CSS é possível alterar o fluxo normal de uma página e definir o posicionamento de cada elemento


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).


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 (%)


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


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;}


Resultado


Posicionamento Relativo

A posição é calculada em relação à localização natural do elemento.

p {position: relative; top: 10px;right: 50px; }


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;}



Resultado


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


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; }



Resultado


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; }



Resultado


Posicionamento Fixo

Igual ao posicionamento absoluto, mas relativamente à janela.

p {position: fixed; top: 50px;left: 10px; }


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; }

Documents

Pedro Costa Introdução ao CSS 1 Curso de Jornalismo e Ciências da Comunicação Disciplina de Tecnologia dos Media Introdução ao CSS