Capítulos 20 a 40
O CSS funciona em cascata. Regras gerais (ex: no body) se aplicam a todos os elementos, a menos que haja uma regra mais específica.
body {
color: blue; /* Tudo azul */
}
h1 {
color: red; /* h1 fica vermelho, sobrescreve azul */
}
Texto de parágrafo. Observe a herança de cor.
O CSS pode ser adicionado a documentos HTML de 3 maneiras: Inline, Interno, ou Externo. Manter o CSS em arquivos separados costuma ser a forma mais organizada.
<h1 style="color:blue;">Título Azul</h1> <p style="color:red;">Texto Vermelho</p>
(Demonstração simples de inline vs. interno)
CSS interno é definido dentro da tag <style> na seção <head> de uma página, afetando apenas aquele HTML.
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
Status: CSS Interno no <head>
A tag <a> define um hyperlink. Sintaxe:
<a href="url">texto do link</a>
<a href="https://www.w3schools.com/">Visite W3Schools.com!</a>
targetO target define onde abrir a página vinculada:
_self, _blank, _parent, _top.
<a href="https://www.w3schools.com/" target="_blank">Abrir em nova aba</a>
URLs absolutas contêm o endereço completo (ex: https://www...).
URLs relativas usam caminhos locais (ex: /pasta/arquivo.html).
<a href="https://www.w3.org/">W3C</a> <a href="https://www.google.com/">Google</a>
<a href="html_images.asp">HTML Images</a> <a href="/css/default.asp">CSS Tutorial</a>
Coloque <img> dentro de <a> para criar um link com imagem clicável.
<a href="default.asp">
<img src="Imagens_html/CssAnime.jpg" alt="HTML tutorial" style="width:190px;height:190px;">
</a>
Use mailto: dentro de href para abrir o programa de e-mail do usuário:
Para usar um botão como link, podemos usar JavaScript no evento onclick:
<button onclick="document.location='default.asp'">HTML Tutorial</button>
O atributo title mostra informações extras ao passar o mouse sobre o link.
Exemplos de uso de URL absoluta e relativa.
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a> <a href="/html/default.asp">HTML tutorial</a> <a href="default.asp">HTML tutorial</a>
Por padrão, links não visitados são azuis, visitados são roxos, e ativos são vermelhos. Podemos mudar isso com CSS nos seletores a:link, a:visited, a:hover e a:active.
a:link {
color: green;
}
a:visited {
color: pink;
}
a:hover {
color: red;
text-decoration: underline;
}
a:active {
color: yellow;
}
Podemos estilizar um <a> para parecer um botão usando CSS (background, padding, etc.).
a {
background-color: #f44336;
color: white;
padding: 15px 25px;
text-decoration: none;
display: inline-block;
}
a:hover {
background-color: red;
}
target (Detalhes)Reforço: _self, _blank, _parent, _top.
<a href="https://www.w3schools.com/" target="_blank">Visite W3Schools!</a>
Crie marcadores com id e links com href="#id" para navegação interna na mesma página.
<h2 id="C4">Capítulo 4</h2> <a href="#C4">Ir para o Capítulo 4</a>
<img> (Inserção de Imagem)A tag <img> exibe uma imagem. É vazia (não tem fechamento) e utiliza atributos como src e alt.
<img src="italia.jpeg" alt="Italian Trulli">
<img src="GarotaCasaco.jpeg" alt="Garota casaco">
Use background-image no CSS para definir uma imagem de fundo em body ou em outro elemento.
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-size: cover;
}
Conteúdo com fundo...
id no HTMLid define um identificador exclusivo para um elemento. Pode ser usado para CSS, JS e marcadores.
#myHeader {
background-color: lightblue;
...
}
.city {
background-color: tomato;
...
}
iframe<iframe> permite incorporar outra página dentro da sua página.
Use src para a URL, height, width, e title por acessibilidade.
<iframe src="https://mythicalstress.com/" title="Exemplo"
style="border:none; width:300px; height:200px;"></iframe>
<script><script> define scripts JavaScript. Pode ser interno (<script> ... </script>) ou externo (<script src="arquivo.js">).
<script>
document.getElementById("demo").innerHTML = "Olá JavaScript!";
</script>
<noscript>Seu navegador não suporta JavaScript</noscript>
Conteúdo inicial
Você concluiu 40 capítulos de HTML e CSS básicos e intermediários! Aprofunde-se em JavaScript, frameworks, bibliotecas, etc.
<!-- Nada como continuar aprendendo! --> <!-- Fim do Capítulo 40 -->