CSS Cascading Style Sheets Linguagem de Folhas de Estilo
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
Inline Pode ser configurado dentro do componente, na propriedade style e 3
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
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
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
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
Internal e 8
Internal Se for definido algum estilo de forma Inline, o componente não obedecerá o estilo internal e 9
Exemplo e 10
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
MyStyleSheet.css e 12
Exemplo e 13
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
Criando classes Para utilizar a classe utilize a propriedade class do componentes que será alterado por conta dela e 15
Exemplo Classe Dentro de uma CSS podemos ter diversas classes e 16
Exemplo Classe Podemos agrupar classes em um componente e 17
Cores Cores (ex: red, rgb(255, 0, 0), #ff0000 e 18
Backgrounds background-color background-image background-repeat background-attachment background-position e 19
Backgrounds background-image e 20
Backgrounds background-repeat e 21
Backgrounds background-repeat e 22
Margin e 23
Padding e 24
Height and width e 25
Text e 26
Font e 27
Table e 28
Box model e 29
Seletor - hierarquia e 30
Imagens e 31
Imagens e 32
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
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
CSS3 - border-radius border-radius: 15px 50px 30px 5px; e 35
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
CSS3 - Full Size Background Image e 37
CSS3-2D Transforms e 38
CSS3 - Transitions e 39
CSS3 - Animations e 40
CSS3 - Buttons e 41
Responsive Web Design Introdução Mesmo layout em dispositivos diferentes Web design responsivo usa apenas HTML e CSS e 42
Responsive Web Design e 43
Responsive Web Design - Frameworks W3.CSS Bootstrap e 44
Responsive Web Design - W3.CSS e 45
Responsive Web Design - W3.CSS e 46
Responsive Web Design - Bootstrap e 47
Responsive Web Design - Bootstrap e 48
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