CSS

CSS

Um pouco de Historia...
O que é CSS?
O que podemos fazer com o CSS?
Seletor: Sintaxe básica
Tipos de Seletores
Classe
ID
CSS Inline
CSS Incorporado
CSS Externo
Comentários em CSS

Um pouco de historia...

Formatar informação dos sites não é algo novo. Por volta de 1970, no começo da trajetória do SGML, já se falava em algo parecido.
Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação. A medida que o HTML foi se popularizando e evoluindo, foram incluídas em suas qualidades, o domínio de controlar algumas aparências para o documento. Isso fez com que a linguagem ficasse muito complexa, mais dificil para entender e manter.
Outro problema era que os browsers tinham diferenças de implementações, o que dificultava a visualização dos sites, trazendo menos controle na navegação pela web.

Um pouco de historia...

Por esse tempo apareceu o salvador da pátria. Håkon Wium Lie, vendo toda essa dificuldade, resolveu criar um jeito mais fácil para formatar a informação. Foi aí que ele propôs a criação do CSS ou Cascading Style Sheets… Esse era o ano de 1994.
Aceitando o convite feito pelo próprio Håkon, Bert Bos – que naquele tempo estava trabalhando em um browser chamado Argo – começou a trabalhar no projeto.
Os dois então, trabalharam juntamente no começo do desenvolvimento do CSS.
Em 1995 eles apresentaram sua proposta e finalmente, o W3C – World Wide Web Consortium – que estava acabando de nascer, se interessou pelo projeto e resolveu criar uma equipe, obviamente liderada por Håkon e Bert Bos.

Um pouco de historia...

O resultado apareceu logo, em 1996, eles lançaram a recomendação oficial pelo W3C do CSS Level 1 (CSS 1).
Dois anos depois, no dia 12 de Maio de 1998, eles lançaram a recomendação do CSS de nível 2. A segunda versão das Folhas de Estilo para web.


O que é CSS?

CSS = Cascading Style Sheet;
Traduzindo: Folha de Estilo em Cascata;
Sua Última versão é o CSS3
O CSS formata a informação entregue pelo HTML;
A formatação na maioria das vezes é visual;
Podemos formatar todos elementos HTML;
lembrem-se: O CSS3 é P.O.D.E.R.O.S.O!!!


O que podemos fazer com o CSS3?

  1. Selecionar primeiro e último elemento;
  2. Selecionar elementos pares ou ímpares;
  3. Selecionarmos elementos específicos de um Determinado grupo de elementos;
  4. Gradiente em textos e elementos; 
  5. Bordas arredondadas;
  6. Sombras em texto e elementos;
  7. Manipulação de opacidade;
  8. Controle de rotação;
  9. Controle de perspectiva;
  10. Animação;
  11. Estruturação independente da posição no código HTML;

Seletor: Sintaxe Básica

Sintaxe do CSS:
seletor {
propriedade: valor;
}
Seletor representa a estrutura
Propriedade é a característica a ser modificada no elemento.
O valor é o valor referente a esta característica.

Exemplo:
cor_texto {
color: #ff9900;
}

Tipos de Seletores

Alguns tipos de Seletores para que possamos desempenhar um bom papel neste início de curso.

Seletor Universal: Qualquer Elemento
    * {
propriedade: valor;
}

Seletor de tipo de elemento: seleciona qualquer elemento <e>
    e {
propriedade: valor;
}

Tipos de Seletores

Seletor contextual:seleciona qualquer elemento <f> que estiver contido num elemento <e>
    e f {
propriedade: valor;
}

Seletor de classe: seleciona o(s) elemento(s) <e> em que se aplicou a "classe".
    e.nome_classe {
propriedade: valor;
}

Seletor de ID: seleciona o elemento <e> identificado com Id
    e#id_nome {
propriedade: valor;
}

Tipos de Seletores

Agrupamento de seletores: Seleciona os elementos <e> e <f> do agrupamento
    e, f {
propriedade: valor;
}

Pseudo-classe link: aplica-se ao elemento <a> com hiperlinks ou âncoras ainda não visitados
    a:link {
propriedade: valor;
}

Pseudo-classe visited: aplica-se ao elemento <a> com hiperlinks ou âncoras já visitados
    a:visited {
propriedade: valor;
}

Tipos de Seletores

Pseudo-classe active: aplica-se ao elemento <e> quando este for ativado pelo usuário
    a: active {
propriedade: valor;
}

Pseudo-classe hover: aplica-se ao elemento <e> quando o cursor estiver sobre ele, mas sem ativá-lo
    a:hover {
propriedade: valor;
}

