INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS INTRODUÇÃO E MANIPULANDO FONTES

Tamanho: px

Começar a partir da página:

Download "INTRODUCAO DESENVOLVIMENTO E DESIGN DE WEBSITES CSS INTRODUÇÃO E MANIPULANDO FONTES"

Ronaldo Cruz Franco
5 Há anos
Visualizações:

1 INTRODUCAO DESENVOLVIMENTO E DESIGN DE CSS INTRODUÇÃO E MANIPULANDO FONTES

2 Introdução CSS significa Cascading Style Sheetes (Folhas de Estilo em Cascata). Não seria ótimo fazer layouts na sua página sem ter que alterar o HTML toda vez que quisesse mudar? Nesta introdução vamos ter uma breve introdução ao CSS para ter uma idéia de como o CSS é prático. Podemos dizer que o CSS é a melhor metade do HTML. Codificando, não há melhor parceria: HTML é responsável pelo trabalho pesado (a estrutura), enquanto CSS dá o toque de elegância (layout). CSS pode ser adicionado com uso do atributo style. Por exemplo, você podedefinir o tipo e o tamanho da fonte em um parágrafo: 2

3 Introdução <p style="font-size:20px;">este parágrafo em tamanho de fonte igual a 20px</p> <p style="font-family:courier;">este parágrafo em fonte Courier</p> <p style="font-size:16px; font-family:cambria">este parágrafo em fonte Cambria e tamanho 20px</p> Será renderizado no navegador assim: Este parágrafo em tamanho de fonte igual a 20px Este parágrafo em fonte Courier Este parágrafo em fonte Cambria e tamanho 16px 3

4 Introdução No exemplo anterior usamos o atributo style para definir o tipo de fonte usado (com a propriedade font-family) e o tamanho da fonte (com a propriedade font-size). Notar que no último parágrafo do exemplo definimos tanto o tipo como o tamanho da fonte separado por um ponto e vírgula. Uma das funcionalidades mais inteligentes das CSS é a possibilidade de controlar o layout de um arquivo central. Em lugar de se usar o atributo style em cada tag, você pode dizer ao navegador como deve ser o layout de todos os textos em uma página: 4

5 Introdução <html> <head> <title>minha primeira página CSS</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head> <body> <h1>minha primeira página CSS</h1> <h2>bem vindo à minha primeira página CSS</h2> <p>aqui você verá como funciona CSS</p> </body> </html> 5

6 Introdução No exemplo anterior inserimos as CSS na seção head do documento, assim ela se aplica à página inteira. Para fazer isto use a tag <style type="text/css"> que informa ao navegador que você está digitando CSS. 6

7 Introdução No exemplo a seguir, todos os cabeçalhos da página serão em fonte Arial e tamanho 30px. Todos os subtítulos serão em fonte Courier tamanho 15. E, todos os textos dos parágrafos serão em fonte Times New Roman tamanho 8. Uma outra opção é a de digitar as CSS em um documento separado. Com as CSS em um documento separado você pode gerenciar o layout de muitas páginas ao mesmo tempo. Muito inteligente, pois você pode mudar de uma só vez, o tipo ou o tamanho da fonte de todo o site, quer ele tenha centenas ou milhares de páginas. Nós não nos aprofundaremos em CSS agora, mas você pode aprender tudo, no futuro, em nosso tutorial CSS. 7

8 Introdução <html> <head> <title>minha primeira página CSS</title> <style type="text/css"> h1 {font-size: 30px; font-family: arial} h2 {font-size: 15px; font-family: courier} p {font-size: 8px; font-family: times new roman} </style> </head> <body> <h1>minha primeira página CSS</h1> <h2>bem vindo à minha primeira página CSS</h2> <p>aqui você verá como funciona CSS</p> </body> </html> 8

