Scribd
Upload
34 views14 pages

Codigos Da Pratica 2

Uploaded by

jfoliveira
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
34 views14 pages

Codigos Da Pratica 2

Uploaded by

jfoliveira
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

FERRAMENTAS DE

DESENVOLVIMENTO
WEB

AULA PRÁTICA 2 – CSS


Aqui basta criar um arquivo para praticar:

Exemplo 1: CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-
Compatible" content="IE=edge">
<meta name="viewport" content="width=d
evice-width, initial-scale=1.0">
<title>CSS</title>
<style>
.central_geral{
text-align:center;
}
p.central{
text-align:center;
}
h1,h2,h3{
border-
bottom: 6px double gold;
}
ul ol{
color: red;
}
ol ol{
color: green;
}
</style>
</head>
<body>
<p>Texto do parágrafo</p>
<p class='central'>Texto do P para cen
tralizar</p>
<h4 class='central'>Texto do H4 que nã
o vai centralzar</h4>
<h4 class='central_geral'>Texto do H4
que vai centralizar</h4>
<hr>
<h1>Titulo 1 geral</h1>
<h2>Titulo 2 geral</h2>
<h3>Titulo 3 geral</h3>
<ul>
<ol type='I'>
<li>HTML</li>
<li>CSS</li>
<ol type='A'>
<li>Border</li>
<li>Shadow</li>
</ol>
<li>Javascript</li>
</ol>
</ul>
</body>
</html>

Exemplo 2:
Usei gerador de lero-lero: lorem-ipsum para os
parágrafos. https://www.lipsum.com/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-
Compatible" content="IE=edge">
<meta name="viewport" content="width=d
evice-width, initial-scale=1.0">
<title>Document</title>
<style>
.base{
position:absolute;
z-index: 5;
top: 10px;
left: 10px;
}
.quadro{
position: absolute;
z-index: 10;
top: 40px;
left: 30px;
width: 100px;
height:100px;
box-
shadow: 5px 5px 5px 3p gray;
border-radius: 20px;
background-color: white;
}
.topo{
position: absolute;
z-index: 15;
top: 70px;
left: 50px;
color: blue;
background-color: gray;
}
</style>
</head>
<body>
<p class="base">
It is a long established fact that
a reader will be distracted by the readab
le content of a page when looking at its l
ayout. The point of using Lorem Ipsum is t
hat it has a more-or-
less normal distribution of letters, as op
posed to using 'Content here, content here
', making it look like readable English. M
any desktop publishing packages and web pa
ge editors now use Lorem Ipsum as their de
fault model text, and a search for 'lorem
ipsum' will uncover many web sites still i
n their infancy. Various versions have evo
lved over the years, sometimes by accident
, sometimes on purpose (injected humour an
d the like).

</p>

<div class="quadro">It is a long estab


lished fact that a reader will be distract
ed by the readable content of a page when
looking at its layout. The point of using
Lorem Ipsum is that it has a more-or-
less normal distribution of letters, as op
posed to using 'Content here, content here
', making it look like readable English. M
any desktop publishing packages and web pa
ge editors now use Lorem Ipsum as their de
fault model text, and a search for 'lorem
ipsum' will uncover many web sites still i
n their infancy. Various versions have evo
lved over the years, sometimes by accident
, sometimes on purpose (injected humour an
d the like).
</div>

<p class="topo">
It is a long established fact that
a reader will be distracted by the readab
le content of a page when looking at its l
ayout. The point of using Lorem Ipsum is t
hat it has a more-or-
less normal distribution of letters, as op
posed to using 'Content here, content here
', making it look like readable English. M
any desktop publishing packages and web pa
ge editors now use Lorem Ipsum as their de
fault model text, and a search for 'lorem
ipsum' will uncover many web sites still i
n their infancy. Various versions have evo
lved over the years, sometimes by accident
, sometimes on purpose (injected humour an
d the like).

