Carregar apresentação
A apresentação está carregando. Por favor, espere
1
CSS Huston Schwartez Souza
2
Objetivos Conhecer as origens e os objetivos da linguagem CSS.
Conhecer a estrutura base de uma regra CSS. Compreender o funcionamento dos seletores CSS. Conhecer as principais propriedades e atributos da linguagem CSS. Compreender as regras de posicionamento com recurso a CSS. Ser capaz de formatar um documento HTML com recurso a regras CSS.
3
Cascading Style Sheets
CSS significa Cascading Style Sheets. CSS é uma linguagem que permite definir o estilo visual de documentos web. A linguagem CSS permite definir como deve ser apresentado o conteúdo e estrutura definidos em HTML. A primeira especificação foi publicada em 1994 mas só a partir de 2001 a linguagem CSS começou realmente a ser utilizada devido ao suporte introduzido nos principais navegadores web. As especificações da linguagem CSS são mantidas pelo consórcio W3C.
4
Motivação Porquê separar estrutura e conteúdo (HTML) da apresentação (CSS)? A escrita e estruturação de conteúdos requer competências diferentes daquelas necessárias para desenhar a apresentação desses conteúdos. A separação ao nível das tecnologias facilita a separação e organização do trabalho nas equipas. A web é um meio de comunicação multi-plataforma. O conteúdo disponibilizado nos sítios web pode ser consultado usando diferentes dispositivos (ecrã, telemóvel, impresso, PDA, voz, etc). A separação entre HTML e CSS permite definir o conteúdo e estrutura apenas uma vez e ter diferentes folhas de estilos em função do dispositivo de destino. Com CSS é possível definir a apresentação em função do destino.
5
Diferenciação por Dispositivo
O uso de diferentes instruções CSS para diferentes tipos de dispositivos permite desenhar e adaptar as interfaces aos dispositivos. Página de entrada do Google consultada em diferentes dispositivos: + web.css + iphone.css + ipad.css
6
Uso de CSS Como aplicar CSS a um documento HTML?
Criar um novo documento de texto do tipo CSS (extenção .css). Indicar no documento HTML a associação ao documento CSS. Vários documentos HTML podem ser associados ao mesmo documento CSS. CSS HTML HTML
7
Ligação ao Documento CSS
O uso de regras CSS externas é feito incluindo no cabeçalho de um documento HTML uma ligação para o ficheiro com as regras CSS. <!DOCTYPE html> <html> <head> <title>Aplicação de CSS</title> <link rel="stylesheet" </head> type="text/css" href="style.css"> <body> ... </body> Nome do ficheiro CSS. </html>
8
Documento CSS Um documento CSS é composto por um conjunto de regras CSS. h1 { background-color: red; color: black; font-family: Arial, sans-serif; } p { margin-top: 10px; text-align: justify; strong { color: red;
9
Regra CSS selector valores h1 { color: rgb(100,100,100);
margin-top: font-family: 10px; Arial, sans-serif; } propriedades 10
10
Seletores Um seletor identifica elementos num documento HTML. h1 {
identifica os elementos H1 } p { identifica os elementos P strong { identifica os elementos STRONG
11
Seletores de Ligações As ligações HTML têm um conjunto de seletores especiais que permitem controlar o aspeto em função do estado da ligação e da interação com o utilizador. a:link — seletor que se aplica às ligações que ainda não foram visitadas. a:visited — aplica-se às ligações que já foram visitadas. a:hover — aplica-se quando o rato está em cima da ligação. a:active — aplica-se quando a ligação é ativada ( clicada ).
12
Propriedades e Valores
Cada elemento HTML tem um conjunto de propriedades. Cada propriedades aceita um conjunto de valores. As propriedades que não são alteradas, mantêm o valor original. h1 { color: red; font-style: italic; } p { letter-spacing: 5px; font-size: 18px;
13
Propagação de Estilos Algumas propriedades CSS são propagadas para os elementos filhos de um elemento HTML. No exemplo seguinte, os elementos h1 e p vão herdar as alterações que foram definidas para o elemento body. Isto acontece porque todos os elementos que estão encaixados dentro do body — também designados como filhos — herdam as propriedades definidas. body { font-family: Verdana, Arial; font-size: 14px; } <body> <h1>Um <p>Um </body> título</h1> parágrafo curto.</p> HTML CSS
14
Propriedades Básicas
15
Formatação de Texto font-family: Lista ordenada dos tipos de letra a usar. font-size: Tamanho das letras. Unidades possíveis: px, % ou em. font-style: Estilo das letras. Opções: normal ou italic. font-weight: Grossura das letras. Opções: lighter, normal, bold ou bolder. text-decoration: Efeitos a aplicar ao texto. Opções: none, underline, overline, line-through.
16
Tipos de Letra Para usar um determinado tipo de letra num documento web, é necessário que esse tipo esteja instalado no computador do utilizador que acede ao documento. Os tipos de letra com maior penetração nos computadores são: Arial, Courier New, Georgia, Times New Roman, Trebuchet, e Verdana. A propriedade font-family permite indicar uma lista de tipos de letra a usar na formatação do elemento, ordenados por prioridades. O navegador web tenta usar o primeiro tipo de letra indicado. Se o tipo não estiver instalado no computador é tentado o tipo seguinte, e assim sucessivamente. No final da lista é importante indicar sempre um de dois tipos genéricos: serif ou sans-serif. Por exemplo: font-family: Verdana, Arial, sans-serif.
17
Exemplo de Formatação de Texto
Um parágrafo com alterações na formatação. p { font-family: Verdana; font-size: 18px; font-style: italic; font-weight: bold; text-decoration: underline; }
18
Apresentação de Texto text-align: Alinhamento do texto. Opções: left, right, justify, center. text-indent: Alinhamento da primeira linha de um bloco de texto. line-height: Altura de cada linha num bloco de texto. letter-spacing: Espaçamento entre letras. word-spacing: Espaçamento entre palavras.
19
Exemplo de Apresentação de Texto
Um parágrafo com alterações ao nível da apresentação. p { text-align: justify; text-indent: 3em; line-height: 2em; letter-spacing: -0.1em; word-spacing: 0.5em; } 20
20
Principais Unidades A definição dos valores associadas às propriedades dos elementos pode ser indicada em CSS usando diferentes unidades. As principais unidades são as duas seguintes. px ( píxel ) — Os píxeis representam unidades absolutas, um pixel corresponde a um pixel no ecrã do utilizador. Exemplos: 10px, 20px, 1px. % ( percentagem ) — As unidades percentuais representam unidades relativas, e são calculadas em relação ao contexto do elemento. O contexto varia em função do elemento e da propriedade. Exemplos: 1%, 100%, 5.5%.
21
Definição de Cores Existem várias alternativas para definir cores em CSS. Palavra-chave: black, yellow, red, blue, etc. Código RGB: rgb(vermelho, verde, azul) Exemplos: rgb(100%, 40%, 0%); rgb(255, 102, 0). Código Hexadecimal: #código hexadecimal Exemplos: #326432, #000000, #0088ff.
22
Definição de Cores Um texto colorido. color: Cor do texto do elemento.
background-color: Cor do fundo do elemento. Um texto colorido. p { color: rgb(100%, 0%, 0%); background-color: yellow; }
23
Margens e Espaçamentos
24
Margens e Espaçamentos
Cada elemento HTML é representado visualmente como uma caixa retangular composta por três partes: a margem, o contorno e o espaçamento interno. Margem do elemento: espaço após o contorno. Ciências da Comunicação Espaçamento interno do elemento: espaço entre o conteúdo e o contorno. Contorno do elemento.
25
Contorno É possível definir o contorno de todo o elemento ou apenas de parte. border: alteração de todo o contorno. border-top: alteração apenas do contorno de topo. border-bottom: contorno inferior. border-left: contorno esquerdo. border-right: contorno direito.
26
Contorno O contorno define-se especificando três valores: a grossura, o estilo e a cor. Grossura: definida em píxeis. Estilo: none, dotted, dashed, solid, double, groove, ridge. Cor: valor da cor. h1 { border: 1px solid black; } h2 { border-right: 2px dotted rgb(100%,0%,0%); border-left: 2px dotter red;
27
Margem É possível definir a margem de todo o elemento ou apenas de parte. Na definição da margem indica-se a distância em píxels. margin: alteração da margem de todo o elemento. margin-top: alteração apenas da margem de topo. margin-bottom: margem inferior. margin-left: margem esquerda. margin-right: margem direita.
28
Espaçamento Interno É possível definir o espaçamento interno de todo o elemento ou apenas de parte. Na definição do espaçamento indica-se a distância em píxels. padding: alteração do espaçamento interno de todo o elemento. padding-top: alteração apenas do espaçamento interno de topo. padding-bottom: espaçamento interno inferior. padding-left: espaçamento interno esquerdo. padding-right: espaçamento interno direito.
29
Margem e Espaçamento Interno
img { margin: 15px; } a { margin-left: 5px; margin-right: 5px; h1 { padding: 10px; } p { padding-top: 10px; padding-bottom: 15px; Modificações à margem. Modificações ao espaçamento interno. 30
30
Listas É possível definir a aparência do marcador de cada item com a propriedade list-style-type. Marcadores não numéricos: none, disc, circle, square. Marcadores numéricos: none, decimal, decimal-leading-zero, lower- roman, upper-roman, lower-latin, upper-latin. ul { list-style-type: square; } ul { list-style-type: lower-roman; }
31
Seletores Avançados
32
Atributo class Os elementos de um mesmo tipo têm obrigatoriamente o mesmo aspeto? Por exemplo, todos os elementos P (parágrafos) de uma página têm de ser apresentados da mesma forma? Não. É possível distinguir os elementos usando classes. Todos os elementos HTML têm um atributo optativo class. Os nomes das classes podem ser compostos por letras (não acentuadas) ou algarismos, e devem começar com uma letra. Exemplos: principal, menu, submenu, rodape, cabecalho, publicidade. Cada elemento pode pertencer a várias classes. Para atribuir um elemento a várias classes, basta separar os nomes das diferentes classes com espaços.
33
Atributo class Para identificar uma determinada classe em CSS usa-se um ponto seguido do nome da classe. Exemplos: .menu, .rodape, .destaque. <p class="primeiro">Parágrafo da classe primeiro.</p> <p class="segundo">Parágrafo da classe segundo</p> <p class="terceiro">Parágrafo da classe terceiro</p> p { regra aplica-se a todos os parágrafos } p.primeiro { regra aplica-se aos parágrafos da classe primeiro } p.terceiro { regra aplica-se aos parágrafos da classe terceiro }
34
Seleção Conjunta de Elementos
É possível aplicar a mesma regra CSS a elementos diferentes, para tal basta separar os vários elementos por vírgulas. A principal vantagem desta opção é evitar a duplicação de código idêntico. h1, h2, h3 { regra comum aos elementos h1, h2 e h3 } em, p { regra comum aos elementos em e p }
35
Seleção de Elementos Encaixados
É possível selecionar elementos em CSS com base na estrutura do HTML. Por exemplo, selecionar os elementos do tipo A que estão dentro de elementos do tipo B. Para selecionar elementos encaixados noutro elemento, usa-se o espaço. p em { seleção dos elementos em dentro de elementos p } header h1 { elementos h1 dentro de elementos header } footer h1 { elementos h1 dentro de elementos footer }
36
Sumário de Seletores p { regra aplica-se a todos os elementos p }
p, strong { todos os elementos p ou strong } h1 strong { elementos strong dentro de elementos h1 } strong.destaque { elementos strong da classe destaque } p strong.a { elementos strong da classe a dentro de elementos p } p.a strong { elementos strong dentro de elementos p da classe a } .destaque { todos os elementos da classe destaque }
37
Posicionamento
38
Posicionamento Com CSS é possível alterar o fluxo normal de uma página e definir a posição de cada elemento. Fluxo Normal Fluxo Modificado com CSS
39
Propriedade position Todos os elementos têm a propriedade position que estabelece a forma de cálculo da posição de um elemento. Existem 4 alternativas para o posicionamento de um elemento: static — O elemento é posicionado segundo o fluxo normal. Este é o valor definido por omissão. relative — A posição do elemento é calculada em relação à posição original segundo o modelo estático. absolute — A posição do elemento é especificada com as propriedades top, right, bottom e left relativamente ao elemento que contém este. fixed — O cálculo da posição é igual ao método absoluto mas o elemento pai é a "janela de visualização" (o navegador). 40
40
Propriedades de Posicionamento
A propriedade position é usada juntamente com as propriedades: top — afastamento do lado superior do elemento. left — afastamento do lado esquerdo do elemento. bottom — afastamento do lado inferior do elemento. right — afastamento do lado direito do elemento. e também: width — largura do elemento. height — altura do elemento.
41
Propriedades de Posicionamento
top width height ELEMENTO left right bottom
42
Posicionamento Estático
O posicionamento estático corresponde ao posicionamento normal, definido por omissão. Segue a sequência definida no documento HTML, de cima para baixo e da esquerda para a direita As propriedades top, left, bottom, right não se aplicam. p { position: static; width: 200px; height: 5em; border: 1px solid red; }
43
Posicionamento Relativo
Com o posicionamento relativo, a posição é calculada em relação à localização natural do elemento. O elemento pode ser deslocado na vertical ou na horizontal face à posição original. p { position: relative; top: 50px; left: 50px; }
44
Exemplos de Posicionamento Relativo
position: relative; top: 10px; right: 50px; } p { position: relative; top: 10px; left: 50px; }
45
Posicionamento Absoluto
Com o posicionamento absoluto, a posição do elemento é calculada em relação ao elemento 'pai' (o elemento que engloba este). p { position: absolute; top: 50px; left: 50px; }
46
Posicionamento Fixo Esta forma de posicionamento é idêntica ao modelo absoluto mas a posição é calculada em relação à janela do navegador web. Permite, por exemplo, fixar um elemento independentemente do scroll vertical da janela.
47
Propriedade float A propriedade float permite desassociar o elemento do fluxo normal e deslocá-lo para a esquerda ou direita da linha, permitindo que o restante conteúdo circule paralelamente ao elemento. Valores possíveis: none — Valor por omissão. left — O elemento é deslocado para a esquerda com o conteúdo envolvente a flutuar à direita. right — O elemento é deslocado para a direita com o conteúdo envolvente a flutuar à esquerda.
48
Exemplo da Propriedade float
float: left float: right
49
Recursos W3C Cascading Style Sheets http://w3.org/Style/CSS
CSS 2.1 Specification & Properties CSS Beginner Tutorial — HTML Dog The Web Standards Project — CSS 50
Apresentações semelhantes
