CSS e Linguagem de Marcação HTML - Téc. Informática Senac

Versão para impressão https://senac.blackboard.com/bbcswebdav/pid-5561474-dt-content-rid-1...
hypertext markup language)

), é necessário fazer uma
web
Para montar essa página, utilizam-se tags que são capazes de organizar ou agrupar informações e
outras que definem as informações. Por exemplo, <body> define toda a região onde o conteúdo se
concentrará, enquanto <h1> define que a informação é um cabeçalho.
Algumas das tags que serão utilizadas a seguir são:
<head>: região que carrega informações da página (por exemplo, título).
<div>: subdivisão genérica de conteúdo.
<p>: definição de um parágrafo.
Agora que os conceitos trabalhados anteriormente em outras unidades curriculares foram

relembrados, pode-se avançar para a próxima etapa, que aborda o elemento de estilo do HTML, qual seja
o CSS.
A razão da criação do CSS

Aplicar estilo a uma informação nunca foi a intenção dos criadores do HTML. Quando tags como
<font> e <color> foram adicionadas ao HTML 3.2, originou-se a maior dificuldade dos desenvolvedores
web. O desenvolvimento de grandes sites, com detalhe das fontes e cores que precisavam ser
1 of 20 26/07/2020 17:16
adicionados em cada arquivo HTML separado, estava se tornando um processo demorado.
m 1994, vendo toda essa dificuldade, Håkon Wium Lie resolveu criar uma forma mais fácil para
ntão, em 1995, eles apresentaram a proposta criada, e o W3C (World Wide Web Consortium), que
estava acabando de nascer, se interessou pelo projeto e resolveu criar uma equipe, obviamente liderada
al projeto acabou dando certo, e o resultado logo apareceu: em 1996, eles lançaram a
recomendação oficial pelo W3C do CSS de nível 1 (CSS 1). Ainda, dois anos depois, em 1998, eles
CSS (que significa, em português, “folha de estilo em cascata”) serve para descrever como os
elementos HTML serão mostrados em tela. Ele ajuda a reutilizar estilos, já que é possível utilizar o
mesmo código para decorar várias páginas.
O CSS pode ser utilizado diretamente dentro de um arquivo .html com a tag <style> </style> ou em
um arquivo separado com a extensão .css.
Seletores e propriedades
O CSS conta com uma estrutura simples, na qual são acrescentados a identificação (seletor)
do elemento que se quer decorar, a(s) propriedade(s) e o(s) valor(es).
Observe a seguir a estrutura do CSS:
seletor {
propriedade: valor(es);
}
Caso queira setar as mesmas propriedades e os mesmos valores para mais de um seletor,
você pode utilizar a seguinte estrutura:
2 of 20 26/07/2020 17:16
seletor1, seletor2, seletor3 {

s seletores são um padrão definido para selecionar os elementos que serão decorados.
HTML até nomes de classe de
na marcação HTML que
s propriedades definem uma característica visual para o elemento HTML “selecionado” pelo
Os valores atribuem um valor à propriedade escolhida para o elemento selecionado. Os tipos

de valor variam de acordo com as propriedades.
Como utilizar o CSS

O CSS pode ser utilizado de duas formas: diretamente no arquivo .html ou em um arquivo .css
com todas as tags de formatação dentro dele.
Clique ou toque para visualizar o conteúdo.
CSS diretamente no arquivo HTML

A forma mais simples de utilizar o CSS é usar a sintaxe dentro do arquivo .html:
<head>
<style>
</style>
</head>
3 of 20 26/07/2020 17:16
Observe este exemplo simples:
A propriedade color do CSS serve para trocar a cor do conteúdo do elemento.
Veja o resultado:
Figura 1 – Resultado utilizando CSS dentro do arquivo HTML
Também é possível utilizar o CSS para decorar um único tipo de elemento usando estilo em linha
(style inline).
Observe a seguir um exemplo de como utilizar estilo em linha:
4 of 20 26/07/2020 17:16
<!DOCTYPE html>
<html lang="pt-BR">
Figura 2 – Resultado utilizando estilo em linha (style inline)
Você deve ter percebido no exemplo que o atributo style foi utilizado. Ele está disponível na maioria
das tags HTML. Vale lembrar que também é possível misturar as duas técnicas, ou seja, incluir uma
definição central de CSS e utilizar style em alguns elementos da página.
Observe agora um exemplo de como misturar as técnicas:
5 of 20 26/07/2020 17:16
<!DOCTYPE html>
<html lang="pt-BR">
Figura 3 – Misturando técnicas de CSS
Ao utilizar o CSS diretamente no arquivo .html, considerando que a definição de estilo está
diretamente atrelada à estrutura da página, não será possível reutilizar essa definição para outras
páginas.
CSS em um arquivo separado

Para utilizar o CSS em um arquivo separado, é necessário criar um arquivo .css. Depois de criar o
arquivo, é preciso referenciar o local onde ele está salvo utilizando a seguinte sintaxe dentro do arquivo
.html:
6 of 20 26/07/2020 17:16
<head>
<link href="caminho do arquivo.css" rel="stylesheet" type="text/css">
– Utiliza “stylesheet”, indicando que o arquivo que está sendo linkado é um arquivo de
styles
style.css
Nesse caso, a utilização do CSS em um arquivo separado resultou neste trecho de código HTML:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link href="../styles/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<p>Olá mundo</p>
</body>
</html>
Como visto, os ”..” indicam que foi possível subir uma pasta da localização .html e entrar na pasta
/styles. Caso o arquivo .css estivesse no mesmo diretório do arquivo .html, seria necessário somente
referenciar o nome do arquivo .css (no caso, style.css).
Observe agora o código do arquivo style.css:
7 of 20 26/07/2020 17:16
p {
color: blue;
serve para indicar detalhes da fonte do elemento decorado. No exemplo, utilizou-
Decoração do CSS
Decorando elementos utilizando classes

É muito comum no CSS utilizar nomes de classes para definir um conjunto de elementos que se
deseja formatar. Assim, deve-se definir o nome da classe do elemento dentro do arquivo .html utilizando a
sintaxe <elemento class="nome da classe">.
Após, é preciso definir a classe no arquivo .css utilizando esta sintaxe:
.nomedaclasse{ propriedade: valor(es) }
O “.” é necessário na nomenclatura da classe, pois informa ao CSS que aquele seletor se refere a
uma classe.
Observe a seguir um exemplo de HTML utilizando classes:
8 of 20 26/07/2020 17:16
<!DOCTYPE html>
<html lang="pt-BR">
Veja o resultado:
Figura 5 – Utilizando classes
Mesmo utilizando a tag para ambos os parágrafos, somente um deles foi decorado, justamente por
utilizar o class.
Também é possível escrever o arquivo .css da seguinte forma:
9 of 20 26/07/2020 17:16
p.paragrafo{
color: blue;
esse caso, utilizou-se p.nome da classe devido ao seletor <p>. O resultado será o mesmo, não
grande vantagem de utilizar classes é a flexibilidade que a abordagem traz. Ao contrário do seletor
daquele tipo receba o estilo definido, o seletor por classe só
tenha o nome desse seletor. Assim, no exemplo citado,
or exemplo, seria possível ter uma classe “erro”, a qual pinta a fonte de vermelho, e outra “acerto”,
que pinta a fonte de azul. Ambas poderiam ser aplicadas a elementos <p>. Aqueles elementos que se
referissem a mensagens de êxito do sistema poderiam receber class="acerto", enquanto os que fossem
destinados a mostrar mensagens de falhas estariam com o atributo class="erro".
Utilizando mais de uma classe na decoração

É possível utilizar no CSS mais de uma classe ao mesmo tempo na decoração do elemento. Para
tanto, é necessário definir no arquivo.html as classes que serão utilizadas no elemento, usando a sintaxe
<elemento class=”nomeclasse1 nomeclasse2”>.
Observe a seguir um exemplo de HTML utilizando mais de uma classe:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<p class="centralizado cor">Parágrafo formatado</p>
</body>
</html>
Observe agora o código do arquivo .css:
10 of 20 26/07/2020 17:16
.centralizado{
text-align: center;
serve para
, que centraliza o
Figura 6 – Utilizando mais de uma classe na decoração do elemento
Decorando elementos utilizando identificadores

Também é muito comum no CSS utilizar identificadores para definir elementos que se desejam
formatar. Contudo, diferentemente das classes, o id normalmente é utilizado quando se quer definir um
identificador único para aquele elemento.
Utilizando somente HTML, pode-se usar o mesmo id para mais de um elemento, embora isso não
seja recomendado, pois, ao utilizar JavaScript ou jQuery, por exemplo, pode haver a necessidade de o id
do elemento ser único.
Para definir o id do elemento dentro do .html, utiliza-se a sintaxe <elemento id=”id”>. Após, é
necessário definir o id no arquivo .css utilizando a seguinte sintaxe:
#id{
propriedade: valor(es)
}
O # é necessário na nomenclatura do id, pois informa ao CSS que aquele seletor será um id.
11 of 20 26/07/2020 17:16
Observe um exemplo de HTML utilizando um id:
color: blue;
}
A propriedade text-decoration serve para setar a decoração do texto do elemento. Nesse exemplo,
utilizou-se o valor underline, indicando que o texto será sublinhado.
Veja o resultado:
Figura 7 – Decorando elementos utilizando identificadores
Utilizando propriedades para controlar o tamanho do elemento

As propriedades dos tipos width e height são utilizadas para controlar o tamanho do elemento em
tela. Elas podem usar unidades de medidas absolutas, como centímetros (cm), milímetros (mm),
polegadas (in), pixels (px) etc., bem como unidades relativas, como porcentagem (%) (relativa ao
12 of 20 26/07/2020 17:16
tamanho da fonte do elemento).
recomendado usar unidades relativas no CSS para manter a proporção do elemento. Por
de altura, e, dentro dele, existe um outro elemento
). Se o elemento <body> mudar
de tamanho, <div> não ocupará mais o mesmo espaço que deveria (metade da altura). Então, para
body
<div class = "divisoes" id="div1">Divisão superior</div>
<div class = "divisoes" id="div2">Divisão inferior</div>
</body>
</html>
Observe agora o código do arquivo .css:
.divisoes{
width: 100%;
height: 50%;
font: 50px arial bold;
html, body{
height: 100%;
width: 100%;
}
#div1{
background-color: blue;
#div2{
background-color:red;
}
13 of 20 26/07/2020 17:16
A propriedade height serve para configurar a altura do elemento. A propriedade width serve para
configurar a largura do elemento. Finalmente, a propriedade background-color serve para configurar a
Figura 8 – Utilizando propriedades para controlar o tamanho do elemento
Cada uma das divisões ocupou 100% da largura e 50% da altura do espaço disponível para o
elemento body. Por sua vez, o elemento body ocupa 100% da largura e da altura disponíveis para o
elemento HTML, que está ocupando todo o espaço em tela.
Utilizando CSS para adicionar imagem de fundo ao elemento

O CSS conta com a propriedade background-image: url(“url da imagem”), que serve para
adicionar uma imagem de fundo ao elemento.
Observe a seguir um exemplo em HTML de como adicionar uma imagem:
14 of 20 26/07/2020 17:16
<!DOCTYPE html>
<html lang="pt-BR">
html, body{
height: 100%;
width: 100%;
}
Veja o resultado:
Figura 10 – Utilizando CSS para adicionar imagem de fundo ao elemento
A imagem também pode ser carregada de uma pasta do computador, respeitando sempre o padrão
de hierarquia
Observe no exemplo a seguir a hierarquia de pastas:
15 of 20 26/07/2020 17:16
pages
page1.html
Imagens:
A propriedade background-position com o valor center informa ao CSS que o fundo deverá ser
posicionado no centro do elemento. Nesse caso, a imagem será posicionada no centro da classe .divisao.
Já a propriedade background-repeat com o valor no-repeat informa ao CSS que o fundo não deve
se repetir. Caso tal propriedade seja omitida, ter-se-á o seguinte resultado:
Figura 11 – Utilizando CSS para aplicar background-repeat
A imagem continuará se repetindo enquanto houver espaço dentro do elemento em que ela está
inserida (no caso, na classe .divisao). Esse elemento pode ser um apoiador para criar sites com
animações em imagem.
16 of 20 26/07/2020 17:16
Aplicando margem aos elementos

CSS conta com um conjunto de propriedades que serve para adicionar espaço entre os
length – Especifica a margem em px, cm etc.
% – Especifica a margem em porcentagem considerando o valor da propriedade width do

container que contém elemento.
inherit – Define se a margem herda o valor do elemento pai.
Observe a seguir um exemplo em HTML de como utilizar margens:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
</head>
<body>
<div class = "divisao">
Divisão com margem aplicada
</div>
</body>
</html>
Observe agora o código do .css:
17 of 20 26/07/2020 17:16
html, body{
width: 100%;
Figura 9 – Aplicando margem aos elementos
Os elementos <html> e <body> ocupam 100% do espaço disponível em tela e apresentam um fundo
azul. Ainda, a propriedade background-color com o valor blue foi utilizada.
No exemplo citado, o seletor .divisao apresenta margem superior de 200 px, margem de 20% à
esquerda, margem de 20% à direita e margem inferior de 200 px.
18 of 20 26/07/2020 17:16
O elemento <div> ocupa 50% da altura do elemento <body>.
com o valor
com o valor
lementos semânticos HTML: conceito e aplicação de
s elementos semânticos do HTML são aqueles que organizam a informação e conferem

significado a ela. Eles são muito importantes, especialmente quando se referem a ferramentas de
Por exemplo, <div> não é uma estrutura dinâmica, pois é usada para qualquer tipo de
conteúdo. Por outro lado, <form> é, porque indica que todas as informações que estão dentro dessa
tag estão contextualizadas como pertencentes a um formulário (cadastro).
Alguns exemplos de elementos semânticos são:
<table> – Indica que se trata de uma informação tabular.
<a> – Indica um hyperlink.
<strong> – Indica um termo importante no texto.
<nav> – Indica elementos de navegação do site.
<article> – Indica um texto de conteúdo.
Os três últimos elementos da lista são introduzidos com o HTML 5. Consulte o subtítulo HTML
5, conteúdo Arquitetura web em camadas, da unidade curricular Monitorar projetos de aplicações
web, para mais informações sobre o assunto.
Quanto à aplicação de estilo CSS aos elementos semânticos, há pouca ou nenhuma diferença.
19 of 20 26/07/2020 17:16
As regras gerais se aplicam, ou seja, é possível usar classe, id ou tag para definir o conjunto de
propriedades. Como tais elementos são em maioria containers, ou seja, trazem um conjunto de
outros elementos, a aplicação de regras hierárquicas de CSS é comum (definir regra para <input>
A maior vantagem é
poder utilizar arquivos externos para decoração, promovendo assim a reutilização de código
e fazendo uma programação mais intuitiva e com aproveitamento, algo que, como visto, era um
estrutura do arquivo CSS precisa ser bem elaborada, com seletores e propriedades bem
20 of 20 26/07/2020 17:16

CSS e Linguagem de Marcação HTML - Téc. Informática Senac

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

CSS e Linguagem de Marcação HTML - Téc. Informática Senac

Enviado por

Direitos autorais:

Formatos disponíveis

Versão para impressão https://senac.blackboard.com/bbcswebdav/pid-5561474-dt-content-rid-1...

hypertext markup language)

Algumas das tags que serão utilizadas a seguir são:

<head>: região que carrega informações da página (por exemplo, título).

<div>: subdivisão genérica de conteúdo.

<p>: definição de um parágrafo.

Agora que os conceitos trabalhados anteriormente em outras unidades curriculares foram

A razão da criação do CSS

adicionados em cada arquivo HTML separado, estava se tornando um processo demorado.

Observe a seguir a estrutura do CSS:

seletor1, seletor2, seletor3 {

Os valores atribuem um valor à propriedade escolhida para o elemento selecionado. Os tipos

Como utilizar o CSS

Clique ou toque para visualizar o conteúdo.

CSS diretamente no arquivo HTML

Observe este exemplo simples:

A propriedade color do CSS serve para trocar a cor do conteúdo do elemento.

Figura 1 – Resultado utilizando CSS dentro do arquivo HTML

Observe a seguir um exemplo de como utilizar estilo em linha:

Figura 2 – Resultado utilizando estilo em linha (style inline)

Observe agora um exemplo de como misturar as técnicas:

Figura 3 – Misturando técnicas de CSS

CSS em um arquivo separado

Observe agora o código do arquivo style.css:

serve para indicar detalhes da fonte do elemento decorado. No exemplo, utilizou-

Decorando elementos utilizando classes

Após, é preciso definir a classe no arquivo .css utilizando esta sintaxe:

.nomedaclasse{ propriedade: valor(es) }

Observe a seguir um exemplo de HTML utilizando classes:

Figura 5 – Utilizando classes

Também é possível escrever o arquivo .css da seguinte forma:

Utilizando mais de uma classe na decoração

Observe a seguir um exemplo de HTML utilizando mais de uma classe:

Observe agora o código do arquivo .css:

Figura 6 – Utilizando mais de uma classe na decoração do elemento

Decorando elementos utilizando identificadores

Observe um exemplo de HTML utilizando um id:

Figura 7 – Decorando elementos utilizando identificadores

Utilizando propriedades para controlar o tamanho do elemento

tamanho da fonte do elemento).

Observe agora o código do arquivo .css:

Figura 8 – Utilizando propriedades para controlar o tamanho do elemento

Utilizando CSS para adicionar imagem de fundo ao elemento

Observe a seguir um exemplo em HTML de como adicionar uma imagem:

Figura 10 – Utilizando CSS para adicionar imagem de fundo ao elemento

Observe no exemplo a seguir a hierarquia de pastas:

Figura 11 – Utilizando CSS para aplicar background-repeat

Aplicando margem aos elementos

length – Especifica a margem em px, cm etc.

% – Especifica a margem em porcentagem considerando o valor da propriedade width do

inherit – Define se a margem herda o valor do elemento pai.

Observe a seguir um exemplo em HTML de como utilizar margens:

Observe agora o código do .css:

Figura 9 – Aplicando margem aos elementos

O elemento <div> ocupa 50% da altura do elemento <body>.

lementos semânticos HTML: conceito e aplicação de

s elementos semânticos do HTML são aqueles que organizam a informação e conferem

Alguns exemplos de elementos semânticos são:

<table> – Indica que se trata de uma informação tabular.

<a> – Indica um hyperlink.

<strong> – Indica um termo importante no texto.

<nav> – Indica elementos de navegação do site.

<article> – Indica um texto de conteúdo.