Internet - 1 Atributos nucleares m Atributos que podem aparecer em todas as marcas q Interesse em particular para suportar estilos m ID q Este é o início.

Apresentação em tema: "Internet - 1 Atributos nucleares m Atributos que podem aparecer em todas as marcas q Interesse em particular para suportar estilos m ID q Este é o início."— Transcrição da apresentação:

1 Internet - 1 Atributos nucleares m Atributos que podem aparecer em todas as marcas q Interesse em particular para suportar estilos m ID q Este é o início Cria identificador q Salta para o início Salta para lá Substitui a função de âncora do A q #PrimeiroParagrafo {color: gray} Numa folha de estilos m CLASS q Permite a subdivisão de marcas por categorias q Ave é um animal que...

2 Internet - 2 Atributos nucleares (cont.) m STYLE q Contém informação sobre a forma de apresentação, separadamente da informação sobre a estrutura do documento q Grande m TITLE q Associa texto informativo a uma marca q Texto... m Marca SPAN q Limita-se a marcar uma zona do documento e serve para associar atributos q No zoo há uma ave.

3 Internet - 3 Folhas de estilo m Forma está a tornar-se importante, a par do conteúdo m Sistematizar o design de uma colecção de documentos implica definições de estilo q CSS - Cascading Style Sheets m âmbito das definições q folha de estilo acessível a uma colecção inteira de documentos q marca no cabeçalho de um doc geral para todo o documento q atributo style em marcas específicas activo dentro da marca m mais específico prevalece (daí o cascading) q em caso de empate, o mais recente

4 Internet - 4 Acesso às definições m Marca q serve como meta-informação para documentar as ligações entre documentos: atributos href, rev, rel q usada para ligar folhas de estilo, com rel=stylesheet q pode existir mais do que uma (Netscape) m Estilo ao nível do documento q marca q para não perturbar navegadores sem estilos, as definições de estilo são metidas dentro de comentários HTML q convém documentar as definições, com comentários /* */ m importar CSS q previsto na norma CSS @import url(folha.css), mas não funciona nos navegadores actuais

5 Internet - 5 Uso de estilos Estilos Título definido com CSS Eis o dono do carro. Título definido localmente Parágrafo à esquerda. /* estilogeral.css */ H1 {color: blue; font-style: normal} /* estilotitulos.css */ H1 {color: green; font-style: italic}

6 Internet - 6 Resultado

7 Internet - 7 Elementos de sintaxe m Forma básica q marca {prop1:valor1; prop2:valor2 valor3; …} q H1 {font-style : italic} m aplicar a várias marcas q H1, H2, H3, H4, H5, H6 {font-style : italic} m aplicar só em contexto q OL LI {list-style: upper-alpha} q OL OL LI {list-style: upper-roman} q OL OL OL LI {list-style: lower-alpha} item numa lista de nível 3 identificado com letras minúsculas q H1 EM, P STRONG {color: red} q P UL STRONG {color: blue} caso vários contextos sejam aplicáveis, usar o mais específico

8 Internet - 8 Classes m Uma classe define um conjunto de propriedades para uma marca q permite vários estilos para a mesma marca P.resumo {font-style: italic; left-margin: 0.5cm; right-margin: 0.5cm} P.equacao {font-family: Symbol; text-align: center} q usam-se definindo o atributo class na marca Este texto destina-se… m classes genéricas aplicam-se a várias marcas.corrigido {color: red} nabissa m as classes herdam as propriedades da marca base q não há herança entre classes q especificar bastante a marca, e definir classes que só alteram o específico

9 Internet - 9 Uso de classes Estilos Associações Eis o dono do carro. Ele pertence a várias associações profissionais sem que no entanto tire daí grandes benefícios. x + a/2 = 0 Há que repensar as respectivas funções e métodos de trabalho para ver se se consegue reverter a situação. As associações desportivas são normalmente mais participadas e os sócios empenham-se mais nas suas actividades.

10 Internet - 10 Resultado m Estilo H1 {color: blue; font-style: normal} P {font-weight:bold} P.resumo {font-style: italic; margin-left: 0.5cm; margin-right: 0.5cm} P.equacao {font-family: Symbol; text-align: center}.corrigido {color: red}

11 Internet - 11 Propriedades nos estilos m Grupos de propriedades definíveis q fontes, cores e fundos, texto, caixas e disposição, listas, marcas m Norma q http://www.w3.org/TR/REC-CSS1 m Referências q HTML The Complete Reference, Thomas A. Powell (Osborne) http://www.htmlref.com q Tutorial (CERN) http://alf.fe.up.pt/~lmr/mgi/css/ q Tutorial (John Allsopp of Western Civilisation) http://www.westciv.com/style_master/academy/css_tutorial/

12 Internet - 12 Modelo de formatação beira exterior esquerda beira interior direita beira interior esquerda margem esquerda margem direita enchimento à direita topo interno beira exterior direita enchimento inferior enchimento superior margem inferior fundo conteúdo fundo interno caixilho inferior margem superior topo caixilho esquerdo enchimento à esquerda caixilho direito caixilho superior