(HyperText Markup Language, ou Linguagem de Marcação de Hipertexto em português) é a linguagem fundamental utilizada para criar a estrutura e o conteúdo das páginas da web.
As tags são códigos que usamos para construir uma página web. Elas são palavras-chave envoltas de menor que(<) e maior que(>) por Exemplo
<p> <!--essa tag e para parágrafo-->
<h1> <!--essa tag e para Titulo-->
<img> <!--essa tag e para Imagem-->Os atributos são como pequenas notas que você adiciona a esses blocos para dar a eles instruções específicas. Eles modificam o comportamento ou a aparência de um elemento HTML
<h1 class="titulo">Título da página</h1><p id="meu-paragrafo">Este é um parágrafo.</p><a href="https://www.google.com">Google</a> <!--Com Link-->
<img src="minha-imagem.jpg" alt="Descrição da imagem"> <!--Com Imagem-->
<input type="text" name="nome" value="Seu nome"> <!--Com Value--><!DOCTYPE html>
<html>
<head>
<titile>Meu Primeiro Site</title>
</head>
<body>
<h1>Bem-vindo ao meu site!</h1>
<p>Este é um parágrafo de exemplo.</p>
</body>
<html>- < head> < /head>: Define a cabeça do código onde o usuário não ver, podemos usar um link pra usar o css com html
- < title> < /title>: Usamos essa tag dentro da tag head, ela define o Titulo que aparace na aba do navegador
- < body< < /body>: Essa tag e o Corpo do Documento que é a parte visual do site onde podemos usar muitas tags
<h1>Maior</h1>
<h2>Maior</h2>
<h3>Maior</h3>
<h4>Maior</h4>
<h5>Maior</h5>
<h6>Maior</h6><p>isso e um parágrafo</p>- Ânconra: Usada para criar hiperlinks, ou seja, elementos clicáveis que direcionam o usuário para outra página, um arquivo, um endereço de email, ou até mesmo para uma seção específica da mesma página.
<a href="url_do_link">Texto do link</a><img src="" alt=""><button>Clique Aqui</button><br>abreviação de Cascading Style Sheets (ou Folhas de Estilo em Cascata, em português), é uma linguagem de estilo usada para definir a apresentação visual de documentos HTML, como cores e tamanhos, o css e meio que uma maquiaguem para deixar mais bonita .
<h1 style="color:red;">Hoje Foi legal</h1> <!--Aqui esse Titulo vai Sair Vermelho-->interno: E Quando colocamos na página do html o css, sendo que na cabeça onde o usuário não pode ver
<!DOCTYPE html>
<html>
<head>
<titile>Meu Primeiro Site</title>
<style>
h1{
color:red;
}
</style>
</head>
<body>
<h1>Bem-vindo ao meu site!</h1> <!--Aqui esse Titulo vai Sair Vermelho-->
<p>Este é um parágrafo de exemplo.</p>
</body>
<html><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>css</title>
<link rel="stylesheet" href="style.css"> <!--Aqui estamos Juntando o css com o html-->
</head>
<body>
<h1>Titulo da página</h1>
<h2>Titulo da página</h2>
</body>
</html>h1 {
color: blue;
font-size: 15px;
}<h1 id="teste">Testando id</h1>#teste{
color:blue;
font-size: 15px;
}Class: Diferente do id, na class podemos usar muitas vezes no codigo, Para indentificar usamos um ponto .
<h1 class="hj">testando class</h1>
<p class="hj">Testando</p>.hj{
color:red;
font-size:12px;
}Nomes Das Cores: São Palavras chaves que representão palavras de cores comuns, São fáceis de lembrar e usar, mas oferecem um conjunto limitado de cores
h1{
color:red; /* A cor do h1 vai ser vemelho*/
}Hexadecimal: Utiliza notação de seis Digitos Hexadecimais(#) epresentando a intensidade de vermelho, verde e azul (RGB)
h1{
color: #FF0000;/* A cor do h1 vai ser vemelho*/
}h1{
rgb(255, 0, 0);/* A cor do h1 vai ser vemelho*/
}Bordas: são elementos visuais essenciais em CSS, permitindo que você adicione contornos e realce elementos em suas páginas web. Elas podem ser personalizadas em diversos aspectos, Os mais Utilizados são as Solid, Dotted, Dashed.
border:5px solid black; /*aqui essa borda vai ter 5 pixels, e a cor dela vai ser preta */ border:5px dotted black; /*aqui essa borda vai ter 5 pixels, e a cor dela vai ser preta */ border:5px dashed black; /*aqui essa borda vai ter 5 pixels, e a cor dela vai ser preta */Arredondar Bordas : Para deixar uma borda meio que arredondado usamos o border-radius, permite que você crie cantos arredondados em elementos HTML, como divs, botões, imagens
border-radius: 200px;Posições: São fundamentais para definir as posições das bordas em um elemento CSS. Elas permitem um controle preciso sobre a aparência e o layout de seus elementos na página, existem 4 tipos são bottom,left,right,top
.meu-elemento {
border-top: 2px solid black; /* Borda superior de 2px, sólida e preta */
}.meu-elemento {
border-bottom: 2px solid black; /* Borda inferior de 2px, sólida e preta */
}.meu-elemento {
border-left: 2px solid black; /* Borda esquerda de 2px, sólida e preta */
}.meu-elemento {
border-right: 2px solid black; /* Borda esquerda de 2px, sólida e preta */
}padding:10px;margin:12px;Altura e Largura: no html ou no css usamos os height e width, Podemos usar % para definir ou pixels/px
height:"12px";/*Usando pixels*/
height:"12%";/*Usando porcentagem*/width:"12px";/*Usando pixels*/
width:"12%";/*Usando Porcentagem*/content-box: Digamos que você tem uma borda com as configurações de tamanho, e dentro dessa borda tem uma imagem, se você aumentar a imagem a borda não vai aumentar, só vai aumentar o contéudo que no caso vai ser a imagem
box-sizing:content-box;border-box: Digamos que você tem uma borda, e dentro dela tem uma imagem, se você aumentar a imagem a bordar vai aumentar.
box-sizing:border-box;Links: são elementos que conectam uma página da web a outra, seja dentro do mesmo site ou em um site diferente
<p>Testando <b>este</b></p><p>teste <strong>forte</strong></p><p>este e<i>Um texto em italic</i></p><p>este e um<em>exemplo</em></p><p>testando<small>menor</small></p><p>com<del>risco</del></p><p>com<mark>marca</mark</p><p>vai<sup>ser Menor</sup></p><p>abaixo<sub> do texto</sub></p>p{
color:red;/* a cor vai sair vermelho*/
}.hs{
font-size:30px;
}.pj{
font-weight:bold;
}body{
font-family: 'Lucida Sans';
}p{
text-align:right;
}h1{
text-align:left;
}h1{
text-align:center;
}h1{
text-align:justify;
}text-decoration: Deixa o texto sem decoração, quando colocamos a tag num texto ela fica com o anderlaine_, podemos tirar isso
a{
text-decoration:none;
}.kl{
text-transform:uppercase;
}.mn{
text-transform:lowercase;
}.hj{
letter-space:18px;
}.ls{
word-space:4px;
}p{
line-height:12px;
}text-shadow: Colocar um sombra no texto, tem 4 itens, e obrigatório colocar esse 4 itens, o Primeiro deles e a distância da sombra para a direita, o segundo e quão pra baixo vai a sombra, o terceiro e o espaço de espumaçado da sombra, o quarto e e a cor da sombra.
p{
text-shadow: 2px 1px 2px red;
}<ul>
<li>pri..</li>
<li>seg..</li>
</ul><ul style="list-style-type:disc;">
<li>Prim...</li>
<li>segu...</li>
</ul><ul style="list-style-type:square;">
<li>Prim...</li>
<li>Segu..</li>
</ul><ul style="list-style-list:cicle;">
<li>Pri..</li>
<li>Seg..</li>
</ul><ul style="list-style-list:none;"
<li>Prim..</li>
<li>Seg..</li>
</ul><ol>
<li>Prim..</li>
<li>Seg..</li>
</ol>Caso queria mudar, Colocamos o type, podemos mudar para o Alfabeto,Número,Algarimos Romano, Ou escolher em qual número começar
<ol type="A">
<li>Prim...</li>
<li>Segu..</li>
</ol><ol type="1">
<li>Prim..</li>
<li>Seg..</li>
</ol><ol type="I">
<li>Prim..</li>
<li>Seg..</li>
</ol><ol start="12">
<li>Prim..</li>
<li>Seg</li>
</ol><table>
<tr>
<th>Comidas</th>
<th>Bebidas</th>
</tr>
<tr>
<td>Arroz</td>
<td>Café</td>
</tr>
<tr>
<td>Biscoito</td>
<td>Chá</td>
</tr>
<tr>
<td>Macarão</td>
<td>Suco</td>
</tr>
</table>a:hover{
color:red;/*a letra vai ficar vermelha*/
}<form>
<input type="text">
</form><form>
<input type="number">
</form>password: Da um campo de texto onde pode digitar qualquer coisa, mas você não ver oque digitou fica com pontinhos, pos e uma senha
<form>
<input type="password">
</form>checkbox: Um pequeno quadradro que podemos marcar apenas um ou mais, nele temos que colocar um name com o mesmo nome quem cada um se quiser poder marcar só um, se quiser marcar mais de 1 pode colocar name diferentes
<form>
<input type="checkbox" name="frutas">
<input type="checkbox" name="frutas">
</form><form>
<input type="radio" name="Bebidas">
<input type="radio" name="Bebidas">
</form><form>
<input type="number"> <!--o que for Digitado aqui-->
<input type="submit"> <!--Vai ser enviado ao clicar aqui-->
</form><form>
<input type="email">
</form><form>
<input type="date">
</form><form>
<input type="datetime-local">
</form><form>
<input type="color">
</form><form>
<input type="month">
</form><form>
<input type="range">
</form><form>
<input type="tel">
</form><form>
<input type="time">
</form><form>
<input type="week">
</form>select: apresenta um menu de opções onde, onde o usuário pode escolher as opções para essa tag funcionar dentro dela usamos a tag < option>
<select>
<option>Abacaxi</option>
<option>Morango</option>
<option>Maçã</option>
</select><form>
<input type="textarea">
</form><form>
<input type="text">
<Button>Enviar<Button>
</form>Label: um texto para Especificar qual informação colocar no input, se no form colocarmos um id, e no label um for, conectando os, caso se eu clicar no label/texto, vai ativar
<form>
<input type="text" id="aluno">
<label for="aluno">Digite aqui</label>
</form>legend, fieldset: Udados para Separar e organizar visualmente os inputs de um formulário por blocos.
<form>
<fieldset>
<label>Nome Do aluno<br>
<input type="text" name="aluno">
</label>
</fieldset>
</form><form>
<fieldset>
<legend>Dados do aluno</legend>
<label>Nome Do aluno <br>
<input type="text" name="n-aluno">
</label><br>
<label>Idade do Aluno <br>
<input type="number" name="i-aluno">
</label>
</fieldset>
<fieldset>
<legend>Dados do Responsável</legend>
<label>Nome do Responsável <br>
<input type="text" name="r-respo">
</label><br>
<label> Idade do Responsável <br>
<input type="number" name="i-resp">
</label>
</fieldset>
</form><form>
<label>Digite seu nome: <br>
<input type="text" required>
</label>
</form><form>
<labelDigite seu nome: <br>
<input type="text" minlenght="2"> <!--o Minino e 2, se tiver menos que 2 não vai-->
</label>
</form><form>
<label Digite seu nome: <br>
<input type="text" maxlenght="10"> <!--o Máximo e 10, se tiver mais que 10 não vai-->
</label>
</form>step: no caso de inputs de number, com esse atributos podemos colocar com quantos números podemos pular
<form>
<label>Digite seu idade: <br>
<input type="number" step="2">
</label>
</form><form>
<label>Digite qualquer número: <br>
<input type="number" min="1">
</label>
</form><form>
<label>Digite qualquer número: <br>
<input type="number" max="4">
</label>
</form>placeholder: E uma legenda que fica no campo de texto, meio que uma previa como vai ficar quando o campo for prenchido
<form>
<label>Digite seu apelido:<br>
<input type="text" placeholder="dmd">
</label>
</form>Hidden: O input oculto é uma ferramenta útil para passar informações adicionais para o servidor de forma transparente para o usuário. Ao entender seu funcionamento e aplicações, você poderá criar formulários mais eficientes e seguros
<form>
<input type="hidden" value="BR">
<label>Digite seu Nome: <br>
<input type="text" placeholder = "Lucas Vasconcelos">
</label>
</form><form>
<input type="file">
</form>Ao invés de definir tamanhos em pixels ou outras unidades absolutas, as unidades relativas baseiam-se no tamanho da viewport do usuário (a área visível na tela, tem dois tipos que são o vh que são pra height, e vw para width,
.informa{
background-color:red;
height:2vh;
}.informa{
background-color:red;
width:5vw;
}<header>
<h1>Olá Mundo</h1>
</header><footer>
<h1>olá mundo</h1>
</footer>nav: usa para colocar link ou imagens, muito importante pós os monitores para deficientes, buscam essa tag
<nav>
<a href=""></a>
<a href=""></a>
<img src="" alt="">
</nav><section><!-- assunto 1 -->
<h1>Texto qualquer</h1>
<p>blablablabla</p>
</section>article: Usada para colocar o assunto Principal do site, o motor de busca vai procucar essa tag que deve estar com assunto principal
<article>
<h1>Assunto Principal do meu site</h1>
</article><article>
<h1>Assunto principal</h1>
<aside>
<h2>Assunto secundário</h2>
</aside>
</article><form>
<input type="text" required placeholder="seu Nome.." autofocus >
</form>size: o campo com o tamanho que caiba n° caracteres, digamos se eu colocar size="20", vai ficar do tamanho que caiba 20 caracteres
<form>
<label>Digite seu cpf
<input type="text" size="11">
</label>autocomplete: Digamos que você digitou algo no campo de texto antes, quando você for digitar novamente ai aparecer pra completar oque você digitou antes, tem como deixar ligado e desligado
<input type="text" required placeholder="Digite seu nome aqui" autocomplete="off"> <!--Desligado--><input type="text" required placeholder="Digite seu nome aqui" autocomplete="on"> <!--Ligado-->background: linear-gradient(rgb(0, 0, 0),rgb(0, 0, 255));animação no css: economiza JavaScript usamos @keyframes para defenir temos duas maneiras os from{} to{}, e usando %
@keyframes teste {
from{background-color:red;}
to{background-color:blue;}
}
.exemplo{
background-color:red;
width:100px;
height:100px;
animation-name:teste; /*ai vai o nome da animação, vai conectar*/
animation-duration: 5s; /*aqui vai a duração da animação, aqui no caso vai ficar 5 segundos*/
animation-iteration-count: infinite; /*aqui vai quantas vezes vai ser repetida, aqui no caso vai ser infinitamente*/
}@keyframes testando{
0%{
background-color: red;
border-radius: 12px;
height: 100px;
}
25%{
background-color: black;
border-radius: 20px;
}
50%{
background-color: aqua;
border-radius: 30px;
}
75%{
background-color: chartreuse;
border-radius: 40px;
}
100%{
background-color: pink;
border-radius: 10px;
}
}
.exemplo{
background-color: red;
height: 250px;
width: 250px;
animation-name: testando;
animation-iteration-count: infinite;
animation-duration: 5s;
}box-shadow: Colocar um sombra no background-color, tem 4 itens, e obrigatório colocar esse 4 itens, o Primeiro deles e a distância da sombra para a direita, o segundo e quão pra baixo vai a sombra, o terceiro e o espaço de espumaçado da sombra, o quarto e e a cor da sombra.
.teste{
width: 150px;
height: 150px;
background-color: green;
box-shadow:#8888 5px 5px 0px;
}Permitem que você crie animações suaves e graduais entre dois estados de um elemento. Em vez de uma mudança de estilo acontecer instantaneamente, a transição cria um efeito visual mais agradável.
.exemplo{
background-color: red;
width: 150px;
height: 150px;
margin: auto;
margin-top: 5%;
transition: all 2s linear; /*usamos a linear, vai durar 2 segundos*/
}
.exemplo:hover{ /* quando o curso do mouse estiver acima*/
height: 100px; /* vai ficar com 100px de altura*/
width: 100px; /* vai ficar com 100px de largura*/
border-radius: 12px; /* vai ficar com 12px de bordas*/
}Word-Wrap: é uma ferramenta essencial para controlar o layout de texto em CSS. Ao entender seus diferentes valores e como combiná-los com outras propriedades, você pode criar designs mais flexíveis e responsivos.
p {
width: 200px;
word-wrap: break-word;
}uma lista de descrição, anteriormente conhecida como lista de definição, é uma estrutura semântica utilizada para relacionar termos com suas respectivas definições
<dl></dl><dl>
<dt>
</dt>
</dl><dl>
<dt>
<dd></dd>
</dt>
</dl><q></q>:<blockquote>
</blockquote><main>
<p>testando o main</p>
</main>address: usada para colocar informações de contatos e muito usada dentro da tag footer, dependendo do navegador a fonte vem em italic, mais pode mudar com o css se não quiser em italic
<address>
</address>figure: Usada para juntar uma imagem com uma legenda, dentro dessa tag colocamos outra tag chamada figcaption que vem a legenda
<figure>
<img src="https://www.google.com.br/google.jpg"/>
<figcaption>Logo do Google</figcaption> <!-- aqui vem a legenda-->
</figure>Flexbox: Layout que permite que os elementos responsivos, dentro de um contêiner, sejam organizados automaticamente
<minha class="testando"> <!-- ops eu posso criar uma tag com qualquer nome, menos com nome de tags que já existem-->
<div>1</div>
<div>2</div>
<div>3</div>
</minha>
<style>
.testando{
display:flex; /*por padrão seria um elemento ao lado do outro. colocando isso vai fica um ao lado do outro */
}
div{
margin: 1%;
height:100px;
width:100px;
background-color: green;
}
</style><minha class="testando"> <!-- ops eu posso criar uma tag com qualquer nome, menos com nome de tags que já existem-->
<div>1</div>
<div>2</div>
<div>3</div>
</minha>
<style>
.testando{
display:block;
}
div{
margin: 1%;
height:100px;
width:100px;
background-color: green;
}
</style>flex-direction: Define a direção dos flex itens. Por padrão ele é row (linha), por isso (quando o display: flex; é adicionado), os elementos ficam em linha, um do lado do outro, tem 4 tipos que são row, row-reverse, column, column-reserve.
<minha class="testando"> <!-- ops eu posso criar uma tag com qualquer nome, menos com nome de tags que já existem-->
<div>1</div>
<div>2</div>
<div>3</div>
</minha>
<style>
.testando{
display:flex;
flex-direction:row;
}
div{
margin: 1%;
height:100px;
width:100px;
background-color: green;
}
</style><minha class="testando"> <!-- ops eu posso criar uma tag com qualquer nome, menos com nome de tags que já existem-->
<div>1</div>
<div>2</div>
<div>3</div>
</minha>
<style>
.testando{
display:flex;
flex-direction:row-reverse;
}
div{
margin: 1%;
height:100px;
width:100px;
background-color: green;
}
</style><minha class="testando"> <!-- ops eu posso criar uma tag com qualquer nome, menos com nome de tags que já existem-->
<div>1</div>
<div>2</div>
<div>3</div>
</minha>
<style>
.testando{
display:flex;
flex-direction:column;
}
div{
margin: 1%;
height:100px;
width:100px;
background-color: green;
}
</style><minha class="testando"> <!-- ops eu posso criar uma tag com qualquer nome, menos com nome de tags que já existem-->
<div>1</div>
<div>2</div>
<div>3</div>
</minha>
<style>
.testando{
display:flex;
flex-direction:column-reverse;
}
div{
margin: 1%;
height:100px;
width:100px;
background-color: green;
}
</style><style>
.container{
background-color: #cccc;
display: flex;
flex-wrap: wrap;
}
.container div{
background-color: red;
margin:10px;
padding: 10px;
font-size: 18px;
width: 200px;
}
</style>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div><style>
.container{
background-color: #cccc;
display: flex;
flex-wrap: nowrap;
}
.container div{
background-color: red;
margin:10px;
padding: 10px;
font-size: 18px;
width: 200px;
}
</style>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>wrap-reverse: Quebra a linha assim que um dos flex itens não puder mais ser compactado. A quebra é na direção contrária, ou seja para a linha acima
<style>
.container{
background-color: #cccc;
display: flex;
flex-wrap: wrap-reverse;
}
.container div{
background-color: red;
margin:10px;
padding: 10px;
font-size: 18px;
width: 200px;
}
</style>
<body>
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div><style>
:root{
--fundo:black;
--fundo-elemento:red;
--largura-elemento:140px;
--altura-elemento:20px;
--distancia-entre-elemento:1%;
}
.fundo{
background-color: var(--fundo);
display: flex;
flex-flow: row nowrap; /* aqui pode ser com qualquer tipo do flex-wrap e do flex-direction */
}
.fundo div{
background-color: var(--fundo-elemento);
margin: var(--distancia-entre-elemento);
height: var(--altura-elemento);
width: var(--largura-elemento);
}
</style>
<div class="fundo">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>justify-content:São comandos que podem posicionar melhor os elementos, temos 5 opções que são center,flex-start,flext-end,space-around, space-between.
<style>
:root {
--fundo-centro: #CCCC;
--bordar: solid 2px black;
--fundo-divs: rgb(3, 46, 237);
}
.center {
background-color: var(--fundo-centro);
display: flex;
justify-content:center;
}
.center div {
background-color: var(--fundo-divs);
color: white;
margin: 1%;
border: var(--bordar);
height: 30px;
width: 40px;
}
</style>
<div class="center">
<div>1</div>
<div>2</div>
<div>3</div>
</div><style>
.star {
display: flex;
background-color: rgb(11, 15, 56);
height: 80px;
justify-content: flex-start;
}
.star div {
background-color: white;
margin: 1%;
width: 50px;
}
</style>
<div class="star">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div> <style>
.end{
background-color: blueviolet;
display: flex;
height: 82px;
justify-content: flex-end;
}
.end div{
margin: 1.7%;
background-color: aqua;
height: 5vh;
width: 7vw;
}
</style>
<div class="end">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div> <style>
.around {
background-color: purple;
display: flex;
height: 70px;
justify-content: space-around;
}
.around div {
background-color: green;
margin: 1.4%;
width: 40px;
}
</style>
<div class="around">
<div>1</div>
<div>2</div>
<div>3</div>
</div>-space-between: Os itens são distribuídos uniformemente no contêiner, com o primeiro item alinhado ao início e o último item alinhado ao final.
<style>
.testando{
background-color: rgb(0, 179, 255);
display: flex;
justify-content: space-between;
height: 80px;
}
.testando div{
background-color: black;
color: white;
margin: 2%;
width: 50px;
height: 50px;
}
</style>
<div class="testando">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>align-items: são modos de alinhar os itens de um container flexbox, por padrão fica no eixo y, mais pode mudar usando o Direction e o justify ou um dos dois tem 5 maneiras
<style>
.fundo {
background-color: antiquewhite;
height: 40vh;
display: flex;
align-items:flex-start;
}
.fundo>div {
border-radius: 12px;
width: 5vw;
height: 5vh;
}
</style>
<div class="fundo">
<div style="background-color: rgb(101, 185, 209);">1</div>
<div style="background-color: rgb(21, 152, 72);">2</div>
<div style="background-color: salmon;">3</div>
</div> <style>
.end{
background-color: slateblue;
height: 15vh;
display: flex;
align-items: flex-end;
}
.end > div{
height: 4vh;
width: 7vw;
border-radius: 10px;
}
</style>
<div class="end">
<div style="background-color: chartreuse;">vai</div>
<div style="background-color: darksalmon;">para</div>
<div style="background-color: cornflowerblue;">o final/baixo</div>
</div> <style>
.center{
background-color: bisque;
height: 12vh;
display: flex;
align-items:center;
}
.center div{
height: 5vh;
width: 5vw;
border-radius: 10px;
}
</style>
<div class="center">
<div style="background-color: rgb(255, 0, 0);">testando</div>
<div style="background-color: cadetblue;">align-item no centro</div>
</div> <style>
.baseline{
background-color: rgb(25, 105, 105);
display: flex;
align-items: baseline;
}
.baseline > div{
background-color: red;
margin: 1%;
height: 5vh;
width: 4vw;
border-radius: 10px;
}
</style>
<div class="baseline">
<div style="font-size: 30px;">cada</div>
<div style="font-size: 18px;">tamanho</div>
<div style="font-size: 25px;">de</div>
<div style="font-size: 28px;">texto</div>
</div> <style>
.strche{
background-color: burlywood;
height: 70vh;
display: flex;
align-items: stretch;
}
.strche > div{
background-color: rgb(0, 85, 255);
margin: 2%;
width: 12vw;
}</style>
<div class="strche">
<div>asd</div>
<div>ad</div>
</div> <style>
:root {
--bordas: solid 1.2px black;
--cores03: blue;
}
.fundo {
border: var(--bordas);
display: flex;
margin-left: 7%;
width: 30vw;
}
.fundo>div {
background-color: var(--cores03);
height: 5vh;
margin: 1%;
flex-grow: 1; /* Ao definir 1 para todos os Flex Itens, eles tentarão ter a mesma largura e vão ocupar 100% do container*/
flex-wrap: wrap;
}
</style>
<div class="fundo"> <!-- aqui mesmo cada uma das 4 div vai ter 25% -->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div><style>
input,a{
display: block;
}
[required]{
background-color: rgb(255, 0, 0); /* tudo que tiver um required vai ser vermelho */
}
</style>
<body>
<input type="text" name="usuario" required> <!--o fundo vai ser vermelho -->
<input type="text" name="senha">
<a href="https://www.google.com.br">google</a>
<a href="https://www.site.com.br">Site</a>
<a
href="https://www.espn.com.br/futebol/palmeiras/artigo/_/id/14852142/vitor-roque-palmeiras-anuncia-contratacao-reforco-mais-caro-historia-futebol-brasileiro">Vitor
Roque Palmeiras</a>
<a
href="https://www.nsctotal.com.br/noticias/vaticano-divulga-novo-boletim-sobre-o-estado-de-saude-do-papa-francisco">Papa
fransisco</a>
<a href="https://g1.globo.com/mundo/noticia/2025/02/28/trump-zelensky-encontro-casa-branca.ghtml">trump</a>
<a
href="https://www.opovo.com.br/noticias/fortaleza/2025/02/28/fortaleza-registra-1524-milimetros-de-chuva-e-defesa-civil-atende-118-ocorrencias-em-12h.html">Fortaleza</a>
</body><style>
div{
margin: 20px;
height: 30px;
}
div:empty{
background-color: red; /* a div que não tiver nada vai estar em vermelho*/
}
</style>
<body>
<div>Texto 1</div>
<div>Texto 2</div>
<div></div> <!-- aqui vai ter um fundo vermelho, ja que não tem nada -->
<div>Texto 4</div>
<div>Texto 5</div>
</body> <style>
p::first-letter{
background-color: red; /* as Primeiras Letras vão ter um fundo vermelho, e uma font de 20px */
font-size:20px
}
</style>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, modi voluptate atque blanditiis minima, corrupti, officiis incidunt porro officia quod voluptates velit ipsam nihil mollitia culpa eum aperiam dolorum deleniti?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique, eaque odio! Odio accusantium impedit in fugit modi numquam reiciendis earum quos velit voluptates, magnam quibusdam maxime eveniet perferendis laboriosam aut.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In officiis doloremque consequuntur, sapiente sequi numquam assumenda. Tempora rerum sequi quod modi perferendis quisquam, temporibus atque alias molestias perspiciatis amet earum?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, consectetur! Fuga facere praesentium quibusdam magnam sequi hic odit! Eaque quibusdam ipsam similique obcaecati, ab eveniet pariatur. Nostrum delectus voluptate natus.</p>
</body> <style>
p::first-line{
background-color: red; /* as Primeiras linhas vão ter um fundo vermelho, e uma font de 20px */
font-size:20px
}
</style>
<body>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, modi voluptate atque blanditiis minima, corrupti, officiis incidunt porro officia quod voluptates velit ipsam nihil mollitia culpa eum aperiam dolorum deleniti?</p>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Similique, eaque odio! Odio accusantium impedit in fugit modi numquam reiciendis earum quos velit voluptates, magnam quibusdam maxime eveniet perferendis laboriosam aut.</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In officiis doloremque consequuntur, sapiente sequi numquam assumenda. Tempora rerum sequi quod modi perferendis quisquam, temporibus atque alias molestias perspiciatis amet earum?</p>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil, consectetur! Fuga facere praesentium quibusdam magnam sequi hic odit! Eaque quibusdam ipsam similique obcaecati, ab eveniet pariatur. Nostrum delectus voluptate natus.</p>
</body><style>
div{
background-color :rgba(255, 0, 60, 0.1); /* aqui vai ser bem transparente*/
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div>Texto 1</div>
</body><style>
img{
width: 200px;
height: 200px;
transform: scale(3); /* aumenta a escala da imagem pra 3 no eixo x e no eixo y */
}
</style>
<body>
<img src="charles.jpg" alt="">
</body><style>
img{
width: 200px;
height: 200px;
transform: scalex(3); /* aumenta a escala da imagem pra 3 no eixo x */
}
</style>
<body>
<img src="charles.jpg" alt="">
</body><style>
img{
width: 200px;
height: 200px;
transform: scaley(3); /* aumenta a escala da imagem pra 3 no eixo y */
}
</style>
<body>
<img src="charles.jpg" alt="">
</body><style>
img{
width: 200px;
height: 200px;
transform:rotate(13deg); /* mudando a rotação do elemento pra 13 graus*/
}
</style>
<body>
<img src="charles.jpg" alt="">
</body><style>
img{
width: 200px;
height: 200px;
}
img:hover{ /* passe o mouse*/
transform:skew(45deg); /* vai destorcer 25 graus */
transition: 2s linear all;
}
</style>
<body>
<img src="charles.jpg" alt="">
</body>css grid: Um método de posicionamento no css para deixar os layouts mais bonitos e responsivo, dentro do elemento pai temos que colocar um display:grid
.container{
display:grid;
}grid-templete-columns: uma função que define quantos elementos vai querer por coluna e define a largura do elemento
.container{
display:grid;
grid-template-columns:100px 300px; /* vai ter dois items por colunas e o primeiro item vai ter 100px e o segundo 300px*/
}.container{
display: grid;
grid-template-columns:100px 300px;
grid-template-rows: 200px 150px; /* o primeiro item vai ter uma altura de 200px e segundo de 150px */
}fr: E uma unidade de medida usada para define uma fração do espaço do elementos, usado como um valor em qualquer um dos elementos acima
.container{
display:grid;
grid-template-columns: 2fr 1fr;
}repeat(): usado para economizar caracteres e tempo, caso você queria colcoar 3 items por colunas com cada 1 com 200px você ira fazer 1 por 1, usando o repeat(3,200px) aqui está definindo que terão 3 itens por colunas e cada 1 com 200px de largura
.container{
display:grid;
grid-template-columns:repeat(2, 2fr) /*aqui vai ter 2 dias cada um com duas fração de espaçamento */
}.container{
display:grid;
grid-template-columns:minmax(200px , 500px) /*O item vai ter 500px de largura, mais a largura minina e 200px*/
}gap: Usado para dar espaçamentos entre os item, podemos colocar mais de um valor nele, digamos colocamos 20px vai ter 20 na altura e 20 na largura
.container{
display:grid;
grid-template-columns: minmax(200px , 500px)
gap: 20px 20px; /*O Primeiro valor vai ser pra largura, segundo valor para altura*/
}grid-column-start: 1; /* O item aqui vai começar na primeira linha imaginaria da coluna // por padrão*/
grid-column-end: 3; /*vai terminar na 3 linha imaginaria da coluna*/grid-column-start: 1;
grid-column-end: 3;
grid-row-start: 2; /*Vai Começar na segunda linha*/
grid-row-end: 4; /*Vai terminar na 4º linha*/grid-column: 1 / 3; /* já define onde vai começar e termina em só uma linha*/grid-row: 2 / 4; /* o item ira ocupara as linhas 2 até as linhas 3*/