Introdução à Informática Escola Superior de Tecnologia - Ano Lectivo 2005/06 Prof. Bruno Silva Cascading Style Sheets - (CSS] Introdução Uma Style Sheet é um ficheiro que contém regras que dizem ao browser como apresentar um documento. As duas maneiras mais utilizadas de utilizar estas folhas de estilo são: Link Externo: <link rel= stylesheet href= style.css type= text/css /> Embebida (entre <head> e </head>): <style type="text/css" > body { background: url( foo.gif ) red; color: black } p em { background: yellow; color: black }.note { margin-left: 5px; margin-right: 5px } </style> O ultimo método é conveniente para efeitos de teste, ou quando só existe um documento. Nos casos em que vários documentos utilizam a mesma formatação, o primeiro método é preferível, podendo a mesma folha de estilos ser partilhada por todos os documentos. Cada regra é constituída por um selector (normalmente uma tag HTML, como body, p, h1, etc) e o estilo a ser aplicado ao selector. Existem várias propriedades que podem ser definidas para uma tag. Cada propriedade toma um valor, que juntamente com a propriedade, descrevem como o selector deverá ser apresentado. Introdução à Informática - 1 -
Regras de estilo são formadas da seguinte forma: Selector { propriedade1 : valor1; Propriedade2 : valor2; Propriedade3 : valor 3; } As várias declarações de estilo para o selector são separadas por ponto e vírgula. Como exemplo, o seguinte código (num ficheiro *.css ou embebido no documento) define as propriedades color e font-size para as tags h1 e h2: h1 { font-size: x-large; color: red } h2 { font-size: large; color: blue } Estas regras dizem ao browser para mostrar o cabeçalho de nível 1 numa fonte extra-grande e vermelha e o cabeçalho de nível 2 numa fonte grande e com cor azul. Sintaxe Selectores Qualquer tag HTML é um possível selector. O selector é simplesmente a tag que está associada a um estilo particular. Por exemplo, o selector em: é p. p { text-indent: 10px } Selectores de Classe Um selector simples pode ter diferentes classes, permitindo que a mesma tag possa ter vários estilos. Por exemplo, pode-se querer mostrar um parágrafo de diferentes formas, neste caso particular, com cores diferentes: p.vermelho { color: red } p.verde { color: green } Introdução à Informática - 2 -
O exemplo acima criou duas classes, vermelho e verde para utilizar com a tag p. O atributo class é utilizado no ficheiro HTML para indicar a classe de uma tag, isto é: <p class= vermelho > Este parágrafo aparecerá a vermelhor </p> As classes também podem ser declaradas sem uma tag associada:.nota { font-weight: bold } Neste caso a classe nota poderá ser utilizada com qualquer tag, dizendo que o texto deverá aparecer a bold. Selectores de ID Os selectores de ID são destinados a serem utilizados apenas uma vez, segundo as convenções do HTML, num documento. Todavia, os browsers permitem que apareçam várias vezes no documento, embora não seja boa prática. O selector de ID é atribuído utilizando o indicador # que precede um nome, por exemplo: #menu { border: 1px solid black } <div id= menu > Zona com uma moldura preta à volta </div> Selectores contextuais Selectores contextuais são apenas linhas de dois ou mais selectores simples separados por espaços. A estes podem ser atribuídas propriedades normais e tomarão precedência sobre os selectores simples. Por exemplo, o selector contextual em: h1 b { background: yellow } É h1 b. Esta regra diz que quando o bold for utilizado dentro de um cabeçalho de nível 1, a sua cor de fundo deverá ser amarela. Agrupamento De modo a diminuir repetições dentro das folhas de estilo, o agrupamento de selectores permite que vários selectores partilhem uma, ou mais, propriedades: Introdução à Informática - 3 -
h1, h2, h3 { color: red; font-family: Verdana } Desta forma os cabeçalhos de nível 1, 2 e 3 terão a cor vermelha e a sua fonte será Verdana. Pseudo-Classes e Pseudo-Elementos As pseudo-classes e pseudo-elementos são casos especiais de classes e elementos que são automaticamente reconhecidos pelos browsers que suportam CSS. As pseudo-classes referem-se a tipos diferentes de um elemento (ou tag), como por exemplo os links activos e visitados. Os pseudo-elementos referem-se a sub-partes de elementos, como a primeira letra de um parágrafo. Em ambos a sintaxe é: selector:pseudo-classe/elemento { propriedade: valor } Estes NÃO devem ser especificados no documento HTML, com o atributo class. As classes normais podem ser utilizados juntamente com as pseudo-classes da seguinte forma: selector.classe:pseudo-classe/elemento { propriedade: valor } Pseudo-classes do Anchor (links) Por exemplo a tag a (anchor, que especifica os links) têm as seguintes pseudo-classes: a:link { color: blue } a:visited { color: green } a:hover { color: red } Este exemplo diz que os links deverão aparecer a azul, enquanto os links que já visitamos deverão aparecer a verde. Um caso interessante é o último que diz que quando o rato passar por cima do link, este deverá tomar a cor vermelha! Introdução à Informática - 4 -
Pseudo-Elementos do parágrafo Um exemplo de pseudo-elemento do parágrafo (tag p) é o firstletter. Costuma-se ver em alguns jornais a primeira letra de um artigo começar com uma letra maior. Isto pode ser feito da seguinte forma: p.artigo:first-letter { font-size: 300%; float: left } Neste caso um parágrafo da classe artigo teria a primeira letra com um tamanho 300% maior que o texto nele contido. Comentários Nos ficheiros *.css podem ser inseridos comentários para tomar notas sobre alguma coisa, ou ajudar a perceber o que foi feito, quando se retoma o ficheiro no futuro. Os comentários são inseridos de forma análoga à linguagem C: /* Isto é um comentário */ Notas Finais O conjunto de tuplos selector/propriedade/valor é muito extenso e é impraticável colocá-los todos aqui. Sendo assim redirecciono os alunos para as seguintes fontes, para que tenham uma referência no futuro. o o http://www.htmlhelp.com/reference/css/properties.html http://www.w3schools.com/css/css_reference.asp Introdução à Informática - 5 -
Anexo I Cores Existem vários métodos de especificar uma cor, quer seja de background, do texto, etc. Os três principais são: pelo nome da cor, pelo seu código hexadecimal e pelas suas componentes RGB (Red, Green, Blue). A título de exemplo fica a seguinte tabela que mostra as cores mais básicas e as suas três representações nos formatos supracitados: Cor Nome Hexadecimal RGB Black #000000 Rgb(0,0,0) Red #FF0000 Rgb(255,0,0) Blue #0000FF Rgb(0,0,255) Green #00FF00 Rgb(0,255,0) Yellow #FFFF00 Rgb(255,255,0) Magenta #FF00FF Rgb(255,0,255) Cyan #00FFFF Rgb(0,255,255) Gray #C0C0C0 Rgb(128,128,128) White #FFFFFF Rgb(255,255,255) Provavelmente a maneira mais fácil de visualizar uma cor e codificá-la em CSS, é utilizar, por exemplo, o selector de cores do Paint e visualizar as suas componentes RGB. De qualquer modo ficam aqui mais algumas fontes de onde podem ser retirados os códigos das cores: o www.somacon.com/p142.php o www.w3schools.com/css/css_colors.asp Um pequeno exemplo (com uma péssima escolha de cores! ): Body { Background-color: rgb(0,0,255); Color: Yellow; Border: 5px solid #C0C0C0; } Tornaria o fundo da página azul, com a cor do texto amarela e uma moldura, à volta da página, cinzenta! Pode ser utilizado qualquer formato de cores, embora aqui, apenas para demonstração, foram utilizados os três. Introdução à Informática - 6 -