html e css
93 pág.

html e css


DisciplinaHtml e Css48 materiais950 seguidores
Pré-visualização6 páginas
seguintes valores: left, right, center ou justify
Exemplos
h1 { text-align: center }
p.nota { text-align: justify }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 129 / 157
CSS Propriedades de formatação
Propriedade text-indent
Funcionamento
Indica o avanço da primeira linha de texto do elemento
Valores possíveis
Uma percentagem ou um tamanho
A percentagem é em relação à largura do elemento-pai
O valor por defeito é 0pt
Exemplos
/* avançar a primeira linha dos parágrafos */
p { text-indent: 5em }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 131 / 157
CSS Propriedades de formatação
Propriedade text-transform
Funcionamento
Indica se o texto do elemento deve ser convertido para maiúsculas
(todo ou só a primeira letra de cada palavra) ou para minúsculas
Valores possíveis
Um dos seguintes valores: none, capitalize, uppercase ou
lowercase
O valor por defeito é none
Exemplos
h1 { text-transform: uppercase }
h2 { text-transform: capitalize }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 133 / 157
CSS Propriedades de formatação
Propriedade line-height
Funcionamento
Indica a altura das linhas de texto
Valores possíveis
O valor normal, um valor numérico sem unidades, um tamanho
(valor numérico com unidades) ou uma percentagem
O valor por defeito é normal
Se o valor numérico não tiver unidades, então a altura da linha será a
sua altura normal, multiplicada pelo valor indicado
A percentagem é em relação à altura normal da linha
Exemplos
/* texto com espaçamento de duas linhas */
p { line-height: 200% }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 135 / 157
CSS Propriedades de formatação
Propriedades margin-top, margin-bottom,
margin-left, margin-right e margin
Funcionamento
Tamanho de uma ou todas as margens do elemento (com margin)
Na propriedade margin a ordem é top-right-bottom-left; indicando-se
um só valor, as margens são todas iguais; indicando-se mais, as
margens em falta são iguais às dos lados opostos
Valores possíveis
Um tamanho (0 por defeito), uma percentagem (em relação à largura
do elemento-pai), ou o valor auto
Exemplos
body { margin: 5em } /* todas iguais */
p { margin: 2em 4em } /* top/bottom 2em, left/right 4em */
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 137 / 157
CSS Propriedades de formatação
Propriedades padding-top, padding-bottom,
padding-left, padding-right e padding
Funcionamento
Tamanho do espaço entre a margem do elemento e o seu conteúdo
Na propriedade padding aplicam-se as mesmas regras da propriedade
margin
Valores possíveis
Um tamanho (0 por defeito), ou uma percentagem (em relação à
largura do elemento-pai)
Exemplos
body { padding: 10px } /* igual nos 4 lados */
span.nota { padding-top: 2em; padding-bottom: 1em }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 139 / 157
CSS Propriedades de formatação
Propriedades border-top-width,
border-bottom-width, border-left-width,
border-right-width e border-width
Funcionamento
Tamanho dos limites (borders) do elemento
Na propriedade border-width aplicam-se as mesmas regras da
propriedade margin
Valores possíveis
Um dos seguintes valores: thin, medium ou tick
Um tamanho
Exemplos
h1 { border-width: 2px }
p { border-width: 2px 4px }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 141 / 157
CSS Propriedades de formatação
Propriedade border-color
Funcionamento
Indica as cores utilizadas nos limites (borders) do elemento
Podem-se indicar entre uma e quatro cores, aplicando-se as mesmas
regras da propriedade margin
Valores possíveis
Uma a quatro cores, identificadas por nome ou por rgb
Exemplos
h1 { border-color: red }
p { border-color: #ccc }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 143 / 157
CSS Propriedades de formatação
Propriedade border-style
Funcionamento
Indica o estilo dos limites (borders) do elemento (sólido, tracejado,
pontos, etc.)
Podem-se indicar entre um e quatro valores, aplicando-se as mesmas
regras da propriedade margin
Valores possíveis
Um a quatro valores de entre os valores possíveis: none, dotted,
dashed, solid, double, groove, ridge, inset e outset
Exemplos
h1 { border-style: dotted }
p { border-style: solid }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 145 / 157
CSS Propriedades de formatação
Propriedades border-top, border-bottom,
border-left e border-right
Funcionamento
Permitem indicar ao mesmo tempo a largura, estilo e cor de um dos
limites do elemento
A ordem é width-style-color
Exemplos
h1 { border-bottom: 1px solid black }
p { border-left: 1mm dotted red }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 147 / 157
CSS Propriedades de formatação
Propriedade border
Funcionamento
Permitem indicar ao mesmo tempo a largura, estilo e cor de todos os
limites do elemento
Os limites serão iguais nos quatro lados
A ordem é width-style-color
Exemplos
h1 { border: 1px solid black }
p { border: 1mm dotted red }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 149 / 157
CSS Propriedades de formatação
Propriedades width e height
Funcionamento
Indicam a largura e a altura do elemento (não é aplicável a todos os
elementos)
Valores possíveis
Um tamanho, uma percentagem (só para width, e em relação à
largura do elemento-pai), ou o valor auto (o valor por defeito)
Exemplos
.nota { width: 10em }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 151 / 157
CSS Propriedades de formatação
Propriedades float e clear
Funcionamento
A propriedade float indica que o elemento é flutuante, isto é, que
pode ser rodeado pelo texto de outros elementos
A propriedade clear indica em que lados é que o elemento não pode
ser rodeado por elementos flutuantes
Valores possíveis
Propriedade float: um dos valores left, right ou none (valor por
defeito)
Propriedade clear: um dos valores left, right, both ou none
(valor por defeito)
Exemplos
.nota { float: left; width: 5cm; clear: left }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 153 / 157
CSS Propriedades de formatação
Propriedade display
Funcionamento
Indica como deve ser visualizado o elemento:
block Como um bloco, com quebras de linha antes e depois
inline Sem quebras de linha
item-list Como elemento de uma lista, com quebras de linha antes e
depois
none O elemento e os seus descendentes não são mostrados
Exemplos
.esconder { display: none }
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 155 / 157
Bibliografia
1 HTML
Introdução
Páginas básicas
Texto
Listas
Imagens
Links
Tabelas
Outras tags
2 CSS
Introdução
Selecção de elementos
Propriedades de formatação
3 Bibliografia
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 156 / 157
Bibliografia
Bibliografia
HTML & XHTML: the definitive guide
Chuck Musciano & Bill Kennedy, O\u2019Reilly, 2000
Cota 2408 na biblioteca do DCC
HTML Tutorial
http://www.w3schools.com/html/default.asp
Página sobre HTML na Wikipedia
http://en.wikipedia.org/wiki/HTML
Página sobre XHTML na Wikipedia
http://en.wikipedia.org/wiki/XHTML
Guide to Cascading Style Sheets
http://www.htmlhelp.com/reference/css/
Marco Costa (DCC / FCUP) HTML & CSS 2005 / 06 157 / 157
	Conteúdo
	HTML
	Introdução
	Páginas básicas
	Texto
	Listas
	Imagens
	Links
	Tabelas
	Outras tags
	CSS
	Introdução
	Selecção de elementos
	Propriedades de formatação
	Bibliografia