O que é CSS? O CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascatas é uma documentação que define as regras de formatação que serão aplicadas aos.

Apresentação em tema: "O que é CSS? O CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascatas é uma documentação que define as regras de formatação que serão aplicadas aos."— Transcrição da apresentação:

1 O que é CSS? O CSS (Cascading Style Sheets) ou Folhas de Estilo em Cascatas é uma documentação que define as regras de formatação que serão aplicadas aos elementos de marcação de sua página. O CSS deve ser aplicado com a finalidade de retirar do HTML qualquer declaração que vise a formatação.

2 O que é Tableless? Tableless é uma forma de desenvolvimento de sites que não utiliza tabelas (Table=Tabela eLess=sem) para disposição de conteúdo na página. Sugerido pela W3C, que defende que os códigos HTML devem ser usados para o propósito que foram criados e que tabelas foram criadas para exibir dados tabulares. Além disso, muitos navegadores travam ou exibem incorretamente formatações usando tabelas. Portanto, para a disposição da página o recomendado é usar CSS.

3 Inserindo estilo na página
Como vimos anteriormente, a formatação do site pode ser executada através de um único arquivo com extensão CSS. Neste arquivo, você poderá dar valor às propriedades formatando todo corpo da página. Sendo assim, caso você futuramente queira alterar algum conteúdo visual do seu projeto, poderá fazer isso acessando este único arquivo e executando tal tarefa em alguns segundos.

4 Inserindo estilo na página
No exemplo abaixo, você poderá alterar o estilo.css pelo caminho onde se encontra o arquivo CSS.

5 Folhas de estilos incorporadas ou internas
A formatação abaixo não é indicada, pois se você tiver muitas páginas e quiser alterar a formatação de algum elemento, terá que acessar todas as páginas.

6 Propriedades 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 compõe-se de três partes: um seletor, uma propriedade e um valor e tem a sintaxe conforme mostrado abaixo:

7 Propriedades Seletor: 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...); Propriedade: é o atributo do elemento HTML ao qual será aplicada a regra (por exemplo: font, color, background, etc...) Valor: é a característica específica a ser assumida pela propriedade (por exemplo: letra tipo arial, cor azul, fundo verde, etc...)

8 Propriedades Na sintaxe de uma regra CSS, escreve-se o seletor e a seguir a propriedade e valor separados por dois pontos e entre chaves { }. Quando mais de uma propriedade for definida na regra, deve-se usar ponto-e-vírgula para separá-las. O ponto-e-vírgula é facultativo no caso de propriedade única e também após a declaração da última propriedade no caso de mais de uma.

9 Propriedades No exemplo anterior, temos:
Body: É o seletor que determinará que todo corpo da página terá uma formatação. Background: É o atributo do elemento HTML que define a cor de fundo. #abeafe: É o valor que determinará a cor em hexadecilam do elemento background. Ou seja, no exemplo acima, a página toda terá uma cor de fundo azul ciano conforme a cor declarada(#abeafe).

10 Propriedade Margin e Padding
Estas duas propriedades são de suma importância para o desenvolvimento de sites utilizando o CSS. Margin O Margin é uma propriedade capaz de definir espaços entre um elemento e seu exterior, ou seja, você definirá a distância da borda do elemento para todo conteúdo externo. Exemplo de aplicação Ou:

11 Propriedade Margin e Padding
Nos exemplos, o valor de 1px será determinado para a parte do topo do elemento. O valor de 5px determinará o valor da distância para a direita do elemento. Já o valor de 10px determinará a distância para o lado inferior do elemento (abaixo do elemento) e o valor de 15px determinará o valor para o lado esquerdo do elemento. Vale ressaltar, que no 1° exemplo, o valor é determinado no sentido horário, ou seja, Topo > Direito > Baixo > Esquerdo. Se um valor de uma posição não for preenchido, duplicará para o seu par, ou seja:

12 Propriedade Margin e Padding
Neste caso, o valor de 5px determinará a distância para Topo e Baixo (bottom) e 3px determinará para Direito e Esquerdo. Onde X é par de X e Y é Par de Y. Vale ressaltar que essa é uma forma otimizada de escrever o código, mas você poderá optar pelo segundo exemplo também.

13 Propriedade Margin e Padding
Já o Padding funciona de forma inversa ao Margin. Ele cria um espaço entre a borda do elemento para dentro. Vale ressaltar que as formas de formatação seguem a mesma linha do Margin. Vamos ver um exemplo: Neste caso o Topo e Baixo terão5px de distância e Direita e Esquerda terão 3px.

14 Propriedade Font A propriedade FONT determina a formatação de fontes do documento. Através dela podemos determinar a família, cor, tamanho entre outras possibilidades. Exemplo de aplicação

15 Propriedade Font Veja mais um exemplo:
No exemplo acima, todo conteúdo dentro da DIV curso terá a formatação de fonte com 11px e cor# Como não determinamos uma família de fontes para esta DIV, ela utilizará a família determinada no BODY.

16 Propriedade Font É muito comum a otimização de propriedades, conforme exemplo abaixo: Você deve estar se perguntando porque Trebuchet MS está entre aspas (""). Porque para nomes de fontes que contenham espaços é indispensável o uso de aspas. Sobre a forma otimizada, como você pode ver, a formatação de Font está em apenas uma única linha, mesclando o font-size e o font-family. Dessa forma, além de otimizado, o código fica mais limpo.

17 Propriedade Background
A propriedade BACKGROUND definirá a formatação de um background. Podemos colocar cor, uma imagem, determinar repetições ou não para esta imagem ou até mesmo posicioná-la onde desejarmos. Exemplo de aplicação

18 Propriedade Background
A propriedade BACKGROUND definirá a formatação de um background. Podemos colocar cor, uma imagem, determinar repetições ou não para esta imagem ou até mesmo posicioná-la onde desejarmos. Exemplo de aplicação