Introdução ao CSS Básico

18/05/2023, 07:51 Estudando: CSS (Cascading Style Sheets) Básico | Prime Cursos [url=https://www.primecursos.com.
br/openlesson/10229/1…
Estudando: CSS (Cascading Style Sheets) Básico
Introdução
CSS é a mesma coisa que Style Sheets e que Folhas de Estilo. Você provavelmente já deve ter visto esses
nomes em vários lugares. CSS é mais uma forma de aperfeiçoar seus documentos, o CSS tem muitos tipos
de definição aqui veremos muitas delas.
A forma recomendada para formatar as páginas escritas em XHTML baseia-se nos padrões "Cascading Style
Sheets" (folhas de estilos em cascata), publicados pelo World Wide Web Consortium (W3C).
A utilização deste padrão da Web permite ganhar tempo, dar consistência e facilitar muito a escrita de páginas
para a Web. Neste curso vamos aprender a usar folhas de estilos em cascata (estilos CSS) para criar páginas
mais flexíveis, mais leves, e controlar o seu aspecto gráfico com maior precisão e com maior facilidade na
correção de erros.
Os "Style sheets" ou "Folhas de Estilo" para a Web foram propostos e desenvolvidos há alguns anos, mas só
recentemente eles ganharam uma divulgação mais ampla. A razão é a de que os style sheets são inúteis a
não ser que haja navegadores que os suportem, e nenhum browser largamente utilizado fez isso até que a
Microsoft começou a oferecer suporte parcial para os Cascading Style Sheets (CSS) na versão 3.0 do Internet
Explorer. Atualmente é dado suporte para os style sheets, portanto, no IE 3.0 e superior, e no Netscape 4.0 e
superior; ou seja, navegadores atuais certamente suportam essa formatação.
No que as Folhas de Estilos podem nos ajudar?
• Economizar o seu tempo
• Diminuir o tamanho do código de sua página.
• Sua página irá carregar mais rapidamente
• Mais facilidade de manter e fazer alterações na página
• Mais controle no layout da página
• e muito outros que você mesmo descobrirá...
Porque é que devemos formatar com estilos?
Vantagens dos estilos CSS
• Os estilos CSS foram adicionados pelo W3C às recomendação HTML 4 e XHTML para resolver problemas
muito sérios que afetavam a qualidade das páginas escritas em HTML e dificultavam a sua manutenção.
• A utilização de folhas de estilos externa permite poupar tempo, ganhar flexibilidade e aumentar a
consistência das páginas que constituem um website.
• Quando guardamos os estilos num arquivo externo e os aplicamos a todas as páginas de um website, a
modificação de diversas qualidades do aspecto gráfico passa a ser uma tarefa fácil.
• As páginas que usam estilos CSS, para além de serem mais fáceis de escrever, são também mais leves e
carregam mais depressa no navegador.
O "mecanismo" de cascata
https://www.primecursos.com.br/openlesson/10229/105240/ 1/2
18/05/2023, 07:51 Estudando: CSS (Cascading Style Sheets) Básico | Prime Cursos [url=https://www.primecursos.com.br/openlesson/10229/1…
As folhas de estilos CSS dão muita liberdade na forma de definir os estilos. No mesmo documento podemos
utilizar um ou mais arquivos externos, definir os estilos na seção head do documento ou utilizar o atributo style
nos elementos do HTML.
O navegador lê todas as definições de estilos que encontra e quando aparecem estilos repetidos ele combina-
os num só estilo seguindo algumas regras simples.
Uma das regras da cascata diz que ao encontrar várias versões para o mesmo estilo o navegador guarda a
última que encontrou. Outra regra diz que alguns estilos são herdados pelos elementos que se encontram
dentro de outros elementos.
Porque é que a formatação com estilos é superior?
As etiquetas (tags) que definem os elementos do HTML foram concebidas para definir conteúdos. O autor do
HTML nunca teve qualquer intenção de usar esta linguagem para definir estilos gráficos para as páginas.
Os elementos do HTML foram idealizados para declarar coisas como "Isto é um parágrafo", ou "Isto é um
cabeçalho". Para isso colocavam-se etiquetas como <p> ou <h1> ao redor do texto. A forma como esta
informação devia ser apresentada graficamente era um problema que o navegador tinha de resolver tendo em
consideração o significado de cada elemento.Este conceito perfeitamente racional era muito adequado
enquanto o objetivo das páginas foi apenas a escrita e a partilha de textos na Web, mas a rápida aceitação da
Web fez com que as pessoas que davam importância ao design também se interessassem por este meio.
Esse interesse levou a que fossem feitos esforços para criar páginas graficamente elaboradas, mais ao gosto
dos designers. Um dos efeitos mais importantes desses esforços foi a completa adulteração do propósito de
diversos elementos. O elemento <table>, por exemplo, foi concebido unicamente para apresentar tabelas com
dados numéricos, mas os designers passaram a usá-lo para colocar os elementos em diversos pontos das
páginas em arranjos cada vez mais complexos.
Mas isto não era suficiente porque havia coisas que não podiam ser feitas usando apenas os elementos
disponíveis. Para dar aos designers aquilo que eles pediam, os criadores dos navegadores acharam que era
boa ideia inventarem as suas próprias etiquetas e acrescentaram atributos estilísticos aos que já existiam.
Estas extensões permitiram usar o HTML para dar cores e estilos diferentes ao texto e aplicar outras
formatações.
Entendendo Style Sheets

CSS, ou Cascading Style Sheets é uma recomendação do W3C, assim como o XML e o HTML.
Style Sheets permite a separação do conteúdo dos documentos de sua apresentação. E associando scripts
aos elementos é possível alterar o formato do documento assim como sua interface com o usuário.
Anexando Style Sheets em documentos HTML

A linguagem HTML permite que qualquer trecho de código seja adicionado à página. Para tanto, é utilizado o
elemento <META>. Entretanto, você deve especificar a linguagem a ser utilizada, como no exemplo abaixo:
Através de links
Você pode criar uma Style Sheet em um arquivo separado para posteriormente aplicar tal estilo em todas as
páginas do site. Utilizando este recurso adequadamente, é possível centralizar quase toda a apresentação de
um site em um ou mais arquivos. Caso haja necessidade de mudança na apresentação do site, esta é feita
em um único lugar.
É aconselhável que o arquivo de estilos possua a extensão .css mas não é obrigatório. Outra extensão
também funciona. É um arquivo somente texto cujo formato é legível e de fácil compreensão. Isto facilita a
criação de Style Sheets utilizando editores simples como o notepad.
Para associar uma Style Sheet armazenada em um arquivo separado use o elemento <LINK> como no
exemplo abaixo:
Incluindo CSS no documento

Nem sempre é necessário armazenar o estilo em um arquivo separado. Os códigos de estilo podem ser
colocados dentro de cada documento HTML. Obviamente, os códigos colocados dentro um documento HTML
afetarão somente aquele documento.
É possível a utilização de estilos internos e estilos externos. Neste caso, os estilos internos sobrepõem estilos
externos se houver conflitos. Se não houver, os estilos internos são aplicados e posteriormente são aplicados
os estilos externos.
O elemento utilizado para adicionar o estilo ao documento é o elemento <STYLE>. O atributo TYPE especifica
o tipo MIME. Existem alguns outros atributos que serão abordados posteriormente.
Definindo estilos junto com o elemento

CSS permite que sejam definidos estilos como atributo de um elemento. Esta funcionalidade pode ser útil
porque os estilos definidos com o elemento sobrepõem os estilos do documento e mesmo estilos anexados.
Por exemplo: suponhamos que você queira alterar a cor de um parágrafo destacando-o diante do resto do
documento mas esta alteração é uma exceção. Então você pode utilizar o atributo STYLE e atribuir a este o
estilo a ser aplicado:
Estilos definidos junto com os elementos devem ser utilizados com cuidado para que seja preservada uma
das principais características da CSS: a reutilização de estilos.
Importando Style Sheets

Estilos também podem ser importados de outros arquivos. Para tanto, é utilizada o comando @import
passando como parâmetro caminho e o nome do arquivo. A maioria dos navegadores ainda não suportam
este comando e o elemento <STYLE> é indispensável.
Importância do estilo
A utilização de estilo na construção de grandes sites é fundamental. A utilização adequada pode contribuir nos
seguintes aspectos:
- Existência de um padrão de cores e navegação para todo o site
- Reutilização de código
- Velocidade no carregamento das páginas
- Administração centralizada
- Personalização de sites.
Apesar das inúmeras vantagens a construção de estilos sólidos e reusáveis é uma tarefa difícil e requer
administração centralizada. Mais tarde discutiremos os desafios enfrentados ao desenvolver sites utilizando
CSS.
Entendendo a ordem
Como dito anteriormente, você pode utilizar vários tipos de estilos para controlar a aparência do seu site. O
navegador estabelece uma prioridade para cada estilo a ser aplicado como na lista a seguir:
- Estilos definidos junto com o elemento;
- Estilos definidos no documento;
- Estilos anexados.
Embora não seja aconselhável você pode usar o palavra importante para alterar esta precedência. No
exemplo abaixo o estilo atribuído ao elemento H1 sobrepõe o estilo definido junto com o elemento graças ao
uso da palavra important:
Criando Style Sheets para cada tipo de Mídia

CSS permite também estilos diferentes para cada tipo de mídia utilizada para apresentação deste estilo. Isto
dá um enorme poder para a CSS permitindo a utilização de um documento por portadores de deficiência
visual ou auditiva. Permite também a aplicação de estilos especificamente para impressão de documentos, o
que resolve uma grande deficiência dos navegadores.
A tabela abaixo descreve cada um dos estilos possíveis com a CSS:
Como Criar Estilos

Cada estilo que você cria é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:
Explicação desta sintaxe:
Elemento - descreve o elemento de design ao qual o estilo será aplicado. A mesma tag XHTML, mas sem os
sinais de maior e menor. Essa parte da regra é às vezes chamada de seletor.
Atributo - o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo
CSS válido, como o atributo font-size.
Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão,
como 20pt (20 pontos) para font-size.
Atributo: valor - a parte declaração da regra. Você pode atribuir múltiplas declarações, se você desejar
separá-los com ponto-e-vírgula (;). Não coloque um ponto-e-vírgula depois da última declaração.
Agora é hora de exemplos. Eis uma regra CSS que especifica que todos os títulos de nível 1 (tags<H1>)
sejam exibidos em uma fonte de 36 pontos e da cor verde:
Aqui está um exemplo de regra que diz que todos os títulos de nível 2 (tags <H2>) devem ter tamanho de 24
pontos e cor azul;
Você pode inserir quebras de linha e espaços em branco dentro da regra como quiser. Assim, é possível ver
mais facilmente todas as declarações e certificar-se de que colocou todos os sinais de ponto-e-vírgula e
colchetes nos lugares corretos.
Por exemplo, aqui está uma regra que diz que os parágrafos aparecerão em fonte “comic sans ms”, 12
pontos, azul e recuado meia polegada a partir da margem esquerda da página:
Note como é fácil aplicar todas as declarações ao elemento parágrafo (P) e como cada declaração, exceto a
última, é seguida pelo caracter de ponto e vírgula exigido.
As Folhas de Estilos
Você pode definir regras de CSS em três lugares. E, por definição, pode utilizar uma combinação dos três
métodos nos seus web sites.
A maneira como as regras interagem entre si está relacionada à parte “em cascata”. Os três lugares são:
1) em um documento separado fora de todos os documentos HTML;
2) no cabeçalho de um documento HTML
3) dentro de uma tag de HTML.
Cada um destes métodos tem um nome e afeta as páginas HTML em seu site de um modo diferente, como
discutido aqui:
Externo: significa que você coloca as regras de CSS em um arquivo separado, e então sua página HTML
pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que
podem ser aplicadas em alguma página do seu web site.
Incorporado: significa que você especifica as regras de CSS no cabeçalho do documento. As regras
incorporadas afetam somente a página atual.
Inline: significa que você especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente
a tag atual.
Estilos externos
Para definir um conjunto de regras de estilo que você pode facilmente aplicar em alguma página do seu site, é
preciso colocar as regras em um arquivo de texto. Você pode criar este arquivo com um editor de textos
simples, como o notepad do Windows, e dar ao nome desse arquivo a extensão “css”.
Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag <link> no cabeçalho que
referencie esse arquivo .css. Veja o exemplo:
Agora, para utilizar os estilos definidos neste arquivo .css você precisa adicionar a tag a seguir ao cabeçalho
da página, onde nome_do_arquivo é uma referência absoluta ou relativa ao arquivo .css.
OBS: Você deve inserir este texto entre as tags <head>...</head> e colocar a localização correta do seu
arquivo e seu nome.
Estilos incorporados
Se quiser criar um conjunto de estilos que se aplicam a uma única página, você pode configurar os estilos
exatamente como fizemos no exemplo dos estilos externos - mas em vez de colocar as tags <style>...</style>
e as regras em um arquivo separado, coloque estas tags na própria página HTML. A estrutura básica de uma
página da web que utiliza estilos incorporados é semelhante ao seguinte código:
Estilos inline
Os estilos inline são os que têm menos efeitos. Eles afetam somente a tag atual - não outras tags na página e
tampouco outros documentos. A definição de estilos utilizando o atributo style faz-nos perder muita das
vantagens das folhas de estilos porque acaba por misturar estilos com conteúdos. Esta forma de definir estilos
deve ser usada com moderação e apenas quando precisamos aplicar um estilo uma única vez a um único
elemento. A sintaxe para definir um estilo inline é a seguinte:
Note que em vez das tags <style>...</style>, você apenas utiliza um atributo style dentro da tag para definir o
estilo. E, em vez de colocar as regras de CSS entre colchetes, você as coloca entre aspas, separando-as com
ponto-e-vírgula como de costume.
Adicionar regras para uma Style Sheet

