Tecnologias para Internet Thyago Maia Tavares de Farias Aula 6
Sumário Stylesheets Stylesheets Stylesheets Cascating Style Sheets (CSS) Cascating Style Sheets (CSS) Cascating Style Sheets (CSS) Cascating Style Sheets (CSS)
Stylesheets Tem a função de separar a formatação da página de seu conteúdo; Tem a função de separar a formatação da página de seu conteúdo; Facilita a adaptação da apresentação da página à aplicações e clientes diferentes; Facilita a adaptação da apresentação da página à aplicações e clientes diferentes; Principais vantagens: Principais vantagens: Adaptação para o formato em diferentes displays; Adaptação para o formato em diferentes displays; Padronização da apresentação gráfica de uma apresentação; Padronização da apresentação gráfica de uma apresentação; Por exemplo, no caso de uma mudança de fonte em várias páginas HTML, alteraríamos apenas o documento de estilo; Por exemplo, no caso de uma mudança de fonte em várias páginas HTML, alteraríamos apenas o documento de estilo;
Cascating Style Sheets (CSS) Linguagem que define como os documentos HTML serão exibidos; Linguagem que define como os documentos HTML serão exibidos; Vários documentos HTML podem acessar um único arquivo CSS (folha de estilo), facilitando a padronização de aplicações; Vários documentos HTML podem acessar um único arquivo CSS (folha de estilo), facilitando a padronização de aplicações; Graças ao CSS, deixamos de utilizar atributos de formatação em tags HTML, e passamos a trabalha com formatação em um arquivo CSS; Graças ao CSS, deixamos de utilizar atributos de formatação em tags HTML, e passamos a trabalha com formatação em um arquivo CSS;
Cascating Style Sheets (CSS) CSS economiza muito trabalho: CSS economiza muito trabalho: O mesmo define como os elementos HTML serão exibidos; O mesmo define como os elementos HTML serão exibidos; Arquivos CSS permite mudar a aparência e o layout de todas as páginas em um Web site, apenas editando um único arquivo; Arquivos CSS permite mudar a aparência e o layout de todas as páginas em um Web site, apenas editando um único arquivo;
Cascating Style Sheets (CSS) Tag usada em um documento HTML para referenciar um arquivo CSS: Tag usada em um documento HTML para referenciar um arquivo CSS: Tal tag deverá ser declarada entre as tags e (cabeçalho de uma página HTML; Tal tag deverá ser declarada entre as tags e (cabeçalho de uma página HTML;
Cascating Style Sheets (CSS) Sintaxe do CSS: Sintaxe do CSS: Uma regra CSS possui duas partes: um seletor e uma ou mais declarações; Uma regra CSS possui duas partes: um seletor e uma ou mais declarações; Um seletor é normalmente um elemento HTML que você deseja formatar (Ex.: html, body, a, p, div, etc.); Um seletor é normalmente um elemento HTML que você deseja formatar (Ex.: html, body, a, p, div, etc.); Um arquivo CSS poderá ter vários seletores; Um arquivo CSS poderá ter vários seletores; Cada declaração consiste em uma propriedade e um valor (Ex.: background: #000000, etc.); Cada declaração consiste em uma propriedade e um valor (Ex.: background: #000000, etc.); A propriedade é o atributo de estilo (formatação) a ser alterado. Cada propriedade possui um valor; A propriedade é o atributo de estilo (formatação) a ser alterado. Cada propriedade possui um valor;
Cascating Style Sheets (CSS) Sintaxe do CSS: Sintaxe do CSS:seletor{ propriedade1: valor1; propriedade2: valor2;... propriedaden: valor3; }
Cascating Style Sheets (CSS) Exemplo: Exemplo: Seletor CSS que formata cor e alinhamento de fonte em parágrafos HTML ( ); Seletor CSS que formata cor e alinhamento de fonte em parágrafos HTML ( );p{ color: red; text-align: center; }
Cascating Style Sheets (CSS) Exemplo anterior invocado em uma página HTML: Exemplo anterior invocado em uma página HTML:<html><head> </head><body> Parágrafo 1 Parágrafo 1 Parágrafo 2 Parágrafo 2 Parágrafo 3 Parágrafo 3 </body></html>
Cascating Style Sheets (CSS) O seletor id O seletor id Usado para especificar uma formatação para um único elemento específico; Usado para especificar uma formatação para um único elemento específico; Criamos um identificador (id) para declarar um seletor. O mesmo poderá ser utilizado como um atributo de um elemento HTML. Criamos um identificador (id) para declarar um seletor. O mesmo poderá ser utilizado como um atributo de um elemento HTML. Seletores id são declarados com # seguido de um nome definido pelo usuário; Seletores id são declarados com # seguido de um nome definido pelo usuário;
Cascating Style Sheets (CSS) Exemplo: Exemplo: Seletor id que alinha o texto de um elemento HTML para a direita: Seletor id que alinha o texto de um elemento HTML para a direita: # direita { text-align: right; }
Cascating Style Sheets (CSS) Exemplo anterior invocado em uma página HTML: Exemplo anterior invocado em uma página HTML:<html><head> </head><body> Parágrafo 1 Parágrafo 1 Parágrafo 2 Parágrafo 2 Parágrafo 3 Parágrafo 3 </body></html>
Cascating Style Sheets (CSS) O seletor class O seletor class Usado para especificar uma formatação para um grupo de elementos; Usado para especificar uma formatação para um grupo de elementos; Diferentemente de um seletor id, o seletor class é freqüentemente utilizado para vários elementos. Diferentemente de um seletor id, o seletor class é freqüentemente utilizado para vários elementos. Seletores class são declarados com. seguido de um nome definido pelo usuário; Seletores class são declarados com. seguido de um nome definido pelo usuário;
Cascating Style Sheets (CSS) Exemplo: Exemplo: Seletor class que centraliza o texto de um elemento HTML: Seletor class que centraliza o texto de um elemento HTML:. centro { text-align: center; }
Cascating Style Sheets (CSS) Exemplo anterior invocado em uma página HTML: Exemplo anterior invocado em uma página HTML:<html><head> </head><body> Parágrafo 1 Parágrafo 1 Parágrafo 2 Parágrafo 2 Parágrafo 3 Parágrafo 3 </body></html>