Internet - 1 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.

Apresentação em tema: "Internet - 1 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."— Transcrição da apresentação:

1 Internet - 1 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

2 Internet - 2 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

3 Internet - 3 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}

4 Internet - 4 Resultado

5 Internet - 5 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

6 Internet - 6 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

7 Internet - 7 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.

8 Internet - 8 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}

9 Internet - 9 Propriedades nos estilos m Grupos de propriedades definíveis q fontes, cores e fundos, texto, caixas e disposição, listas, marcas q http://www.w3.org/TR/REC-CSS1 tem a norma detalhada

10 Internet - 10 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