CSS Básica Muito Boa

css
! ! ! ! ! ! ! ! ! ! } body{ ! } #cabecalho { ! ! ! }
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;
padding:50px;
height:130px; background-color:#39F; margin:0px;
#cabecalho h1 { ! font-family:Verdana, Geneva, sans-serif; ! font-size:40px; ! font-weight:bold; ! color:#C30; } #cabecalho h2 { ! font-family:Verdana, Geneva, sans-serif; ! font-size:14px; ! color:#C30; } #menu ul { ! }
utilizao de Cascading Style Sheets (CSS)

h1{ ! } font-size:3em;
oat:left;
#menu ul li { ! display: inline; ! padding-right:40px; }
http://www.w3schools.com/css demo: http://csszengarden.com
a:link{ ! ! }
text-decoration:none; font-family:Verdana, Gene
.campo:active { ! border:double; ! border-bottom-color:#F } a:hover{ ! } eldset{ ! ! }
text-decoration:underlin
background-color:#FC0; width:400px;
eldset legend{ ! font-size:14px; ! font-weight:bolder; } .caixa { ! ! ! !
font-family:Verdana, Gene font-size: 12px; text-decoration: none;
CSS no incio era... a confuso!
HTML Styles... JavaScript
CSS atualmente: organizao em modelos

Desenvolvidos de forma independente mas complementam-se!
(X)HTML
estrutura / contedo
CSS
apresentao
JavaScript
comportamento
CSS introduo
O HTML usado para estruturar contedos. CSS usado para formatar contedos estruturados. CSS veio revolucionar o mundo do web design. Os benefcios concretos do uso de CSS incluem:
controle do layout de vrios documentos a partir de uma simples folha de estilos; aplicao de diferentes layouts para servir diferentes suportes (ecr, impressora, PDA, smartphone...); maior velocidade de carregamento; maior acessibilidade e interoperabilidade;
CSS introduo
CSS denies
as denies de CSS permitem-nos separar a estrutura da forma de um documento (X)HTML. O (X)HTML usado para denir a estrutura atravs das tags mas toda a formatao (fontes, cores, imagens de fundo, molduras, links, formatao do texto, etc.) realizada pelas denies de CSS. Um cheiro de CSS no mais do que um conjunto de denies vrias (embebidas na head do documento ou num cheiro externo).
CSS incluso dos estilos no documento HTML

a CSS pode ser includa num documento HTML de trs formas: inline, embebida ou como cheiro externo.
CSS incluso dos estilos no documento | CSS inline

esta a forma mais antiga, ainda do tempo da utilizao das tabelas como elemento de estrutura do HTML. Neste caso a denio escrita juntamente com o cdigo HTML. <p style="text-align: left"> texto bla bla bla</p>
CSS incluso dos estilos no documento | CSS embebida

desta forma colocamos o cdigo dentro da HEAD da pgina HTML a que queremos aplicar a CSS. Com este mtodo os estilos so aplicados s pgina onde esto colocados. No uma boa soluo para aplicar a um site dado que se quisermos mudar a CSS temos que mudar pgina a pgina.
} --> </style> </head> <head> <style type="text/css"> <!-body { margin: 0; padding: 0; text-align: center; background-color: #333333;
CSS incluso dos estilos no documento | CSS externa

o cheiro .css criado externamente ao HTML. S temos que fazer a ligao do CSS ao HTML com um link na head
<head> <link rel="stylesheet" type="text/css" href="/ css/nomedocheiro.css"/> </head> } cheiro nomedocheiro.css <style type="text/css"> <!-body { margin: 0; padding: 0; text-align: center; background-color: #333333;
Ou podemos fazer a importao do cheiro CSS

<style type="text/css"> @import url (http://...../nomedocheiro.css) </style>
--> </style>
CSS incluso dos estilos no documento | CSS externa

qualquer destes mtodos realizado colocando a instruo de link ou importao na head do HTML. Usando um cheiro externo todas as pginas HTML ligam-se a um cheiro CSS. Isto signica que, se for preciso alterar formatao do site s temos que alterar um cheiro CSS, e no mudar todas as pginas HTML, uma a uma. Logo:
A manuteno mais fcil; O tamanho reduzido; A largura de banda reduzida; A exibilidade melhorada.
A forma mais usada a CSS externa. No entanto, possvel ter num mesmo documento HTML as trs formas, ou seja, inline, embebida e externa. , no entanto, preciso ter em ateno a ordem de leituras dos vrios estilos e a implicao que tm uns com os outros.
CSS a ordem da cascata | leitura

como sabemos um documento HTML pode conter denies CSS inline, embebidas e externas. Ora quando coexistem num mesmo documento poder haver conitos o que pode originar situaes anmalas e renders estranhos do documento HTML. Leitura: A ordem de leitura destes estilos, quando em simultneo num HTML, a seguinte: 1. 2. 3. 4. CSS existente no browser CSS externa CSS embebida 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. 2. 3. 4. Inline CSS embebida CSS externa CSS do browser
Isto quer dizer que em caso de regras iguais com valores diferentes a inline sobrepe-se embebida e esta externa. importante saber que mesmo quando existem duas declaraes iguais na mesma css, a ltima regra da lista das declaraes a que prevalece. , tambm, importante a posio das folhas de estilo na head do HTML, a ultima folha CSS na ordem do HTML a que tem predominncia.
CSS a ordem da cascata | a cascata | inerncia

propriedades e valores em tags parent tm inerncia sobre as child tags ( como na vida real!) Quando um selector est ligado por uma relao 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 pgina HTML vai assumir esta propriedade.
CSS a ordem da cascata | a cascata | inerncia 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> tero a fonte Georgia e no Verdana anteriormente declarada na tag body. Mas se declararmos
h1 {font-size: 12px;}
a fonte seria Verdana, a font declarada na tag body. Por inerncia uma tag ganha o estilo da tag pai.
CSS declarao 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 formatao do elemento. Cada selector pode ter mltiplas 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 denio o conjunto das instrues escritas entre as chavetas, background, uma propriedade de body; #eeeeee o valor do background nesta denio.

a propriedade e o valor esto separados por dois pontos (:) e rodeados por chavetas ({ }). Quando um valor constitudo por mais que uma palavra, deve estar entre aspas. Tambm podemos especicar mais do que uma propriedade na mesma declarao. Para isto, devemos separar cada propriedade e o respectivo valor com um ponto e virgula (;) p{ text-align: center; color: black; font-family: arial }

dos tipos de seletores mais usados (no 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 gneros: tipo e autor. O primeiro diz respeito aos selectores que identicam os elementos de HTML, o segundo pode ser criado pelo autor da CSS.
seletor { propriedade : valor ; declarao }
CSS declarao 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 declarao de um estilo | os seletores | element selectors
p { text-align:center; color:black; font-family:arial }
a:link :visited :hover { /*isto um comentrio...*/ text-decoration:none; color:black; font-family:arial }
h1 { color:black; font-family:arial }
CSS declarao de um estilo | os seletores | ID selectors

denem-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 no est conforme as especicaes da W3C. O documento pode ser correctamente rendido pelo browser, mas no ser validado. Quando queremos usar vrios seletores com o mesmo nome devemos usar classes em vez de ID. Os ID so muito usados para denir os elementos estruturais do documento HTML, como o caso das DIVs.
#caixa { background-color: #FF9900; margin: 0px; padding: 5px; oat: left; height: 300px; width: 300px; }
CSS declarao de um estilo | os seletores | ID selectors
#tituloPrinc { text-align:center; color:black; font-family:arial }
#hiperligacao { /*isto um comentrio...*/ text-decoration:none; color:black; font-family:arial }
#capa { color:black; font-family:arial }
<div id="capa"> a infograa em portugal </p>
CSS declarao de um estilo | os seletores | class selectors

com os seletores de classe podemos denir diferentes estilos para o mesmo tipo de elemento num documento HTML. Por exemplo, podemos ter dois tipos de pargrafos 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 comear com um ponto e podem ter o nome que quisermos. Podemos usar vrias vezes a mesma classe no mesmo documento.
.imagem { height: 300px; width: 300px; border: thin solid #333333; margin: 20px; }
CSS declarao de um estilo | os seletores | class selectors
.tituloPrinc { text-align:center; color:black; font-family:arial }
.hiperligacoes { /*isto um comentrio...*/ text-decoration:none; color:black; font-family:arial }
.capa { color:black; font-family:arial }
<p class="tituloPrinc"> atelier de multimdia </p> ... <p class="tituloPrinc"> a infograa em portugal </p>
CSS declarao de um estilo | os seletores | group selectors

possvel agrupar selectores e com isso reduzir o cdigo. Os selectores agrupados devem estar separados com vrgulas (,)
h1, h2, h3, h4, h5, h6 { color: #009900; font-family: Georgia, sans-serif; }
CSS declarao de um estilo | os seletores | descendent selectors

podemos usar selectores descendentes. til quando queremos formatar um determinado elemento dentro de um contexto especco, ou s dentro de uma dada DIV. Deve existir um espao entre os descent selectors. Neste exemplo estaramos a formatar os h1 cujo ID fosse lateral. J se quisermos formatar o elemento h1 para todo o documento, ento utilizariamos este exempo:
#lateral h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.97em; line-height: 1; font-weight: 900; color: #FF6600; }
h1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 0.97em; line-height: 1; font-weight: 900; color: #FF6600; }
CSS declarao de um estilo | os seletores | pseudo-class selectors

permitem denir o aspecto das hiperligaes, sendo, portanto, os seletores relevantes para o aspeto grco e manipulao da interface. Diz-se que uma pseudo-class, dado que o seu estado varivel por depender da interao do utilizador. Devem seguir esta ordem: a: link, a: visited, a:hover, a:active Geralmente, para uma interao ecaz os seletores a e :visited, tm a mesma denio e o :active de pouca utilizao. Portanto, so relevantes as denies dos selectores a e :hover.
a, :visited { font-family: Arial, Helvetica, sans-serif; font-size: 0.9em; color: #000; text-decoration: none; }
ex. http://esev.comze.com/demo/HTML/css/selectores.html
a:hover { color: #FFF; background-color: #666; }
ex. http://esev.comze.com/demo/HTML/css/selectores.html
CSS os comentrios
os comentrios CSS so uma forma prtica de organizarmos cdigo. Servem, como o prprio nome indica, para inserir texto em forma de comentrio que ajuda o autor a relembrar a organizao e a forma das denies ou para organizar o documento CSS em partes lgicas. So, tambm, extremamente teis para partilhar cdigo, permitindo que outra pessoa compreenda o porqu daquela organizao ou denio. /*isto um comentrio CSS*/
CSS denir a CSS de forma concisa

Quando criamos as regras de CSS podemos compactar o cdigo. Por exemplo esta denio:
.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 rpido do documento.
CSS algumas das propriedades

filter float font font-family font-size font-size-adjust font-stretch font-style font-variant font-weight
border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-style border-top-width border-width bottom
layout-grid-char-spacing layout-grid-line layout-grid-mode layout-grid-type left letter-spacing line-break line-height list-style list-style-image list-style-position list-style-type
-moz-border-right-colorspadding-top -moz-border-bottom-colors page -moz-border-left-colors page-break-after -moz-opacity page-break-before -moz-outline page-break-inside -moz-outline-color pause -moz-outline-style pause-after -moz-outline-width pause-before -moz-user-focus pitch -moz-user-input pitch-range -moz-user-modify play-during -moz-user-select position
speak-numeral speak-punctuation speech-rate stress scrollbar-arrow-color scrollbar-base-color scrollbar-dark-shadow-co scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-3d-light-color scrollbar-track-color
A/B
accelerator azimuth background background-attachment background-color background-image background-position background-position-x background-position-y background-repeat behavior border border-bottom border-bottom-color border-bottom-style border-bottom-width border-collapse border-color border-left border-left-color border-left-style border-left-width border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-style border-top-width border-width bottom
C
caption-side clear clip color content counter-increment counter-reset cue cue-after cue-before cursor
H/I
height ime-mode include-source
D/E
direction display elevation empty-cells
F
filter float font font-family font-size font-size-adjust font-stretch font-style font-variant font-weight
margin orphans margin-bottom outline margin-left outline-color margin-right outline-style margin-top outline-width marker-offset overflow marks overflow-X max-height overflow-Y max-width layer-background-color min-height layer-background-image min-width layout-flow -moz-binding layout-grid -moz-border-radius padding layout-grid-char -moz-border-radius-topleft padding-bottom layout-grid-char-spacing -moz-border-radius-topright padding-left layout-grid-line -moz-border-radius-bottomrightpadding-right layout-grid-mode -moz-border-radius-bottomleft padding-top layout-grid-type -moz-border-top-colors page left -moz-border-right-colors page-break-after letter-spacing -moz-border-bottom-colors page-break-before line-break -moz-border-left-colors page-break-inside line-height -moz-opacity pause list-style -moz-outline pause-after list-style-image -moz-outline-color pause-before list-style-position -moz-outline-style pitch list-style-type -moz-outline-width pitch-range -moz-user-focus play-during -moz-user-input position -moz-user-modify -moz-user-select margin margin-bottom margin-left quotes margin-right -replace margin-top orphans richness marker-offset outline right marks outline-color ruby-align max-height outline-style
Q/R
quotes -replace richness right ruby-align ruby-overhang ruby-position
T
table-layout text-align text-align-last text-decoration text-indent text-justify text-overflow text-shadow text-transform text-autospace text-kashida-space text-underline-position top
S
-set-link-source size speak speak-header speak-numeral speak-punctuation speech-rate stress scrollbar-arrow-color scrollbar-base-color scrollbar-dark-shadow-color scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-3d-light-color scrollbar-track-color
U/V
unicode-bidi -use-link-source vertical-align visibility voice-family volume
W/Z
white-space widows width word-break word-spacing word-wrap writing-mode z-index zoom
Q/R
T
table-layout text-align text-align-last text-decoration text-indent text-justify
CSS algumas das propriedades | ex. de uma cheat sheet
CSS algumas das propriedades | ex. de uma cheat sheet
CSS o modelo de caixa que existe em todos os elementos
CSS posicionamento
CSS posicionamento
CSS layout das pginas | tipos de layout

existem quatro tipos de layouts:
Fixo (xed) Elstico (elastic) Liquido (liquid) Hibrido (hybrid)
CSS layout das pginas | tipos de layout | layout xo

no layout xo, as medidas so xas, logo no existe alterao da estrutura da pgina quando se muda de resoluo e ou de dimenso do monitor.
http://esev.comze.com/demo/css/layout/layxocentrado.html
CSS layout das pginas | tipos de layout | layout elstico

o layout elstico, tem a aparncia de um layout xo, mas aumentando ou diminuindo a fonte o layout acompanha o redimensionamento da fonte. um layout exvel porque constitudo por unidades de medida relativas e a largura relativa largura da fonte do browser utilizado. Temos sempre o mesmo nmero 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 pginas | tipos de layout | layout lquido

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 pginas | tipos de layout | layout hbrido

o layout hibrido, uma combinao do elstico e do liquido. Por exemplo, podemos ter o contedo de uma DIV em ems (font-size: 1 em;) e o contedo de outra em percentagem (fontsize: 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 possveis para as DIVs:
esttico (static) relativo (relative) absoluto (absolute) xo (xed)
Exemplos em http://esev.comze.com/demo/HTML/posicionamento/
CSS posicionamento | esttico

o posicionamento esttico corresponde ao uir normal dos elementos num documento HTML, ou seja, as DIVs so posicionadas de cima para baixo, da esquerda para a direita. Se uma DIV for reposicionada atravs de CSS, a DIV imediatamente abaixo toma o seu lugar.
CSS posicionamento | relativo

o posicionamento relativo um reposicionamento de uma dada DIV relativamente sua posio esttica, ou seja, relativamente sua posio esttica a DIV est deslocada no eixo X tantos pixels e no eixo y outros tantos pixels.
CSS posicionamento | absoluto

o posicionamento absoluto calculado tendo em conta a janela do browser. Neste caso as coordenadas X e Y da DIV esto em perfeita correlao com as dimenses da janela do browser.
CSS posicionamento | xo
o posicionamento xo permite manter uma DIV xa na janela do browser, que no mexe com o movimento do Scroll. Permite-nos criar efeitos como os realizados com os antigos frames.
CSS validao do cdigo
http://jigsaw.w3.org/css-validator/
CSS referncias
Bibliograa:
CSS, Criao Inovadora de Sites - FCA
Webliograa:
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 vdeos!)
Exemplos (timos) de cdigo fonte (layout, posicionamentos, etc.) http://www.leonelcunha.net/formacao/
o futuro?
CSS3
http://www.w3schools.com/css3/default.asp

CSS Básica Muito Boa

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

CSS Básica Muito Boa

Enviado por

Direitos autorais:

Formatos disponíveis

css

height:130px; background-color:#39F; margin:0px;

utilizao de Cascading Style Sheets (CSS)

#menu ul li { ! display: inline; ! padding-right:40px; }

http://www.w3schools.com/css demo: http://csszengarden.com

text-decoration:none; font-family:Verdana, Gene

.campo:active { ! border:double; ! border-bottom-color:#F } a:hover{ ! } eldset{ ! ! }

eldset legend{ ! font-size:14px; ! font-weight:bolder; } .caixa { ! ! ! !

font-family:Verdana, Gene font-size: 12px; text-decoration: none;

CSS no incio era... a confuso!

HTML Styles... JavaScript

CSS atualmente: organizao em modelos

CSS incluso dos estilos no documento HTML

CSS incluso dos estilos no documento | CSS inline

CSS incluso dos estilos no documento | CSS embebida

CSS incluso dos estilos no documento | CSS externa

Ou podemos fazer a importao do cheiro CSS

CSS incluso dos estilos no documento | CSS externa

CSS a ordem da cascata | leitura

CSS a ordem da cascata | a cascata

CSS a ordem da cascata | a cascata | inerncia

CSS a ordem da cascata | a cascata | inerncia por exemplos

CSS declarao de um estilo | os seletores

CSS declarao de um estilo | os seletores

CSS declarao de um estilo | os seletores

CSS declarao de um estilo | os seletores

seletor { propriedade : valor ; declarao }

CSS declarao de um estilo | os seletores | element selectors

CSS declarao de um estilo | os seletores | element selectors

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

a:link :visited :hover { /*isto um comentrio...*/ text-decoration:none; color:black; font-family:arial }

CSS declarao de um estilo | os seletores | ID selectors

CSS declarao de um estilo | os seletores | ID selectors

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

#hiperligacao { /*isto um comentrio...*/ text-decoration:none; color:black; font-family:arial }

#capa { color:black; font-family:arial }

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

CSS declarao de um estilo | os seletores | class selectors

CSS declarao de um estilo | os seletores | class selectors

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

.hiperligacoes { /*isto um comentrio...*/ text-decoration:none; color:black; font-family:arial }

.capa { color:black; font-family:arial }

CSS declarao de um estilo | os seletores | group selectors

CSS declarao de um estilo | os seletores | descendent selectors

CSS declarao de um estilo | os seletores | pseudo-class selectors

a:hover { color: #FFF; background-color: #666; }

CSS denir a CSS de forma concisa

pode ser escrita assim:

Isto permite-nos poupar tempo e permitir um render mais rpido do documento.

CSS algumas das propriedades

CSS algumas das propriedades | ex. de uma cheat sheet

CSS algumas das propriedades | ex. de uma cheat sheet

CSS o modelo de caixa que existe em todos os elementos

CSS layout das pginas | tipos de layout

Fixo (xed) Elstico (elastic) Liquido (liquid) Hibrido (hybrid)

CSS layout das pginas | tipos de layout | layout xo

CSS layout das pginas | tipos de layout | layout elstico

CSS layout das pginas | tipos de layout | layout lquido

CSS layout das pginas | tipos de layout | layout hbrido

esttico (static) relativo (relative) absoluto (absolute) xo (xed)

CSS posicionamento | esttico

CSS posicionamento | relativo

CSS posicionamento | absoluto

a:link :visited :hover { /isto um comentrio.../ text-decoration:none; color:black; font-family:arial }

#hiperligacao { /isto um comentrio.../ text-decoration:none; color:black; font-family:arial }

.hiperligacoes { /isto um comentrio.../ text-decoration:none; color:black; font-family:arial }