TWEB - Introdução Ao CSS

TECNOLOGIAS WEB
INTRODUÇÃO AO CSS
Prof. João Falcão
Escola Tecnológica Paes de Carvalho
Curso Técnico em Informática
Ano: 2024
Prof. João Falcão – Tecnologias Web – Curso Técnico em Informática - Ano: 2024 1/72
Recapitulando...
O esqueleto A pele O cérebro
CSS - Cascading Style Sheets
 O que é CSS?
 O CSS é uma linguagem de formatação que auxilia os desenvolvedores a aprimorar e deixar
atraente a aparência de seus sites, além de facilitar a modelagem do layout.
 Em outras palavras, o CSS é a maneira mais simples de fazer o HTML parecer bonito.
 Pense no HTML como a estrutura básica de uma casa (piso, paredes, telhado, cômodos) e o CSS
como a decoração (pintura, mobília, quadros, tapetes).
 O que o CSS proporciona?
 O CSS proporciona muito mais controle sobre o layout e design das páginas da web.
 Com ele é possível adicionar margens aos parágrafos utilizando apenas uma linha de
código, colorir e estabilizar bordas de imagens e até criar efeitos dinâmicos de
sobreposição nos links do texto.
 A criação de um arquivo .css para inserir uma formatação significa que o site poderá
ter milhares de páginas com o laytout semelhante, pois o CSS possibilita o
armazenamento das informações em um arquivo externo comum, que poderá ser
compartilhado por todas as páginas por meio de uma linha de código.
 Por que e como utilizar o CSS?
 Para quem tem o costume de formatar texto no Microsoft Word ou formatar layouts
de páginas de programas, como o Adobe InDesign ou Fireworks, o CSS será de fácil
compreensão.
 Por que e como utilizar o CSS?
 O w3Schools.com é um site muito visado por desenvolvedores e Tecnologias Webs.
Quando tiver alguma dúvida ou quiser buscar novas informações, acesse-o.
 Um estilo (style) é uma regra que descreve como formatar um “pedaço” de código
HTML.
 Uma folha de estilo (stylesheet) é um conjunto destes estilos.
 Estilo
 Existe a possibilidade de criar estilos específicos
para trabalhar com textos ou com imagens.
 Para exemplificar, imagine a criação de um estilo
para texto que formatará a fonte como Arial, na
cor vermelha e com a margem esquerda de 50
pixels.
 Agora, visualize o outro estilho que alinhará uma
imagem ao longo da margem direita da página e a
circundará com borda colorida, deixando a
margem de 50 pixels entre a imagem e o texto ao
redor.
 Uma vez criado o estilo, basta aplicá-lo aos textos,
imagens ou outros elementos da página.
 O que o CSS controla?
 É possível selecionar um parágrafo do texto e aplicar um estilo
que mudará, instantaneamente, sua cor, tamanho e tipo de
letra.
 Também é possível criar estilos para tag específicas, por
exemplo <h1>, que serão exibidas no mesmo estilo, em todo o
site, não importando onde eles apareçam.
 Em resumo, o CDD controla, principalmente, os seguintes
elementos das páginas: fonte, cor, imagens, altura, largura,
imagens de fundo e posicionamento.
 O CSS possibilita, também, a inserção de elementos na página
com maior precisão, além de definir a distância entre as linhas
do documento, aplicar recuo às primeiras linhas do parágrafo,
definir a visibilidade dos elementos, entre muitas outras
funções.
 Vantagens e Desvantagens
 Muito se acredita que o uso de Tableless (estrutura sem tabela) otimiza a construção dos sites,
com o uso do CSS, porém, outras vantagens podem surgir.
 Interpretação do CSS por diferentes navegadores
 Com as inúmeras vantagens do CSS, surge o seguinte pensamento: por que
não utilizar o CSS em todas as páginas da web?
 A resposta é: porque ainda existem algumas limitações que atrapalham o
uso do CSS.
 Os problemas são múltiplos e relacionados.
 Atualmente, o CSS é compatível com muitas das últimas versões dos
browsers, graças ao aprimoramento das pesquisas, aos desenvolvedores
com grande nível de conhecimento e a comunidade em si, que está muito
mais madura e rigorosa em relação à web.
 Mesmo com toda essa evolução, ainda há internautas que utilizam versões
