HTML, CSS e JavaScript Contato: <lara.popov@ifsc.edu.br> Site: http://professores.chapeco.ifsc.edu.br/lara/ 1
Arquivo externo Dentro da tag head: <link rel= stylesheet href= estilo.css > 2
Qual a dirença de charset=utf-8 e charset=iso-8859-1? O charset é utilizado para arrumar a acentuação do site. Se todo seu site for em uma linguagem estática (HTML, sem puxar dados de banco de dados), então deixe como charset=utf-8. UTF-8 (8-bit Unicode Transformation Format) é uma codificação de caracteres que implementa o padrão UNICODE utilizando uma quantidade variável de bytes (de 1 a 4). Esta se tornando o padrão para a representação e armazenamento de textos. Agora, se estiver utilizando PHP, ASP, Banco de Dados... daí sim é que terá problemas com o charset do site. Sempre tente deixá-lo como charset=utf-8. Neste caso, se os acentos ficarem todos errados, daí mude para o charset=iso-8859-1. 3
Propriedades Tipográficas e Fontes O padrão dos navegadores exibem texto em serif. As fontes mais conhecidas são Times New Roman e Times, estas são chamadas de fontes serifadas, pelos seus ornamentos em suas terminações. Podemos alterar a família de fontes para sans-serif (sem serifas), que contém: Arial e Helvetica. Podemos também utilizar as famílias: monospace como a Courier. 4
Exemplo de css h1 { font-family: serif; } h2 { font-family: sans-serif; } p { font-family: monospace; } 5
Fonte padrão É possível, e muito comum, declararmos o nome de algumas fontes que gostaríamos de verificar se existem no computador, permitindo que tenhamos um controle melhor da forma como o conteúdo será exibido. Usamos para isso fontes seguras por serem bem populares. 6
Continuando o exemplo... body{ font-family: "Arial", "Helvetica", sans-serif; } 7
Fontes, outras propriedades: Font-style, que podem ser: Normal font-style: normal; Itálico - font-style: italic; Oblíqua - font-style: oblique; Font-size (tamanho da fonte) 8
Fontes, outras propriedades: Font-variant, que podem ser: Normal estilo normal; Small-caps estilo fonte pequena caps; initial escolhe a opção default; Inherit herda a mesma opção do elemento pai. 9
Continuando o exemplo... p.normal { font-variant:normal; } p.small { font-variant:small-caps; } 10
Continuando o exemplo... <h1>testando propriedades das fontes</h1> <p class="normal">aula de Desenvolvimento web</p> <p class="small">aula de Desenvolvimento web</p> 11
Alinhamento e Decoração do texto Text-align: especifica o alinhamento horizontal do texto em um elemento. text-align: left right center justify; 12
Continuando o exemplo... p.direita{ text-align:right; } p.esquerda{ text-align:left; } p.centro{ text-align:center; } p.justificado{ text-align:justify; } 13
Continuando o exemplo... <h1>testando propriedades de alinhamento</h1> <p class="direita">você já viu um site que não possui nenhuma imagem? E portal que não tenha publicidade? E menu, acessou algum site que não possua menu de navegação? Pensando nisso, darei sequência ao artigo anterior, quando mostrei como montar um layout responsivo.</p> <p class="esquerda">você já viu um site que não possui nenhuma imagem? E portal que não tenha publicidade? E menu, acessou algum site que não possua menu de navegação?</p> <p class="centro">pensando nisso, darei sequência ao artigo anterior, quando mostrei como montar um layout responsivo. Hoje vou mostrar como criar o menu, as imagens e a publicidade. Vamos começar vendo como trabalhar com imagens em um layout responsivo.</p> <p class="justificado">para definirmos qual o bloco de publicidade será exibido, nós trabalharemos com base na resolução de tela do usuário. Usaremos apenas CSS para criarmos a rotina lógica de exibição. Não é necessário nenhum Javascript para isso.</p> 14
Continuando o exemplo... 15
Espaçamento dentro do texto tamanho da altura da linha: tamanho da espaço entre cada linha: letter-spacing: 3px; tamanho do espaço entre cada palavra: line-height: 3px; word-spacing: 5px; tamanho da margem da primeira linha do texto: text-indent: 30px; 16
Continuando o exemplo... p.espacamento{ line-height: 50px; letter-spacing: 10px; word-spacing: 5px; text-indent: 30px; } <h1>testando propriedades de espaçamento</h1> <p class="espacamento">você já viu um site que não possui nenhuma imagem?</p> 17
Continuando o exemplo... 18
Bordas As propriedades que podem ser definidas, são (em ordem): border-width, border-style, e bordercolor Border-width: tamanho Border-style: estilo Border-color: cor 19
Border-width Mais exemplos em: http://www.w3schools.com/cssref/playit. asp?filename=playcss_borderwidth&preval=medium 20
Border-style None ou hidden - valor default Dotted - pontilhada Dashed - risquinhos Solid Double - dupla Groove- efeito 3D ridge - efeito 3D inset - efeito 3D outset - efeito 3D - solida 21
Border-style Mais exemplos em: http://www.w3schools.com/cssref/playit. asp?filename=playcss_borderstyle&preval=dotted 22
Border-color Mais exemplos em: http://www.w3schools.com/cssref/playit. asp?filename=playcss_border-color 23
Tabela de cores http://www.w3schools.com/html/html_co lornames.asp 24
25
Margin, border, padding, content margin border padding conteúdo 26
PADDING A propriedade padding é utilizada para definir uma margem interna em alguns elementos (por margem interna entende-se a distânciaentre o limite do elemento, sua borda, e seu respectivo conteúdo) e tem as propriedades: Padding-top Padding-right Padding-bottom Padding-left 27
Continuando o exemplo... p{ width:220px; padding:10px; border:5px solid gray; margin:0px; } 28
padding padding-top padding-left padding-right conteudo Borda padding-bottom 29
padding Se passados 4 valores, serão aplicados respectivamente, top, right, bottom e left, para facilitar, basta lembrar em sentido horário. p { padding: 10px 20px 15px 5px; } 30
margin A propriedade margin é bem parecida com padding, exceto que ela adiciona espaço após o limite do elemento, ou seja, um espaçamento além do elemento em si e tem as propriedades: margin-top margin-right margin-bottom margin-left 31
Margin e padding Há ainda uma maneira de permitir o navegador defina qual será a dimensão da propriedade padding ou margin conforme o espaço disponível na tela: definimos o valor AUTO para a margem ou o espaçameno que quisermos. 32
Exercícios de Fixação 33
Referências Bibliográficas Caelum Cursos. Desenvolvimento Web com HTML, CSS e JavaScript. Disponível em: https://www.caelum.com.br/. Acesso em: 21/05/2014. 34