Curso em Video HTML e CSS

CURSO EM VIDEO HTML E CSS
========================================================================
PRIMEIRO CODIGO EM HTML
<!DOCTYPE html> 
<html lang="pt-br"> 
<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>Meu primeiro exercício</title> 
</head>
<body> 
<h1>Exercício 001</h1> 
<hr> 
<p>EBAAAA estou muito feliz</p> 
</body>
</html>
========================================================================
PARÁGRAFOS E QUEBRAS DE LINHA
Quando usamos a tag <p>, estamos apenas criando um parágrafo, ou seja, sem a presença de
quebras de linha. Para fazer uma quebra de linha, devemos usar a tag <br>
========================================================================
CARACTERES ESPECIAIS E EMOJIS
Para <, usa-se o <
Para >, usa-se o >
<testando>
Existem alguns outros símbolos que podem ser exibidos

usando códigos. Esses códigos são chamados de HTML
Entities, como os mostrados ao lado.
Para achar mais símbolos: ENTRE AQUI
Já para adicionar emojis ao seu site, acesse o site

emojipedia.org, selecione o emoji desejado, e procure por
seu Codepoints, assim para inserir ao seu site, use o
código adaptado 😄 em qualquer lugar que aceite
palavras. É só substituir o U+ por &#x (com a letra x
minúscula).
Como exemplo o emoji 🏕️, com o código U+1F3D5, ficará
🏕
========================================================================
IMAGENS E FAVICONS
Para usar imagens é simples, basta usar o comando img
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Imagens</title>
</head>
<body>
<h1>Testando imagens</h1>
<p>Abaixo vc verá uma imagem que está nessa pasta</p>
<img src="csslogo120.png" alt="logo css">
<p>Abaixo vc verá uma imagem de uma subpasta</p>
<img src="imagens/htmllogo120.png" alt="logo html">
<p>Abaixo vc verá uma imagem da internet</p>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/99/
Unofficial_JavaScript_logo_2.svg/480px-Unofficial_JavaScript_logo_2.svg.png" alt="logo jav
ascript">
</body>
</html>
Você já ouviu falar em favicon? Talvez você não os identifique pelo nome esquisito, mas com
certeza já viu aqueles pequenos ícones que aparecem ao lado dos sites que visitamos, na parte
superior do seu navegador. É o mesmo local onde aparecem o texto que você colocou na tag
<title> do seu site.
Para achar alguns favicons já prontos: iconarchive

Para criar favicons em formato de desenho: favicon.cc
Para criar seus próprios favicons com suas próprias imagens: favicon.io
========================================================================
HIERARQUIA DE TÍTULOS
Dentro de sites, há a hierarquia de títulos, identificados por meio de hs, ou seja, o título
principal de uma matéria jornalística começa com um <h1>, já seu subtítulo começa com <h2>,
e se possuir mais um subtítulo, usa-se <h3>. Para então usar-se o <p> para criar o paragrafo
com o texto condizente
========================================================================
NEGRITO E ITÁLICO
Para colocar uma frase em negrito, há duas maneiras:
Colocar a frase entre tag <b>, sendo a forma não semântica
E também a forma mais recomendada, sendo a frase entre a tag <strong>, sendo a forma
semântica
<p><b>Teste de negrito da forma não semântica</b></p>
<p><strong>Teste de negrito da forma semântica</strong></p>
Já para colocar uma frase em itálico, usamos a tag <i>, sendo a forma não semântica, e também
a forma mais recomendada que é colocar a frase entre a tag <em>, sendo a forma semântica
<p><i>Teste de itálico da forma não semântica</i></p>
<p><em>Teste de itálico da forma semântica</em></p>
========================================================================
TEXTO MARCADO
Para fazer um tipo de marca texto sobre um texto, basta usar a tag <mark> que deixara o texto
marcado de amarelo
Já para mudar a cor do marca texto, basta usar o código de css dentro da tag mark:
style:”background-color: cor desejada;”
<p>Teste de <mark>texto com marca texto amarelo</mark></p>
<p>Teste de <mark style="background-color: blue;">texto com marca texto azul</mark></p>
Outra maneira de fazer isso é colocando o código de css dentro da head do código, da seguinte
forma:
<title>MARCAÇÃO DE TEXTO</title>
<style>
mark {
background-color: red;
}
</style>
</head>
<body>
<p>Teste de <mark>texto com marca texto definido no começo</mark></p>
<p>Teste de <mark style="background-color: blue;">texto com marca texto azul</mark></p>
</body>
========================================================================
TEXTO RISCADO E SUBLINHADO
Para deixar o texto riscado dessa forma deve-se usar a tag <del> (de deletado)
E para deixar o texto sublinhado da forma semântica, deve-se usar a tag <ins>
<p>Teste de <del>texto riscado (deletado)</del></p>
<p>Teste de <ins>texto sublinhado (forma semântica)</ins></p>
========================================================================
TEXTOS SUBRESCRITOS E SUBSCRITOS
Para escrever algo sobrescrito, usa-se a tag <sup> (de super escrito) e para escrever algo
subscrito, usa-se a tag <sub> (de subscrito)
<p>Teste de x<sup>20</sup> (texto sobrescrito)</p>
<p>Teste de H<sub>2</sub>O (texto subscrito)</p>
========================================================================
TEXTOS EM FORMATO DE CODE
Para deixar um texto com todos os caracteres com mesma largura, usa-se a tag <code>, que tem
como principal função: ser usada quando referir a partes de linguagens de código
<p>Exemplo de uso da tag code <code>document.png</code></p>
Para deixar ainda mais formatado, usa-se a tag <pre>, que considera os espaços (tabs) antes do
código
<pre><code>
def teste(num):
print('Teste concluído em python')
teste(x)
</code></pre>
========================================================================
CITAÇÕES E ABREVIAÇÕES EM HTML
Para fazer citações simples de pessoas, livros e etc. Usa-se a tag <q>, dando um sentido
semântico para essa citação ao invés de colocar apenas as aspas
<p>Como dizia meu pai: <q>O computador é um burro rápido</q></p>
Já para citações completas, usa-se a tag <blockquote>
<p>Como dizia Zinco em seu livro:
<blockquote cite="LINK PARA O LIVRO DO AUTOR DA CITAÇÃO">
O bom desempenho é a combinação de talento e muito treino
</blockquote>
</p>
Para fazer abreviações/siglas em html, usa-se a tag <abbr>, que coloca um “tracejado” por baixo
da abreviação, dando seu significado com a passagem do mouse
<p><abbr title="For Inspiration and Recognition of Science and Technology">FIRST</abbr>
LEGO LEAGUE</p>
========================================================================
LISTAS EM HTML
Para fazer uma lista ordenada, basta usar as tags <ol> e <li>, sendo a <li> para definir a lista, e
o <ol> para definir a ordem da lista
<ol>
<li>Acordar</li>
<li>Escovar o dente</li>
<li>Tomar café da manhã</li>
<li>Tomar banho</li>
</ol>
Com base nisso, temos o comando type, que define qual será o tipo de ordem da lista, sendo
numerada (1, 2, 3, 4, 5...), com letras (A, B, C, D...) ou números romanos (I, II, III...)
Também há o start, que define em qual número, letra ou número romano começará a lista
<ol type="a" start="4">
<li>Acordar</li>
<li>Escovar o dente</li>
</ol>
Já para as listas não ordenadas, usamos as tags <ul> e <li>, sendo a <li> para definir a lista, e a
<ul> para definir a lista com círculos, discos ou quadrados (usando o comando type novamente
para definir a forma da lista)
<ul type="circle">
<li>Acordar</li>
<li>Escobar o dente</li>
</ul>
E nas listas de definições, usamos as tags <dl>, <dt> e <dd>, sendo a <dl> para criar a lista,
<dt> para criar o termo e <dd> para criar a definição do termo
<dl>
<dt>HTML</dt>
<dd>Linguagem de programação para criação de sites</dd>
</dl>
========================================================================
LINKS E ÂNCORAS EXTERNOS EM HTML
Para criar um link dentro de um texto em html é simples, basta usar a tag <a> e dentro de
href=”” colocar o link que você deseja que entrem
<p>Você pode acessar meu twitter clicando aqui: <a href="https://twitter.com/neorobottt">
neorobottt</a></p>
Dois comandos que ajudam muito na navegação de um site são os comandos target=”_blank” e
rel=”external”, que abrirá o link externo em uma aba diferente da do seu site
<p>Você pode acessar meu twitter clicando aqui: <a href="https://twitter.com/neorobottt"
rel="external" target="_blank">neorobottt</a></p>
========================================================================
LINKS E ÂNCORAS INTERNOS EM HTML
PAG 01 (OS DOIS ARQUIVOS ESTÃO NA MESMA PASTA)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>LINKS E ÂNCORAS</title>
</head>
<body>
<p>Você pode acessar meu twitter clicando aqui: <a href="https://twitter.com/
neorobottt" rel="external" target="_blank">neorobottt</a></p>
<p>Você está na primeira página, para entrar na segunda página, clique aqui: <a href="
PAG02.html" rel="next">ir para segunda página</a></p>
</body>
</html>
PAG 02 (OS DOIS ARQUIVOS ESTÃO NA MESMA PASTA)

<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>LINKS E ÂNCORAS</title>
</head>
<body>
<p>Você pode acessar meu instagram clicando aqui: <a href="https://www.instagram.com/
murillss/" rel="external" target="_blank">murillss</a></p>
<p>Você está na segunda página, para entrar na primeira página, clique aqui: <a href="
LINKS E ANCORAS.html" rel="prev">Voltar para a primeira página</a></p>
</body>
</html>
Para o mecanismo de busca do google, é sempre importante usar o rel com um valor semântico.
Existe até mesmo o rel=”nofollow” que basicamente funciona para não se aliar à um
patrocinador. Existe também o target=”_self” que basicamente funciona para dizer que o link
não abrirá uma nova aba
========================================================================
LINKS PARA DOWNLOAD EM HTML
Para fazer downloads através de links, basta usar os seguintes comandos:
download=”NOME DO ARQUIVO E SUA EXTENSÃO”
type=”application/EXTENSÃO”
<p>Link para dowload <a href="downloads/internet.pdf" download="internet.pdf" type="applica
tion/pdf" target="_blank">pdf livro 01</a></p>
<p>Link para dowload <a href="downloads/internet.zip" download="internet.zip" typ
e="application/zip" target="_blank">zip livro 01</a></p>
(usei o target=”_blank” para fazer o download sem sair da página principal)
========================================================================
MIDIAS DINAMICAS EM HTML
Pensando nos diversos diferentes mecanismos de buscas, como celulares, tablets e
computadores, usamos as mídias dinâmicas para poder compensar a diferença de tamanho
entre as telas de cada dispositivo para isso usamos a tag <picture> e dentro dela usamos a tag
<source> com base no tamanho máximo das imagens escolhidas (escolhi 1000px, 700px e
300px, mas usaremos sempre aumentando 50px em cada imagem)
<picture>
<source media="(max-width: 750px)" srcset="imagens/paisagem300.jpg" type="image/jpg">
<source media="(max-width: 1050px)" srcset="imagens/paisagem700.jpg" type="image/jpg">
<img src="imagens/paisagem1000.jpg" alt="uma bela paisagem">
</picture>
No comando srcset devemos sempre colocar o nome da imagem que queremos que substitua a
anterior, e em type devemos sempre colocar o formato do arquivo
========================================================================
COLOCANDO AUDIOS EM SITES
Para colocar áudios em sites é simples, basta usar a tag <audio> além de adicionar o comando
controls (que criará um botão para controle do audio) e autoplay (que reproduzirá o áudio
automaticamente)
<audio src="Bad Ideas Distressed - Kevin MacLeod.mp3" controls></audio>
Outra opção, pensada em todos os tipos de dispositivos, fica assim:
<audio preload="auto" controls autoplay>
<source src="Bad Ideas Distressed - Kevin MacLeod.mp3" type="audio/mpeg">
<source src="Bad Ideas Distressed - Kevin MacLeod.ogg" type="audio/ogg">
<source src="Bad Ideas Distressed - Kevin MacLeod.wav" type="audio/wav">
<p>Não foi possivel rodar o audio, <a href="Bad Ideas Distressed - Kevin MacLeod.mp3"
type="application/mpeg" download="Bad Ideas Distressed - Kevin MacLeod.mp3" target="_blank"
rel="external">download</a> para instalar em formato .mp3</p>