antigas de navegadores, como o Internet Explorer 7 (ou inferiores) e o
Netscape. Isto, em si, não é problema.
 O que deve ser assegurado é que as páginas que usam styles também
sejam mostradas pelos browsers que não detectam o CSS.
 Obstáculos
 Outro obstáculo mais sério é que a implementação do CSS pode apresentar variações entre o
Netscape e o Internet Explorer. Para solucionar esse problema têm duas saídas:
o Escrever o CSS de forma muito simples, que garanta o

funcionamento em todos os browsers.
o Usar JavaScript para detectar o tipo de browser do
usuário e fazer um link para stylesheets diferentes (em
alguns casos, escrever linhas de código diferentes), de
acordo com cada browser.
 É fundamental estar preparado, pois existe a possibilidade de alguns usuários visualizem seus site
sem nenhum estilo.
 Por este motivo é importantíssimo estar atento á forma correta de utilizar o CSS.
 O que significa CSS?
 O que significa CSS?
 Como vimos, o objetivo principal do CSS é formatar as informações entregues pelo
HTML.
 A ligação do CSS com a página de conteúdos pode ser feita de formas distintas – a
partir de atributos, seletores, classes e propriedades para aplicar as regras contidas
no CSS.
 Ao criar uma folha de regras CSS, precisamos salvar o documento da maneira correta.
Assim como imagens e vídeos têm suas próprias extensões, as folhas de estilo
também possuem uma extensão específica.
 Sintaxe do CSS?
 A regra do CSS é dividida em duas partes: o seletor e uma (ou mais) declarações.
 Tipos de CSS
 O CSS pode ser aplicado no conteúdo
HTML de diferentes maneiras:
 Inline – diretamente no HTML
 Incorporado – por meio da tag
<style>, no topo da página, dentro
da tag <head>
 Linkado ou externo – por meio da
tag <link>, de modo a vincular o
HTML a uma folha de estilos
externa.
 CSS Inline
 O CSS Inline é adicionado junto ao código HTML por meio do atributo style.
 Isso permite atribuir novas propriedades e alterar o visual do elemento:
<p style="color: red; font-size: 30px"> Texto aqui </p>
 CSS Inline
 O CSS Inline é adicionado junto ao código HTML por meio do atributo style.
 Isso permite atribuir novas propriedades e alterar o visual do elemento:
<p style="color: red; font-size: 30px"> O texto vai entre as tags p</p>
 CSS Incorporado
 Para inserir o CSS internamente, ou seja, direto no código HTML, é necessário colocar a tag <style>
dentro do <head> da página HTML. As declarações em CSS serão inseridas dentro da tag <style>.
 CSS Incorporado
 O CSS Incorporado é declarado no início do código HTML e deve ser adicionado
dentro da tag <head>.
 Nesse caso, precisamos abrir e fechar a tag <style>
 CSS Incorporado
 O CSS Incorporado é declarado no
início do código HTML e deve ser
adicionado dentro da tag <head>.
 Nesse caso, precisamos abrir e fechar
a tag <style>
 CSS Incorporado
 O CSS Incorporado é declarado no início do código HTML e deve ser adicionado dentro da tag
<head>.
 Nesse caso, precisamos abrir e fechar a tag <style>
 CSS Linkado ou Externo (Arquivo Externo)
 Para inserir o CSS por meio de um arquivo externo é
preciso ter dois arquivos: uma página HTML (.html) e
uma folha de estilos (.css).
 Pode ser utilizado como editor de textos o Bloco de
Notas do Windows, onde é demonstrado de forma
simples como o CSS é aplicado.
 Existem diversos softwares que auxiliam na criação
de sites e facilitam muito a escrita do código, entre
eles: Notepad++, Sublime Text, etc.
 CSS Linkado ou Externo
 Imagine que você desenvolveu um site com várias páginas.
 Depois de um ano, você precisa trocar o tamanho da fonte (letra) de cada um
dos textos.
 Provavelmente, você terá bastante trabalho, certo?
 Imagine ter de alterar a formatação de cada texto, um a um!
 Para evitar esse trabalho, uma folha de estilos externa pode ajudar.
 Quando criamos uma folha de estilo separada do arquivo.html, essa folha pode
