À partir de hoje, pôr um comentário a cada nova configuração.
Margem x Padding
Margem: Espaço (distância) localizado fora do objeto.
Padding: Espaço (distância) localizado dentro do objeto; É como se fosse uma margem interna.
Por exemplo, se meu objeto é uma div e dentro dele eu ponho um texto e configuro “padding-left:10px;”, meu texto ficará 10px afastado da margem esquerda da Div. É um tipo de margem dentro da div, e funciona do mesmo modo que “margin”.
08/05/2015
Fazer o exercício da penúltima aula, ao contrário:
12/05/2015
CSS:
Para configurar vários id’s ao mesmo tempo, basta seguir o exemplo:
#h1,#h2,#h3{
}
Para alinhar texto pelo css, usa-se :
Text-align:center;
No caso de pôr link de redirecionamento numa imagem, por exemplo, usa-se uma tag para que, quando o mouse pousar sobre a imagem, apareça um texto dizendo do que se trata.
Exemplo:
<a href=”link de redirecionamento” title=”o que se trata o link/texto aleatório/título/etc;”>
<img src=”url da imagem” width=”largura da imagem” height=”altura da imagem”>
</a>
18/05/2015
HTML:
<hr> = Cria uma linha.
Atributos: size; width; align;
(alterações disponíveis no primeiro arquivo de html)
Veja:
Também é possível acrescentar cor:
<SUP> </SUP>: texto sobrescrito.
<SUB></SUB>: texto subscrito.
(alterações disponíveis no primeiro arquivo de html)
Exemplo:
Atributo para img:
“title=” – determina um texto a ser exibido ao colocar-se o mouse sobre a imagem.
“Align=”- usa-se “center”, “right” ou “left”; alinha imagem com texto;
#id= Nome da div.
.class= configuração conjunta; usa-se para configurar duas ou mais coisas de modo igual, porém mantendo suas características; uma classificação, espécie, etc;
No html:
<body>
<div id=”a” class=”ex”>
</div>
</body>
No CSS:
.ex{ background: #FFF;
}
Para criar lista:
<ul>...</ul> = lista não ordenada.
<ol>...</ol> = lista ordenada.
<li></li>=tag da lista;
Exemplo:
<ul>
<li> Menu </li>
<li> Galeria </li>
<li> Contato</li>
</ul>
Veja:
Exemplo, para criar menus:
<ul>
<li> <a href=”link”>Menu</a></li>
<li> Galeria </li>
<li> Contato</li>
</ul>
Ele ficará assim:
· Menu
· Galeria
· Contato
Configurando no CSS:
Para que fique sem aquela “bolinha”, usa-se:
Ul{List-style: none;
}
Para configurar “<li>” no “<ul>”:
ul li{ float: left;
}
Configuração:
ul{ list-style:none;
} <!—a lista fica sem as “bolinhas”--!>
ul li{ float: left; margin-right: 10px;
}<!—a lista fica na horizontal, e separada--!>
ul li a{ text-decoration: none;
}<!—o link fica sem decoração (não sublinhado) --!>
Para alterar a fonte, configura-se o “a”.
Exemplo:
ul li a{ text-decoration: none; color: #FFF; font-family: ravie;}
Os exercícios acima podem ser conferidos na pasta: CSS/Aula 10 CSS
Para alterar o texto quando passamos o mouse sobre ele, usa-se:
ul li a:hover{ color: #B0AFE8; font-size: 30px;
}
O texto acima muda de cor e tamanho.
1 (Mouse sobre "Menu")
21/05/2015
Para limpar a configuração do navegador, usa-se:
html,body{ padding:0px;
margin: 0px;
border: 0 px;
} <!—Assim ele fica sem margem em volta--!>
Ex.:
Para que a letra não fique bugada, usa-se uma metatag.
Dentro de head:
<meta charset=”utf-8”/>
Para criar uma caixa de pesquisa, usa-se a tag <input/>:
<input type="text" placeholder="Pesquise aqui"/>
A tag acima é do tipo “texto”; “placeholder” define o que estará escrito dentro da caixa de pesquisa.
No html 5, não precisa fechar uma tag única; no html 4, fecha-se assim:
<img/>
Antigamente, os sites eram em formato Flash; A Apple e o Android propôs à Adobe uma melhora, que foi recusada. Então, passou-se a utilizar html 5.
O html 5 foi finalizado em Dezembro de 2014, após 4 anos de criação.
Devido ao html 5, o Google precisou atualizar-se.
No html 5, algumas novas tags foram criadas, para facilitar o trabalho do programador.
Para desenvolver um site em html 5, deve-se abrir a seguinte tag antes de <html>:
<!doctype html>
A tag de cabeçalho (cabeça) é:
<header>
Menu:
<nav>
*De “navigation”, “navegação”;*
Rodapé:
<footer>
Conteúdo:
<section>
Ainda no conteúdo:
<article>
<aside>
Quando se faz um site, há vários “macetes”; O Google tem um programa que procura os endereços, e ele entende que o nome da empresa é o que está dentro de <h1></h1>. O que estiver dentro de <p></p>, é entendido como a descrição do site. E, ainda, existe a metatag keywords, na qual você inclui palavras chave para a pesquisa.
Para pôr vídeo no html:
<video src=”#” controls/>
E se colocar apenas autoplay o vídeo começa sozinho:
<video src=”#” controls autoplay/>
(wmv não funciona; o ideal é mp4)
E música:
<audio/>
27/05/2015
Abre css, e configura a tag img:
img{
position: absolute;
}
Assim, a imagem ficará naquele lugar, não importa o que aconteça.
Se usar:
img{
position: fixed;
}
Um fica fixo dentro do outro.
11/06/2015
Formas de configurar CSS:
Externa: É a que aprendemos até o momento.
Interna: É quando se abre uma configuração dentro do html. E só configura aquele arquivo. Ex.:
