Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
css módulo 2
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Inovando com CSS; Módulo 2
Sintaxe do CSS
A regra do CSS é dividida em duas partes principais: o seletor e uma (ou mais)
declarações.
Setor: O setor é o elemento do HTML que receberá a formatação.
Declaração: Cada declaração consiste na propriedade e no valor referente.
Propriedade: A propriedade é o atributo que está alterado.
Valor: Cada propriedade tem o seu valor.
1
Inovando com CSS; Módulo 2
Dica: Existem duas formas de usar o CSS. A primeira é inserindo o CSS com a utilização da
tag <STYLE> no código HTML. A segunda é por meio de um arquivo externo.
Inserindo o CSS no Código HTML
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>. Veja o exemplo abaixo:
Experimente este Código!
<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.0//EN">
<html>
<head>
<style type="text/css">
h1 {color:red}
p {color:grey}
</style>
</head>
<body>
<h1>Exemplo de Cabeçalho</h1>
<p>Exemplo de Parágrafo</p>
</body>
</html>
2
Inovando com CSS; Módulo 2
Inserindo o CSS por meio de um 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).
Como este curso é básico, utilizaremos, a princípio, o bloco de notas do Windows,
que demonstra, 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. Conforme o seu nível de conhecimento em CSS for aumentando, utilize
esses softwares, pois eles otimizam o tempo de desenvolvimento e possuem diversas
ferramentas que ajudam a produzir um resultado satisfatório.
Criando Arquivos .html e .css
Para criar um arquivo .html e um arquivo .css, siga os passos abaixo:
1. Abra o Bloco de Notas (Notepad) do Windows.
2. No menu superior, clique em Arquivo e depois em Salvar Como.
3. Salve o arquivo com o nome index.html.
4. Repita os procedimentos, salvando o outro arquivo com o nome estilos.css.
3
Inovando com CSS; Módulo 2
Adicionando o CSS no HMTL
Cada arquivo precisa de um cabeçalho que identifique a 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á o CSS não necessita de um cabeçalho extenso. Ele será identificado pela seguinte
declaração:
/* CSS Document */
Atente-se ao local correto para adicionar a linha de referência. Ela deve ser inserida dentro
do <head> da página.
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 referência ao arquivo:
Experimente este Código!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>Página de exemplo</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
</body>
Para exemplificar esta inserção de código, visualize os dois exemplos abaixo:
Arquivo HTML com a tag <link> que identifica e puxa o arquivo externo CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<link rel="stylesheet" type="text/css" href="estilos.css" />
</head>
<body>
<h1>Este H1 terá fonte no tamanho 20</h1>
<h2>Este H2 terá a cor vermelha</h2>
<p>Este paragráfo terá a margem esquerda de 50 pixels</p>
</body>
</html>
4
Inovando com CSS; Módulo 2
Arquivo CSS com alguns
exemplos de propriedade
/* CSS Document */
body{
background-color:pink;
}
h1{
font-size:20px;
}
h2{
color:red;
}
Exemplo 2
Arquivo HTML com a tag <link> que identifica e puxa o arquivo externo CSS
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<link rel="stylesheet" type="text/css"
href="estilos.css" />
</head>
<body>
<h1>Este H1 terá a fonte na cor marrom</h1>
<hr />
<p>Este parágrafo mostra que o estilo do texto foi formatado com a fonte 16, e tem uma
margem de 20 pixels</p>
<p><a href=http://www.ev.org.br
target="_blank">Este link também tem um estilo personalizado pelo CSS</a></p>
</body>
</html>
Arquivo CSS com alguns
exemplos de propriedade
/* CSS Document */
body {
background-color:tan;
}
h1 {
5
Inovando com CSS; Módulo 2
color:maroon;
}
hr {
color:navy;
}
p {
font-size:16px;
margin-left:20px;
}
a:link {color:green;}
a:visited {color:yellow;}
a:hover {color:black;}
a:active {color:blue;}
Atividade
Após analisar os exemplos das páginas anteriores, insira os códigos nos seus
arquivos e confira os resultados!
Abaixo visualizamos as miniaturas de como devem ficar suas telas:
6
Inovando com CSS; Módulo 2
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:
p {color:red; textalign:center;}
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:
p {
color:red;
textalign:center;
}
Veja, abaixo, a explicação detalhada da linha:
1. p {background-color:red;}: O primeiro passo é selecionar o elemento que receberá
o estilo, neste caso o <p>. Observe que em css, não se coloca o <> em volta do
nome.
2. p {background-color:red;}: Coloque todos os estilos do elemento <p> entre chaves.
3. p {background-color:red;}: Especifique a propriedade que o estilo terá, neste caso a
cor de fundo do elemento <p>.
4. p {background-color:red;}:Há dois pontos entre a propriedade e seu valor.
5. p {background-color:red;}:Define a cor de fundo como vermelho.
6. p {background-color:red;}: No final um ponto e vírgula.
7. p {background-color:red;}: Chamamos tudo isso de regra.
Quer Adicionar mais Estilo?
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 e recuo, para que as CSS fiquem mais
legíveis.
Você pode adicionar propriedades e valores à vontade em cada regra das
CSS. Vamos supor que você queira colocar uma borda em torno de seus parágrafos. Veja
como fazer isso:
Comentários
Os comentários são fundamentais durante o desenvolvimento de sua página. Eles
explicam seu código e facilitam uma futura edição. Em CSS, você inicia um comentário
usando "/*" e encerra com "*/".
/*Seu comentário*/
Dica: Lembre-se de que o comentário será ignorado pelos browsers, mas é muito útil para
7
Inovando com CSS; Módulo 2
o desenvolvedor. É aconselhável não colocar acentos ou caracteres especiais nas palavras
do comentário, pois em alguns browsers isso pode influenciar na interpretação do código.
Veja, abaixo, o exemplo de como comentar uma linha:
Experimente este Código!
/* CSS Document */
/*Propriedades para formatacao do texto. O texto sera alinhado a direita com cor azul e
fonte Arial*/
p
{
text-align: right;
color: blue;
font-family: arial;
}
Parabéns!!!
Você chegou ao final do Módulo 02 - Exemplos de Criação! Agora você está
apto(a) a continuar este curso.
Siga para o Módulo 03 - Principais Propriedades do CSS e tenha um excelente
aprendizado.
8
Continue navegando
Materiais relacionados
Perguntas relacionadas
Compartilhar