0% acharam este documento útil (0 voto)

25 visualizações22 páginas

COMANDOS HTML E CSS

O documento apresenta uma lista abrangente de comandos HTML5 e CSS, incluindo suas definições e usos. Ele também discute comandos obsoletos e fornece dicas sobre formatação e manipulação de elementos na web. Além disso, menciona boas práticas e características do HTML5, como a definição de metadados e a estrutura básica de um documento.

Enviado por

figayab841

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

25 visualizações22 páginas

COMANDOS HTML E CSS

Enviado por

figayab841

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 22

COMANDOS HTML E CSS

ESCOLA DE CSS HTML DA W3C: https://www.w3schools.com/css/css_examples.asp

Estudar sobre oparonizador de caracter: charset=utf-8

COMANDOS HTML 5:
: Define um comentário;

<!DOCTYPE>: Define o tipo de documento; (No HTML 4 existiam três (3)

diferentes tipos de doctype, mas no HTML 5 temos apenas um (1) tipo <!
DOCTYPE HTML>. É aqui que o navegador entende o tipo de documento e
como ele deve interpretar as tags nele contidas.)

<a> Define um hyperlink;

<abbr>: Define uma abreviação

<address>: Define um endereço. (Passa a ser tratado como uma seção);

<area>: Define uma área dentro de um mapa de imagem;

<b>: Define um texto em negrito; (Possui o mesmo nível semântico que um

SPAN, e também o estilo de negrito no texto. Contudo, ele não dá nenhuma
importância para o texto marcado com ele.)

<base>: Define uma base URL para todos os links da página;

<bdo>: Define a direção do texto apresentado;

<blockquote>: Define uma citação longa;

<body>: Define o corpo da página;

<br>: Insere uma quebra de linha simples;

<button>: Define um botão de comando;

<caption>: Define o "caption" de uma tabela;

<cite>: Define uma citação;

<code>: Define o código texto do computador;

<col>: Define os atributos da coluna da tabela;

<colgroup>: Define um grupo de colunas da tabela;

<dd>: Define uma descrição de definição;

<del>: Define um texto deletado;

<dfn>: Define um termo de definição;

<div>: Define uma seção no documento;

<dl>: Define uma lista de definição;

<dt>: Define um termo de definição;

<em>: Define um texto em ênfase;

<fieldset>: Define um conjunto de campos (fieldset);

<form>: Define um formulário;

<h1> até >h6>: Define do cabeçalho 1 até o cabeçalho 6;

<head>: Define uma informação sobre o documento. (Não aceita mais

elementos Child como filho);

<hr>: Define uma regra/linha horizontal. (Tem o mesmo nível que um

parágrafo, mas também é utilizado para fazer separações e quebras de
linha);

<html>: Define um documento html;

<i>: Define um texto em itálico; (Possui o mesmo nível semântico que um

SPAN. O texto continua sendo itálico e para usuários de leitores de tela, a
voz utilizada é modificada para indicar ênfase. É de grande valor e utilidade
para marcar, termos técnicos, termos em outras linguagens etc.)

<iframe>: Define uma linhas sobre a janela (frame);

<img>: Define uma imagem;

<input>: Define um campo de inserção;

<ins>: Define um texto inserido;

<kbd>: Define um texto do teclado;

<label>: Define uma "label" para o formulário;

<legend>: Define um título para os campos (fields);

<li>: Define os itens da lista;

<link>: Define uma referência;

<map>: Define uma imagem de mapa;

<menu>: Define uma lista de "menus";

<meta>: Define informações meta;

<noscript>: Define uma seção noscript;

<object>: Define um objeto incorporado;

<ol>: Define uma lista ordenada;

<optgroup>: Define um grupo de opção;

<option>: Define uma opção em uma lista suspensa (drop-down list);

<p>: Define um parágrafo;

<param>: Define um parâmetro para determinado objeto;

<pre>: Define um texto pré-formatado;

<q>: Define uma citação curta;

<s>: Define um texto que não é mais correto.

<samp>: Define um código de amostra;

<script>: Define um script;

<select>: Define uma lista selecionável;

<small>: Define um pequeno texto;

<span>: Define uma seção no documento;

<strong>: Define um texto forte (similar ao negrito);

<style>: Define um estilo;

<sub>: Define um texto subscrito;

<sup>: Define um texto sobrescrito;