</p>
</body>
</html>
Exemplo 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-
Compatible" content="IE=edge">
<meta name="viewport" content="width=d
evice-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
border-radius: 20px;
box-
shadow: 10px 10px 15px gray;
background-color: slategray;
position:absolute;
padding: 10px;
top: 50px;
left: 10px;
width: 150px;
height:100px;
}
p:hover{
//transform: translate(-
.5rem,-1rem) rotate(3deg);
transform: rotate(360deg);
transition: transform .8s;
}
h1:hover{
box-
shadow: 10px 10px 15px gray;
transform: translate(-.1rem,-
1rem) rotate(1deg);
transition: transform .5s;
}
</style>

</head>
<body>
<p><span style='color:gold'>Atenção:</
span>Teste de leitura</p>
<br>
<!--
<h1>Promoção: aproveite!!!!</h1>
-->
</body>
</html>

Exemplo 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-
Compatible" content="IE=edge">
<meta name="viewport" content="width=<
device-width>, initial-scale=1.0">
<title>Document</title>
<style>
p{
margin-left:20px;

table.td{
border: 1px solid black;
border-collapse: collapse;
}

.destaque:hover{
text-align: 1PX 1PX 3PX GRAY;
background: burlywood;
text-align: center;
}
.titulo:hover{
color:red;
font-size: 1.3em;
}
</style>
</head>
<body>
<table border="2">
<caption>Tabela de Frutas</caption
>
<tr class="destaque">
<td>Nome</td><td>Qtf</td><td>V
alor</td>
</tr>

<tr class="destaque">
<td>Banana</td><td>40</td><td>
5,00</td>
</tr>
<tr class="destaque">
<td>Acerola</td><td>7</td><td>
9,00</td>
</tr class="destaque">
<tr class="destaque">
<td>Abacaxi</td><td>4</td><td>
10,00</td>
</tr>
</table>

<h1 class="titulo">Texto a ser destaca


do</h1>
</body>
</html>
Exemplo 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-
Compatible" content="IE=edge">
<meta name="viewport" content="width=d
evice-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://m
axcdn.bootstrapcdn.com/bootstrap/4.5.2/css
/bootstrap.min.css">
<script src="https://ajax.googleapis.com
/ajax/libs/jquery/3.5.1/jquery.min.js"></s
cript>
<script src="https://cdnjs.cloudflare.co
m/ajax/libs/popper.js/1.16.0/umd/popper.mi
n.js"></script>
<script src="https://maxcdn.bootstrapcdn
.com/bootstrap/4.5.2/js/bootstrap.min.js">
</script>
</head>
<div style="width: 400px;">

<form>
<div class="custom-control custom-
switch">
<input type="checkbox" class="
custom-control-input" id="editar">
<label class="custom-control-
label" for="editar">Editar</label>
</div>
<label for="temperatura">Temperatu
ra: </label>
<input type="range" class="custom-
range" min="0" max="10" id="tempertura" na
me="temperatura">
</form>
</div>
<!-
- colocar em src="nome completo de uma ima
gem, que deverá estar salva na mesma pasta
onde você salvou o arquivo, por exemplo]:
flor.png ou flor.jpg" -->
<img class="img-
fluid" src=" " alt="logotipo">
<br>
<br>
<!-- Modal-->

<button type="button" class="btn btn-


primary" data-toggle="modal" data-
target="#janela"> >Atenção<</button>

<!-- Cria pop up-->


<div class="modal" id="janela">
<div class="modal-dialog">
<div class="modal-content">

<!--Modal Header-->
<div class="modal-header">
<h4 class="modal-
title">Atenção: </h4>
<button type="button" clas
s="close" data-dismiss="modal"></button>
</div>
<!-- Modal body-->
<div class="modal-body">
Antes de sair, verifique s
eu backup diário.
</div>

<!-- Modal footer -->


<div class="modal-footer">
<button type="button" class="btn b
tn-danger" data-
dismiss="modal">Fechar</button>
</div>
</div>
</div>

</div>

</body>
</body>
</html>

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy