TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22

Sumário: – Introdução ao CSS3

Lição n°

Objetivos:
Ao terminar este capitulo você será capaz de saber:
- O que é o CSS3
- Como Funciona
- sintaxe, selectoes

O que é o CSS
Casting style Sheets(Folha de estilo em cascata) que você deve conhecer pela sigla
CSS é uma linguagem de formatação para definir o estilo de uma página da web.
Graças ao CSS é possível separar o conteúdo da formatação além de configurar e
controlar cada aspecto do design do leyout de uma página.

É importante diferenciar o HTML do CSS. HTML organiza e entrega a informação,

enquanto que CSS formata esta mesma informação. Esta informação pode ser um vídeo,
uma imagem, um texto ou outro elemento que o HTML possua. Na maioria das vezes
está informação é uma elemento visual.

A interação de HTML, CSS e javascript aumenta as possiblidades de uso, porém a

versão 3 do CSS trouxe inúmeros novos recursos inclusive para animações simples sem
uso do javascript.

CSS3 é a versão mais recente do CSS. Esá versão homologada pela World Wide Web
Consortium(W3C), é voltada para o conceito da Web 2.0 e para isto trás recursos para
transições, imagens, e efeitos para criação e animações.

Navegadores como Google Chrome, Opera,Safari,Mozila E Internet Explorer a partir da

versão 9 são suporte ao CSS3. Os novos recursos do CSS3 facilita o trabalho dos
desenvolvedores e proporciona aos usuários, pela variedade de transformações na
apresentação de uma página.

Funcionamento

A principal função do CSS é separa a formatação de um conteúdo da estrutura HTML.

O navegador solicita ao servidor as informações. A estrutura em HTML é carregada e a
nela uma ligação(link) de uma folha de estilo, um arquivo CSS que também será
carregada. Caso hajam Scripts estes tabém juntarão ao outros.

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22

O resultado apresentado no navegador a junção de todas estas linguagens e tecnologias.

Sintaxe

A sintaxe do código CSS é dividida entre selectores e propriedades. Veja o exemplo da

estrutura:

O seletor p aponta para o elemento html representado pela tag<p>

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22

Seletores

Os seletores representação estruturas que são usadas como condições para a formatação.
Podemos atribuir qualquer propriedade para os elementos representados pelas tags no
HTML e referenciados pelos seletores.

Por exemplos se temos a Tag<p> no código HTML e desejamos formata-la no CSS

criaremos o seletor p e dentro das chaves{} vamos atribuir as propriedades e seus
valores.

Exemplo:
p{
Color: #000000
}

Já vimos este exemplo ao falar de sintaxe.

Existem diversos tipos de seletores, e cada tipo permite alterar as condições em que
faremos a formatação.

Tipos de seletor

Seletores de classe
Quando precisamos de aplicar a mesma formatação a elementos mesmo que sejam tags
HTML diferentes criamos uma classe. Todos os itens com a mesma classe herdarão as
características declaradas no CSS. O seletor da classe no CSS iniciado cm um ponto
antes do nome. Veja o exemplo.

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22

Selectores Do tipo ID

Quando o objeto a ser formatado é único utilizandos o seletor ID para identificação.

Neste caso apenas o objeto indicado será alvo daquelas modificações. No CSS
representamos um ID com o caractere # antes do nome do selector. Veja o exemplo
abaixo.

Seletor Asterisco - *

Quando precisamos aplicar a mesma formatação a todos elementos mesmo que sejam
tags HTML, diferentes aplicamos o seletor asterisco. Todos os itens herdarão as
características declaradas no CSS. Isto é muito útil para a técnica de reset. Veja o
exemplo abaixo.

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22

Seletore Adjacente – A+b

Este tipo de seletor é representado com um sinal de mais + entre os elementos. Ele
aplica a formatação ao elemento B que vem diretamente depois de A. Veja o exemplo
abaixo.

Seletor de filhos – A B

Este tipo de seletor é representado sem sinais, utilizando apenas os nomes dos
elementos, sua classe ou ID. Ele aplica a formatação elemento B que seja filho de A.
Veja o exemplo abaixo.

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22

Seletores de Filhos Diretos – A>B

Este tipo de seletor é representado com uma sinal de maior > entre os elementos. Ele
aplica a formatação ao elementos B que seja o primeiro filho de A. Veja o exemplo
abaixo.

Seletor not – A:not(B)

Este tipo de seletor é representado com a expressão :not(). Ele aplica a formatação a
todo elemento A com exceção do elemento B. Veja o exemplo abaixo.

Existem ainda outros tipos de seletores que não foram abordados nesta matéria.

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22

CSS INTERNO

Este tipo de aplicação foi usado por muito tempo mas não é a forma mais eficiente de se
trabalhar com CSS. Consiste em declarar todo conteúdo da formatação CSS dentro da
tag<style> na própria página HTML.

Crie uma página e salve como ccsinterno.html. E digite o código abaixo.

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22

CSS EXTERNO

Outra forma de trabalhar é criar um arquivo onde ficará todo o código CSS. O
arquivo da folha de estilo será salvo no formato .css e nela ficará toda formatação
separada da estrutura do HTML. A folha de estilo será relacionada à página HTML
através da tag<link>.

Crie uma pasta crie dois documentos e salve como exemplo.html e digite os código
HTML do exemplo anterior. Agora crie uma página e salve como cssexterno.css e digite

exemplo2.html exemplo2.css

Uma das vantagens de se trabalhar com CSS em um arquivo externo é que se você tiver
várias paginas tanto a manutenção quanto a criação das mesmas se torna fácil. Isto

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22

A conexão entre o arquivo HTML e o arquivo CSS foi feita através da tag<link>.
<link href=”exemplo2.css” type =”text/css” rel=”stylesheet” media=”all”>só

Href –Contém a url do arquivo

Type – Contém o tipo do arquivo da folha
Rel – Com valor stylesheet especifica que se trata de uma folha de estilo
Media 0 especifica o tipo de media de destino.

Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358

TLP - Técnicas e Linguagens de Programação 12ª Classe Ano lectivo: 2021/22

Fim

Obrigado!
Abraão André Gila Dala | master.gone@hotmail.com | 921 79 79 07 / 913 356 358