<table>: Define uma tabela;

<tbody>: Define o corpo da tabela;

<td>: Define uma célula da tabela;

<textarea>: Define um área de texto;

<tfoot>: Define o rodapé da tabela;

<th>: Define o cabeçalho da tabela;

<thead>: Define o cabeçalho da tabela;

<title>: Define o título do documento;

<tr>: Define uma linha da tabela;

<ul>: Define uma lista desordenada;

<var>: Define uma variável;

NÃO ESTÁ MAIS EM USO (funciona aindamas é recomendável usar

os novos comandos ou CSS)

<acronym> Define siglas em HTML 4.01. (Desenvolvedores preferem

utilizar a tag <abbr>);
<applet> Define um miniaplicativo incorporado. (Ficou obsoleto em função
da tag <object>);

<basefont> Define as propriedads da font padrão para todo o texto do

documento. (Apenas efeito visual);

<big> Usado para tornar o texto maior. (Apenas efeito visual);

<center> Usado para alinhar texto e conteúdo no centro. (Apenas efeito

visual – Usar só no CSS);

<dir> Define a lista do diretório. (Ficou obsoleto em função da Tag <ul>);

<font> Especifica o tipo de fonte, tamanho, e cor do texto. (Apenas efeito

visual – Usar só no CSS);

<frame> Define uma janela particular dentro de um conjunto de "frames".

(Fere princípios de usabilidade e acessibilidade);

<frameset> Define um conjunto de frames organizado por múltiplas

janelas.(Fere princípios de usabilidade e acessibilidade);

<noframes> Texto exibido para navegadores que não lidam com "frames".
(Fere princípios de usabilidade e acessibilidade);

<strike> Exibe texto rasurado. (Apenas efeito visual);

<tt> Define teletipo de texto. (Apenas efeito visual);

<u> Define sublinhado. (Apenas efeito visual);

<xmp> Define texto pré-formatado. (Ficou obsoleto em função da tag

<pre>);

Os nomes dos arquivos devem diferenciar. Pagina.html e Pgina.html são

diferentes.
Cada Tagé um comando que será interpretado pelo browser (por exemplo, a
tag
<b> é o comando para transformar o texto em negrito).
Arquivo Index.html: Normalmente, o arquivo index.htm é o arquivo default
dentro de um diretório. Quando indicamos um endereço (link) e não
especificamos um arquivo dentro de um diretório, o browser procura pelo
arquivo index.html.

<!DOCTYPE HTML>: Inicio do Codigo HTML 5: não se pode ter nada antes
dele.

Corrigir Caracteres Especiais – Erro de ortografia – Reconhecer a

página em Portugues – Ascento: Basta colocar esta tag no cabeçalho:
<meta http-equiv=”Content-Type” content=”text/html;
charset=iso-8859-1″>

Java no htmlApplet: Esta tag inclui um programa executável em Java na

página, os applets Java, como são chamados. São programas de
computador
acionados pelos documentos em HTML. Os applets são transferidos a partir
de um servidor Web para, em seguida, serem executados no
computador do usuário. Os applets Java são multiplataforma, isto é, eles
funcionam em PC, Macintosh, Sun, IBM ou Hewlett-Packard.
Esse tipo de independência de plataforma tem sido a razão de seu maior
sucesso.<br>: Break Line - Quebra de linha. Força o texto que o segue a
iniciar na próxima linha. É utilizado dentro de: cabeçalhos, elementos de
HTTP: HTTP é sigla de HyperText Transfer Protocol que em português
significa "Protocolo de Transferência de Hipertexto". É um protocolo de
comunicação entre sistemas de informação que permite a transferência de
dados entre redes de computadores, principalmente na World Wide Web
(Internet).

Titulos: <h6> a <h1> - são usadospara títulos e quanto mais importante o

texto maior tedeve ser.

formatação de caracteres, blocos, células de tabelas, itens de listas.

Comentar uma linha html:

<pre> texto com enter</pre>: ele mostra o texto exatamente como as

quebras de linhas que você fez no código fonte.

Movimentar texto na tela :<marqueebehavior="scroll" width="70%"> texto

</marquee>
P (Paragraph):– Parágrafo é usado para separar blocos de texto (geralmente
com o espaço de uma linha entre eles). É opcional
usar</p>. é utilizado dentro de: <body>, <form>, <blockquote>,
<center>, <li>, <dd>, <div>

