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
