módulo: 4 – desenvolvimento de páginas web estáticas: css
DESCRIPTION
Curso Técnico de Gestão e Programação de Sistema Informáticos, ano lectivo 2010/2011.TRANSCRIPT
Agrupamento de Escolas da Batalha
Miguela Fernandes
Novembro 2010
Considerações iniciais
Vamos aprender como funcionam as CSS econhecer os seus princípios.
Iremos abordar:
HTML vs CSS
O que é um estilo
O que são CSS
Aparecimento
Onde colocar
Tipos de regras
MF. 2
HTML vs CSS (1)
O HTML não foi concebido para lidar com altas definições gráficas ou com multimédia. Foi criada para definir a estrutura de um documento na Internet, para mostrar como uma página deve estar organizada, invés de se preocupar com a aparência.
Ao longo dos anos houve uma evolução na linguagem (tags) e também os web designers queixaram-se ao W3C, para que este consórcio preenchesse o vazio do HTML.
MF. 3
HTML vs CSS (2)
A introdução de novas TAGS HTML vieram facilitar a vida do programador, dado que as CSS usam TAGS HTML.
Exemplo simples:
<bold> - o HTML coloca a negrito o texto
Mas nas CSS posso dizer que <bold> pode colocar a NEGRITO mas mudar para maiúsculas.
MF. 4
O que é um estilo?
Vamos pensar no Word que tem estilo já pré-definidos ou que podemos criar novos.
Os estilos coleccionam atributos, tais como: tipos de letra, tamanho, cor, negrito, itálico, entre outros.
Podemos aplicá-los a títulos, sub-títulos, cabeçalhos, etc..
MF. 5
O que é um estilo? Exemplo
MF. 6
arialazulbold
sublinhado14 pt
Título 1Hoje, temos uma valorização das empresas do programador FrontEnd, procurando especialistas para solucionar problemas, e principalmente saber o que estão a fazer.Título 2Hoje, temos uma valorização das empresas do programador FrontEnd, procurando……..
formatatitulo
Nome do estilo criado
Estilo aplicado
CSS: o que são?
São um conjunto de estilos guardados estrategicamente para afectar a aparência de uma página HTML. Para usá-las temos de fazer referência da seguinte forma:
SELECTOR { propriedade: valor; }
" propriedade " é o elemento que pretendemosmanipular e o “valor" representa o valor específico da propriedade.
MF. 7
CSS: Aparecimento
Com a evolução dos recursos de programação as páginas web estavam a usar cada vez mais estilos e variações para deixá-las mais elegantes e atractivas aos utilizadores. Com isto, o HTML, que era destinado para apresentar os conteúdos também precisou ser aprimorado.
Foram criadas novas tags e atributos de estilo para o HTML e em 1996, a W3C apareceu a 1ª versão das CSS: CSS 1.
MF. 8
Onde colocar as CSSCSS dentro do corpo do documento (inline rule)
<p style="font:16px;color:blue;">No próprio
texto</p>
CSS no cabeçalho do documento (embedded rule) - Head
<style type="text/css"> h1 {color::red;} p {font-
size:14px;} </style>
CSS num ficheiro externo (external rule) - Head
<link rel=stylesheet href=ficheiro.css
type=”text/css”> //afecta todo a página web
CSS impordado para o documento (import rule) - Head
<style type=”text/css”>
@import URL
</style>MF. 9
Os 3 tipos de regras (cont.)
HTML selector
H1{font: bold, 12pt, times; }
Class
exemplo{font:bold,12pt,times;
}
ID#objecto1{position:absolute;
top: 10px;}
MF. 10
Os 3 tipos de regras (1)
HTML selector
Exemplo do HTML
h1| h2 | h3 | h4 | h5 | h6 | p | table | tr | td|…
O HTML selector nas CSS é usado para redefinir como são as tags mostradas. Ex:
<style type=”text/css”>
H1 {font-size:16pt; color:blue;}
</style>
MF. 11
Exemplo
Tipo de regra: HTML Selector
<html>
<head>
<style type="text/css">
p {color: white; font-family:"Arial", Times, serif;
text-align: justify; text-decoration: underline;
font-size: 14px; text-indent: 20px;
margin-top: 200px; line-height: 18px;}
body {background-color: black; }
</style>
</head>
<body>
<p>A Batalha de Aljubarrota decorreu no final da tarde de 14 de Agosto de 1385.</p>
</body>
</html>MF. 12
Os 3 tipos de regras (2)
Class
É atribuir um nome a um conjunto de tags HTML. É o mais versátil selector que podemos usar. Ex:
•minhaclass{font:bold,12pt,times;
}
Referência na página:
<p class=“minhaclass">Este será o
meu 1º texto com classe ;-)</p>
MF. 13
Exemplo
Tipo de regra: class
<html>
<head>
<style type=”text/css” >
p.um { background-color: red; }
p.dois { background-color: yellow; }
p.tres{ background-color: blue; color: yellow; }
</style>
</head>
<body>
<h2>Classes em CSS</h2>
<p class="um">Este é o resultado da p.um classe</p>
<p class="dois">Este é o resultado da p.dois classe</p>
<p class="tres">Este é o resultado da p.tres classe</p>……
MF. 14
Os 3 tipos de regras (3)
ID
Muito parecido com a class. Pode ser aplicado a qualquer tag HTML. No entanto, é usado apenas uma vez numa determinada página (usado para criar um objecto com javascript). Ex:
#objecto1{position:absolute;
top: 10px;}
Referência na página:
<p class=“minhaclass">Este será o
meu 1º texto com classe ;-)</p>
MF. 15
Exemplo
Tipo de regra: ID
<html><head><style>p#exemplo1 { background-color: blue; } p#exemplo2{ text-transform: uppercase; } </style></head><body><p id="exemplo1">Adivinhe o que acontece aqui??</p><p id="exemplo2">E agora o que vai mudar?</p></body></html>
MF. 16
Webgrafia e Bibliografia
http://www.ufpa.br/dicas/htm/htm-fra.htm
http://www.sevenseek.com/tutorials/learning-css-important-css-concepts/
http://webstyleguide.com/wsg3/5-site-structure/3-site-file-structure.html
http://www.tizag.com/cssT/inline.php
Teagu, J. C. (2004). DHTML and CSS for the World Wide Web (2ª Ed.). USA:Peachpit Press.
MF. 17