Lista Não ordenada: LISTA

FACIL<ul><li>1</li><li>2</li><li>3</li></ul>

Boa fonte em CCS – Letra Bonita: font-family: "Lucida

Grande",Helvetica,Arial,Verdana,sans-serif;

Imprimir pagina com botão e Link no texto: <body><FORM><INPUT

TYPE="button" NAME="Button" VALUE="Imprimir esta página"
ONCLICK="window.print()"></FORM></body><br><br><body><A
HREF=JavaScript:window.print()> Imprimir esta página </a></body>

Voltar ou avançarUma Página: colocar o código dentro do button:

ONCLICK="window.history.go(-1)" . Avançar:
ONCLICK="window.history.go(1)".

Values:O atributo VALUE="texto" é o que apresenta a escrita na sua

superfície.

Radio Button:quando for colocar radio button todos devem conter o mesmo
nome: <input type="radio" name="sexo" value="m"
checked>Masculino<input type="radio" name="sexo"
value="f">Feminino<br>. Muda apenas o valor.

Abrir um musica no site:<embed src="1.mp3" width="300" height="50"

autostart="true" loop="true" hidden="true">

TH: table header: é a tag de cabeçalho: ex: <TABLE border="1">

<CAPTION align="top">Boletim</CAPTION> <TR> <TH>Aluno</TH>
<TH>Nota</TH> <TH>Situação</TH> </TR> <TR> <TD>Beltrano</TD>
<TD>8.5</TD> <TD>Aprovado</TD> </TR> <TR> <TD>Ciclano</TD>
<TD>4.0</TD> <TD>Reprovado</TD> </TR> </TABLE>

Onclik: onclick chamando um método de dentro de um link: <a href="#"

onclick="algoritmo()">Algoritmo</a></li>

Link com hint: <a href="#" title="moodle, gerador rapido java, php,
html">Outros</a>
Código para redirecionar a página: Colcoar dentro do head o seguinte
código: <meta http-equiv="refresh" content="2;
URL=http://www.google.com" />. Propriedades: atualizar, segundos de
espera, e URL de destino.

Iframe: criar uma pagina dentro de outra pagina: <iframe

width="500" height="500" src="http://www.cuiaba.mt.gov.br/"> </iframe>

Dar foco em um campo: <input type="password" name="senha"

size="20" maxlength="10" autofocus>

Campo Obrigatório: ao tentar gravar sem preencher o navegador dá uma

mensagem: (preencha este campo): <input type="text" name="nome"
size="40" maxlength="35" required><br>

Trocando as cores do link: <body link="red">

Impedindo que uma pagina seja copiada: <body onselectstart="return

false">
Movimentando, deslocar texto animado: <marquee behavior="scroll"
direction="up" scrollamount="2"> 
<img src="img\1.jpg" align="left">

<center> <i> Texto... </i> </center> </marquee>

Campo para escolha de Cor: <input type="color" name="cor"><br>

Campo data: - Abre um calendário: <input type="date" name="data"

min="2014-01-01" >

HTML 5: foi desenvolvido em 2012.

Eespecificando para o vanegar dor que português: <html lang = ”pt-br” >

<meta charset = “isso-8859-1”>.

No HTML 5 não precisa mais a fechar a meta tags

Comentário no HTML: <!-- Cabeçalho que guarda infomações sobre a

Pagina -->

Abrir Arquivo dentro da pagina: <object width="700" height="500"

data="Teste.pdf"> </object>

Icone: Colocar um ícone da pagina: <link rel="icon"

href="IMG/telefone3.jpg">
<span>: Define uma seção no documento; onde se pode aplicar os
recursos do css.

Link: Abrindo link em uma nova pagina: <a href="Ajuda.html"

target="_blank"> AJUDA </a>

Não aceita validações no formulário: <form novalidate>

Targe: Os Atributos _Target / _Self: podem ser usados dentro da tag

form para ser mandado para outra pagina para diferencias do Fram.

Não permite digitar números caracteres além do permitido: <input

type="text" name="nome" placeholder="22-22" size="40" maxlength="35"
pattern="[0-9]{2}-[0-9]{2}"><br> <br>.

Limite Minimo de caracteres: <input type="password" name="pw"

pattern=".{6,}" title="Six or more characters">