Existem outros seletores, mas já conhecemos os principais para o desenvolvimento de um bom trabalho.

Classe

As classes não são únicas, podemos utilizar a mesma classe para vários elementos e também podemos utilizar várias classes distintas em um mesmo elemento.
Qualquer informação de estilo que precise ser aplicada a múltiplos elementos em uma página deve ser feita com uma classe. 

Exemplo de elementos distintos utilizando a mesma classe:
<e class="minha_classe">
<x class="minha_classe">
<t class="minha_classe">

Classe

Exemplo de elemento utilizando classes distintas:
<e class="minha_classe_1">
<e class="minha_classe_2">
<e class="minha_classe_3">

fonte: Sobre Id e Classes

ID

IDS são únicos, cada elemento e página só podem ter apenas um id.
Quando se está aprendendo sobre isso, é comum ouvir que só se deve usar IDs uma vez, mas é possível usar uma classe várias vezes. Basicamente, isso entra num ouvido e sai no outro, porque soa mais como uma “regrinha” que algo realmente importante. Se você trata somente com HTML / CSS, isso pode acontecer com você, também, porque eles realmente não parecem fazer nada de diferente.. 

Exemplo de ID:
<e id="minha_id">

fonte:Sobre Id e Classes

CSS Inline

Uma folha de estilo é dita inline, quando as regras CSS são declaradas dentro da tag de abertura do elemento HTML com uso do atributo style.
Estilo inline só se aplica a um elemento HTML. Ele perde muitas das vantagens das folhas de estilo pois mistura a apresentação com a marcação. Use este método excepcionalmente, por exemplo: quando quiser aplicar um estilo a uma única ocorrência de um elemento.
A sintaxe para aplicar estilo inline é mostrada a seguir:

CSS Inline

A sintaxe para aplicar estilo inline é mostrada a seguir: 

<p style="color:#000; margin: 5px;">
	Aqui um parágrafo de cor preta e com 5px nas 4  margens.
</p>

fonte: Maujor

CSS Incorporado

Uma folha de estilo é dita incorporada ou interna, quando as regras CSS são declaradas na seção head do próprio documento HTML.
Uma folha de estilo incorporada ou interna, é ideal para ser aplicada a uma única página. Com uma folha de estilo incorporada ou interna, você pode mudar a aparência de somente um documento, aquele onde a folha de estilo está incorporada.
As regras de estilo incorporadas e válidas para o documento, são declaradas na seção head do documento com a tag de estilo <style>, conforme sintaxe mostrada a seguir.

CSS Incorporado

<head>
...
<style rel="stylesheet" type="text/css">
<;!--
body {
	background: #000; 
	url(imagens/minhaimagem.gif);
	}
h3 {
	color: #f00;
	}
p {
	margin-left: 15px; 
	padding:1.5em;
	}
-->
</style>
...
</head>

fonte: Maujor

CSS Externo

Uma folha de estilo é dita externa, quando as regras CSS são declaradas em um documento a parte do documento HTML, isto é, a folha de estilo é um arquivo separado do arquivo html. Um arquivo de folha de estilo deve ser gravado com a extensão .css
Uma folha de estilo externa é ideal para ser aplicada a várias páginas. Com uma folha de estilo externa , você pode mudar a aparência de um site inteiro mudando regras de estilos contidas em um arquivo apenas (o arquivo da folha de estilo).
O arquivo css da folha de estilo externa deverá ser lincado ou importado ao documento HTML, dentro da seção head do documento. 

CSS Externa

A sintaxe geral para lincar uma folha de estilo chamada estilo.css é mostrada a seguir: 
<head>
...
	<link rel="stylesheet" type="text/css" href="estilo.css">
...
</head>

A sintaxe para importar uma folha de estilo chamada estilo.css é mostrada a seguir.
<head>
...
<style type="text/css">
@import url("estilo.css");
</style>
...
</head>

CSS Externa

O navegador "lê" as regras de estilo do arquivo estilo.css, e formata o documento de acordo com elas.

Uma folha de estilo externa pode ser escrita em qualquer editor de texto e gravado com a codificação de caracteres utf-8. O arquivo não deve conter nenhuma tag HTML. As folhas de estilo devem ser gravadas com uma extensão .css

fonte: Maujor

Comentários em CSS

Inserir um comentário no CSS é muito simples, ele serve para que o código que está comentado não seja renderizado.

Exemplo:

    /* este é um comentário*/

Exemplo com o código comentado:

/*
p { 
font-size: 14px;       /* este é outro comentário*/
	color: #000;
	font-family: Arial, Serif;
	}
*/

Made with Slides.com