FundamentosdeCSS

•

ESTÁCIO

gfgbf gfgfg

09/04/2024

E aí, curtiu este material?

Ajude a incentivar outros estudantes a melhorar o conteúdo

Gostou desse material? Compartilhe! 🧡

Desenvolvimento de Websites

14 Materiais compartilhados

Baixe o app para aproveitar ainda mais

Leia os materiais offline, sem usar a internet. Além de vários outros recursos!

Prévia do material em texto

DESENVOLVIMENTO
WEB
CURSO
http://www.udemy.com/desenvolvimento-web-completo
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
Fundamentos de CSS
/ CSS
http://www.udemy.com/desenvolvimento-web-completo
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
CURSO DESENVOLVIMENTO WEB
O que vamos aprender
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEB
• Definição. 
• Formas de Aplicar. 
• Inline. 
• Incorporado. 
• Arquivo externo. 
• Vantagens de usar arquivo externo. 
• Anatomia de um regra CSS. 
• Tag. 
• Class. 
• ID.
https://www.udemy.com/course/google-ads-completo-2020/
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEBDefinição.
CSS (em inglês: Cascading Style Sheets) é uma linguagem de 
definição de estilo utilizada para definir a apresentação de 
documentos escritos numa linguagem de marcação 
(em inglês: mark-up language), como são, por exemplo, 
o HTML ou o XML. 
Se o HTML é o conteúdo de uma página web, o CSS é sua 
forma, sua apresentação. 
CSSHTML
 [ conteúdo ] [ forma ]
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEB
Há três maneiras de aplicar CSS em uma página 
web, são elas: 
1. Inline. 
2. Incorporado. 
3. Externo.
Formas de aplicar.
1. Inline (na linha)
<html>
<head>
</head>
<body>
</body>
</html>
<h1 style=“color:red”>Título da página</h1>
A maneira inline, a regra CSS é aplicada 
diretamente na linha da tag do HTML.
https://www.udemy.com/course/google-ads-completo-2020/
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEBFormas de aplicar.
2. Incorporado
<html>
<head>
</head>
<body>
</body>
</html>
<h1>Título da página</h1>
Uma maneira bastante comum é adicionar o 
código do CSS no modo incorporado, dentro do 
arquivo HTML, na seção HEAD, na parte superior 
do código. Entre as tags <style>.
<style>
h1 { 
font-size:200%; 
color:#F00;
 }
</style>
https://www.udemy.com/course/google-ads-completo-2020/
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEBFormas de aplicar.
3. Externo.
<html>
<head>
</head>
<body>
</body>
</html>
<h1>Título da página</h1>
A maneira mais popular de aplicar um código 
CSS é usando um arquivo externo. Deixando 
desta forma, o arquivo HTML exclusivo para o 
conteúdo. 
O arquivo CSS é vinculado ao arquivo HTML 
através da tag <link> adicionada no HEAD do 
documento.
<link href=“estilo.css” rel=“stylesheet”/>
https://www.udemy.com/course/google-ads-completo-2020/
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEBVantagens 
de usar CSS externo.
CSS
HTMLHTML
Um único arquivo de CSS pode ser vinculado a vários 
arquivos HTML, criando um padrão para todo o site. 
Se algo é alterado no arquivo CSS, todos os arquivos 
vinculados serão impactados, facilitando assim a 
manutenção.
HTMLHTML
https://www.udemy.com/course/google-ads-completo-2020/
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEBVantagens 
de usar CSS externo.
Da mesma forma que um arquivo HTML, pode ter 
vários arquivos CSS vinculados. Como uma forma de 
organizar o conteúdo e as regras de formatação.
LAYOUT.CSS
TIPOGRAFIA.CSS
HTML
E naturalmente, estes arquivos CSS 
vinculados podem ter outros 
arquivos HTMLs vinculados. 
https://www.udemy.com/course/google-ads-completo-2020/
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEBAnatomia 
de uma regra CSS.
p {
}
font-size:Arial, sans-serif;
color:#000000;
SELECTOR DECLARAÇÃO
PROPRIEDADE
VALOR
Uma regra de CSS é composta por um ou mais 
selector, uma declaração de valores, onde descreve-se 
propriedades e seus valores. 
CSS pode ter três tipos de selectores: 
1. Tag. 
2. Class. 
3. ID.
https://www.udemy.com/course/google-ads-completo-2020/
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEBAnatomia 
de uma regra CSS.
Um exemplo de uma regra CSS com mais de um 
selector:
p, li, a {
}
font-size:Arial, sans-serif;
color:#000000;
MULTIPLOS SELECTORS
O Resultado desta regra CSS é que todas as tags: 
<p>, <li> e <a> impactadas por esta declaração, terão 
cor preta e fonte Arial.
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEBAnatomia 
de uma regra CSS.
.destaque {
}
font-weight: 600;
text-decoration: underline;
CLASS
Alternativa: Se esta classe só será aplicada uma tag 
específica, pode-se adiciona-la na sua declaração, exemplo:
p.destaque {
}
font-weight: 600;
text-decoration: underline;
CLASS
Vamos agora ver como aplicar uma regra CSS a uma 
classe. 
https://www.udemy.com/course/google-ads-completo-2020/
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEBAnatomia 
de uma regra CSS.
Vamos agora estudar como aplicar uma regra CSS ao 
um elemento ID.
ID
#pizza {
}
width:100%;  
background-image:url(imagem.jpg);
background-size:cover;
background-position:center center;
https://www.udemy.com/course/google-ads-completo-2020/
André Fontenelle
https://www.udemy.com/course/google-ads-completo-2020/
CURSO DESENVOLVIMENTO WEB 
André Fontenelle
FUNDAMENTOS DE CSS
CURSO DESENVOLVIMENTO WEBAnatomia 
de uma regra CSS.
Alternativa: Uma ID será sempre aplicada a apenas um 
elemento em uma página, desta forma, pode-se adicionar a 
tag em sua declaração. Desta forma, deixar mais claro onde 
será aplicada.
ID
section#pizza {
}
width:100%;  
background-image:url(imagem.jpg);
background-size:cover;
background-position:center center;
https://www.udemy.com/course/google-ads-completo-2020/
	1. Inline (na linha)
	2. Incorporado
	3. Externo.