CSS

1 in = 2,54cm = 25,4mm = 72pt = 6pc

Relação da Unidades:

Referenciamento de “class” e “id”

class = .nomeDaClasses { }

id = #nomeDoID { }

obj+id = div*#r* { }

obj+class = div.r { }

Pseudo classes:

: seleciona um elemento enquanto ele está sendo ativado (por exemplo,

:active

quando o usuário clica em um botão).

: seleciona um elemento de formulário que está marcado, como uma

:checked

caixa de seleção ou um botão de opção.

:disabled : seleciona um elemento de formulário que está desativado.

: seleciona um elemento que não contém conteúdo, incluindo espaços

:empty

em branco.

:enabled : seleciona um elemento de formulário que está ativado.

:first-child : seleciona o primeiro elemento filho dentro de um elemento pai.

:first-of-type : seleciona o primeiro elemento de certo tipo dentro de um

elemento pai.

:focus : seleciona um elemento que tem o foco, como uma caixa de texto ou um
link.

:hover : seleciona um elemento quando o usuário passa o mouse sobre ele.

:last-child : seleciona o último elemento filho dentro de um elemento pai.

:last-of-type : seleciona o último elemento de certo tipo dentro de um elemento

pai.

CSS 1
 : seleciona todos os elementos que não correspondem ao seletor
:not()

especificado dentro da função not() .

:nth-child(n) : seleciona o elemento filho n-ésimo dentro de um elemento pai.

: seleciona o elemento filho n-ésimo contando a partir do final

:nth-last-child(n)

dentro de um elemento pai.

: seleciona o n-ésimo elemento de um determinado tipo dentro

:nth-of-type(n)

de um elemento pai.

:only-child : seleciona um elemento que é o único filho dentro de um elemento

pai.

: seleciona um elemento que é o único elemento de um

:only-of-type

determinado tipo dentro de um elemento pai.

Comandos:

text-align: center; : alinha o texto de um elemento HTML ao centro.

background-color : define a cor do fundo do elemento HTML.

box-sizingpermite controlar o tamanho de um elemento HTML e sua forma de

lidar com o tamanho das bordas e margens.

content-box : é o valor padrão, e significa que o tamanho de um elemento é

dado pelo tamanho de seu conteúdo.

border-box: significa que o tamanho de um elemento inclui tanto o conteúdo

quanto as bordas e margens.

inherit : significa que o tamanho do elemento será herdado do elemento

pai.

: especifica que a fonte Arial deve ser usada, se

font-family: Arial, sans-serif

estiver disponível no sistema do usuário. Caso não, será usado sans-serif

genérica.

font-size : define o tamanho da fonte.

padding : usado para adicionar espaço interno a um elemento HTML.

border-radius : arredonda um elemento HTML.

padding : é usada para adicionar espaço interno a um elemento HTML.

CSS 2
 position : é usada para controlar a posição de um elemento HTML em relação à
página. Existem quatro valores possíveis para a propriedade: static , relative ,
fixed e absolute .

display : em CSS é usada para controlar como um elemento é exibido na

página.

: exibe o elemento como um bloco, ocupando todo o espaço

block

disponível na largura do seu elemento pai e quebrando para a próxima linha

depois dele.

: exibe o elemento na mesma linha que outros elementos, ocupando

inline

apenas o espaço necessário para o conteúdo.

: exibe o elemento como um bloco, mas ocupa apenas o

inline-block

espaço necessário para o conteúdo e permite que outros elementos sejam

exibidos na mesma linha.

none : não exibe o elemento na página.

top / right / bottom / left define o espaçamento externo na parte tal do

elemento.

clear : impede que um elemento flutuante seja envolta por outros elementos.

flexbox: permite que você organize elementos de forma flexível,

independentemente de seu tamanho ou ordem.

grid : permite que você organiza elementos em uma grade com colunas e
linhas.

text-decoration : define o estilo de decoração de texto (sublinhado, tachado,

etc.).

: é um comando CSS que define o comportamento de

scroll-behavior: smooth;

rolagem suave ao rolar para um elemento na página.

overflow : é usada para determinar como os conteúdos de um elemento são

tratados quando excedem seu tamanho.

cursor: é usada para definir o tipo de cursor que é exibido quando o usuário
passa o mouse sobre um elemento.

box-shadow : coloca uma sombra atrás do item HTML.

grid-template-columns:50% 50%; : Divide a tela em 2 x 2 (No lugar dos % é da para

usar fr).

CSS 3
 HTML:

A linha e código <input type=”radio” name=”radio-btn” id=”r1”> : Insere um

radiobutton (botão de seleção) associado ao grupo name=”radio-btn” . Onde
referenciamos o “id” no <label for="r1"></label> para criamos uma label
associada ao botão.

<h1> a <h6> : tags de cabeçalho que são usadas para criar títulos e subtítulos.

<p> : tag usada para criar parágrafos de texto.

<a> : tag usada para criar links para outras páginas ou recursos.

<img> : tag usada para inserir imagens na página.

<ul> : tag usada para criar listas não ordenadas com marcadores de lista, como
bolinhas.

<ol> : tag usada para criar listas ordenadas com números ou letras.

<li> : tag usada para marcar cada item em uma lista.

<table> : tag usada para criar tabelas com dados organizados em linhas e
colunas.

: tag usada para criar formulários da web para entrada de dados do

<form>

usuário.

<input>: tag usada para criar campos de entrada de dados, como caixas de
texto, botões de rádio, entre outros.

<label> : tag usada para vincular um rótulo a um campo de entrada de dados.

<select> : tag usada para criar uma lista suspensa de opções.

<option> : tag usada para marcar cada opção em uma lista suspensa.

CSS 4
 Alguns Cods:

O doc deixa as imagens alinhadas ao

lado da outra, qnd ñ tem espaço, ele .container {
display: flex;
coloca a imgs na linha abaixo. (class: flex-wrap: wrap;
container e css) justify-content: space-between;}
.container img {
width: 25%;
padding: 10px;}
<div class="container">
<img src="img1.jpg" alt="Image 1">
<img src="img2.jpg" alt="Image 2">
<img src="img3.jpg" alt="Image 3">
<img src="img4.jpg" alt="Image 4">
</div> body, ul, li, p {
margin: 0px;
padding: 0px;
list-style: none;
font-size: 1.2rem;
<div class="container">
font-family: Arial;}
<header>Header</header>
a {
<main>Main</main>
text-decoration: none;}
<aside>Aside</aside>
.header {
<footer>Footer</footer>
background-color: brown;
</div>
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
<header> padding: 20px;}
<a href="">Logo</a> .menu {
<nav> display: flex; }
<ul class="navbar"> .menu li{
<li>Início</li> margin-left: 10px;}
<li>Perfil</li> .menu li a{
<li>Blog</li> display: block;
<li>Contato</li> padding: 10px;
</ul> background: tomato;}
</nav>
</header>

CSS 5