</audio>
O comando preload no começo do código serve para o carregamento dos áudios no site, sendo de
forma mais rápida (com menos informação (auto)) até a mais devagar (com mais
informação(metadata)) mas recomenda-se usar sempre em “auto”
========================================================================
COLOCANDO VIDEOS EM SITES
Para colocar um vídeo em um site é simples, basta usar a tag <video>, além do width que define
o tamanho do vídeo na tela
<video src="Video-mp4.mp4" width="700" controls></video>
Outra opção, pensada em todos os tipos de dispositivos, fica assim:
<video width="700" poster="poster.jpeg" controls>
<source src="Video-mp4.mp4" type="video/mp4">
<source src="Video-mkv.mkv" type="video/mkv">
<p>Não foi possível reproduzir o video, <a href="Video-mp4.mp4" target="_blank"
rel="external" download="Video-mp4.mp4" type="application/mp4">download</a></p>
</video>
Sendo poster um comando que coloca uma imagem que desaparece quando o video é
reproduzido
E para incorporar vídeos externos em seu site, basta entrar no youtube, escolher ou upar o video
desejado, clicar em compartilhar e selecionar o botão incorporar, assim será gerado um código
de html que já poderá ser colocado em seu site
========================================================================
COMEÇANDO COM CSS
Começando com o código de CSS interno, temos que colocar uma tag <style> dentro da head do
código html, aqui estão alguns exemplos de definições
<title>Começando com CSS interno</title>

<style>
body {
background-color: rgb(94, 94, 255); /* define a cor de fundo do site*/
line-height: 20px; /* define o tamanho das linhas de todo o body*/
}
h1 {
color: red; /* define a cor do texto em todos os h1*/
}
h2 {
color: blue; /* define a cor do texto em todos os h2*/
}
p {
text-align: justify; /* alinha o texto de todos os paragrafos*/
}
</style>
Já para CSS externo, basta criar um arquivo com extensão .css e linka-lo nos arquivos
desejados, da seguinte forma:
MAIN (EM HTML)
<!DOCTYPE html>
<html lang="pt-br">
<head>
<link rel="stylesheet" href="style.css"> 
<title>Começando com CSS externo</title>
</head>
<body>
<h1>Capitulo 1</h1>
<h2>Capitulo 1.1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus voluptate a<p>
<h2>Capitulo 1.2</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam, obcaecati qui. <p>
</body>
</html>
STYLE (EM CSS)

@charset "UTF-8";
body {
background-color: rgb(159, 159, 255);
font-size: 20px;
}
h1 {
color: darkblue;
}
h2 {
color: darkred;
}
p {
text-align: justify;
}
É sempre recomendável colocar o comando @charset “UTF-8”; no começo dos códigos em css
para sempre ter a mesma criptografia
Em css também há a hierarquia de códigos, ou seja, sempre será priorizado os códigos em style
da seguinte maneira:
1. Inline
2. Internos
3. Externos
========================================================================
PSICOLOGIA DAS CORES
As cores passam emoção para o subconsciente das pessoas, mesmo que na maioria dos casos
isso não seja feito de forma totalmente consciente. Percebemos as cores e sentimos a sua emoção
mesmo sem ter a plena certeza de que alguém usou a psicologia das cores para modelar um site
ou produto.