Tanto Style Sheets anexadas quanto no documento permitem a definição de um ou mais elementos.
Por exemplo, você deseja criar uma Style Sheet que define estilos para os elementos <H1>, <H2> e <P>.
Cada definição de estilo é chamada de regra. Uma regra contém um seletor (que é o próprio elemento),
seguido da declaração (a definição do estilo). O exemplo abaixo mostra uma regra que define um estilo para
cada ocorrência do elemento <H1>:
A declaração é colocada entre chaves ({}). Cada item na declaração possui duas partes: O nome da
propriedade e o valor atribuído a esta, separado por dois pontos (:). No exemplo abaixo, color é o nome da
propriedade e blue é o valor atribuído a esta. Existes dezenas de propriedades as quais se aplicam tipos
predefinidos e certos intervalos de valores:
Atribuindo múltiplas propriedades em uma regra simples

Múltiplas propriedades podem ser atribuídas em uma única declaração. Isto é feito separando cada atribuição
com o sinal de ponto e vírgula (;). No exemplo abaixo, o navegador mostra cada ocorrência do elemento <H1>
usando a cor azul, fonte 12 centralizada. Para todas as outras propriedades o navegador utilizará os valores
padrão:
Agrupando seletores juntos em uma regra simples

Caso seja necessária a definição de um mesmo estilo para vários elementos, esta pode ser feita listando os
estilos individualmente. Entretanto, existe uma maneira mais eficiente de fazer a mesma ação. Os elementos
(ou seletores) podem ser agrupados de modo a definir uma regra única para todo o grupo. No exemplo abaixo
os seletores são agrupados e uma única regra é atribuída:
Definindo relacionamentos Pai-Filho nas regras

