curso de CSS

z-index:1;

border-top-width: 10px;

border-right-width: 10px;

border-bottom-width: 10px;

border-left-width: 10px;

border-top-style: groove;

border-right-style: groove;

border-bottom-style: groove;

border-left-style: groove;
}

body{

padding:50px;
}
#cabecalho
{

height:130px;

background-color:#39F;

margin:0px;
}

#cabecalho h1

utilização de
{

font-family:Verdana, Geneva, sans-serif;

font-size:40px;

font-weight:bold;

color:#C30;
}

Cascading Style Sheets (CSS)
#cabecalho h2
{

font-family:Verdana, Geneva, sans-serif;

font-size:14px;

color:#C30;
}

#menu ul
{

float:left;
}

#menu ul li { h1{

display: inline;

font-size:3em;

padding-right:40px; }
}
http://www.w3schools.com/css a:link{

text-decoration:none;

font-family:Verdana, Gene
}

demo: .campo:active
{
http://csszengarden.com

border:double;
border-bottom-color:#F
}

a:hover{

text-decoration:underlin
}

fieldset{

background-color:#FC0;

width:400px;
}

fieldset legend{

font-size:14px;

font-weight:bolder;
}

.caixa {

font-family:Verdana, Gene

font-size: 12px;

text-decoration: none;

CSS
no início era... a confusão!

HTML
Styles...
JavaScript

CSS
atualmente: organização em “modelos”
Desenvolvidos de forma independente mas complementam-se!

(X)HTML CSS JavaScript
estrutura /
apresentação comportamento
conteúdo

CSS
introdução
O HTML é usado para estruturar conteúdos. CSS é usado para formatar
conteúdos estruturados.

CSS veio revolucionar o mundo do web design. Os benefícios concretos do
uso de CSS incluem:

• controle do layout de vários documentos a partir de uma simples folha de
estilos;
• aplicação de diferentes layouts para servir diferentes suportes (ecrã,
impressora, PDA, smartphone...);
• maior velocidade de carregamento;
• maior acessibilidade e interoperabilidade;

CSS
definições
as definições de CSS permitem-nos separar a estrutura da forma de um
documento (X)HTML.

O (X)HTML é usado para definir a estrutura através das tags mas toda a
formatação (fontes, cores, imagens de fundo, molduras, links, formatação do texto,
etc.) é realizada pelas definições de CSS.

Um ficheiro de CSS não é mais do que um conjunto de definições várias
(embebidas na head do documento ou num ficheiro externo).

CSS
inclusão dos estilos no documento HTML
a CSS pode ser incluída num documento HTML de três formas: inline, embebida
ou como ﬁcheiro externo.

CSS
inclusão dos estilos no documento | CSS inline
esta é a forma mais antiga, ainda do tempo da utilização das tabelas como
elemento de estrutura do HTML. Neste caso a deﬁnição é escrita juntamente com
o código HTML.

<p style="text-align: left"> texto bla bla bla</p>

CSS
inclusão dos estilos no documento | CSS embebida
desta forma colocamos o código dentro <head>
da HEAD da página HTML a que
<style type="text/css">
queremos aplicar a CSS. 
CSS temos que mudar página a página. </style>

</head>

CSS
inclusão dos estilos no documento | CSS externa
o ficheiro .css é criado externamente ao ficheiro nomedoficheiro.css
HTML. Só temos que fazer a ligação do
CSS ao HTML com um link na head 
ficheiro CSS </style>

@import url (http://...../nomedoficheiro.css)
</style>

CSS
inclusão dos estilos no documento | CSS externa
qualquer destes métodos é realizado colocando a instrução de link ou importação
na head do HTML.
Usando um ficheiro externo todas as páginas HTML ligam-se a um ficheiro CSS.
Isto significa que, se for preciso alterar formatação do site só temos que alterar um
ficheiro CSS, e não mudar todas as páginas HTML, uma a uma.

Logo:

• A manutenção é mais fácil;
• O tamanho é reduzido;
• A largura de banda é reduzida;
• A flexibilidade é melhorada.

A forma mais usada é a CSS externa. No entanto, é possível ter num mesmo
documento HTML as três formas, ou seja, inline, embebida e externa. É, no
entanto, preciso ter em atenção a ordem de leituras dos vários estilos e a
implicação que têm uns com os outros.

CSS
a ordem da “cascata” | leitura
como sabemos um documento HTML pode conter deﬁnições CSS inline,
embebidas e externas. Ora quando coexistem num mesmo documento poderá
haver conﬂitos o que pode originar situações anómalas e renders estranhos do
documento HTML.

Leitura:
A ordem de leitura destes estilos, quando em simultâneo num HTML, é a seguinte:

1. CSS existente no browser
2. CSS externa
3. CSS embebida
4. CSS inline

CSS
a ordem da “cascata” | a cascata
quando existe mais do que um estilo num documento HTML, estes funcionam em
cascata numa folha de estilo virtual com a ordem acima descrita.
A última regra da cascata é a que tem prioridade.

A ordem de prioridade é a seguinte:

1. Inline
2. CSS embebida
3. CSS externa
4. CSS do browser

Isto quer dizer que em caso de regras iguais com valores diferentes a inline
sobrepõe-se à embebida e esta à externa.
É importante saber que mesmo quando existem duas declarações iguais na
mesma css, a última regra da lista das declarações é a que prevalece. É, também,
importante a posição das folhas de estilo na head do HTML, a ultima folha CSS na
ordem do HTML é a que tem predominância.

CSS
a ordem da “cascata” | a cascata | inerência
propriedades e valores em tags parent têm inerência sobre as child tags (é como
na vida real!)

Quando um selector está ligado por uma relação de parentesco a outro ou está
contido nele, assume as propriedades do selector onde está contido.

Se, por exemplo, declararmos no selector body a property font-family todo o texto
da página HTML vai assumir esta propriedade.

CSS
a ordem da “cascata” | a cascata | inerência por exemplos
body {font-family: Verdana, serif;}

se quisermos outro estilo dentro do HTML temos que o realizar pelas respectivos
selectores. Por exemplo:

h1 {font-family: Georgia, serif;}
p {font-family: Tahoma, sans-serif;}

Agora as tags <h1> terão a fonte Georgia e não Verdana anteriormente declarada
na tag body.

Mas se declararmos

h1 {font-size: 12px;}

a fonte seria Verdana, a font declarada na tag body.

Por inerência uma tag ganha o estilo da tag pai.

CSS
declaração de um estilo | os seletores
tal como o HTML usa tags, o CSS usa seletores.

O seletor referencia o elemento HTML que queremos formatar. A propriedade é
um atributo do selector que queremos formatar e o valor está intimamente
relacionado com a formatação do elemento.

Cada selector pode ter múltiplas propriedades; e cada propriedade tem valores
independentes.

body {
background: #eeeeee;
font-family: "Trebuchet MS", Verdana, Arial, sans-serif;
}

Neste exemplo o body é o seletor; a deﬁnição é o conjunto das instruções
escritas entre as chavetas, background, é uma propriedade de body; #eeeeee é o
valor do background nesta deﬁnição.

CSS
a propriedade e o valor estão separados por dois pontos (:) e rodeados por
chavetas ({ }).

Quando um valor é constituído por mais que uma palavra, deve estar entre aspas.
Também podemos especiﬁcar mais do que uma propriedade na mesma
declaração. Para isto, devemos separar cada propriedade e o respectivo valor com
um ponto e virgula (;)

p{ text-align: center; color: black; font-family: arial }

CSS
dos tipos de seletores mais usados (não é uma lista completa) podemos referir
os seguintes:

• Element selectors
• ID selectors
• Class selectors
• Group selectors
• Descendent selectors
• Pseudo-class selectors

Estes tipos de seletores podem ser divididos em dois géneros: tipo e autor. O
primeiro diz respeito aos selectores que identiﬁcam os elementos de HTML, o
segundo pode ser criado pelo autor da CSS.

CSS

seletor
{
propriedade : valor ;
} declaração

CSS
declaração de um estilo | os seletores | element selectors
<p> <h1> <em> <span>, etc.

referenciam as tags HTML que formatam.
Por exemplo: o element selector corresponde à tag <h1>

h1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 2em;
color: #333333;
}

CSS
declaração de um estilo | os seletores | element selectors

p a:link :visited :hover h1
{ { {
text-align:center; /*isto é um comentário...*/ color:black;
color:black; text-decoration:none; font-family:arial
font-family:arial color:black; }
} font-family:arial
}

CSS
declaração de um estilo | os seletores | ID selectors
definem-se com o sinal cardinal (#) e deve ser usado uma única vez em cada
documento HTML. Pode, no entanto, haver mais do que um seletor com o mesmo
ID, mas não está conforme as especificações da W3C. O documento pode ser
correctamente rendido pelo browser, mas não será validado.

Quando queremos usar vários seletores com o mesmo nome devemos usar classes
em vez de ID.

Os ID são muito usados para definir os elementos estruturais do documento HTML,
como é o caso das DIVs.

#caixa {
background-color: #FF9900;
margin: 0px;
padding: 5px;
float: left;
height: 300px;
width: 300px;
}

CSS
declaração de um estilo | os seletores | ID selectors

#tituloPrinc #hiperligacao #capa
{ { {
} font-family:arial
}

<div id="capa"> a infograﬁa em portugal </p>

CSS
declaração de um estilo | os seletores | class selectors
com os seletores de classe podemos deﬁnir diferentes estilos para o mesmo
tipo de elemento num documento HTML.

Por exemplo, podemos ter dois tipos de parágrafos no documento:

p .right {text-align: right}
p .left {text-align: left}

Os atributos de classe podem ser usados localmente (inline) no documento
HTML. Os selectores de classe devem começar com um ponto e podem ter o
nome que quisermos. Podemos usar várias vezes a mesma classe no mesmo
documento.

.imagem {
height: 300px;
width: 300px;
border: thin solid #333333;
margin: 20px;
}

CSS
declaração de um estilo | os seletores | class selectors

.tituloPrinc .hiperligacoes .capa
{ { {
} font-family:arial
}

<p class="tituloPrinc"> atelier de multimédia </p>
...
<p class="tituloPrinc"> a infograﬁa em portugal </p>

CSS
declaração de um estilo | os seletores | group selectors
é possível agrupar selectores e com isso reduzir o código. Os selectores agrupados
devem estar separados com vírgulas (,)

h1, h2, h3, h4, h5, h6 {
color: #009900;
font-family: Georgia, sans-serif;
}

CSS
declaração de um estilo | os seletores | descendent selectors
podemos usar selectores descendentes. #lateral h1 {
font-family: Verdana, Arial,
É útil quando queremos formatar um
Helvetica, sans-serif;
determinado elemento dentro de um font-size: 0.97em;
contexto especíﬁco, ou só dentro de line-height: 1;
uma dada DIV. Deve existir um espaço font-weight: 900;
color: #FF6600;
entre os descent selectors. Neste }
exemplo estaríamos a formatar os h1
cujo ID fosse lateral.

Já se quisermos formatar o elemento h1 h1 {
para todo o documento, então font-family: Verdana, Arial,
Helvetica, sans-serif;
utilizariamos este exempo: font-size: 0.97em;
line-height: 1;
font-weight: 900;
color: #FF6600;
}

CSS
declaração de um estilo | os seletores | pseudo-class selectors
permitem definir o aspecto das hiperligações, sendo, portanto, os seletores
relevantes para o aspeto gráfico e manipulação da interface.

Diz-se que é uma pseudo-class, dado que o seu estado é variável por depender da
interação do utilizador. Devem seguir esta ordem: a: link, a: visited, a:hover,
a:active

Geralmente, para uma interação eficaz os seletores a e :visited, têm a mesma
definição e o :active é de pouca utilização. Portanto, são relevantes as definições
dos selectores a e :hover.

a, :visited { a:hover {
font-family: Arial, Helvetica, sans-serif; color: #FFF;
font-size: 0.9em; background-color: #666;
color: #000; }
text-decoration: none;
}
ex. ex.
http://esev.comze.com/demo/HTML/css/selectores.html http://esev.comze.com/demo/HTML/css/selectores.html

CSS
os comentários
os comentários CSS são uma forma prática de organizarmos código. Servem,
como o próprio nome indica, para inserir texto em forma de comentário que ajuda
o autor a relembrar a organização e a forma das deﬁnições ou para organizar o
documento CSS em partes lógicas.

São, também, extremamente úteis para partilhar código, permitindo que outra
pessoa compreenda o porquê daquela organização ou deﬁnição.

/*isto é um comentário CSS*/

CSS
deﬁnir a CSS de forma concisa
Quando criamos as regras de CSS podemos compactar o código.
Por exemplo esta deﬁnição:

.imagem {
margin-top: 20px;
margin-right: 20px;
margin-bottom: 20px;
margin-left: 20px;
border-top-width: thin;
border-right-width: thin;
border-bottom-width: thin;
border-left-width: thin;
}

pode ser escrita assim:
.imagem {
margin: 20px;
border: thin solid;
}

Isto permite-nos poupar tempo e permitir um render mais rápido do documento.

border-right
F layout-grid-char-spacing -moz-border-right-colorspadding-top speak-numeral
speak-punctuation
CSS
border-right-color layout-grid-line -moz-border-bottom-colors
page
border-right-style filter layout-grid-mode -moz-border-left-colors page-break-after speech-rate
border-right-width float layout-grid-type -moz-opacity page-break-before stress

algumas das propriedades
border-spacing font left -moz-outline page-break-inside scrollbar-arrow-color
border-style font-family letter-spacing -moz-outline-color pause scrollbar-base-color
border-top font-size line-break -moz-outline-style pause-after scrollbar-dark-shadow-co
border-top-color font-size-adjust line-height -moz-outline-width pause-before scrollbar-face-color
border-top-style font-stretch list-style -moz-user-focus pitch scrollbar-highlight-color
border-top-width font-style list-style-image -moz-user-input pitch-range scrollbar-shadow-color
border-width font-variant list-style-position -moz-user-modify play-during scrollbar-3d-light-color
bottom font-weight list-style-type -moz-user-select position scrollbar-track-color

A/B C H/I M O Q/R T
accelerator caption-side height margin orphans quotes table-layout
azimuth clear ime-mode margin-bottom outline -replace text-align
background clip include-source margin-left outline-color richness text-align-last
background-attachment color margin-right outline-style right text-decoration
background-color content margin-top outline-width ruby-align text-indent
background-image counter-increment marker-offset overflow ruby-overhang text-justify
background-position
background-position-x
background-position-y
counter-reset
cue
cue-after
L marks
max-height
max-width
overflow-X
overflow-Y
ruby-position text-overflow
text-shadow
text-transform
layer-background-color
background-repeat
behavior
border
cue-before
cursor
layer-background-image
layout-flow
min-height
min-width
-moz-binding P S text-autospace
text-kashida-space
text-underline-position
layout-grid -set-link-source
border-bottom -moz-border-radius top

D/E
layout-grid-char padding size
border-bottom-color -moz-border-radius-topleft
layout-grid-char-spacing padding-bottom speak
border-bottom-style -moz-border-radius-topright

U/V
layout-grid-line padding-left speak-header
border-bottom-width -moz-border-radius-bottomrightpadding-right
direction layout-grid-mode speak-numeral
border-collapse -moz-border-radius-bottomleft padding-top
display layout-grid-type speak-punctuation
border-color -moz-border-top-colors unicode-bidi
elevation left page speech-rate
border-left -moz-border-right-colors -use-link-source
empty-cells letter-spacing page-break-after stress
border-left-color -moz-border-bottom-colors vertical-align
line-break page-break-before scrollbar-arrow-color
border-left-style -moz-border-left-colors visibility
line-height page-break-inside scrollbar-base-color
border-left-width -moz-opacity voice-family
list-style pause scrollbar-dark-shadow-color

F
border-right -moz-outline volume
list-style-image pause-after scrollbar-face-color
border-right-color -moz-outline-color
list-style-position pause-before scrollbar-highlight-color
border-right-style -moz-outline-style
list-style-type pitch scrollbar-shadow-color

W/Z
border-right-width filter -moz-outline-width pitch-range scrollbar-3d-light-color
border-spacing float -moz-user-focus play-during scrollbar-track-color
font
M
border-style -moz-user-input position white-space
border-top font-family -moz-user-modify
font-size widows

T
border-top-color -moz-user-select
width
Q/R
border-top-style font-size-adjust margin
border-top-width font-stretch margin-bottom word-break
border-width
bottom
font-style
font-variant
font-weight
margin-left
margin-right
margin-top
O quotes
-replace
table-layout
text-align
text-align-last
word-spacing
word-wrap
writing-mode
orphans z-index
marker-offset richness text-decoration

C
outline zoom
marks right text-indent
outline-color
max-height ruby-align text-justify
outline-style

CSS
algumas das propriedades | ex. de uma cheat sheet

CSS
o modelo de “caixa” que existe em todos os elementos

CSS
layout das páginas | tipos de layout
existem quatro tipos de layouts:

• Fixo (ﬁxed)
• Elástico (elastic)
• Liquido (liquid)
• Hibrido (hybrid)

CSS
layout das páginas | tipos de layout | layout fixo
no layout fixo, as medidas são fixas, logo não existe alteração da estrutura da
página quando se muda de resolução e ou de dimensão do monitor.

http://esev.comze.com/demo/css/layout/layfixocentrado.html

CSS
layout das páginas | tipos de layout | layout elástico
o layout elástico, tem a aparência de um
layout ﬁxo, mas aumentando ou
diminuindo a fonte o layout acompanha o
redimensionamento da fonte.

É um layout ﬂexível porque é constituído
por unidades de medida relativas e a
largura é relativa à largura da fonte do
browser utilizado.

Temos sempre o mesmo número de linhas
e palavras se aumentarmos ou
diminuirmos o layout com a janela do
browser.
http://esev.comze.com/demo/css/layout/layelasticoocentrado.html

CSS
layout das páginas | tipos de layout | layout líquido
o layout liquido usa colunas em
percentagem.

Ao redimensionar a janela do browser o
layout adapta-se ao tamanho.

http://esev.comze.com/demo/css/layout/layliquidocentrado.html

CSS
layout das páginas | tipos de layout | layout híbrido
o layout hibrido, é uma
combinação do elástico e do
liquido.

Por exemplo, podemos ter o
conteúdo de uma DIV em ems
(font-size: 1 em;) e o conteúdo
de outra em percentagem (font-
size: 100%).

Logo, uma DIV vai manter
sempre a sua estrutura enquanto
que a outra vai adaptar-se face
ao redimensionamento da janela
do browser.
http://esev.comze.com/demo/css/layout/layhibrido.html

CSS
posicionamento
Existem quatro tipos de posicionamento possíveis para as DIVs:

• estático (static)
• relativo (relative)
• absoluto (absolute)
• ﬁxo (ﬁxed)

Exemplos em
http://esev.comze.com/demo/HTML/posicionamento/

CSS
posicionamento | estático
o posicionamento estático corresponde ao ﬂuir normal dos elementos num
documento HTML, ou seja, as DIVs são posicionadas de cima para baixo, da
esquerda para a direita. Se uma DIV for reposicionada através de CSS, a DIV
imediatamente abaixo toma o seu lugar.

Exemplos em

CSS
posicionamento | relativo
o posicionamento relativo é um reposicionamento de uma dada DIV relativamente à
sua posição estática, ou seja, relativamente à sua posição estática a DIV está
deslocada no eixo X tantos pixels e no eixo y outros tantos pixels.

Exemplos em

CSS
posicionamento | absoluto
o posicionamento absoluto é calculado tendo em conta a janela do browser. Neste
caso as coordenadas X e Y da DIV estão em perfeita correlação com as dimensões
da janela do browser.

Exemplos em

CSS
posicionamento | fixo
o posicionamento fixo permite manter uma DIV fixa na janela do browser, que não
mexe com o movimento do Scroll.

Permite-nos criar efeitos como os realizados com os antigos frames.

Exemplos em

CSS
validação do código

http://jigsaw.w3.org/css-validator/

CSS
referências
Bibliograﬁa:

• CSS, Criação Inovadora de Sites - FCA
Webliograﬁa:

• http://www.w3schools.com/css/default.asp
• http://www.leonelcunha.net/aulas12p/recursos/ppm_2_XHTML_CSS.pdf
• http://pt-br.html.net/tutorials/css
• http://www.freecsstemplates.org/css-templates (templates em html e css)
• http://www.addedbytes.com/cheat-sheets/css-cheat-sheet/
• http://css-tricks.com/ (artigos e vídeos!)

Exemplos (ótimos) de código fonte (layout, posicionamentos, etc.)
• http://www.leonelcunha.net/formacao/

CSS3
http://www.w3schools.com/css3/default.asp

curso de CSS

Recommended

Recommended

More Related Content

More from Marco Pinheiro

More from Marco Pinheiro (12)

Recently uploaded

Recently uploaded (20)

curso de CSS