<h2 style="background-color: blue; color: white;">Exemplo de cores</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit, reprehenderit tempore re
pellat tenetur facere minus nulla id eligendi, voluptate ducimus corrupti blanditiis recus
andae laboriosam perspiciatis. Tempore earum veniam iure eligendi.</p>




<h2 style="background-color: #0000ff; color: #ffffff;">Exemplo de cores</h2>


<h2 style="background-color: rgb(0,0,255); color: rgb(255, 255, 255);"> Exemplo de
cores</h2>


<h2 style="background-color: hsl(240, 100%, 50%); color: hsl(0, 0%, 100%);"> Exemplo de
cores</h2>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Velit, sit quos nostrum accusa
ntium porro quod nulla dolorem. Corrupti repudiandae laboriosam eligendi reprehenderit, la
borum, magni, tenetur facere atque deleniti aspernatur perspiciatis?</p>
========================================================================
O CÍRCULO CROMÁTICO
Para formar uma harmonia entre as cores, usamos o círculo cromático, como o a seguir:
As CORES QUENTES E FRIAS representam a divisão do circulo
Já nas CORES COMPLEMENTARES, temos as que mais apresentam contraste entre si
As CORES ANÁLOGAS são as vizinhas entre si

CORES ANÁLOGAS MAIS UMA COMPLEMENTAR
CORES ANÁLOGAS RELACIONADAS
CORES INTERCALADAS
CORES TRIÁDICAS
CORES EM QUADRADO
CORES TETRÁDICAS
MONOCROMIA
Um site muito recomendado para fazer o obter as cores do círculo cromático de forma fácil é o
adobe color, que já mostra todos os tipos de formas mostradas acima. Além do modo de
obtenção de cores a partir de uma imagem, sugestões de paletas de profissionais e muito mais.
Outra recomendação é o paletton (que possui um exemplo prático das cores montadas em um
site (colormind é uma alternativa)) e o coolors (uma ótima sugestão de paletas prontas).
========================================================================
GRADIENTE EM CSS
Para fazer um estilo gradiente de cores em css, basta usar o seguinte comando:
background-image: linear-gradient(to right, red, blue);
Sendo os comandos dentro dos parênteses alteráveis da maneira desejada. Como exemplo:
 to left (esquerda)
 to top (cima)
 to bottom (baixo)
 to bottom right (a partir da diagonal direita)
 to bottom left (a partir da diagonal esquerda)
Seguindo o comando acima, o site ficará da seguinte maneira:
Mas para usar os comandos to top e top bottom, deve-se criar um comando global (usando *) e
dentro dele, colocar height 100%, para assim poder fazer a mistura de cor adequadamente
========================================================================
APRENDENDO COM EXEMPLOS EM CSS
Definir uma fonte:
font-family: Arial, Helvetica, sans-serif;
Definir borda de uma box:

border-radius: 10px;
Definir margem (para sempre se ajustar mesmo com a mudança de tamanho da guia):
margin: auto;
Definir largura entre o texto e a box:

padding: 10px;
Definir sombra de linhas e box:

text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.61);
box-shadow: 5px 5px 15px #d3a67fd2;
Definir alinhamento do texto:

text-align: center;
Definir transformação de texto (letras maiúsculas, capitalizar e etc.)

text-transform: uppercase;
Definir o esquema da fonte (mais claro, normal, negrito e mais que negrito):
font-weight: bold;
Definir o estilo da fonte (itálico ou oblique(um pouco mais que itálico)):

font-style: italic;
Definir a “decoração” do texto (sublinhado):