ser ligada a várias páginas HTML ao mesmo tempo.
 Com isso, a manutenção é feita de modo muito mais rápido.
 Por conta disso, o CSS linkado ou externo é o mais utilizado.
 O CSS Linkado, também conhecido como Externo, é aquele cujas regras CSS são
declaradas em um documento a parte do documento HTML, ou seja, é necessário criar um
arquivo com a extensão .css separado do arquivo .html.
 A ligação entre a página HTML e a folha de estilos (CSS) deve ser feita por meio de um link.
 Segundo as boas práticas para o desenvolvimento web, o link deve ser incluído no
cabeçalho da página, dentro da tag <head>.
 O CSS Linkado é ideal quando há a necessidade de se aplicar em várias páginas:
 Adicionando CSS no HTML
 Cada arquivo precisa de um cabeçalho que identifique sua linguagem.
 O HTML possui um cabeçalho mais elaborado que declara vários requisitos importantes,
como o tipo de linguagem, a versão do HTML, a referência ao W3C, entre outros.
 Já no CSS não necessita de um cabeçalho extenso. Ele será identificado pela seguinte
declaração:
 Adicionando CSS no HTML
 O CSS também requer uma declaração no cabeçalho do HTML para que ele seja
identificado na página. É só adicionar a linha que faz a referência ao arquivo.
 CSS Linkado ou Externo – Exemplo I
 Para exemplificar esta inserção de código, visualize os dois exemplos abaixo:
 CSS Linkado ou Externo – Exemplo II
 CSS Linkado ou Externo – Exemplo III
 A tag link informa ao navegador que há uma folha de estilos rel=’stylesheet’ do tipo
text/css no endereço apontado pelo atributo href.
 Criação de Comentários em CSS
 É importante sabermos que a criação de comentários no CSS é algo bastante simples.
Basta inserirmos o conteúdo do comentário entre as barras (/* */).
 Vejamos:
 Escrevendo o código CSS
 As declarações feitas em CSS sempre terminarão com um ponto e vírgula (;) e os grupos de
declarações são cercados por chaves ({ }). Observe o exemplo abaixo:
 Os desenvolvedores adaptaram a forma de escrever o CSS para que o código fique mais legível.
 Com isso , a maneira mais correta de escrever é colocar uma declaração em cada linha:
 Veja abaixo a explicação de cada linha
 Mais estilos em CSS
 No exemplo abaixo, foi feita a remoção das quebras de linha.
 Assim como no XHTML, você pode formatar as CSS da maneira que desejar.
 Para regras maiores, normalmente adicionamos quebras de linha a recuo, para que a CSS fiquem
mais legíveis.
 Você pode adicionar propriedades e valores à vontade em cada regra das CSS. Vamos supor que
se queira colocar uma borda em torno de seus parágrafos. Veja como ficaria:
Propriedade do CSS
 Cores
 As cores na web são representadas por um sistema de cores aditivas, chamado RGB,
sigla das cores Red, Green e Blue (em português Vermelho, Verde e Azul).
 As cores que vemos no monitor são combinações dessas três cores.
Propriedade do CSS
 Cores
 RGB é um sistema hexadecimal (base 16): vai de 0 ao 9 e, em seguida, do A ao F (o
“A” seria o 10, o “B” o 11 e assim sucessivamente).
 Logo os valores de cada um dos seis caracteres pode variar do 0 ao F, onde 0 é o
menor valor (mais escuro) e F é o maior valor (mais claro).
 Dos seis caracteres, os dois primeiros são referentes à cor vermelha: os dois seguintes
à cor verde e os dois últimos à cor azul.
Propriedade do CSS
 Combinação de Cores
 O valor de determinada cor é a combinação das tres cores
primárias, nas quais o sistema RGB se baseia.
 Logo, a cor #FF0000
significa toda a intensidade do vermelho
(FF), nenhuma intensidade ou tom de verde (00) e nenhuma
intensidade ou tom de azul (00).
 Da mesma maneira, a cor#00FFFF é a combinação do
máximo de intensidade do azul quando do verde e nenhuma
do vermelho.
 E #8800FF
é a combinação de vermelho (não muito claro,
mas não muito escuro), o máximo da intensidade do azul
nenhuma do verde.
 A combinação das três cores
em sua intensidade máxima gera
o branco (#FFFFFF), enquanto #000000 é o preto.
Propriedade do CSS
 Propriedade COLOR
 No CSS a propriedade color define a cor do primeiro plano de uma elemento.
 Por exemplo, todos os parágrafos <p> da página web serão da cor verde. O código que defini isso:
Propriedade do CSS
 Resumindo as cores
Propriedade do CSS
 Backgroun-color
 Usamos as propriedades de atributo Background para definir efeitos de fundo nos elementos da
página. Fazem parte deste grupo as seguintes propriedades:
Propriedade do CSS
 Backgroun-image
Propriedade do CSS
 Textos
Propriedade do CSS
 Text-align
Propriedade do CSS
 Text-decoration
Propriedade do CSS
 Text-transform
Propriedade do CSS
 Font
Propriedade do CSS
 Font-family
Propriedade do CSS
 Interpretação do Browser (Navegador)
 Esta é uma maneira de se criar uma lista de fontes.

 Se o browser não identificar uma das opções, oferecerá uma fonte genérica da mesma família.
Propriedade do CSS
 Font-style
Propriedade do CSS
 Font-size
Propriedade do CSS
 Font-size
Propriedade do CSS
 Font-size Definida por Palavras-chave
Propriedade do CSS
 Decisão sobre o Tipo de tamanho da Fonte
 Verificou-se as quatro formas de especificar o tamanho das fontes e mostramos seus aspectos positivos e
negativos.
 Qual das opções podemos usar e obter bons resultados? A seguir é apresentado um método de
combinação que trabalhará bem em todos os navegadores.
 Use umas das palavras-chave como definição do tamanho do texto do body. O ideal que seja “small”
ou “medium”. Este será o tamanho padrão da página.
 Agora defina os tamanhos dos demais elementos em relação ao tamanho da fonte do body. Para
isso, você pode usar o EM ou porcentagens, já que ambos têm o mesmo propósito.
 Usando esta técnica você beneficiará o usuário e a si mesmo! Caso queira aumentar as fontes da página,
em vez de mudar uma por uma, você só terá de aumentar a do corpo da página (body) e as outras serão
alteradas automaticamente.
 Não haverá nenhum problema caso o usuário deseje aumentar as fontes das páginas, pois elas também se
ajustarão automaticamente.
Propriedade do CSS
 Na Prática
Propriedade do CSS
 Links
Propriedade do CSS
 Estilo diferente para cada estado do Link
Propriedade do CSS
 Listas
Propriedade do CSS
 Marcadores de Listas
 Veja,abaixo, exemplos de marcadores de lista
não ordenada, lista ordenada e a utilização de
uma imagem como marcador.
Propriedade do CSS
 Tabelas
Propriedade do CSS
 Bordas das Tabelas
Propriedade do CSS
 Propriedades das Tabelas
Agrupando e Alinhando Elementos no CSS
 Definindo Margin
 Código do Margin
 Definindo Padding
 O padding pode ser definido como o “preenchimento” do elemento .
 Ele não é a distância entre os elementos (margin), mas sim, o que define a distância interna, ou seja, o
espaço entre a borda e o conteúdo.
 Para entender o uso do padding, veja o exemplo abaixo. Todos os textos tem uma cor de fundo definida!
 Adicionando Padding aos cabeçalhos
 Altura e Largura
 Posicionando Elementos
 O posicionamento em CSS permite que um elemento seja colocado em uma posição exata na página.
 Por este motivo, ele é muito utilizado na criação de layouts avançados.
 É possível inserir um elemento em qualquer lugar utilizando um sistema de coordenadas. Este sistema pode
ter como referência a janela do navegador, como na imagem abaixo:
 Exemplo Cabeçalho
Introdução ao CSS

TWEB - Introdução Ao CSS

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

TWEB - Introdução Ao CSS

Enviado por

Direitos autorais:

Formatos disponíveis

TECNOLOGIAS WEB

O esqueleto A pele O cérebro

o Escrever o CSS de forma muito simples, que garanta o

 Esta é uma maneira de se criar uma lista de fontes.

Você também pode gostar