CSS Cascading Style Sheets

Tamanho: px

Começar a partir da página:

Download "CSS Cascading Style Sheets"

Júlio Ramalho Caminha
6 Há anos
Visualizações:

1 CSS Cascading Style Sheets Linguagem de Folhas de Estilo

2 Introdução Faz parte da versão 4 do html Utilizado para padronizar os componentes html Pode ser utilizado de três formas: Inline quando é utilizada a propriedade style do componente Internal quando utilizamos uma tag <style> dentro da tag <head> do html External quando utilizamos um arquivo css externo e 2

3 Inline Pode ser configurado dentro do componente, na propriedade style e 3

4 Sintaxe Cada declaração inclui um nome de propriedade CSS e um valor, separados por dois pontos Uma declaração CSS sempre termina com um ponto e vírgula, e blocos de declaração são cercadas por chaves. e 4

5 Seletores São utilizados para "encontrar" (ou selecionar) elementos HTML com base em seu nome... Neste caso abaixo, todos os elementos <p> será o centroalinhados, com uma cor de texto vermelho e 5

6 Seletor de ID O id de um elemento deve ser único dentro de uma página A regra de estilo abaixo será aplicada ao elemento HTML com id = "para1": e 6

7 Internal Pode ser utilizado para padronizar um único documento Deve ser criada uma tag <style> dentro da tag<head> do html desejado e definir o estilo desejado Todos os componentes dentro do html obedecerão ao style escolhido e 7

8 Internal e 8

9 Internal Se for definido algum estilo de forma Inline, o componente não obedecerá o estilo internal e 9

10 Exemplo e 10

11 External Os estilos desejados são criados em um arquivo do tipo CSS Essa forma é ideal para dar padrão a várias páginas Todas as páginas que desejarem utilizar um estilo devem declarar a tag <link> dentro do head e 11

12 MyStyleSheet.css e 12

13 Exemplo e 13

14 Seletor de classes Podemos criar classes específicas que podem ser utilizadas para alterar apenas elementos desejados Para escrever uma classe utilize a seguinte sintaxe: e 14

15 Criando classes Para utilizar a classe utilize a propriedade class do componentes que será alterado por conta dela e 15

16 Exemplo Classe Dentro de uma CSS podemos ter diversas classes e 16

17 Exemplo Classe Podemos agrupar classes em um componente e 17

18 Cores Cores (ex: red, rgb(255, 0, 0), #ff0000 e 18

19 Backgrounds background-color background-image background-repeat background-attachment background-position e 19

20 Backgrounds background-image e 20

21 Backgrounds background-repeat e 21

22 Backgrounds background-repeat e 22

23 Margin e 23

24 Padding e 24

25 Height and width e 25

26 Text e 26

27 Font e 27

28 Table e 28

29 Box model e 29

30 Seletor - hierarquia e 30

31 Imagens e 31

32 Imagens e 32

33 Atividade 7 Aplicar CSS no site da locadora Baixar o zip imagens no site da disciplina Baixar o zip site_css no site da disciplina onde consta o layout das paginas que devem ser aplicados Observações: criar um arquivo css externo Criar classes css (sempre que possível) e 33

34 CSS3 Transições e efeitos para criar animações de vários tipos Box Model Backgrounds and Borders Image Efeitos em textos Transformações 2D / 3D Animações e 34

35 CSS3 - border-radius border-radius: 15px 50px 30px 5px; e 35

36 CSS3 - Full Size Background Image Preencher a página inteira com a imagem (nenhum espaço em branco) Centralizar imagem na página Não ter barra de rolagem e 36

37 CSS3 - Full Size Background Image e 37

38 CSS3-2D Transforms e 38

39 CSS3 - Transitions e 39

40 CSS3 - Animations e 40

41 CSS3 - Buttons e 41

42 Responsive Web Design Introdução Mesmo layout em dispositivos diferentes Web design responsivo usa apenas HTML e CSS e 42

43 Responsive Web Design e 43

44 Responsive Web Design - Frameworks W3.CSS Bootstrap e 44

45 Responsive Web Design - W3.CSS e 45

46 Responsive Web Design - W3.CSS e 46

47 Responsive Web Design - Bootstrap e 47

48 Responsive Web Design - Bootstrap e 48

49 Atividade 8 Adicionar CSS no site da locadora Baixar o zip imagens no site da disciplina Baixar o zip site_css_v2 no site da disciplina onde consta o layout das paginas que devem ser aplicados e 49

Documentos relacionados

TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão

TECNOLOGIAS WEB. Unidade 3 Linguagem de Marcação e Estilo. Luiz Leão Luiz Leão luizleao@gmail.com http://luizleao.com Conteúdo da Unidade Cascading Style Sheet (CSS) Linguagem CSS Introdução É uma linguagem de folhas de estilo utilizada para definir a apresentação de documentos