text-decoration: underline;
========================================================================
CATEGORIAS DE FONTES
Ao invés de colocar diversas linhas definindo o estilo dos textos, normalmente usa-se os
shorthand fonts, seguindo a seguinte regra:
font style  font weight  font size  font family
Como no exemplo:
font: italic bolder 3em 'Work Sans', sans-serif;
E para importar uma fonte, é muito recomendado usar o Google Fonts, dentro dele há uma
opção que já inclui a importação para CSS. E quando não tiver uma fonte no Google Fonts,
basta fazer o download no Da Font e colocar os arquivos dentro da pasta onde se encontra o
arquivo html, assim basta usar o seguinte comando:
@font-face {
font-family: 'Cherry Blue';
src: url('Cherry Blue.ttf') format('truetype');
}
Dessa forma, basta usar o comando font-family e colocar o nome definido acima
Site recomendados para descobrir fontes em imagens:

 What Fonts
 Font Squirrel
 My Fonts
========================================================================
ALINHAMENTO DE TEXTO EM CSS
Para dar recuo à um parágrafo basta usar o seguinte comando:
text-indent: 20px;
E para alinhar o texto do jeito atual (antigamente era apenas <center>) basta usar o seguinte
comando:
text-align: center; /* Para alinhar no centro*/
text-align: justify; /* Para justificar*/
text-align: end; /* Para alinhar no final da linha*/
text-align: start; /* Para alinhar no começo da linha*/
text-align: right; /* Para alinhar na direita*/
text-align: left; /* Para alinhar no lado esquerdo*/
text-align: center; /* Para deixar no centro*/
========================================================================
USANDO O ID E CLASS EM CSS
A diferença entre uma class e um id, é que a id serve apenas para uma única “linha” sendo
utilizada apenas uma única vez com o mesmo nome. Diferentemente do class, que podemos usar
diversas vezes em diversas linhas diferentes com o mesmo nome.
Para definir um id, basta colocar o comando id="nome" dentro da tag desejada, para assim,
usar uma style apenas nesse id
Para definir uma class é da mesma maneira, apenas usar o comando class="nome"
Importante:
Em HTML é id = em CSS é #
Em HTML é class = em CSS é .
Exemplo id:
EM HTML
<h1 id="principal">Criando sites com HTML e CSS</h1>
EM CSS
h1#principal {
text-align: center;
color: rgb(0, 0, 0);
}
Exemplo class:
EM HTML:
<h2 class="basico">HTML básico</h2>
EM CSS:
.basico {
color: brown;
}
========================================================================
PSEUDO CLASS E PSEUDO ELEMENTOS EM CSS
Para usar uma pseudo class usamos o comando : no CSS em conjunto com a tag <div>. As
pseudo classes servem para definir um estado da tag. Sendo assim temos o :hover por exemplo,
que quando o mouse for passado por cima da característica definida, ocorrerá algo definido
dentro do hover em CSS.
Como no exemplo abaixo (HTML e CSS):
<div>01</div>
<div>02</div>
<div>03</div>
div:hover {
background-color: yellow;
}
Sendo assim, sempre que o usuário passar o mouse por cima do texto definido pelo hover, ficará
amarelo.
Os pseudos elementos são usados para adicionar ou remover elementos usando CSS sem
interferir no HTML, sendo assim usamos :: para definir os pseudos elementos. Como exemplo
temos o ::after, que adiciona um elemento no final do código descrito do HTML. Exemplo:
a::after {
content: "\002D";
}
Entre esses, há diversas outras pseudo-classes e pseudo elementos, no site da W3 há uma lista
completa com todos eles.
========================================================================
MODELO DE CAIXAS EM CSS E HTML
O box size em CSS funciona como uma forma de organização do código em CSS e HTML, sendo
assim, podemos ter diversas “boxes” umas dentro das outras.
As boxes funcionam como uma caixa envolta do elemento, tendo também as bordas das boxes,
chamadas normalmente de border, sendo assim temos diversos comandos, como:
 Padding (para ajustar o preenchimento da box e aumentar sua distância entre o
elemento)
 Margin (para ajustar a margem entre as boxes)
 Outline (para ajustar o contorno envolta das boxes)
Existem dois tipos de caixa, sendo a box-level e a inline-level, tendo funções e categorias
diferentes. Sendo as características da box-level:
 Começa sempre em uma nova linha
 Sempre ocupa a largura total da tela da aba do navegador
 No HTML5 usa-se a tag <div> para criar uma box-level
