Dados do Aluno Nome: ________________________________________________ Número da matrícula: _____________________________________ Endereço: _____________________________________________ Bairro: ________________________________________________ Cidade: _______________________________________________ Telefone:_______________________________________________ Anotações Gerais: ________________________________________ ______________________________________________________ ______________________________________________________
CSS Rua São Vicente de Paulo, 102 – Centro – Araucária/PR
Apresentação do CSS Cascading Style Sheets (ou simplesmente CSS) é uma linguagem de estilo utilizada para definir a apresentação de documentos escritos em uma linguagem de marcação, como HTML ou XML. Seu principal benefício é prover a separação entre o formato e o conteúdo de um dodsdasdcumento. Em vez de colocar a formatação dentro do documento, o desenvolvedor cria um link (ligação) para uma página que contém os estilos, procedendo de forma idêntica para todas as páginas de um portal. Quando quiser alterar a aparência do portal basta portanto modificar apenas um arquivo. Fonte: http://pt.wikipedia.org/wiki/Cascading_Style_Sheets
Marcas Registradas: Todas as marcas e nomes de produtos apresentados nesta apostila são de responsabilidade de seus respectivos proprietários, não estando a editora associada a nenhum fornecedor ou produto apresentado nesta apostila. Método CGD® - Todos os direitos reservados. Protegidos pela Lei 5988 de 14/12/1973. Nenhuma parte desta apostila poderá ser copiada sem prévia autorização. O Método CGD é um produto da Editora CGD.
Rua São Vicente de Paulo, 102 – Centro – Araucária/PR
Controle de Presença Data
Lição e Passo
Anotações
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
____/____/_____
___________
________________
Rua São Vicente de Paulo, 102 – Centro – Araucária/PR
____/____/_____
___________
________________
____/____/_____
___________
________________ Índice
LIÇÃO 1 - INICIANDO NO CSS ......................................................... 5 ● ● ● ● ● ● ●
O QUE É O CSS ............................................................................ 5 OS TIPOS DE FOLHA DE ESTILO ............................................................ 6 AS DEFINIÇÕES EXISTENTES DO CSS ..................................................... 7 A PROPRIEDADE BACKGROUND............................................................. 9 A PROPRIEDADE MARGIN ................................................................. 12 AS PROPRIEDADES WIDTH E HEIGHT .................................................... 13 EDITANDO TEXTOS ....................................................................... 14
LIÇÃO 2 - PROPRIEDADES PARTE 1 ................................................17 ● ● ● ● ●
A PROPRIEDADE FLOAT ................................................................... 17 A PROPRIEDADE CLEAR ................................................................... 19 A PROPRIEDADE PADDING ................................................................ 22 A PROPRIEDADE BORDER ................................................................. 23 A PROPRIEDADE POSITION ............................................................... 26
LIÇÃO 3 - ARQUIVO CSS.................................................................27 ● ● ● ● ● ● ●
ARQUIVO CSS............................................................................ 27 A PROPRIEDADE DISPLAY ................................................................. 29 EDITANDO LINKS ......................................................................... 30 CENTRALIZAÇÃO DE DIVS E OUTROS ELEMENTOS EM CAIXA ............................ 33 A PROPRIEDADE BACKGROUND-POSITION ............................................... 36 A PROPRIEDADE BACKGROUND-REPEAT ................................................. 37 A PROPRIEDADE Z-INDEX .............................................................. 41
LIÇÃO 4 - SIMPLIFICANDO.............................................................44 ●
A PROPRIEDADE CURSOR ................................................................ 44
LIÇÃO 5 - PROPRIEDADES PARTE 2 ................................................46 ● ●
A PROPRIEDADE OVERFLOW ............................................................. 46 LISTA DE PROPRIEDADES ................................................................. 47
Rua São Vicente de Paulo, 102 – Centro – Araucária/PR
Lição 1 - Iniciando No CSS ●
O que é o CSS
●
Um arquivo CSS (Cascading Style Sheets) ou folha de estilos em cascata é uma linguagem utilizada para a definição de layouts em documentos HTML, controlando tamanho, margens, cores, bordas.
●
Assim como no HTML qualquer alteração no código CSS deve ser salva para que, então, possa ser visualizada no navegador.
●
O HTML também pode ser utilizado para a definição do layout (como era feito antigamente, através do uso de tabelas), porém esse uso é incorreto, hoje em dia temos a presença das normas de desenvolvimento para web, e você deve segui-las para que assim possa obter um resultado parecido nos navegadores existentes.
●
Esses padrões para desenvolvimentos são definidos pelo W3C, um consórcio internacional no qual organizações filiadas, uma equipe em tempo integral e o público trabalham juntos para desenvolver padrões para a Web.
●
Veja abaixo um exemplo do que o CSS permite fazer em uma página da internet, esta é uma página que foi criada com formatação CSS e nós retiramos o código para que você veja do que ele é capaz.
CSS
5
●
Temos agora a mesma página, porém, com a formatação CSS inserida.
●
Veja a diferença entre as duas versões da página, ou seja, através do código CSS você pode definir toda a aparência do site, ajustando posição, cor e outras características, tanto de texto como de imagens.
●
Os tipos de folha de estilo
●
Atualmente existem três (3) tipos de folhas de estilo, a INLINE, a EXTERNA e a INTERNA, veja a seguir a diferença entre as três.
●
INLINE: Utilizando o estilo inline, você irá inserir os códigos CSS junto com o código HTML, dentro da própria tag alvo, utilizando o atributo style, ou seja, se você deseja por exemplo, deixar um div com fundo preto e texto branco, seu código ficaria assim:
6
CSS
●
EXTERNA: Utilizando uma folha de estilo externa, você deverá "linka-la" na página através de uma tag própria que deve ser inserida entre as tags <head> e </head>:
●
INTERNA: Utilizando uma folha de estilo interna, você deverá criar um arquivo css normalmente, porém ele será inserido na própria página entre as tags <head> e </head>, utilizando a tag <style>, todas as propriedades CSS devem ir dentro da tag style:
●
As definições existentes do CSS
●
Uma folha de estilo CSS pode ser composta através de quatro possíveis definições, e você pode utilizá-las juntas em uma mesma folha de estilo. A CLASSE pode ser aplicada em vários elementos HTML, quantas vezes forem necessárias, a criação de uma classe ocorre na definição do nome antecedido por um ponto final, veja a seguir a criação de uma classe, onde definiremos a fonte do texto, a cor e o tamanho:
●
CSS
7
●
A aplicação desta classe, poderia ser feita em um div, em um parágrafo em um span, onde fosse necessário, podendo ser repetida no documento, sua aplicação em um parágrafo seria feita da seguinte maneira:
●
O ID ao contrário da classe só pode ser aplicado em um elemento determinado da página, uma única vez, ou seja, deve ser único, não pode se repetir, a criação de um id ocorre na definição do nome antecedido por um sustenido (#), veja a seguir a criação de um id, onde definiremos a cor de fundo, a largura e as margens do objeto:
●
O id é geralmente utilizado em áreas importantes da página, como a definição do corpo, do menu, do cabeçalho e etc, no exemplo acima nós criamos uma definição para o corpo da página, ela deve ser aplicada em um div, já que este por sua vez é uma espécie de container do HTML, veja a aplicação a seguir:
●
A TAG serve basicamente para redefinir uma determinada tag HTML, ou seja, define a formação de uma tag, aplicando-a em todas as tags da página, para a definição de uma tag, basta inserir seu nome, e todas as tags da página seguirão sua formatação, veja a seguir a definição de uma imagem de fundo para a página, uma fonte padrão, uma cor e um tamanho de texto:
8
CSS
●
Como a tag redefine um elemento HTML, ela não precisa ser aplicada, o exemplo acima iria definir a formatação da tag body, ou seja do corpo da página, definindo uma fonte padrão e uma imagem de fundo.
●
A COMPOSIÇÃO serve para definir a formatação de um determinado item que deve estar dentro de outro determinado item, para a definição de uma composição, você deve inserir primeiro o elemento principal e em seguida o elemento que realmente deseja editar, veja a seguir a definição de um parágrafo que deve estar dentro de uma tag com a id #conteudo.
●
A aplicação desta composição seria feita em um div com a id #conteudo e ela iria alterar todos os parágrafos presentes dentro deste div, ou seja, qualquer texto presente no div, só seria realmente alterado se estivesse dentro de um parágrafo:
●
A propriedade background
●
A propriedade background é responsável pela definição das propriedades do fundo da página. Ela se divide em pequenas propriedades, como: color, image, repeat entre outras, veja mais detalhes a seguir.
CSS
9
●
background-color: - Define a cor que será utilizada no fundo da página através do código hexadecimal (#ffffff).
●
background-image: - Define a imagem que será utilizada no fundo da página, através do valor url(local da imagem).
●
background-repeat: - Define se a imagem aplicada no fundo da página irá ou não se repetir, os valores possíveis são: no-repeat (para que a imagem não seja repetida). repeat (para que a imagem seja repetida em todo o fundo). repeat-x (para que a imagem seja repetida apenas horizontalmente). repeat-y (para que a imagem seja repetida apenas verticalmente).
●
background-position: - Define o posicionamento da figura no fundo da página, os valores possíveis são: bottom (insere a imagem na área inferior da página). center (insere a imagem centralizada na página). left (insere a imagem na área esquerda da página). right (insere a imagem na área direita da página). top (insere a imagem na área superior da página).
●
Veja um exemplo de aplicação da propriedade background em uma página.
●
A propriedade background também pode ser aplicada em DIVs, H1, H2, H3, tables e outras tags do HTML, você também pode utilizá-la através de classe ou id. Abaixo temos um exemplo de classe com a aplicação da propriedade background.
●
10
CSS
CSS
11
●
Se a classe fosse aplicada acima fosse aplicada a um div, esse seria o resultado dela:
●
A propriedade margin
●
A maior parte dos elementos HTML possuem uma margem própria, através do CSS você pode aumentá-la, reduzi-la e também adicionar margem aos itens que não possuem uma margem padrão, para isso você deve utilizar a propriedade MARGIN.
●
A propriedade MARGIM pode ser aplicada em todos os lados do elemento, você pode aplicar a margem na parte superior utilizando a propriedade margin-top, para aplicar margem à direita do elemento você pode utilizar a propriedade margin-right, para a parte inferior você pode utilizar a propriedade margin-bottom e para a parte esquerda do elemento você pode utilizar a propriedade margin-left. Para definir o mesmo valor para todos os lados, basta utilizar a propriedade margin. Veja alguns exemplos abaixo:
● ●
● 12
No exemplo acima o cabeçalho H1 terá 10px de margem superior, inferior e terá 20px de margem à esquerda e à direita. CSS
●
Para aplicar 10px de margem em todos os lados, bastaria ajustar o CSS da seguinte maneira:
●
Existe uma maneira de aplicar uma borda com valores diferentes em apenas uma linha, dessa seguinte maneira:
●
As propriedades width e height
●
O CSS permite que você ajuste a altura e a largura de um determinado objeto, existe uma propriedade para cada ajuste, para modificar a largura de um objeto você deve utilizar a propriedade width, já para alterar a altura do objeto a propriedade a ser utilizara é a height.
●
Essas propriedades também podem ser trabalhadas com porcentagem (%) ou seja, você pode personalizar um div para que ele ocupe 50% da tela do usuário, ou seja, o valor irá variar de um computador para o outro, pois o tamanho da tela nem sempre é o mesmo.
●
Veja abaixo alguns exemplos de utilização das propriedades width e height.
CSS
13
●
Abaixo temos o resultado caso o CSS acima fosse aplicado em um div:
●
Bastaria inverter o valor das propriedades width e height, para que o retângulo criado fosse verticalmente:
●
Editando textos
●
O CSS permite que você altere a formatação de textos, você pode fazer isso criando uma classe que será inserida em divs e parágrafos ou editar os parágrafos e os cabeçalhos diretamente (h1, h2, h3...).
●
Para a edição de textos o css apresenta diversas propriedades, veja algumas delas a seguir: color: define a cor do texto através do código hexadecimal, exemplo: #ff00ff.
● 14
CSS
●
font-family: define a fonte que será utilizada no objeto, fontes que tenham espaço no nome, devem ser inseridas entre "aspas", e após o nome da fonte você poderá especificar se a fonte é ou não serifada (o que é fonte serifada?), para fontes serifadas utiliza-se o termo "serif" para fontes não serifadas, utiliza-se o termo "sans-serif" exemplo: "Lucida Sans", sans-serif.
●
font-size: define o tamanho da fonte em px, exemplo: 12px.
●
text-align: define o alinhamento do texto, seu valor pode ser: center para centralizar o texto, left para inserir o texto à esquerda, right para inserir à direita ou justify para justificar.
●
text-decoration: define o estilo de decoração do texto, seu valor pode ser: line-through para que uma linha passe no meio do texto, none para que nenhuma decoração seja aplicada (útil para remover o sublinhado de links), overline para que uma linha passe acima do texto ou underline para o efeito sublinhado.
●
Abaixo temos um cabeçalho H1 (<h1>) padrão, sem formatação CSS.
●
No CSS criamos uma regra do tipo TAG, que iria modificar todos os cabeçalhos do tipo H1.
●
Esse é o resultado da formatação do CSS.
CSS
15
●
A formatação de texto também pode ser feita através de um outro container, não sendo aplicada apenas aos parágrafos e cabeçalhos, como no caso abaixo (classe div_propaganda), todo texto inserido dentro de um div com esta classe irá seguir a formatação determinada, ou seja, fonte “Trebuchet MS”, tamanho 15px e cor branca.
●
Esse é o exemplo de um DIV com a classe “div_propaganda”.
16
CSS
●
Você também pode inserir uma aparência padrão para todos os textos da página, através da formatação da tag <body> no seu CSS, veja o exemplo abaixo.
●
Dessa maneira, todos os textos da página que não possuíssem uma formatação, teriam a fonte definida como “Trebuchet MS” no tamanho 14px e a cor preta (#000000).
Lição 2 - Propriedades Parte 1 ●
A propriedade float
●
A propriedade float é a responsável por determinar a posição do objeto, float quer dizer "flutuar" ou seja, ela é responsável pela "flutuação" do elemento, seus valores são: left (para que o objeto fique à esquerda). right(para que o objeto fique à direita). none (para que o objeto não flutue). inherit (para que o objeto herde o float do objeto anterior).
●
CSS
Ao definir o valor da propriedade FLOAT como LEFT o elemento, ficará à esquerda da página, veja o exemplo abaixo.
17
●
Ao definir o valor da propriedade FLOAT como RIGHT o elemento, ficará à esquerda da página, veja o exemplo abaixo.
●
Se o espaço disponível for suficiente para os dois objetos, eles serão exibidos lado a lado, veja o CSS abaixo
18
CSS
●
Os divs ficariam assim:
●
A propriedade clear
●
Quando um objeto não for "flutuar" ao lado de nenhum outro, você deve "bloquear" a propriedade float, essa é a função da propriedade clear, bloquear o float no objeto em que for adicionada, os valores da classe podem ser: left (para bloquear float à esquerda do objeto). right(para bloquear float à direita do objeto). both (ara bloquear float em ambos os lados).
●
No exemplo abaixo nós inserimos dos dois divs criados anteriormente.
CSS
19
●
Eles ficam assim:
●
Basta adicionar a propriedade clear ao div da direita, para indicar que ele não deverá ter nenhum item flutuando a esquerda, ou seja, basta inserir a propriedade clear:left para que ele seja criado abaixo do div da esquerda.
20
CSS
●
Fica assim:
●
Criamos uma nova classe para adicionar mais um div a página.
●
Adicionamos o div criado (div_esquerda2) abaixo do div_esquerda
●
Como o div da direita está com a propriedade clear, o div foi inserido logo a esquerda do primeiro div.
CSS
21
●
A propriedade padding
●
A propriedade padding adiciona uma margem interna ao objeto, ou seja, se você aplicar um padding em um parágrafo, o texto ficará um pouco menor que a caixa de texto, deixando uma “margem interna”, para criar essa margem, o objeto onde o padding for adicionado irá aumentar o tamanho de acordo com o valor inserido, por exemplo, você tem um div com 50px de altura e de largura, ao adicionar um padding de 10px o div ficará com 70px de altura e de largura, pois ele terá 10px adicionado a cada lado.
●
Veja um exemplo de aplicação de padding abaixo.
●
O div fica assim, veja que existe um espaço entre o texto e a borda do div, esse é o resultado do padding:10px
22
CSS
●
A propriedade border
●
A propriedade border é responsável por inserir borda ao conteúdo onde ela for aplicada, abaixo temos um div, com 180px de largura e altura com 10px de espaçamento (padding) (o que totaliza 200px de largura e altura) com o preenchimento cinza claro (#eaeaea) texto preto e uma borda preta.
●
A propriedade border pode ser aplicada separadamente, ou seja, em apenas um dos lados do objeto, para isso você deve utilizar a propriedade adequada: border-left border-right border-top border-bottom
●
CSS
Para aplicar uma borda apenas na parte superior de uma classe, por exemplo, você iria cria-la da seguinte maneira:
23
●
Note que a propriedade border faz a união de todas as propriedades de borda: 1px = largura da borda solid = estilo da borda #0000ff; = cor da borda
●
Esses atributos também podem ser definidos individualmente, assim: border-width:1px; border-style:solid; border-color:#0000ff;
● ●
Ou seja, para inserir uma borda ao redor de todo o elemento, você pode criar o css de duas maneiras. Da forma extensa:
●
Da forma resumida:
●
A propriedade border possui vários estilos, veja-os abaixo:
24
CSS
●
Veja abaixo uma classe criada para inserir uma borda inferior em um elemento
●
Aplicamos a classe à um cabeçalho de nível H2, veja o resultado abaixo:
●
O modelo abaixo usa o estilo de borda dotted
●
O modelo abaixo usa o estilo de borda dashed
CSS
25
●
A propriedade position
●
A propriedade position serve para especificar o posicionamento de um objeto, ele possui quatro valores possíveis, eles são: absolute: O posicionamento absolute, utiliza como base o último elemento que foi posicionado através de qualquer outro valor. fixed: O posicionamento fixed, deixa o elemento fixo na tela, sempre no mesmo local, independente do scroll da página e etc. relative: O posicionamento relative, deixa o objeto posicionado conforme sua determinação através dos valores left, top, right e bottom. static: O posicionamento static, deixa o objeto seguir o fluxo da página, esse na verdade é o posicionamento padrão de qualquer objeto, sendo assim, não se torna necessário declará-lo no CSS.
26
CSS
Lição 3 - Arquivo CSS ● ●
Arquivo CSS Os arquivos do tipo .CSS devem ser utilizados para formatar os arquivos .HTML, para isso você deve ligar (linkar) o css ao arquivo html através da tag <link>
●
O arquivo CSS não precisa ficar na mesma pasta do arquivo HTML, você pode indicar a pasta como feito no exemplo acima, o arquivo css (estilos.css) está dentro da pasta CSS
CSS
27
●
●
Você pode ter mais de um arquivo .css na mesma pasta, pois, apenas o arquivo indicado através da tag <link> será utilizado, os arquivos .css servem basicamente para organizar o código da sua página, permitindo assim que o arquivo .html utilize apenas códigos dedicados ao HTML. Se o arquivo CSS estivesse na mesma pasta do arquivo HTML
●
O código para linkar o CSS ao HTML seria assim:
●
A tag <link> deverá sempre indicar onde o arquivo CSS está, esteja ele dentro de uma pasta ou na mesma pasta do arquivo HTML.
●
Os atributos “rel” e “type” sempre deverão ser preenchidos como no exemplo acima (rel=”stylesheet” type=”text/css”).
●
O atributo rel indica a relação entre os dois arquivos, ou seja, o arquivo linkado é uma folha de estilo (stylesheet). Já o atributo type indica o tipo do arquivo, no caso, texto/css.
●
●
28
Você pode obter maiores detalhes sobre a tag <link> no seguinte site: http://www.w3schools.com/tags/tag_link.asp
CSS
●
A propriedade display
●
A propriedade display permite a definição da maneira que o elemento html será apresentado na página, existem 4 principais valores para essa propriedade veja-os a seguir: block: faz com que o objeto seja exibido em forma de bloco, assim como acontece com os parágrafos e os cabeçalhos, um bloco contém espaços em branco em todos os cantos e não permite que um outro objeto html fique ao seu lado. inline: faz com que o objeto seja exibido em linha, ou seja, no mesmo local, podendo transformar uma lista em uma única linha. none: deixa o objeto oculto, ou seja, ele não é exibido pelo navegador. inline-block: é uma mistura dos dois primeiros valores, ou seja, insere um objeto em linha, porém deixando-o se comportar como um bloco.
●
Veja a lista criada abaixo:
●
Ela é uma lista não ordenada, criada em HTML através das tags <ul> e <li>, agora veja a composição que foi criada para editar todas as tags <li> que estiverem dentro da classe .lista_menu:
●
Agora basta aplicar a classe lista_menu na tag <ul> para que ela altere todos os <li> que estiverem dentro dela.
CSS
29
●
A lista agora será exibida em uma única linha sem os marcadores
●
Basta inserir os links em cada item da lista para criar uma espécie de menu horizontal para um site.
●
Se a propriedade display fosse modificada para none, a lista deixaria de ser exibida na página.
●
Editando links
●
Assim como no HTML, o CSS permite alterar os estados dos links, cada um pode utilizar uma formatação própria, por exemplo, o link será verde, quando o mouse estiver sobre ele, então sua cor será azul, quando clicado ficará vermelho... e assim por diante, veja agora como modificar os estados dos links: a:link: responsável por editar o estado inicial do link a:hover: responsável por editar o link quando o mouse está posicionado sobre ele a:visited: responsável por editar os links já visitados a:active: responsável por editar o link quando ele estiver ativo
●
Veja abaixo como editar a aparência de um link que está dentro de uma tag <li> para definir a aparência de um menu horizontal.
●
A lista foi criada utilizando a tag <ul> e a tag <li>.
30
CSS
●
Ela
●
Essa classe está deixando o display da lista no modo block para que ela ocupe toda a página horizontalmente assim como acontece com os cabeçalhos (H1, H2...) define que ela terá um padding no valor de 5px, não terá margem e possuirá um fundo em um tom de cinza escuro (#666666).
●
Basta inserir uma composição que deixe todos os elementos <li> que estiverem dentro da classe lista_menu sendo exibidos em linha (display:inline), ficaria assim:
●
Para formatar os links que estão dentro dos elementos <li> você precisa criar uma nova composição.
CSS
está
utilizando
a
classe
lista_menu
31
●
Esta composição define que a fonte do link será “Trebuchet MS”, eles deverão ter um espaçamento de 5px entre eles (padding), a cor do link deverá ser branco (#ffffff) e ele não deverá ter nenhuma decoração (text-decoration:none) desta forma o sublinhado que fica abaixo dos links será retirado.
●
Para alterar a aparência do link quando o mouse estiver posicionado sobre ele, você deverá alterar o estado a:hover.
●
Ao posicionar o mouse sobre algum dos links, ele ficará assim:
●
Após visitar (clicar) em um link, ele irá mudar de aparência para indicar que ele já foi visitado, ficando assim:
●
Para alterar a aparência do link quando o mouse estiver posicionado sobre ele, você deverá alterar o estado a:visited.
32
CSS
●
Os links que já foram visitados agora terão a mesma aparência dos links que ainda não foram visitados.
●
O status :hover deve sempre ser o último a ser definido, o resultado final do menu é o seguinte.
●
O CSS deve ficar assim:
●
Centralização de divs e outros elementos em caixa
●
A centralização de uma página que trabalha sua medida de forma ajustável, em porcentagem (%) é feita através de uma conta simples, suponha que o corpo da página ocupa 60% da janela, ou seja, 100% da janela menos 60% do corpo, restando 40%, os 40% restantes devem ser divididos por 2, afinal temos duas laterais, a esquerda e a direita,
CSS
33
sendo assim, nossa pĂĄgina teria 20% de margem em cada lateral.
â&#x2014;?
34
Lembre-se de como utilizar a propriedade margin nas pĂĄginas 11/12.
CSS
●
Quando estamos trabalhando com uma página de largura fixa, definida em pixels (px), não sabemos a porcentagem que ela ocupará da tela, pois ela irá variar de acordo com a resolução do computador do usuário, então a centralização deve ser feita através da propriedade "margin" com o valor "0 auto", como você pode ver no exemplo abaixo.
●
A
●
O CSS deverá ser feito assim:
●
A página ficará assim:
CSS
página
sem
a
propriedade
margin
está
assim:
35
●
A propriedade background-position
●
A propriedade background position permite que você ajuste a posição da imagem de fundo, seja ela da página, de um div, ou de qualquer outro elemento HTML. Veja o div abaixo, ele será utilizado para demonstrar como funciona o background-position.
●
●
A propriedade background-position serve para ajustar o posicionamento da imagem, ela pode ter os valores: left top left center left bottom right top right center right bottom center top center center center bottom
●
Se você especificar uma posição apenas com uma palavra a segunda será center, ou seja, se você definir o background-position como left, ele na verdade será left center, se você especificar como top ele será top-center.
●
Você também pode posicionar a imagem através de % como no exemplo abaixo: background-position:0% 50% - O posicionamento aqui seria 0% na horizontal e 50% na vertical.
● 36
E até mesmo através de px, como no exemplo: CSS
background-position:10px 25px - O posicionamento aqui seria 10px na horizontal e 25px na vertical.
●
A imagem bob.png será utilizada no fundo do div.
●
A imagem é aplicada e repetida várias vezes para preencher completamente o tamanho do div, essa é a configuração padrão do background no css, ele sempre é repetido, porém, você pode modificar esse comportamento.
●
A propriedade background-repeat
●
A propriedade background-repeat permite que você ajuste a repetição do background, através dessa propriedade você pode limitar a repetição horizontalmente, verticalmente ou não permitir sua repetição, veja os valores da propriedade. repeat: faz com que o fundo seja repetido em todo o fundo, esse é o valor padrão do CSS. repeat-x: faz o fundo ser repetido apenas horizontalmente. repeat-y: faz o fundo ser repetido apenas verticalmente. no-repeat: não permite que o fundo seja repetido.
CSS
37
●
Ao aplicar o background-repeat: repeat-x; o fundo ficará assim:
●
Ao aplicar o background-repeat: repeat-y; o fundo ficará assim:
●
Ao aplicar o background-repeat: no-repeat; o fundo ficará assim:
38
CSS
●
Para utilizar a propriedade background-position, você precisa definir a propriedade background-repeat como no-repeat, para que o fundo seja inserido apenas uma vez e não seja repetido em todo o fundo.
●
Abaixo temos alguns resultados da aplicação do background-position e seus diferentes valores.
●
Background-position: center;
●
Background-position: top;
CSS
39
●
Background-position: top right;
●
Background-position: bottom left;
●
Background-position: center right;
40
CSS
●
Como você pode ver nos exemplos anteriores, a primeira palavra do valor indica o posicionamento vertical, já a segunda palavra o posicionamento horizontal.
●
A propriedade Z-INDEX
●
O CSS permite que você trabalhe com "camadas", ou seja, você pode sobrepor objetos, isso pode ser feito através da propriedade z-index, o valor da propriedade deverá ser numérico, assim ele representará a camada em que o objeto está, por exemplo, um objeto com o z-index definido em 2 (z-index:2) ficará sobre um objeto com o z-index no valor 1, ou seja, o objeto com o maior z-index ficará posicionado sobre o restante.
●
Para utilizar a propriedade z-index você precisa definir também a propriedade position.
●
Veja as imagens abaixo, elas foram inseridas sem nenhum ajuste CSS.
CSS
41
●
Veja agora as classes criadas (uma para cada imagem).
●
As classes foram aplicadas nas imagens.
●
Esse foi o resultado obtido.
●
A imagem do Lula Molusco está sobre as outras duas pois ela possui o zindex com o maior valor (z-index:3).
42
CSS
●
Basta alterar o valor do z-index da classe .bob para um número maior que 3 para que a imagem que utiliza essa classe fique sobre a imagem do Lula molusco.
●
Ao posicionar as imagens através dos valores de top e left você pode obter o seguinte resultado
CSS
43
Lição 4 - Simplificando ●
A propriedade Cursor
●
O CSS permite que você edite a aparência do cursor do mouse, a propriedade responsável por isto é chamada de cursor, você pode aplicar esta propriedade para modificar o cursor em toda página, ou apenas em um único objeto, veja agora alguns dos valores que você pode utilizar para a propriedade.
44
CSS
CSS
45
Lição 5 - Propriedades Parte 2 ●
A propriedade Overflow
●
A propriedade overflow serve para indicar como o container irá agir se o conteúdo ultrapassar suas medidas especificadas (altura e largura), a propriedade pode ser:
●
overflow:hidden que esconderá o conteúdo restante como você pode ver abaixo.
●
overflow:scroll que criará as barras de rolagem, mesmo que elas não sejam necessárias:
46
CSS
●
overflow:auto que criará as barras de rolagem, quando elas forem necessárias.
●
Lista de propriedades
●
Abaixo temos um resumo das propriedades básicas do CSS.
●
background-color: utilizado para definir uma cor de fundo na página e/ou elemento. background-image: utilizado para definir uma imagem de fundo na página e/ou elemento. background-repeat: utilizado para definir a repetição da imagem de fundo da página e/ou elemento. background-position: utilizado para definir a posição da imagem no fundo da página e/ou elemento.
● ● ●
CSS
47
● ● ● ● ● ●
● ● ● ●
color: utilizado para definir a cor do texto. text-align: utilizado para definir o alinhamento do texto. text-decoration: utilizado para definir se o texto terá ou não decoração, sublinhado e etc. font-family: utilizado para definir a fonte que será utilizada no texto. font-size: utilizado para definir o tamanho do texto. Os links podem ser editados através dos quatro estados abaixo, lembrese que eles podem ser adicionados a classes específicas, por exemplo, .cabecalho a:link, dessa maneira apenas os links que estiverem dentro da classe .cabecalho seriam editados. a:link: utilizado para editar a aparência dos links em seus estados iniciais. a:visited: utilizado para editar a aparência dos links que já foram visitados (clicados). a:hover: utilizado para editar a aparência dos links quando o mouse estiver sobre eles a:active: utilizado para definir a aparência do link na hora do clique.
●
list-style-type: permite que você altere o formato dos marcadores das listas ordenada e não ordenadas
●
margin: permite que você defina a distância externa de um elemento para outro ou para a página. margin-top: define a margem existente na parte superior do elemento. margin-right: define a margem existente na lateral direita do elemento. margin-bottom: define a margem existente na parte inferior do elemento. margin-left: define a margem existente na lateral esquerda do elemento.
● ● ● ●
● ● ● ● 48
border: permite que você defina se o elemento terá uma borda, ela pode ser um risco sólido, ou uma linha tracejada por exemplo e também pode ter a espessura que você desejar. border-style: define o estilo da borda, linha fixa, tracejada e etc. border-color: define a cor da borda. border-width: define a espessura da borda. CSS
● ● ● ● ●
padding: define a distância existente entre o conteúdo do elemento e sua borda, uma espécie de espaçamento interno. padding-top: define o espaçamento interno existente na parte superior do elemento. padding-right: define o espaçamento interno existente na lateral direita do elemento. padding-bottom: define o espaçamento interno existente na parte inferior do elemento. padding-left: define o espaçamento interno existente na lateral esquerda do elemento.
●
position: permite posicionar o elemento escolhido em relação a página ou a outro objeto.
●
z-index: permite o ajuste do posicionamento do elemento em uma espécie de camada, o elemento com o maior valor na propriedade será exibido sobre os demais.
●
cursor: permite a alteração do cursor que será utilizado.
FIM DA APOSTILA Método CGD ® - Todos os direitos reservados.
Protegidos pela Lei 5988 de 14/12/1973. Nenhuma parte desta apostila poderá ser copiada sem prévia autorização.
CSS
49
Anotações
50
CSS
CSS
51
52
CSS