9 O que mais posso fazer com CSS? CSS faz muito mais do que definir tipos e tamanhos de fontes. Por exemplo, você pode adicionar cores, fundos e estilos de texto. A seguir alguns exemplos para prática: <p style="color:green;">texto verde</p> <h1 style="background-color: blue;">cabeçalho com fundo azul</h1> <bodystyle="background image:url(' Além de cores, tipos de fontes, etc., CSS pode ser usado para controlar a configuração e a apresentação da página (margens, flutuações, alinhamentos, larguras, alturas, etc.) Controlando os diferentes elementos com CSS você será capaz de criar layouts elegantes e precisos. <p style="padding:25px;border:1px solid red;">eu amo CSS</p> 9

10 Propriedades de fontes em CSS As propriedades para as fontes, definem as características (os valores na regra CSS) das letras que constituem os textos dentro dos elementos HTML. As propriedades básicas para fontes e que abordaremos neste tutorial são as listadas abaixo: color:...cor da fonte font-family:...tipo de fonte font-size:...tamanho de fonte font-style:...estilo de fonte font-variant:...fontes maiúsculas de menor altura font-weight:...quanto mais escura a fonte é (negrito) font:...maneira abreviada para todas as propriedades 10

11 Valores válidos para as propriedades da fonte color: código hexadecimal: #FFFFFF código rgb: rgb(255,235,0) nome da cor: red, blue, green...etc font-family: nome da família de fontes : define-se pelo nome da fonte, p. ex:"verdana", "helvetica", "arial", etc. nome da família genérica: define-se pelo nome genérico, p. ex:"serif", "sans-serif", "cursive", etc. 11

12 Valores válidos para as propriedades da fonte font-size: xx-small x-small small medium large x-large xx-large smaller larger length: uma medida reconhecida pelas CSS (px, pt, em, cm,...) % 12

13 Valores válidos para as propriedades da fonte font-weight: normal bold bolder lighter

14 Valores válidos para as propriedades da fonte Vamos a seguir analisar cada uma delas detalhadamente através de exemplos práticos. Como estudar e entender os exemplos Para cada propriedade apresento as regras CSS para um ou mais elementos HTML e definidas dentro de uma folha de estilos incorporada, bem como um trecho do documento HTML onde se aplicam as regras. A seguir mostro o efeito que a regra produz. Observe a regra e o efeito e para melhor fixar seu aprendizado reproduza o código no seu editor, mude os valores e veja o resultado no browser. Esta é a melhor e mais rápida maneira de você aprender CSS. Bons estudos! E faça ótimo proveito dos tutoriais. 14

15 color... A cor da fonte <html> <head> <style type="text/css">  </style> </head> <body> <h1>cabeçalho com letras vermelhas</h1> <h2>cabeçalho com letras verdes</h2> <p>parágrafo com letras azuis</p> </body> </html> 15

16 font-family... O tipo da fonte <html> <head> <style type="text/css">  </style> </head> <body> <h1>letras com tamanho: 14px</h1> <h2>letras com tamanho: smaller</h2> <p>letras com tamanho:100%</p> </body> </html> 16

17 font-size...o tamanho de fonte <html> <head> <style type="text/css">  </style> </head> <body> <h2>família por nome: arial, helvetica, serif;</h2> <p>família genérica: sans-serif;<p> </body> </html> 17

18 font-style...o estilo de fonte <html> <head> <style type="text/css">  </style> </head> <body> <h1>este é o estilo italic</h1> <h2>este é o estilo normal</h2> <p>este é o estilo oblique</p> </body> </html> 18

19 font-variant...fontes maiúsculas "menores" <html> <head> <style type="text/css">  p</style> </head> <body> <h3>este cabeçalho com letras normais</h3> <p>este parágrafo com letras em "small-caps"</p> </body> </html> 19

20 font-weight...peso das fontes - negrito (intensidade da cor) <html> <head> <style type="text/css">  </style> </head> <body> <p> Este é um parágrafo em negrito</p> </body> </html> 20

Documentos relacionados

HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo

HTML 5 LINGUAGEM DE MARCAÇÃO E ESTILO - CSS - Prof. Rosemary Melo RESUMO Linguagem de Marcação e Estilo - CSS DESCRIÇÃO Regra CSS Vinculação Inline Vinculação Incorporada Vinculação Externa TAGS seletor