curso de css
DESCRIPTION
TRANSCRIPT
css
utilização de Cascading Style Sheets (CSS)
http://www.w3schools.com/css
demo: http://csszengarden.com
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{ 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 { float:left;}
#menu ul li { display: inline; padding-right:40px;}
h1{ font-size:3em;}
a:link{ text-decoration:none; font-family:Verdana, Geneva, sans-serif;}
.campo:active{ border:double; border-bottom-color:#F00;}
a:hover{ text-decoration:underline;}
fieldset{ background-color:#FC0; width:400px;}
fieldset legend{ font-size:14px; font-weight:bolder;}
.caixa { font-family: Verdana, Geneva, sans-serif; font-size: 12px; text-decoration: none; background-color: #F90;
HTMLStyles...
JavaScript
CSSno início era... a confusão!
Desenvolvidos de forma independente mas complementam-se!
(X)HTML
estrutura / conteúdo
CSS
apresentação
JavaScript
comportamento
CSSatualmente: organização em “modelos”
CSSintroduçã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;
CSSintrodução
CSSdefiniçõ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).
CSSinclusão dos estilos no documento HTML
a CSS pode ser incluída num documento HTML de três formas: inline, embebida ou como ficheiro externo.
CSSinclusã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 definição é escrita juntamente com o código HTML.
<p style="text-align: left"> texto bla bla bla</p>
CSSinclusão dos estilos no documento | CSS embebida
desta forma colocamos o código dentro da HEAD da página HTML a que queremos aplicar a CSS.
Com este método os estilos são aplicados só à página onde estão colocados.
Não é uma boa solução para aplicar a um site dado que se quisermos mudar a CSS temos que mudar página a página.
<head>
<style type="text/css"><!--
body { margin: 0; padding: 0; text-align: center; background-color: #333333;}
--></style>
</head>
CSSinclusão dos estilos no documento | CSS externa
o ficheiro .css é criado externamente ao HTML. Só temos que fazer a ligação do CSS ao HTML com um link na head
<head><link rel="stylesheet" type="text/css" href="…/css/nomedoficheiro.css"/></head>
Ou podemos fazer a importação do ficheiro CSS
<style type="text/css"> @import url (http://...../nomedoficheiro.css)</style>
ficheiro nomedoficheiro.css
<style type="text/css"><!--
body { margin: 0; padding: 0; text-align: center; background-color: #333333;}
--></style>
CSSinclusã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.
CSSa ordem da “cascata” | leitura
como sabemos um documento HTML pode conter definições CSS inline, embebidas e externas. Ora quando coexistem num mesmo documento poderá haver conflitos 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 browser2. CSS externa3. CSS embebida4. CSS inline
CSSa 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. Inline2. CSS embebida3. CSS externa4. 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.
CSSa 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.
CSSa ordem da “cascata” | a cascata | inerência por exemplosbody {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.
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 definição é o conjunto das instruções escritas entre as chavetas, background, é uma propriedade de body; #eeeeee é o valor do background nesta definição.
CSSdeclaração de um estilo | os seletores
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 especificar 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 }
CSSdeclaração de um estilo | os seletores
CSSdeclaração de um estilo | os seletores
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 identificam os elementos de HTML, o segundo pode ser criado pelo autor da CSS.
seletor {propriedade : valor ;
} declaração
CSSdeclaração de um estilo | os seletores
CSSdeclaraçã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;
}
p {
text-align:center;color:black;font-family:arial
}
a:link :visited :hover{
/*isto é um comentário...*/text-decoration:none;color:black;font-family:arial
}
h1{
color:black;font-family:arial
}
CSSdeclaração de um estilo | os seletores | element selectors
CSSdeclaraçã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;
}
<div id="capa"> a infografia em portugal </p>
#tituloPrinc {
text-align:center;color:black;font-family:arial
}
#hiperligacao{
/*isto é um comentário...*/text-decoration:none;color:black;font-family:arial
}
#capa{
color:black;font-family:arial
}
CSSdeclaração de um estilo | os seletores | ID selectors
CSSdeclaração de um estilo | os seletores | class selectors
com os seletores de classe podemos definir 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;
}
<p class="tituloPrinc"> atelier de multimédia </p>...
<p class="tituloPrinc"> a infografia em portugal </p>
.tituloPrinc {
text-align:center;color:black;font-family:arial
}
.hiperligacoes{
/*isto é um comentário...*/text-decoration:none;color:black;font-family:arial
}
.capa{
color:black;font-family:arial
}
CSSdeclaração de um estilo | os seletores | class selectors
CSSdeclaraçã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;
}
CSSdeclaração de um estilo | os seletores | descendent selectors
podemos usar selectores descendentes. É útil quando queremos formatar um determinado elemento dentro de um contexto específico, ou só dentro de uma dada DIV. Deve existir um espaço entre os descent selectors. Neste exemplo estaríamos a formatar os h1 cujo ID fosse lateral.
Já se quisermos formatar o elemento h1 para todo o documento, então 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;
}
CSSdeclaraçã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 {font-family: Arial, Helvetica, sans-serif;font-size: 0.9em;color: #000;text-decoration: none;
}
a:hover {color: #FFF;background-color: #666;
}
ex.http://esev.comze.com/demo/HTML/css/selectores.html
ex.http://esev.comze.com/demo/HTML/css/selectores.html
CSSos 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 definiçõ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 definição.
/*isto é um comentário CSS*/
Quando criamos as regras de CSS podemos compactar o código. Por exemplo esta definiçã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.
CSSdefinir a CSS de forma concisa
A/B acceleratorazimuthbackgroundbackground-attachmentbackground-colorbackground-imagebackground-positionbackground-position-xbackground-position-ybackground-repeatbehaviorborderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthbottom
C caption-sideclearclipcolorcontentcounter-incrementcounter-resetcuecue-aftercue-beforecursor
D/E directiondisplayelevationempty-cells
F filterfloatfontfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weight
H/I heightime-modeinclude-source
L layer-background-colorlayer-background-imagelayout-flowlayout-gridlayout-grid-charlayout-grid-char-spacinglayout-grid-linelayout-grid-modelayout-grid-typeleftletter-spacingline-breakline-heightlist-stylelist-style-imagelist-style-positionlist-style-type
M marginmargin-bottommargin-leftmargin-rightmargin-topmarker-offsetmarksmax-heightmax-widthmin-heightmin-width-moz-binding-moz-border-radius-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomright-moz-border-radius-bottomleft-moz-border-top-colors-moz-border-right-colors-moz-border-bottom-colors-moz-border-left-colors-moz-opacity-moz-outline-moz-outline-color-moz-outline-style-moz-outline-width-moz-user-focus-moz-user-input-moz-user-modify-moz-user-select
O orphansoutlineoutline-coloroutline-styleoutline-widthoverflowoverflow-Xoverflow-Y
P paddingpadding-bottompadding-leftpadding-rightpadding-toppagepage-break-afterpage-break-beforepage-break-insidepausepause-afterpause-beforepitchpitch-rangeplay-duringposition
Q/R quotes-replacerichnessrightruby-alignruby-overhangruby-position
S -set-link-sourcesizespeakspeak-headerspeak-numeralspeak-punctuationspeech-ratestressscrollbar-arrow-colorscrollbar-base-colorscrollbar-dark-shadow-colorscrollbar-face-colorscrollbar-highlight-colorscrollbar-shadow-colorscrollbar-3d-light-colorscrollbar-track-color
T table-layouttext-aligntext-align-lasttext-decorationtext-indenttext-justifytext-overflowtext-shadowtext-transformtext-autospacetext-kashida-spacetext-underline-positiontop
U/V unicode-bidi-use-link-sourcevertical-alignvisibilityvoice-familyvolume
W/Z white-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-indexzoom
A/B acceleratorazimuthbackgroundbackground-attachmentbackground-colorbackground-imagebackground-positionbackground-position-xbackground-position-ybackground-repeatbehaviorborderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthbottom
C caption-sideclearclipcolorcontentcounter-incrementcounter-resetcuecue-aftercue-beforecursor
D/E directiondisplayelevationempty-cells
F filterfloatfontfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weight
H/I heightime-modeinclude-source
L layer-background-colorlayer-background-imagelayout-flowlayout-gridlayout-grid-charlayout-grid-char-spacinglayout-grid-linelayout-grid-modelayout-grid-typeleftletter-spacingline-breakline-heightlist-stylelist-style-imagelist-style-positionlist-style-type
M marginmargin-bottommargin-leftmargin-rightmargin-topmarker-offsetmarksmax-heightmax-widthmin-heightmin-width-moz-binding-moz-border-radius-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomright-moz-border-radius-bottomleft-moz-border-top-colors-moz-border-right-colors-moz-border-bottom-colors-moz-border-left-colors-moz-opacity-moz-outline-moz-outline-color-moz-outline-style-moz-outline-width-moz-user-focus-moz-user-input-moz-user-modify-moz-user-select
O orphansoutlineoutline-coloroutline-styleoutline-widthoverflowoverflow-Xoverflow-Y
P paddingpadding-bottompadding-leftpadding-rightpadding-toppagepage-break-afterpage-break-beforepage-break-insidepausepause-afterpause-beforepitchpitch-rangeplay-duringposition
Q/R quotes-replacerichnessrightruby-alignruby-overhangruby-position
S -set-link-sourcesizespeakspeak-headerspeak-numeralspeak-punctuationspeech-ratestressscrollbar-arrow-colorscrollbar-base-colorscrollbar-dark-shadow-colorscrollbar-face-colorscrollbar-highlight-colorscrollbar-shadow-colorscrollbar-3d-light-colorscrollbar-track-color
T table-layouttext-aligntext-align-lasttext-decorationtext-indenttext-justifytext-overflowtext-shadowtext-transformtext-autospacetext-kashida-spacetext-underline-positiontop
U/V unicode-bidi-use-link-sourcevertical-alignvisibilityvoice-familyvolume
W/Z white-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-indexzoom
A/B acceleratorazimuthbackgroundbackground-attachmentbackground-colorbackground-imagebackground-positionbackground-position-xbackground-position-ybackground-repeatbehaviorborderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthbottom
C caption-sideclearclipcolorcontentcounter-incrementcounter-resetcuecue-aftercue-beforecursor
D/E directiondisplayelevationempty-cells
F filterfloatfontfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weight
H/I heightime-modeinclude-source
L layer-background-colorlayer-background-imagelayout-flowlayout-gridlayout-grid-charlayout-grid-char-spacinglayout-grid-linelayout-grid-modelayout-grid-typeleftletter-spacingline-breakline-heightlist-stylelist-style-imagelist-style-positionlist-style-type
M marginmargin-bottommargin-leftmargin-rightmargin-topmarker-offsetmarksmax-heightmax-widthmin-heightmin-width-moz-binding-moz-border-radius-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomright-moz-border-radius-bottomleft-moz-border-top-colors-moz-border-right-colors-moz-border-bottom-colors-moz-border-left-colors-moz-opacity-moz-outline-moz-outline-color-moz-outline-style-moz-outline-width-moz-user-focus-moz-user-input-moz-user-modify-moz-user-select
O orphansoutlineoutline-coloroutline-styleoutline-widthoverflowoverflow-Xoverflow-Y
P paddingpadding-bottompadding-leftpadding-rightpadding-toppagepage-break-afterpage-break-beforepage-break-insidepausepause-afterpause-beforepitchpitch-rangeplay-duringposition
Q/R quotes-replacerichnessrightruby-alignruby-overhangruby-position
S -set-link-sourcesizespeakspeak-headerspeak-numeralspeak-punctuationspeech-ratestressscrollbar-arrow-colorscrollbar-base-colorscrollbar-dark-shadow-colorscrollbar-face-colorscrollbar-highlight-colorscrollbar-shadow-colorscrollbar-3d-light-colorscrollbar-track-color
T table-layouttext-aligntext-align-lasttext-decorationtext-indenttext-justifytext-overflowtext-shadowtext-transformtext-autospacetext-kashida-spacetext-underline-positiontop
U/V unicode-bidi-use-link-sourcevertical-alignvisibilityvoice-familyvolume
W/Z white-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-indexzoom
A/B acceleratorazimuthbackgroundbackground-attachmentbackground-colorbackground-imagebackground-positionbackground-position-xbackground-position-ybackground-repeatbehaviorborderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthbottom
C caption-sideclearclipcolorcontentcounter-incrementcounter-resetcuecue-aftercue-beforecursor
D/E directiondisplayelevationempty-cells
F filterfloatfontfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weight
H/I heightime-modeinclude-source
L layer-background-colorlayer-background-imagelayout-flowlayout-gridlayout-grid-charlayout-grid-char-spacinglayout-grid-linelayout-grid-modelayout-grid-typeleftletter-spacingline-breakline-heightlist-stylelist-style-imagelist-style-positionlist-style-type
M marginmargin-bottommargin-leftmargin-rightmargin-topmarker-offsetmarksmax-heightmax-widthmin-heightmin-width-moz-binding-moz-border-radius-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomright-moz-border-radius-bottomleft-moz-border-top-colors-moz-border-right-colors-moz-border-bottom-colors-moz-border-left-colors-moz-opacity-moz-outline-moz-outline-color-moz-outline-style-moz-outline-width-moz-user-focus-moz-user-input-moz-user-modify-moz-user-select
O orphansoutlineoutline-coloroutline-styleoutline-widthoverflowoverflow-Xoverflow-Y
P paddingpadding-bottompadding-leftpadding-rightpadding-toppagepage-break-afterpage-break-beforepage-break-insidepausepause-afterpause-beforepitchpitch-rangeplay-duringposition
Q/R quotes-replacerichnessrightruby-alignruby-overhangruby-position
S -set-link-sourcesizespeakspeak-headerspeak-numeralspeak-punctuationspeech-ratestressscrollbar-arrow-colorscrollbar-base-colorscrollbar-dark-shadow-colorscrollbar-face-colorscrollbar-highlight-colorscrollbar-shadow-colorscrollbar-3d-light-colorscrollbar-track-color
T table-layouttext-aligntext-align-lasttext-decorationtext-indenttext-justifytext-overflowtext-shadowtext-transformtext-autospacetext-kashida-spacetext-underline-positiontop
U/V unicode-bidi-use-link-sourcevertical-alignvisibilityvoice-familyvolume
W/Z white-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-indexzoom
A/B acceleratorazimuthbackgroundbackground-attachmentbackground-colorbackground-imagebackground-positionbackground-position-xbackground-position-ybackground-repeatbehaviorborderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthbottom
C caption-sideclearclipcolorcontentcounter-incrementcounter-resetcuecue-aftercue-beforecursor
D/E directiondisplayelevationempty-cells
F filterfloatfontfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weight
H/I heightime-modeinclude-source
L layer-background-colorlayer-background-imagelayout-flowlayout-gridlayout-grid-charlayout-grid-char-spacinglayout-grid-linelayout-grid-modelayout-grid-typeleftletter-spacingline-breakline-heightlist-stylelist-style-imagelist-style-positionlist-style-type
M marginmargin-bottommargin-leftmargin-rightmargin-topmarker-offsetmarksmax-heightmax-widthmin-heightmin-width-moz-binding-moz-border-radius-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomright-moz-border-radius-bottomleft-moz-border-top-colors-moz-border-right-colors-moz-border-bottom-colors-moz-border-left-colors-moz-opacity-moz-outline-moz-outline-color-moz-outline-style-moz-outline-width-moz-user-focus-moz-user-input-moz-user-modify-moz-user-select
O orphansoutlineoutline-coloroutline-styleoutline-widthoverflowoverflow-Xoverflow-Y
P paddingpadding-bottompadding-leftpadding-rightpadding-toppagepage-break-afterpage-break-beforepage-break-insidepausepause-afterpause-beforepitchpitch-rangeplay-duringposition
Q/R quotes-replacerichnessrightruby-alignruby-overhangruby-position
S -set-link-sourcesizespeakspeak-headerspeak-numeralspeak-punctuationspeech-ratestressscrollbar-arrow-colorscrollbar-base-colorscrollbar-dark-shadow-colorscrollbar-face-colorscrollbar-highlight-colorscrollbar-shadow-colorscrollbar-3d-light-colorscrollbar-track-color
T table-layouttext-aligntext-align-lasttext-decorationtext-indenttext-justifytext-overflowtext-shadowtext-transformtext-autospacetext-kashida-spacetext-underline-positiontop
U/V unicode-bidi-use-link-sourcevertical-alignvisibilityvoice-familyvolume
W/Z white-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-indexzoom
A/B acceleratorazimuthbackgroundbackground-attachmentbackground-colorbackground-imagebackground-positionbackground-position-xbackground-position-ybackground-repeatbehaviorborderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthbottom
C caption-sideclearclipcolorcontentcounter-incrementcounter-resetcuecue-aftercue-beforecursor
D/E directiondisplayelevationempty-cells
F filterfloatfontfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weight
H/I heightime-modeinclude-source
L layer-background-colorlayer-background-imagelayout-flowlayout-gridlayout-grid-charlayout-grid-char-spacinglayout-grid-linelayout-grid-modelayout-grid-typeleftletter-spacingline-breakline-heightlist-stylelist-style-imagelist-style-positionlist-style-type
M marginmargin-bottommargin-leftmargin-rightmargin-topmarker-offsetmarksmax-heightmax-widthmin-heightmin-width-moz-binding-moz-border-radius-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomright-moz-border-radius-bottomleft-moz-border-top-colors-moz-border-right-colors-moz-border-bottom-colors-moz-border-left-colors-moz-opacity-moz-outline-moz-outline-color-moz-outline-style-moz-outline-width-moz-user-focus-moz-user-input-moz-user-modify-moz-user-select
O orphansoutlineoutline-coloroutline-styleoutline-widthoverflowoverflow-Xoverflow-Y
P paddingpadding-bottompadding-leftpadding-rightpadding-toppagepage-break-afterpage-break-beforepage-break-insidepausepause-afterpause-beforepitchpitch-rangeplay-duringposition
Q/R quotes-replacerichnessrightruby-alignruby-overhangruby-position
S -set-link-sourcesizespeakspeak-headerspeak-numeralspeak-punctuationspeech-ratestressscrollbar-arrow-colorscrollbar-base-colorscrollbar-dark-shadow-colorscrollbar-face-colorscrollbar-highlight-colorscrollbar-shadow-colorscrollbar-3d-light-colorscrollbar-track-color
T table-layouttext-aligntext-align-lasttext-decorationtext-indenttext-justifytext-overflowtext-shadowtext-transformtext-autospacetext-kashida-spacetext-underline-positiontop
U/V unicode-bidi-use-link-sourcevertical-alignvisibilityvoice-familyvolume
W/Z white-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-indexzoom
A/B acceleratorazimuthbackgroundbackground-attachmentbackground-colorbackground-imagebackground-positionbackground-position-xbackground-position-ybackground-repeatbehaviorborderborder-bottomborder-bottom-colorborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-leftborder-left-colorborder-left-styleborder-left-widthborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-styleborder-top-widthborder-widthbottom
C caption-sideclearclipcolorcontentcounter-incrementcounter-resetcuecue-aftercue-beforecursor
D/E directiondisplayelevationempty-cells
F filterfloatfontfont-familyfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-weight
H/I heightime-modeinclude-source
L layer-background-colorlayer-background-imagelayout-flowlayout-gridlayout-grid-charlayout-grid-char-spacinglayout-grid-linelayout-grid-modelayout-grid-typeleftletter-spacingline-breakline-heightlist-stylelist-style-imagelist-style-positionlist-style-type
M marginmargin-bottommargin-leftmargin-rightmargin-topmarker-offsetmarksmax-heightmax-widthmin-heightmin-width-moz-binding-moz-border-radius-moz-border-radius-topleft-moz-border-radius-topright-moz-border-radius-bottomright-moz-border-radius-bottomleft-moz-border-top-colors-moz-border-right-colors-moz-border-bottom-colors-moz-border-left-colors-moz-opacity-moz-outline-moz-outline-color-moz-outline-style-moz-outline-width-moz-user-focus-moz-user-input-moz-user-modify-moz-user-select
O orphansoutlineoutline-coloroutline-styleoutline-widthoverflowoverflow-Xoverflow-Y
P paddingpadding-bottompadding-leftpadding-rightpadding-toppagepage-break-afterpage-break-beforepage-break-insidepausepause-afterpause-beforepitchpitch-rangeplay-duringposition
Q/R quotes-replacerichnessrightruby-alignruby-overhangruby-position
S -set-link-sourcesizespeakspeak-headerspeak-numeralspeak-punctuationspeech-ratestressscrollbar-arrow-colorscrollbar-base-colorscrollbar-dark-shadow-colorscrollbar-face-colorscrollbar-highlight-colorscrollbar-shadow-colorscrollbar-3d-light-colorscrollbar-track-color
T table-layouttext-aligntext-align-lasttext-decorationtext-indenttext-justifytext-overflowtext-shadowtext-transformtext-autospacetext-kashida-spacetext-underline-positiontop
U/V unicode-bidi-use-link-sourcevertical-alignvisibilityvoice-familyvolume
W/Z white-spacewidowswidthword-breakword-spacingword-wrapwriting-modez-indexzoom
CSSalgumas das propriedades
CSSalgumas das propriedades | ex. de uma cheat sheet
CSSalgumas das propriedades | ex. de uma cheat sheet
CSSo modelo de “caixa” que existe em todos os elementos
CSSposicionamento
CSSposicionamento
CSSlayout das páginas | tipos de layout
existem quatro tipos de layouts:
• Fixo (fixed)• Elástico (elastic)• Liquido (liquid)• Hibrido (hybrid)
CSSlayout 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
CSSlayout das páginas | tipos de layout | layout elástico
o layout elástico, tem a aparência de um layout fixo, mas aumentando ou diminuindo a fonte o layout acompanha o redimensionamento da fonte.
É um layout flexí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
CSSlayout 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
CSSlayout 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
CSSposicionamento
Exemplos emhttp://esev.comze.com/demo/HTML/posicionamento/
Existem quatro tipos de posicionamento possíveis para as DIVs:
• estático (static)• relativo (relative)• absoluto (absolute)• fixo (fixed)
CSSposicionamento | estático
o posicionamento estático corresponde ao fluir 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 emhttp://esev.comze.com/demo/HTML/posicionamento/
CSSposicionamento | 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 emhttp://esev.comze.com/demo/HTML/posicionamento/
CSSposicionamento | 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 emhttp://esev.comze.com/demo/HTML/posicionamento/
CSSposicionamento | 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 emhttp://esev.comze.com/demo/HTML/posicionamento/
http://jigsaw.w3.org/css-validator/
CSSvalidação do código
CSSreferências
Bibliografia:
• CSS, Criação Inovadora de Sites - FCA
Webliografia:
• 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/
o futuro?
CSS3http://www.w3schools.com/css3/default.asp