Atributos Globais: são aqueles que são suportados pelo HTM4 e HTML 5.
Por isso são globais

Title – hint: colocando uma legenda no link: <a href="teste.html"

title="isso aponta para a pagina 2.html"> Link para 2.html | </a>

DIV –Escondendo uma div na própria linha de comando: Divi

Escondida: <div id="div1" style="display:none;"> </div>

Hidden: atributo que esconde conteudo das tags: <p hidden>This

paragraph should be hidden.</p>

MULTIPLE.: Permite Selecionar mais de Dois Arquivos <br>: <input

type="file" multiple="multiple" size="50" value="selecione varios
arquivos">

Sandbox: permite ou Bloqueia as retrições dentro do iframe ou

dentro de outras tgags– tira toda a formatação do CSS que seria aberto
junto da pagina: <iframe sandbox name="iframeCentral" > </iframe>

<br>: significa: break Rows: quebra a linha.

NOVOS RECURSOS DO CSS3: Some of the most important CSS3 modules
are: Selectors; Box Model; Backgrounds and Borders; Image Values and
Replaced Content; Text Effects; 2D/3D Transformations; Animations;
Multiple Column Layout; User Interface.

DHTML: é um conjunto de tecnologia de deixa o HTML mais dinâmico .

CSS: folhas de estilo em cascata

CSS: pode formatar em forma individual ou em grupo.

Pode gaver formatação individual (Inline): Para formatação em

grupo

Estilo inline: <font style= "color:#F00; font-size:24px; font-

family:Georgia, 'Times New Roman', Times, serif"> R. Maravilhas fez
conosco o Senhor, exultemos de alegria! </font>

Estilo incorporado: colocar dentro do cabeçalho head: <style> <!-- p

