Télécharger en PDF - Montreal Comiccon

Transcription

CSS
CSS é a abreviatura para Cascading Style Sheets — Folhas de Estilo em Cascata
CSS é uma linguagem para estilos (formatação) que define o layout de documentos HTML.
CSS controla fontes,
posicionamentos, etc.
cores,
margens,
linhas,
alturas,
larguras,
imagens
de
fundo,
HTML pode ser indevidamente usado para definir layout de websites, mas é o uso de CSS que
proporciona mais opções e precisão, é sofisticado e facilita a manutenção e a padronização das
páginas.
Qual é a diferença entre CSS e HTML?
HTML deve ser usado para estruturar conteúdos. CSS é usado para formatar conteúdos
estruturados.
Inicialmente, a linguagem HTML era usada somente para estruturar textos. Um autor podia
marcar seus textos definindo "isto é um cabeçalho" ou "isto é um parágrafo" usando tags HTML
como a <h1> e a <p> já vistas.
Conforme a Web foi se popularizando, os designers começaram a sentir a necessidade de incluir
layout nos documentos (sofisticar). Para isso, os fabricantes de navegadores (como a Microsoft)
inventaram novas tags HTML, como <font>, <blink>, etc., que se destinam ao layout e não à
estrutura (conteúdo).
Houve época em que muitas das novas tags para layout eram suportadas (funcionavam) somente
por um determinado tipo de navegador. A frase "Você precisa do navegador X para visualizar esta
página" tornou-se comum nos websites.
CSS foi inventada para solucionar esta situação e para separar a formatação dos conteúdos torna a manutenção dos sites bem mais fácil (o controle do layout de vários documentos pode
ser feito em um único local chamado folha de estilos). Facilita a padronização das páginas
(um conceito importante em design).
Muitas das propriedades usadas em CSS são semelhantes às do HTML.
Regra CSS e Folha de Estilos CSS
É uma declaração que segue uma sintaxe própria e que define como será aplicado estilo a um
ou mais elementos HTML.
Um conjunto de regras CSS formam uma Folha de Estilos.
Uma regra CSS compõe-se de três partes: um seletor, uma propriedade e um valor.
Obs.: o seletor é um elemento HTML (tag ou classe ou id) para o qual a regra será válida.
Exemplo 1:
Desejamos a cor de fundo vermelha para uma página web
Usando HTML:
<body bgcolor="#FF0000">  não usar
Usando CSS o mesmo resultado será obtido com:
body { background-color: #FF0000; }
Obs.:
Note que os códigos HTML e CSS são parecidos.
Vários documentos HTML podem usar a mesma folha de estilos, ou seja, um arquivo
CSS pode controlar a apresentação de muitos documentos HTML (economizando grande
quantidade de trabalho e facilitando a aplicação do mesmo design em várias páginas
diferentes do website).
Exemplo 2 (Definindo várias propriedades para o mesmo seletor):
Desejamos texto existente em parágrafos (tag p) com alinhamento à direita (right) e cor azul.
p{
text-align: right;
color: blue;
}
O seletor CLASSE (CLASS)
É possível "inventar" um nome e com ele criar uma classe para a qual se definirá as regras CSS.
As classes podem ser aplicadas a qualquer elemento HTML.
Usando classes é possível aplicar estilos diferentes para o mesmo tipo de elemento HTML, basta
usar classes diferentes para cada um deles.
Sintaxe para o seletor classe:
elemento.minhaclasse {
propriedade: valor;
}
Obs.: como boa prática, para os nomes das classes use somente letras e os caracteres (traço) e _ (sublinhado).
Exemplo: suponha que se deseja dois estilos para parágrafos: um parágrafo com letras na cor
preta e um parágrafo com letras na cor azul. Veja:
p.cor-um {
color: blue;
}
p.cor-dois {
color: green;
}
Obs.: não use nomes de classe que lembrem a apresentação. Prefira nomes que lembrem a
estrutura. No exemplo mostrado nomear as classes como .cor-preta e .cor-azul não é uma boa
escolha pois caso se resolva alterar a cor dos elementos azuis para verde o nome da classe vai
ficar sem sentido.
No documento HTML as classes seriam criadas conforme abaixo:
<p class ="cor-um"> este parágrafo será na cor preta.</p>
<p class ="cor-dois">este parágrafo será na cor azul.</p>
É permitido declarar mais de uma classe, desde que o nome das classes sejam separados
por um espaço.
<p class ="cor-um cor-dois">
Aqui o texto do parágrafo.
</p>
Nesse caso aplicam-se ao parágrafo as regras CSS definidas nas duas classes. Havendo
conflito de declarações aplica-se o efeito cascata. Neste exemplo o parágrafo será na cor
definida na regra CSS declarada por último na folha de estilo (green).
Na folha de estilos, podemos indicar que uma classe pode ser aplicada a qualquer
elemento HTML onde a classe foi definida, basta que se omita o nome do elemento antes da
classe.
Exemplo:
.cor-tres {
color: blue;
}
............................................................
<h2 class="cor-tres"> Este cabeçalho é na cor azul. </h2>
<p class="cor-tres"> Este parágrafo é na cor azul. </p >
O seletor ID
O seletor ID difere do seletor classe, por ser ÚNICO. Um seletor ID de determinado nome só pode
ser aplicado a UM e somente UM elemento HTML dentro do documento.
Você pode "inventar" um nome e com ele criar um ID ao qual definirá as regras CSS. Um
determinado ID só pode ser aplicado a UM elemento HTML.
A sintaxe para o seletor ID é mostrada a seguir. Um nome qualquer que você "inventa" precedido
do sinal # ("tralha" ou "jogo-da-velha"):
#meuID {
propriedade: valor;
}
Declaração das Folhas de Estilo CSS
A) FOLHA DE ESTILO EXTERNA (ARQUIVO TEXTO)
<head>
<link rel="stylesheet" type="text/css" href="conf.css" />
</head>
Ou
<head>
<style type=”text/css”>
@import url(“estilos.css”) screen, projection;
</style>
</head>
B) FOLHA DE ESTILO INCORPORADA (DIRETAMENTE DENTRO DA SEÇÃO HEAD):
<head>
.............................................................
<style type="text/css" media="all">
body {
margin: 0;
text-align: center;
}
#id1 {
width: 980px;
text-align:left;
}
.classe1 {
width: 500px;
text-align:left;
}
</style>
</head>
C) DECLARAR INLINE – DENTRO DA TAG (usar apenas especificamente):
<p style=”font-size: large; color: red;”>
Modelo CSS de Formatação Visual (formatação visual dos boxes)
Box: considere cada elemento HTML quando renderizado em uma tela.
Por exemplo: um parágrafo contendo um texto ocupa, na tela, um retângulo com uma largura e
uma altura bem definidas e facilmente visualizadas.
Em um documento completo, com vários elementos de marcação, cada um deles gera o próprio
box. A renderização dos boxes se dá por empilhamento de cima para baixo (os primeiros
elementos estão mais acima na tela).
Cada box gerado tem características próprias: dimensões, posição, maneira de interagir com
boxes vizinhos, etc.
Obs.: existem boxes que não causam uma quebra de linha quando renderizados (img, b, etc.)
outros, como p, h1-h6, ul e div causam uma quebra de linha.
Modelos de Box:
Na área Conteúdos, mais interna, tem suas dimensões definidas pelas propriedades largura e
altura (width e height).
Segue-se uma área denominada Enchimento cuja espessura é definida pela propriedade
padding (exemplos: padding; padding-top; padding-left; etc.).
Em volta do enchimento, temos uma Borda cuja espessura, o estilo e a cor são definidos por
border (exemplos: border-width ou border-top-width; border-style; border-color ou borderleft-color; etc.).
Finalmente, há um espaço denominado Margem, com espessura definida pela propriedade
margin (margin; margin-left, margin-right, etc.).

Télécharger en PDF - Montreal Comiccon

Transcription

Documents pareils

là où aucun comiccon n`est encore jamais allé

Le Comiccon de Montréal s`amène au Palais des Congrès avec une

Des légendes fantastiques au Comiccon de Montréal à Place