Usando CSS é possível especificar quando um estilo é aplicado à um elemento. Por exemplo, você pode
querer definir dois estilos para o elemento <LI>: um que se aplica quando ele for filho do elemento <UL> e
outro quanto ele for filho do elemento <OL>. Para tanto, você utiliza seletores contextuais. Seletores
contextuais definem a sequência exata de elementos para o(s) qual(is) um estilo será aplicado.
Note que a lista de seletores não é separada por vírgula. Separando cada seletor por vírgula os estilos
atribuídos serão aplicados aquele grupo de elementos.
Entendendo Herança
Os elementos herdam certas propriedades de seus pais. Por exemplo, todas os elementos dentro do
elemento <BODY> (<P> e <UL>) herdam certas propriedades deste. Assim como o elemento <LI> herda
propriedades do elemento <UL> no qual ele está contido. Veja o exemplo:
A Style Sheet para este exemplo muda a cor do elemento <P> para azul. Não há definição para o elemento
<EM>. Devido ao fato do elemento <EM> está dentro do elemento <P>, <EM> herda a propriedade color do
elemento <P>.
Trabalhar com Classes em Style Sheets

Uma classe define a variação de um estilo, o qual é referenciado através de uma ocorrência específica de um
elemento utilizando o atributo CLASS. Por exemplo, você pode definir três variações do estilo H1 e então usar
cada variação em um contexto apropriado. Uma classe é definida normalmente, como é definido um estilo.
Apenas é adicionado o nome da classe no final do elemento, separado por ponto, assim como no exemplo:
Quando o elemento <H1> é adicionado ao documento, o atributo CLASS é utilizado para atribuir qual estilo
será utilizado.
Uma classe não precisa estar ligada à um elemento. As classes podem ser declaradas sem nenhum
elemento. Assim, qualquer elemento que utilize aquela classe utilizará aquele estilo:
Definindo um estilo para um elemento específico