{color:#F00;font-family:Arial;} </style> . Agora todos os <p>
receberão esta formatação.

Estilo Vinculado:

Div absoluta: cada posição recebe por coordenadas aboslutas fixas.

Z-index: Div atributo Z-index: digo qual é a ordem de visão das camadas

Escondendo uma div ou qualquer tag: <div style="visibility:hidden” >

Camada1 </div>

Link – tirar sublinhando de link no CSS: text-decoration:none;

Tag ao passar sobre o link: #menu li

a:hover{color:#F00;background:#FFF;display:block;font:18px arial} este
#menu é o ID de uma DIV.

Titulo de um link: <a href="#" title="Aqui vai as informações sobre o

link">.

Não mostra uma propriedade: #menu ul li a span{ display: none;

Margem: margin:auto; /MArgem Automatica/

Bordas: border: solid red 3px

Espaço – Ocupando todo o espaço em porcentagem: width:100%;

/*Vai ocupar todo os espaço disponibilizado na div etc..*/

Fonte: font-size:36px; font-family:Geneva, Arial, Helvetica, sans-serif;

Mostra Lista uma do lado da outra: display:inline-block; /*Mostra Um do

Lado do outros*/

Deixar negrito texto: font-weight: bold; ou normal: font-weight: normal;

Trocar cor da font: color: #CCCCCC;

Sublinhando, sublinhar no CSS: text-decoration: underline;

Centralizar um texto: text-align:center;

Espaçamento entre linhas: line-height: 50px;

Setando DIV Dentro de DIV no CSS: #paginaHome section

#paginaCentral{ comandos }

Fromantando bordas: tipo / cor / e grossura/ border: solid green 2px;

Tirando sublinhado do link: text-decoration: none; para coloar: text-

decoration: underline;

Colocando Sublinhado na hora de passar com o mouse: text-

decoration: underline;

Ao passar com mouse sobre o link: a:hover{ }

APLICA EM TODOS OS ELEMENTOS: * { margin:5px}

Formatando um paragrafo com duas classes: <p class="formatacao1

vermelho"> 6 - No ano de 1992 o professor Neri entrou na àrea de
Informática </p>

Comando InlineStyle: <font style= "color:#F00; font-size:24px; font-

family:Georgia, 'Times New Roman', Times, serif">: R. Maravilhas fez
conosco o Senhor, exultemos de alegria! </font>.

Cor de fundo muito bonita: background-color: #d0f0f6. Escurecer mais.

Margin Collapse: Top and bottom margins of elements are sometimes
collapsed into a single margin that is equal to the largest of the two
margins. This does not happen on left and right margins! Only top and
bottom margins! Ex: de uso: h1 { margin: 0 0 50px 0;}

CSS Padding: as propriedades de preenchimento CSS são usadas para

gerar espaço em torno do conteúdo. Ex: p { padding: 50px 30px 50px 80px;
}

Z-Index: A propriedade z-index especifica a ordem da pilha de um

elemento (qual elemento deve ser colocado na frente ou atrás dos outros).
Um elemento pode ter uma ordem de pilha positiva ou negativa. Ex: img
{ position: absolute; left: 0px; top: 0px; //Faz z-index: -1; }

Defina o espaço entre as células para 10 pixels: <table cellspacing =

"10">
Float: The float property specifies whether or not an element should float.
Ex: img {

float: right; margin: 0 0 10px 10px; }

Trocando a Cor do Form ao receber focus: input[type=text]:focus

{ background-color: lightblue; }

Transparente – opacidade: opacity: 0.6;

Back Graoud: definindo multiplos commando emu ma linha só:

#example1 {
background: url(img_flwr.gif) left top no-repeat, url(img_flwr.gif) right
bottom no-repeat, url(paper.gif) left top repeat;

-webkit-: O transform é uma ferramenta de CSS moderna. Ela permite fazer

zoom, dar perspectivas ou rodar elementos.
O sufixo -webkit- quer dizer que só os browsers que têm estrutura
do webkit é que vão usar/ler/aplicar essa regra.
Um exemplo que está na página da MDN e que faz rodar 5 graus um
elemento div:
Caixa de Sombra: box-shadow: 10px 10px; Este comando faz aparecer o
caixa de sombra atraz da div.

Deixando ela elíptica ou Canmto redonda: img { border-radius: 8px;

border-radius: 50%; }

Design web responsivo: O design web responsivo torna sua página da

web boa, se adapte em todos os dispositivos. O design web responsivo usa
apenas HTML e CSS. O design web responsivo não é um programa ou um
JavaScript.

O que é The Viewport: A viewport é a área visível do usuário de uma

página da web.

Fazer todas as divs do site fiquem responsivas: * { box-sizing:

border-box; }

Media Query: é uma consulta de mídia: A consulta de mídia é uma técnica

CSS introduzida no CSS3. Ele usa a regra @media para incluir um bloco de
propriedades CSS somente se uma certa condição for verdadeira. Ex:
@media only screen and (max-width: 500px) { body { background-color:
lightblue; } }

Imagem Responsiva: img { width: 100%; height: auto; }. OBS: Se a

propriedade de largura estiver definida para Width: 100%, a imagem será
sensível e aumentará e diminuirá aos er redimensionado o navegador.

Colcoar plano de fundo: <body background="img\folha.jpg">

Trocar Cor corpo inteiro do Texto: <body text="lime">

Esconde Barra de Rolagem: <body SCROLL="no">:

Texto com apenas uma linha – todo o texto a seguir ficará em

apenas uma linha: <nobr>

Esse é um texto longo mas como tem essa tag antes, ele não quebra de
jeito

nenhum, tendo que ficar rolando a página de um lado para o outro para
conseguir ler...

chato, n&atildeo? Esse é um texto longo mas como tem essa tag antes, ele
não quebra de jeito

nenhum, tendo que ficar rolando a página de um lado para o outro para
conseguir ler...

chato, n&atildeo?

</nobr>

Texto Animado – Passado d e um lado para o outro: <center> <hr

width="80%"> <marquee behavior="scroll" width="70%"> <font
size="5"> <b> Não esqueça de fazer backup de seus arquivos. </b>
</font> </marquee> <hr width="80%"> </center>

Linha vertical: <hr width="2" size="50">

Marcar, selecinar de amarelo um texto: <mark> Esta tag inclui um

programa executável em Java na página </mark>
Forma Certa de Endereço Quando a Imagem Está em Outra Pagina:
<a href=JavaScript:window.close()><img src="../IMG/1.jpg" width="125"
height="126"></a>
COMANDOS HTML: 15-11-2018

Estudar Sbre -webkit-transform: rotate(180deg); /* Safari */

transform: rotate(180deg); float:left;

Estudar este comando: max-width: 200px;

Colcoar no Crhome Extensão que descobre cor: - ColorZIla

https://www.tecmundo.com.br/google-chrome/43962-google-
chrome-5-extensoes-para-designers-e-desenvolvedores.htm

SITES COM EXCELENTES TEMPLATES PRONTOS: https://www.os-

templates.com/free-website-templates

Site com Templates: https://templated.co

Livro: “Parte do livro "HTML5 e CSS3: Domine a web do futuro."

CSS: colcoar borda tracejada baixo de uma tag <h1>: border-

bottom: 1px dashed #7E9F19;

margin: 0;

Cor Azul claro bonito: background-color: lightblue;

Colocando bordas quadradasem uma div: border: 1px solid black;

Espaçamento entre linhas: p.small { line-height: 0.7; } p.big { line-

height: 1.8; }

CSS: Colcoar ou tirar espaçamento entre as palavras: h1 { word-

spacing: 20px; }

Espaçameto entre linhs: p.small { line-height: 0.7; }

Colocar Espaço entre as Elementos, tags e não Linhas – Padding:
padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-
left: 80px;

Fixando uma Imagem de Background na ela: background-image:

url("../IMG/telefone.bmp"); background-repeat: no-repeat; background-
position: right top; margin-right: 200px; background-attachment: fixed;

Colocando borda arredonda em uma tag: p.round3 { border: 2px solid

red; border-radius: 12px; }

Mudar a cor de um texto: h1 { color: green; }

CSS Deixando palavra Maiúscula e Minúscula: p.uppercase { text-

transform: uppercase; } p.lowercase { text-transform: lowercase; }
p.capitalize { text-transform: capitalize; }

Recebendo Atributos, valores de mais de uma classe: <!-- Este

comando: "button button1": Significa que ele receberá valores das duas
Classes --> Ex: <button class="button button1">2px</button>

CSS Colcoar cor em um elemento: color: white;

CSS mudar tamanho d afonte de um elemnto: font-size: 16px;

Trocar cursor: cursor: pointer;

Alinahr objetos todos em uma linha: display: inline; /* Adicionamos tudo

apenas apenas essa linha */. Se não usar este atributo o navegador
interpreta em blocos um abaixo do outro.

Arredondar um elemento – Deixar com Cantos Redondos: border-

radius: 15px; Este exemplo serviu com botão.

CSS: deixar uma Imagem Responsiva: img { width: 100%; height:

100% ; }

CSS alinhamento de Texto: text-align: center; left / right

Atributo Position: STATIC: seria o mesmo que dizer que o elemento não
tem posição definida: .static { position: static; } / RELATIVE: relative se
comporta igualmente ao static, a menos que se adicione propriedades
extras no estilo do elemento: .relative1 { position: relative; } / FIXED:
/*Um elemento fixo - fixed - é posicionado relativamente ao "viewport", isso
significa que ele sempre ficará no mesmo lugar mesmo que haja rolagem
na página. Assim como o relative, as propriedades top, right, bottom e left
também são utilizadas .fixed { position: fixed; } ABSOLUTE: O elemento
com position absolute se referencia pelo ponto superior esquerdo do
elemento pai mais próximo que contenha também uma propriedade
position relative ou absolute. Usar com Div Dentro de Div: position:
absolute; bottom: 5px; right: 5px;

Alinha no rodapé – Footer: bottom: 0;

Z-index: Div atributo Z-index: digo qual é a ordem de visão das camadas –
Qual div vai primeiro.

CSS Box-Sizing: faz com que o elemento se adapte e encaixa dentro das
dimensões máximas que foi dado para aos eu tamamnho: atrvés do width e
Height. Pois, as bordas, margens etcc... Ficará incluído dentro do tamanho
do box: box-sizing: border-box; / content-box

CSS Outline – É usado para colcoar contorno em volta entorno do

elemento: exemplo de linha pontilhadas entorno do paragrafo p{border:
1px solid red; outline-style: dotted; outline-width: 5px; }

CSS colocar tamanho da Letra: font-size: 16px;

CSS – Aumenando um campo ao Receber o focu:

input[type=text]:focus { width: 100%; }

Tirando as Bordas de um elemento: border: none;

CSS Exemplo de formatação Inline: <p style="color:blue; font-

size:24px;"> Exemplo de formatação INLINE</p> / Por Grup de
Elementos: <font style= "color:#F00; font-size:24px; font-family:Georgia,
'Times New Roman', Times, serif"> R. Maravilhas fez conosco o Senhor,
<p> Paragrafo 1 </p> <p> Paragrafo 2 </p> <p> Paragrafo 3 </p>
</font>
CSS Padding: as propriedades de preenchimento CSS são usadas para
gerar espaço entorno interno dentro conteúdo – Entre a borda e o texto
interno será gerado uma grande bloco de espaçamento: textarea {width:
100%; height: 150px; padding: 30px 50px; }. OBS: não confundir com
margem que é o espaçamento fora do conteúdo.

Deixando um elemento transparente: opacity: 0.6;

Caracter especiais para dar um espaço no html:  

CSS: Ttag para justificar texto: text-align: justify; }

CSS: Remover sublinhado do link: a {text-decoration: none; }

Viewport: janela d exibição

O atributo “for”: faz um tipo de link entre a label e o input. Logo o for
tem que apontar para o ID do input. Exemplo: <label for="male">
Masculino </label> <input type="radio" name="gender" id="masculino"
value="Masculino"><br>

Div com formatação CSS Inline: <div class="col-sm-8"

style="background-color:lavenderblush;">.col-sm-8</div>

Cores em Ingles: Branco: White / Preto: Black / Vermelho: Red / Laranja: Orange /
Amarelo: Yellow / Verde: Green / Azul: Blue / Violeta: Violet / Cinza: Gray / Dourado: Gold /
Bege: Beige / Azul-marinho: Navy blue / Roxo: Purple / Rosa: Pink / Prata: Silver / Marrom:
Brown

Componente Data-Toggle: é um componente gatilho do javaScript

Grossura da linha – de uma lista por exemplo: line-height: 34px;

Abrir Animações – Banner – vídeo: <embed type="video/quicktime"

src="movie.mov" width="640" height="480"> - ATRIBUTOS: height: A
altura apresentada do recurso, em CSS pixels. Src: A URL do recurso que
está sendo incorporado. Type: O tipo MIME a ser usado para a seleção do
plug-in de instanciação. Width: A largura apresentada do recurso, em CSS
pixels.
Cor mais importante que outras- dar preferência: "!Important"
significa que esta cor é mais importante do que as outras: color:#fff !
important;

Margin Collapse: As margens superior e inferior dos elementos são às

vezes recolhidas em uma única margem que é igual à maior das duas
margens. Isso não acontece nas margens esquerda e direita! Apenas
margens superior e inferior! Ex: de uso: h1 {margem: 0 0 50px 0;}

Forma de recarregar apgina HTML: <li onClick="location.reload()" class="collapsed active">

Dar foco a um campo – jquery: $("#usr").focus();

Colocando bordas em vários tags table: .bordas tr td{ border:

solid 1px black }

CSS - Atribuindo para um conjuntos tags de atributos em no mesmo

comando: .bordas tr td{ border: solid 1px black }

Posicionar – alinhar elementos dentro de um div – Iline – Ou jogar par auma classe: <div
style="float:right;">

Limitar Tamanho máximo e qtde carcteres campo input: <input

size="20" maxlength="40" >

Esconde as Possiveis Barras laterais se o o elemnto for muito

grande: overflow: hidden;

Forma de repetir uma imagem somente vertical ou

horizontalmente: body { background-image: url("paper.gif");
background-repeat: repeat-y; ou background-repeat: repeat-x; }
22/12/2018

Escondendo e mostrando div: <div style="display: none;"> </dv> -

Mostrando: $('#calendario').show();

Diminuir delimitar ao aumentar tamanho do imut – usar o width

mesmo: <input type="text" class="form-control" name="end"
style="width:35%;/>

Aque X no final do alert do bootstrap de fechar o alerta ou modal:

Cor estilo desabilitado: #CCCCCC

Alinhando texto verticalmente e centralizado dentro da tabela: style="line-height: 40px; "

BootStrap: ícones de bloqueio: glyphicon glyphicon-ban-circle

Deixar um campo somente leitrua: <input type="text" name="country" value="Norway"

readonly><br>

Dar focu obrigatoriamente a um campo só com HTML: <input type="password"

name="senha" size="20" maxlength="10" autofocus><br>

Iframe: abrindo iframe cheia do mesmo tamanho da tela: <iframe id="content" src=""
width="100%" style="height:100vh;" allowtransparency="1" scrolling="auto"></iframe>