CSS - Parte 1
Transcript of CSS - Parte 1
![Page 1: CSS - Parte 1](https://reader035.fdocumentos.tips/reader035/viewer/2022071821/55b78548bb61eb2f268b45bb/html5/thumbnails/1.jpg)
Cascading Style Sheets
• Folha de Estilo em cascata
• Folha de estilo em cascata é um mecanismo simples para adicionar estilos (p.ex., fontes, cores, espaçamentos) aos documentos Web.
• A grande vantagem do uso de CSS é a de separar a marcação HTML, da apresentação do site.
![Page 2: CSS - Parte 1](https://reader035.fdocumentos.tips/reader035/viewer/2022071821/55b78548bb61eb2f268b45bb/html5/thumbnails/2.jpg)
IntroduçãoSintaxe
seletor {propriedade: valor; }Seletor: é o elemento HTML, ex: <p> <h1>
Propriedade: Atributo que será aplicado ao elemento HTML, ex: font, color, background.
Valor: valor do atributo. Ex: letra tipo arial, cor azul.
p { color: #FF0000; }
![Page 3: CSS - Parte 1](https://reader035.fdocumentos.tips/reader035/viewer/2022071821/55b78548bb61eb2f268b45bb/html5/thumbnails/3.jpg)
Inserir CSS no HTMLInline – declarado no HTML
Ex: <p style=“color:#ff0000;”> Texto </p>
Incorporadas – dentro do elemento <head>Ex: <head>... <style type=“text/css”> p { color: #ff0000; } </style> </head>
![Page 4: CSS - Parte 1](https://reader035.fdocumentos.tips/reader035/viewer/2022071821/55b78548bb61eb2f268b45bb/html5/thumbnails/4.jpg)
Inserir CSS no HTMLExterno – Arquivo externo com a extensão .cssEstá é a melhor forma de se inserir CSS em um siteEx: <head> <link rel=“stylesheet” type=“text/css” href=“estilos/principal.css” /> </head> ...
![Page 5: CSS - Parte 1](https://reader035.fdocumentos.tips/reader035/viewer/2022071821/55b78548bb61eb2f268b45bb/html5/thumbnails/5.jpg)
HTML e CSS<html><head><title>HTML e CSS</title><style type=“text/css”>h1{ color: blue; }body{ background-color: yellow; }</style></head><body><h1>Este texto está com a cor azul</h1></body></html>
![Page 6: CSS - Parte 1](https://reader035.fdocumentos.tips/reader035/viewer/2022071821/55b78548bb61eb2f268b45bb/html5/thumbnails/6.jpg)
Agrupamento de SeletorPossibilita agrupar seletores que possuam declarações idênticas.Ex:Aplicar a cor vermelha aos títulos <h1> até <h6>:
H1,h2,h3,h4,h5,h6{color:#FF0000;}