Sendo as características da inline-level:
 Não começa em uma nova linha, dando o seu nome (mesma linha)
 Continua o conteúdo sem ocupar a largura total da tela do navegador
 No HTML5 usa-se a tag <span> para criar uma inline-level
Há diversas tags além do <div> e do <span> que

apresentam uma caixa, sendo essas ao lado  
Comandos de definição importantes de boxes:

height: 240px; /*DEFINE O TAMANHO DA ALTURA DA BOX*/
width: 240px; /*DEFINE O TAMANHO DA LARGURA DA BOX*/
background-color: blue; /*DEFFINE A COR DE FUNDO DA BOX*/
border-style: solid; /*DEFINE O ESTILO DA BORDA DA BOX*/
border-color: blue; /*DEFINE A COR DA BORDA DA BOX*/
border-width: 10px; /*DEFINE A LARGURA DA BORDA DA BOX*/
padding-left: 5px; /*DEFINE A PADDING DA ESQUERDA*/
padding-bottom: 10px; /*DEFINE A PADDING DE BAIXO*/
Entre o border-style, existe diversas configurações, como:
 Ridge (sendo um estilo de borda 3D)
 Groove (sendo um estilo de borda 3D ao contrário do Rigde)
 Outset (sendo um estilo de borda 3D apenas na direita)
 Inset (sendo um estilo de borda 3D apenas na esquerda)
 Double (sendo um estilo de borda duplo)
 Dotted (sendo um estilo de borda pontilhada)
 Dashed (sendo um estilo de borda tracejada)
Para usar o comando short-hand das borders, basta seguir a ordem: width  style  color
Como no exemplo a seguir:
border: 10px dashed blue;
O comando short-hand do padding, usa-se a ordem: top  right  bottom  left

padding: 10px 10px 10px 10px;
Sendo o mesmo para:
padding: 10px;
O comando short-hand do margin, usa-se a ordem: top  right  bottom  left

margin: 20px 10px 20px 10px;
E para deixar a box centralizada no meio da aba não importando o tamanho da aba, usa-se:
margin: 20px auto 20px auto;
O comando short-hand do Outline, usa-se a ordem: width  style  color

outline: 5px solid black;
Para criar uma sombra ao redor da box, basta usar o comando box-shadow, seguindo a ordem:
1. Valor = sombra na esquerda (negativo) e sombra na direita (positiva)
2. Valor = sombra em cima (negativo) e sombra embaixo (positiva)
3. Valor = espalhamento da sombra (apenas em positivo)
4. Valor = cor da sombra

Curso em Video HTML e CSS

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Curso em Video HTML e CSS

Enviado por

Direitos autorais:

Formatos disponíveis

CURSO EM VIDEO HTML E CSS

Existem alguns outros símbolos que podem ser exibidos

Para achar mais símbolos: ENTRE AQUI

Já para adicionar emojis ao seu site, acesse o site

Para achar alguns favicons já prontos: iconarchive

PAG 02 (OS DOIS ARQUIVOS ESTÃO NA MESMA PASTA)

STYLE (EM CSS)

Já nas CORES COMPLEMENTARES, temos as que mais apresentam contraste entre si

As CORES ANÁLOGAS são as vizinhas entre si

CORES ANÁLOGAS RELACIONADAS

Definir borda de uma box:

Definir largura entre o texto e a box:

Definir sombra de linhas e box:

Definir alinhamento do texto:

Definir transformação de texto (letras maiúsculas, capitalizar e etc.)

Definir o estilo da fonte (itálico ou oblique(um pouco mais que itálico)):

Definir a “decoração” do texto (sublinhado):

Site recomendados para descobrir fontes em imagens:

Há diversas tags além do <div> e do <span> que

Comandos de definição importantes de boxes:

O comando short-hand do padding, usa-se a ordem: top  right  bottom  left

O comando short-hand do margin, usa-se a ordem: top  right  bottom  left

O comando short-hand do Outline, usa-se a ordem: width  style  color

Você também pode gostar