-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
130 lines (91 loc) · 3.32 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/list.css">
<link rel="stylesheet" href="css/titles.css">
<!-- <style>
p{
color: green;
font-size: 40px;
}
</style> -->
<title>Aprendendo Css</title>
</head>
<body>
<!-- 1 Inline css -->
<h1 style="color: red">Mudar a cor com inline css</h1>
<h1 style="background-color: bisque;">Outra cor</h1>
<hr>
<!-- 2 Multiplas regras css -->
<h1 style="color: purple; font-size: 50px; border: 3px solid rgb(120, 88, 88)">Mudar cor e tamanho da fonte</h1>
<!-- 3 Internal css -->
<p>Fui estilizado pelo internal css</p>
<p>Fui estilizado pelo internal css</p>
<!-- 04 External css -->
<p>Fui estilizado pelo external css</p>
<!-- 05 Ordem do Css -->
<hr>
<p style="color: red">Ordem do Css</p>
<p>Ordem css</p>
<ul>
<li>Banana</li>
<li>Maça</li>
<li>Abacate</li>
</ul>
<!-- 07 DESAFIO -->
<!--
- Criar um arquivo chamado "titles.css"
- Link o arquivo titles.css em seu index.html
- Em index.html crie um h4 com o título "Sou um desafio"
- Em titles.css estilize h4 com cor de fundo magenta, cor do texto branca e tamanho da fonte de 40px;
-->
<h4>Sou um desafio</h4>
<!-- 08 Classes -->
<p class="paragrah">Algum texto 01</p>
<p class="paragrah">Algum texto 02</p>
<p class="paragrah">Algum texto 03</p>
<!-- 09 ID -->
<h1 id="exclusive-title">Esse título é exclusivo com id </h1>
<!-- 10 multiplas regras -->
<h2 id="algum-titulo" class="titulo">Algum texto 1</h2>
<h2 class="titulo">Algum texto 2</h2>
<h2>Algum texto 3</h2>
<!-- 11 nome da cor -->
<p class="color-name">Qualquer texto para o nome da cor</p>
<!-- 12 hex -->
<p class="hex">Parágrafo com hex</p>
<p class="hex-2">Parágrafo com hex-2</p>
<!-- 13 Hex simplificado -->
<p class="simple-hex">Parágrafo simplificado</p>
<p class="simple-hex-2">Parágrafo simplificado-2</p>
<!-- 14 rgb -->
<p class="rgb">Estilizado com RGB</p>
<p class="mixed-rgb">Estilizado com RGB</p>
<!-- 15 RGBA -->
<p class="rgba">Estilizado com RGBA</p>
<!-- 16 bg img -->
<h1 class="bg-image">Este título tem um imagem</h1>
<!-- 17 Div -->
<div class="bg-opacity">Estou aqui quase invisível</div>
<div class="bg-opacity-2">Estou aqui quase invisível</div>
<div class="rgba-opacity">Estou aqui quase invisível</div>
<!--18 -->
<div class="centered-bg"></div>
<div class="not-centered-bg"></div>
<!-- 19 -largura e altura -->
<div class="without-padding">Este não tem padding</div>
<div class="padding">Elemento com padding</div>
<!-- 20 padding individual -->
<p class="padding-individual">Este elemento tem padding individual</p>
<!-- 21 bordas -->
<div class="border">Borda</div>
<div class="border2">borda2</div>
<p class="border-esquerda">Borda esquerda</p>
<p class="border-abaixo">Borda abaixo</p>
<p class="arrendondas">bordas arrendondas</p>
<p class="arrendondas-2">borda arrendondas-2</p>
</body>
</html>