Como já discutido anteriormente, você pode declarar estilos junto com o elemento. Entretanto, para facilitar a
leitura do documento, você pode atribuir um ID aos elementos e então associar estilos à este ID. Para
declarar o estilo para um ID é usado o símbolo (#). Somente aos atributos com aquele ID são aplicados os
estilos.
O exemplo abaixo declara um estilo para o ID test. Ele também usa o elemento <P> e atribui a este o ID test:
Pseudo-classes e Pseudo-elementos
Em CSS1, um estilo geralmente é associado a um elemento com base na posição que este elemento ocupa
dentro da estrutura hierárquica do documento. Isto é suficiente para uma grande variedade de estilos, mas
não atende a alguns efeitos comuns.
O conceito de pseudo-classes e de pseudo-elementos pretende suprir esta área, permitindo que informações
exteriores possam influenciar o processo de formatação do documento.
Pseudo-classes e pseudo-elementos podem ser usados como seletores na CSS, mas eles não existem dentro
da HTML. Mais exatamente, eles são 'inseridos' pelo navegador, sob certas condições, para serem usados
como elos de ligação com as folhas de estilo. Eles são referidos como 'classes' e 'elementos' porque esta é
uma maneira conveniente de descrever seu comportamento. Mais especificamente, seu comportamento é
definido por uma tag fictícia de sequência.
Pseudo-elementos são usados para especificar sub-partes de elementos, enquanto pseudo-classes permitem
às folhas de estilo diferenciar entre tipos diferentes de elementos. Abaixo vemos um exemplo de utilização da
pseudo-classe Anchor:
Todos os elementos 'A' com um atributo 'HREF' serão classificados em um, e apenas um, destes grupos (ou
seja, as definições das posições locais dos links não serão afetadas). Os navegadores podem decidir mover
um elemento de um grupo a outro (de 'visitado' para 'não visitado', por exemplo, após um certo tempo). Um
'link ativo' é aquele que está sendo selecionado no momento pelo leitor (está sendo 'clicado').
Como adicionar comentários em Style Sheets

Assim como em qualquer linguagem de programação, em CSS é possível adicionar comentários para melhor
documentar o código. Tanto para linhas de comentário quanto para blocos, a sintaxe é a mesma:
Trabalhar com Tags Personalizadas

Com as classes de estilo, é possível definir diversas variações de uma única tag. Por exemplo, você poderia
fazer um estilo de parágrafo "texto alinhado à direita", um estilo de parágrafo "texto centralizado" e assim por
diante, criando múltiplos temas em torno da tag de parágrafo (<p>).
Você pode definir classes de estilo tanto em folhas de estilo externas como nas incorporadas (não há sentido
em definir uma classe em um estilo inline!). A sintaxe é praticamente idêntica à sintaxe normal para os estilos
externo e incorporado, com adição de um ponto e o nome da classe depois do elemento no qual será utilizado
o atributo.
Para dar um exemplo mais prático, uma classe de estilo muito utilizada é a seguinte:
Depois você pode apenas adicionar o atributo class="meuslinks" aos links em que desejar que fiquem azuis e
não-sublinhados, por exemplo. Veja como deve ficar o código:
Agrupar seletores
Se precisarmos aplicar os estilos em mais do que um elemento, podemos agrupar os seletores que partilham
as mesmas definições. Para isso, os escrevemos um a um, separados por vírgulas. No exemplo seguinte, os
elementos de <h1> até <h6> partilham todos a mesma definição:
Seletores de classe
Os seletores de classe permitem definir estilos diferentes que podem ser aplicados ao mesmo elemento.
Imagine que você precisa ter dois tipos diferentes de parágrafo no documento: um alinhado à direita e outro
alinhado ao centro. Vejamos como os seletores de classe tornam isto muito fácil:
Nota: O atributo class, como qualquer outro atributo, só pode ser especificado uma única vez num dado
elemento. O exemplo seguinte está errado:
Os seletores de classe também podem ser definidos sem colocarmos o nome de um elemento no início da
definição. Quando isso acontece, as definições podem ser aplicadas a qualquer elemento cujo atributo class
tenha o valor correto. O exemplo seguinte define uma classe que pode ser utilizada com qualquer elemento
do HTML:
Seletor de id
O seletor de id é diferente do seletor de classe porque se aplica a um único elemento da página. As regras do
HTML ditam que os valores do atributo id não podem repetir-se numa mesma página. Daí resulta que o
número de elementos no documento com um determinado id é um ou é zero.
A regra de seleção para o estilo definido no exemplo seguinte indica que ele só pode ser aplicado a um
elemento <p> que tenha o valor "para1" no atributo id:
Se quisermos que a regra se aplique a qualquer elemento que tenha o id para1 basta escrevê-la na forma
seguinte:
A regra acima é aplicável a qualquer elemento que tenha o id correto, porque o seletor * diz que ela se aplica
a todos os elementos. No exemplo seguinte ela seria aplicada ao elemento <h1>:
O Posicionamento dos Elementos

No mundo das publicações, camadas são blocos retangulares de texto e imagens que podem ser
posicionados em qualquer lugar da página. Estas camadas podem ser ocultas e sobrepostas.
Antes da CSS, era impossível construir páginas HTML utilizando este conceito. O documento era exibido
sequencialmente sem a possibilidade de sobrepor camadas.
Já com CSS é permitida a construção de blocos de texto que se sobrepõem, assim como ocultar ou exibir
determinados blocos.
Posicionando um Elemento HTML

CSS fornece dois modos de posicionar elementos no navegador: RELATIVE e ABSOLUTE.
No modo RELATIVE, o navegador posiciona o elemento em relação à sua posição normal, ou seja, onde o
elemento deveria realmente aparecer.
No modo ABSOLUTE, o navegador posiciona o elemento em relação ao elemento pai.
Para posicionar o elemento são utilizadas as propriedades TOP e LEFT:
No exemplo acima, o elemento é posicionado à 100 pixels da borda superior do elemento pai e à 20 pixels da
borda esquerda do elemento pai. Quando o elemento a ser posicionado não possui pai, este é posicionado
em relação às bordas do navegador.
A unidade de medida padrão para LEFT e TOP é pixels. Pode ser usado também valores percentuais, que
equivale ao percentual do elemento pai.
O exemplo abaixo posiciona uma imagem à 40 pixels do topo e 100 pixels da borda esquerda do elemento
<BODY>. Como no elemento <BODY> não existe posicionamento definido e ele não tem nenhum elemento
pai, este assume a posição 0, 0.
Sobrepondo elementos
Utilizando as propriedades TOP e LEFT é possível sobrepor elementos e a ordem de exibição é a mesma
ordem em que eles estão no código, ou seja, o último bloco de código será o último bloco a ser montado na
tela, sobrepondo todos os outros. Esta ordem de sobreposição pode ser alterada utilizando a propriedade Z-
INDEX.
A propriedade Z-INDEX aceita valores inteiros positivos. Um elemento com a propriedade Z-INDEX igual a 10
sobrepõe um elemento com a propriedade Z-INDEX igual a 1.
O exemplo abaixo mostra 2 elementos usando a propriedade Z-INDEX para manipular a ordem de exibição:
Aninhando o posicionamento de elementos

Nem sempre é necessário que alguns elementos precisem estar contidos dentro de outros. Entretanto, esta
prática pode ser interessante, visto que quando você posiciona o elemento pai, todos os elementos filhos
seguirão aquele posicionamento. Veja o estilo abaixo:
Veja o comportamento das páginas abaixo. A esquerda possui 2 elementos distintos. O posicionamento do ID
test1 não influencia no ID test2. Já no outro exemplo, o posicionamento do ID test1 está diretamente ligado
ao posicionamento do ID test2.
Posicionando elementos através de script

Como já visto anteriormente, CSS permite o controle de como o documento é apresentado. Entretanto, todas
as propriedades da CSS podem ser manipuladas através da utilização de scripts. Lembrando que esta
manipulação varia de navegador para navegador.
Dado o ID de um determinado elemento, este pode ser referenciado utilizando o DOM, como no exemplo
abaixo:
Onde id é o ID do elemento e 0 é a primeira ocorrência deste ID.
Usando scripts para ocultar ou exibir elementos

Para ocultar ou exibir elementos, usa-se a propriedade visibility. O valor hidden oculta o elemento e o valor “”
exibe o mesmo. O exemplo abaixo mostra como ocultar e exibir elementos utilizando JavaScript:
Mudar o Tamanho de um Elemento

Assim como é possível controlar a posição do elemento é possível também controlar a dimensão do elemento.
Para isto, são usadas as propriedades WIDTH para largura e HEIGHT para altura. Assim como LEFT E TOP, a
unidade de medida padrão é pixels, mas podem ser usados valores percentuais.
Também pode ser usado o valor AUTO para que o navegador automaticamente determine o tamanho do
elemento.
A propriedade WIDTH não é usada para definir exatamente a largura do elemento. Esta propriedade serve
apenas para o caso em que haja algum elemento dentro, o qual é definido pela propriedade WIDTH, e este
seja maior que o mesmo.
Existe ainda a propriedade OVERFLOW, que determina como o navegador se comporta no caso em que o
conteúdo de um elemento exceda o tamanho do elemento.
Os possíveis valores são NONE, CLIP e SCROLL. O exemplo abaixo mostra o comportamento de um bloco
de texto quando posicionado e dimensionado utilizando CSS:
Como Estilos Concorrentes são Combinados

Um documento HTML pode definir ou utilizar mais do que uma folha de estilos. Quando isso acontece, é
possível que algumas propriedades sejam definidas numa folha e definidas de novo numa outra. Nestes
casos, o navegador deve aplicar regras para decidir qual das definições é mais importante.
A ordem da cascata
Quando um estilo é definido mais do que uma vez, qual das definições o navegador deverá escolher? A
primeira? A última? Nenhuma delas? Para decidir, o browser aplica as seguintes regras (listadas por ordem
crescente de importância):
1. Estilos definidos por omissão (são aplicados sempre que não existirem outros que se sobreponham a eles)
2. Estilos definidos numa folha de estilos interna (dentro do elemento <style>) ou num arquivo externo
3. Estilos "inline" (definidos através do atributo style nos elementos do documento HTML).
Assim, temos que os estilos que são definidos no próprio elemento, através do atributo style, têm a prioridade
mais elevada. As definições que o atributo style faz sobrepõem-se a qualquer definição que tenha sido feita
antes.
O exemplo de aplicação seguinte ilustra melhor este mecanismo.
Apesar de o exemplo de aplicação anterior ser elucidativo, analisemos mais um exemplo. Suponhamos que
uma folha de estilos externa define as seguintes propriedades para o seletor h3:
Mas existe uma folha de estilos interna com as seguintes propriedades também para o seletor h3:
Se a página que contém a folha de estilos interna usar o elemento <link> para se ligar à folha de estilos
externa indicada antes, então as duas definições serão combinadas para produzir a seguinte versão final para
o seletor h3:
A cor foi herdada da folha externa, mas o alinhamento do texto e o tamanho de letra foram substituídos pelas
definições dadas na folha interna.
A Herança de Estilos
Algumas propriedades CSS definidas para um elemento passam automaticamente a ser aplicadas aos
descendentes desse elemento. Quando isso acontece, diz-se que as propriedades são herdadas. O exemplo
seguinte mostra como funciona este mecanismo de "herança" de estilos:
No exemplo que acabamos de ver, a folha de estilos diz que o texto dos elementos <div> deve ter cor azul. O
parágrafo que está dentro de um elemento <div> herda a cor azul porque a propriedade color é herdada
pelos descendentes de um elemento.
Já o segundo parágrafo não está dentro de nenhum elemento que lhe deixe uma "herança" (que neste caso é
a propriedade color), por isso o seu texto tem a cor normal.
Há outras propriedades que só afetam o elemento ao qual são aplicadas e não se propagam aos seus
descendentes. Diz-se que estas propriedades não são herdadas. O exemplo seguinte é semelhante ao
anterior, mas agora à propriedade herdada color, juntamos a propriedade border, que não é herdada:
Como pode observar, a propriedade color propaga-se ao elemento <p> mas a propriedade border não.
Propriedades em CSS
As folhas de estilo definem a visualização de um documento pela atribuição de diversos valores às suas
propriedades de estilo. Esta lição lista estas propriedades e seus valores possíveis.
Notação para os Valores das Propriedades

No texto que se segue, os valores permitidos para cada propriedade são listados usando a seguinte sintaxe:
Valor: N | NW | NE
Valor: [ <comprimento> | thick | thin ]{1,4}
Valor: [<família> , ]* <família>
Valor: <url>? <cor> [ / <cor> ]?
Valor: <url> || <cor>
As palavras entre "<" e ">" indicam o tipo do valor.
Os tipos mais comuns são <comprimento>,<percentagem>, <url>, <número> e <cor>; eles estão descritos na
lição Unidades de Medida. Os tipos mais específicos de valores (<família-da-fonte> e <estilo-da-borda>) estão
descritos nos tópicos correspondentes.
As outras palavras são palavras-chaves que devem ser usadas tal como aparecem, sem as aspas. A barra (/)
e a vírgula (,) também devem ser empregadas tal como estão definidas.
Vários parâmetros indicados em sequência significa que todos eles devem ser definidos, na ordem em que
aparecem. Uma barra (|) separa alternativas: apenas um dos parâmetros deve ser definido.
Uma barra dupla (||) significa que tanto o parâmetro A como o B, ou mesmo ambos, podem ser definidos, em
qualquer ordem. Colchetes ([]) são usados para agrupar parâmetros. Em ordem de prioridade, uma sequência
de parâmetros vale mais que a barra dupla (||), e a barra dupla vale mais que a barra simples (|). Portanto,
a b | c || d e é equivalente a [ a b ] | [ c || [ d e ]]
Cada tipo de valor, palavra-chave ou grupamento ([]) pode vir seguido por um dos seguintes modificadores:
• Um asterisco (*) indica que o tipo, palavra ou grupo que o precede pode ser repetido zero ou mais vezes.
• Um sinal positivo (+) indica que o tipo, palavra ou grupo que o precede é repetido uma ou mais vezes.
• Um ponto de interrogação (?) indica que o tipo, palavra ou grupo que o precede é opcional.
• Um par de números entre chaves ({A,B}) indica que o tipo, palavra ou grupo que o precede é repetido no
mínimo A e no máximo B vezes.
- Propriedade Background (Fundo do Elemento)

As propriedades dos fundos dos elementos definem cores de fundo e imagens de fundo para os elementos do
HTML. Estas propriedades permitem-nos controlar as cores e as imagens de fundo dos elementos (posição,
repetição, etc.).
Vamos às principais:
Propriedade Background:
-Oferece-nos uma forma abreviada para escrever todas as propriedades do fundo numa única declaração.
-Esta propriedade aceita os valores que podemos dar a todas as restantes propriedades desta relação
(background-color, background-image, background-repeat, background-attachment e background-position).
Propriedade background-attachment:
-A propriedade background-attachment indica se a imagem de fundo deve permanecer imóvel na janela do

navegador ou se acompanha o conteúdo quando o movemos (scroll).
- Valores:scroll, fixed.
Propriedadebackground-color:
-Define a cor de fundo de um elemento.
- Valores:color-rgb, color-hex, color-name, transparent.
Propriedadebackground-image:
-Define uma imagem de fundo para ser usada no elemento.
- Valores:url ou none.
Propriedadebackground-position:
-Define o local onde se começa a desenhar a imagem de fundo.
- Valores:top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom
right, x-% y-%, x-pos y-pos.
Propriedadebackground-repeat:
-Estabelece se a imagem de fundo deve repetir-se (formando um mosaico) ou não, e as direções da

repetição.
- Valores:repeat, repeat-x, repeat-y, no-repeat.
Exemplos de utilização de algumas propriedades e valores:
- Propriedade Font (Tipo de Letra)

As propriedades do tipo de letra definem aspectos estilísticos das letras com que se escreve o texto.
Elas permitem-nos escolher entre vários conjuntos de caracteres que desenham as letras de forma diferente,
controlar os tamanhos, ajustar as suas formas, etc.
As principais propriedades de fontes e respectivos valores, são:
Propriedade font:
-Aceita os valores que podem ser dados às restantes propriedades desta relação, mais aqueles que se
encontram nos valores. Oferece-nos uma forma abreviada para definir numa única declaração todas as
propriedades relativas ao tipo de letra.
- Valores:icon, menu, message-box, small-caption, status-bar.
Propriedade font-family:
-A propriedade font-family consiste numa lista com os tipos de letra que o navegador pode escolher para
escrever os textos. A lista está ordenada de forma prioritária: a primeira escolha aparece primeiro, a seguir
vem a segunda escolha e assim sucessivamente. O navegador escolhe o primeiro tipo que seja capaz de
usar. Os nomes dos tipos de letra podem ser nomes de família ou nomes genéricos.
- Valores:family-name, generic-family.
Propriedade font-size:
-Define o tamanho de um tipo de letra.
- Valores:xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, comprimento %.
Propriedadefont-size-adjust:
-Se o tipo de letra (font) escolhido não estiver disponível, o navegador vê-se obrigado a usar um outro tipo
diferente. A propriedade font-size-adjust especifica o "aspect value" do tipo de letra escolhido para que o
navegador possa substituí-lo por um outro tipo que esteja acessível preservando a altura da letra "x" e
mantendo a legibilidade do texto.
- Valores:none, número.
Propriedadefont-stretch:
-A propriedade font-stretch provoca uma expansão ou uma contração horizontal no tamanho da letra.
- Valores:normal, wider, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded,

expanded, extra-expanded, ultra-expanded.
Propriedadefont-style:
-Define o estilo de letra a usar.
- Valores:normal, italic, oblique.
Propriedadefont-variant:
-Escreve o texto usando um tipo de letra "small-caps" ou o tipo normal.
- Valores:normal, small-caps.
Propriedadefont-weight:
-Define a espessura do traço com que são desenhadas a letras.
- Valores:normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900.
Exemplos da aplicação de algumas propriedades e valores de font:
-Definir o tipo de letra para um texto
-Definir o tamanho das letras
- Propriedade de Texto
As propriedades de texto definem o aspecto gráfico a dar ao texto. Estas propriedades permitem-nos controlar
cores, aumentar ou reduzir o espaço entre os caracteres, alinhar o texto, escolher o tipo de letra, decorá-lo,
etc.
Exemplos de algumas propriedades e valores para texto:
- Definir a cor do texto
-Inícios de parágrafo
Unidades de Medida
Medição de distâncias numa página HTML
O valor de um comprimento escreve-se como um número seguido de uma abreviação que indica asunidades
de medida. Não podemos colocar espaços entre o número e as unidades (não escreva 2 cm mas sim 2cm).
Quando o comprimento é 0 (zero) não é preciso indicar as unidades.
A tabela seguinte descreve as unidades de medida que podemos usar em CSS.
Definição de cores
Esta tabela limita-se a resumir o que vimos no curso.
- Propriedade das Margens

As margens de um elemento são constituídas por espaço em branco que fica ao seu redor e o separados
elementos adjacentes. Se o valor de uma margem for positivo o elemento afasta-se dos outros que lhe são
adjacentes, mas se for negativo ele aproxima-se dos outros elementos. Isto significa que podemos usar as
margens para afastar e aproximar os conteúdos de dois ou mais elementos e até sobrepô-los. As quatro
margens podem ser controladas todas ao mesmo tempo ou separadamente.
Exemplo:
-Definir a margem esquerda para um texto
Como vimos antes, o limite de um elemento designa-se por "border". Ao redor do limite podemos desenhar
linhas de contorno. O padrão CSS permite-nos especificar o estilo, a cor e a espessura das linhas que
delimitam um elemento do HTML. Antes de termos os estilos CSS, para desenharmos linhas ao redor de um
elemento, tínhamos de colocá-lo dentro de uma tabela e desenhar as linhas usando os elementos da tabela
juntamente com o atributo "border".
- Propriedades de Padding
As propriedades padding controlam o espaço em branco que separa os conteúdos de um elemento dos seus
limites ("border"). É proibido usar valores negativos para estas propriedades porque isso colocaria os
conteúdos fora do elemento, o que não faria sentido. Os quatro lados podem ser controlados todos de uma
vez ou separadamente.
Exemplo:
-Definir o espaço em branco entre o limite esquerdo e o conteúdo de uma célula de tabela
- Propriedades de Dimensão
As propriedades relativas a dimensões são usadas para controlar a altura e a largura dos elementos e o
espaço entre linhas de texto.
Exemplo:
-Definir a altura e a largura de uma imagem
- Propriedades de Posicionamento
- Propriedade de Listas e Marcadores
Bibliografia/Links Recomendados
-https://www.w3schools.com/css/
-http://tableless.github.io/iniciantes/manual/css/

Introdução ao CSS Básico

Enviado por

Dados do documento

Descrição original:

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

Introdução ao CSS Básico

Enviado por

Direitos autorais:

Formatos disponíveis

18/05/2023, 07:51 Estudando: CSS (Cascading Style Sheets) Básico | Prime Cursos [url=https://www.primecursos.com.

Estudando: CSS (Cascading Style Sheets) Básico

No que as Folhas de Estilos podem nos ajudar?

• Economizar o seu tempo

• Diminuir o tamanho do código de sua página.

• Sua página irá carregar mais rapidamente

• Mais facilidade de manter e fazer alterações na página

• Mais controle no layout da página

• e muito outros que você mesmo descobrirá...

Porque é que devemos formatar com estilos?

Vantagens dos estilos CSS

Porque é que a formatação com estilos é superior?

Estudando: CSS (Cascading Style Sheets) Básico

Entendendo Style Sheets

Anexando Style Sheets em documentos HTML

Incluindo CSS no documento

Definindo estilos junto com o elemento

Importando Style Sheets

- Existência de um padrão de cores e navegação para todo o site

- Velocidade no carregamento das páginas

- Estilos definidos junto com o elemento;

- Estilos definidos no documento;

Criando Style Sheets para cada tipo de Mídia

A tabela abaixo descreve cada um dos estilos possíveis com a CSS:

Estudando: CSS (Cascading Style Sheets) Básico

Como Criar Estilos

Explicação desta sintaxe:

Estudando: CSS (Cascading Style Sheets) Básico

1) em um documento separado fora de todos os documentos HTML;

2) no cabeçalho de um documento HTML

3) dentro de uma tag de HTML.

Estudando: CSS (Cascading Style Sheets) Básico

Adicionar regras para uma Style Sheet

Atribuindo múltiplas propriedades em uma regra simples

Agrupando seletores juntos em uma regra simples

Definindo relacionamentos Pai-Filho nas regras

Estudando: CSS (Cascading Style Sheets) Básico

Trabalhar com Classes em Style Sheets

Definindo um estilo para um elemento específico

Como adicionar comentários em Style Sheets

Estudando: CSS (Cascading Style Sheets) Básico

Trabalhar com Tags Personalizadas

Estudando: CSS (Cascading Style Sheets) Básico

O Posicionamento dos Elementos

Posicionando um Elemento HTML

No modo ABSOLUTE, o navegador posiciona o elemento em relação ao elemento pai.

Para posicionar o elemento são utilizadas as propriedades TOP e LEFT:

Aninhando o posicionamento de elementos

Posicionando elementos através de script

Onde id é o ID do elemento e 0 é a primeira ocorrência deste ID.

Usando scripts para ocultar ou exibir elementos

Estudando: CSS (Cascading Style Sheets) Básico

Mudar o Tamanho de um Elemento

Estudando: CSS (Cascading Style Sheets) Básico

Como Estilos Concorrentes são Combinados

O exemplo de aplicação seguinte ilustra melhor este mecanismo.

Estudando: CSS (Cascading Style Sheets) Básico

Estudando: CSS (Cascading Style Sheets) Básico

Notação para os Valores das Propriedades

Valor: [ <comprimento> | thick | thin ]{1,4}

Valor: [<família> , ]* <família>

Valor: <url>? <cor> [ / <cor> ]?