CSS 3

Get Started. It's Free
or sign up with your email address
Rocket clouds
CSS 3 by Mind Map: CSS 3

1. SINTAXE

1.1. Uma regra 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, na sua forma mais elementar, compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

1.2. Propriedade:

1.2.1. é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...).

1.3. Seletor:

1.3.1. genericamente, é o elemento HTML identificado por sua tag, ou por uma classe, ou por uma ID, ou etc., e para o qual a regra será válida (por exemplo: <p>, <h1>, <form>, .minhaclasse, etc...);

1.4. Valor:

1.4.1. é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

2. TIPOS de CSS

2.1. CSS inline:

2.1.1. ocorre quando colocamos o CSS junto à tag HTML

2.1.2. Exemplo:

2.1.2.1. <p style=”color: #ff0000”>Isto é CSS Inline</p>

2.2. CSS embeded (ou incorporado)

2.2.1. é usado no inicio do código

2.2.2. Exemplo:

2.2.2.1. <head> <title></title> <style type="text/css"> p{ font-family: arial; font-size: 12px; } </style> </head>

2.3. CSS externo:

2.3.1. Neste caso, cria-se um arquivo externo com a extensão .css e linka ele com o documento CSS.

2.3.2. Exemplo:

2.3.2.1. <link href="imgs/estilo.css" rel="stylesheet" type="text/css" />

3. SELETORES

3.1. Um seletor pode ser qualquer tag HTML, porém, a identificação pode ser diferente

3.2. Exemplo:

3.2.1. <div id=”box” class=”caixa”> ... conteúdo da div ... </div>

3.3. É possível formatar o seletor div de três formas diferentes.

3.3.1. Pelo nome da tag:

3.3.1.1. h1 { color: #000000 }

3.3.2. Pelo id:

3.3.2.1. #box { color: #0000FF }

3.3.3. Pela classe:

3.3.3.1. caixa { color: #0000FF }

4. REGRA em CSS

4.1. Uma regra é composta basicamente por três elementos: seletor, propriedade e valor

4.2. Exemplo:

4.2.1. h1 { color: #0082BF; } h1 é o seletor, color a propriedade e #0082BF é o valor da propriedade color.

5. DÚVIDAS

5.1. Posso fazer um site usando apenas CSS?

5.1.1. R: Não. O CSS é usado para formatação de outro documento, geralmente HTML. Portanto, para criar um site, você precisa de HTML para estruturar a página e CSS para formatar.

5.2. Quando se usa formatar pelo nome da tag?

5.2.1. R: Este tipo de formatação de aplica a casos gerais, por exemplo, você quer que todos os textos do seu site tenham a mesma fonte, tamanho e cor. Neste caso basta formatar a tag <p> e pronto.

5.3. Quando se usa formatar pelo id?

5.3.1. R: Em casos muito específicos. Pela regra do XHTML não é possível ter em uma mesma página dois ids com nomes iguais. Normalmente são usados para os elementos principais da página, como o topo, menu, rodapé, box containers, etc.

5.4. Quando se usa formatar pela classe?

5.4.1. R: É um caso que fica no meio termo entre o específico do ID e o geral do nome da tag. A classe é útil quando você deseja formatar algumas tags, mas não todas. Por exemplo, em um texto com dez parágrafos, você poderia dar uma formatação diferenciada para os parágrafos 3, 6 e 7. Como fazer isto? Cria uma classe em CSS e aplica manualmente a estes parágrafos.

5.5. Todos os sites usam CSS?

5.5.1. R: Não. Antigamente a formatação era feita pelo próprio HTML, desta forma não se usava CSS. Hoje não faz sentido formatar em HTML, já que isto seria semanticamente incorreto.

5.6. Quem padroniza o CSS?

5.6.1. R: É o W3C, o mesmo órgão que regulamente e padroniza o HTML e diversas outras linguagens

6. <div id=”box” class=”caixa”> ... conteúdo da div ... </div>