Noções Definições de CSS

Como construir Tráfego para o teu Site,
Ganhe dinheiro com o seu site.
Guia e dicas, experimente:
http://ganhar.noble7fix.com

Guia Prático CSS

Lição 1 - Noções; Definições

Construir um Website

Guia Prático CSS

Recomende este site a um amigo

O que precisa para aprender CSS?

Tal como já foi mencionado para o HTML, também para o CSS só precisa do Notepad e um Navegador (Browser) que vêm sempre por padrão no Windows e similarmente em outros Sistemas operativos.

Já agora como abrir o Notepad

Clicar no menú Iniciar seja no Windows XP, ou Vista Ir a Accessorios e escolher Notepad.

Como se deve lembrar já alertamos para só usar estas ferramentas para facilitar a aprendizagem e ter o domínio completo da situação.

Um navegador e um editor de textos são as simples ferramentas que precisa para criar websites.

CSS é a abreviatura para Cascading Style Sheets. — Folha de Estilos em Cascata

Algumas vantagens:

* Os estilos (Styles) definem como apresentar os elementos HTML

* Os estilos são normalmente guardados em Folha de estilos

* Folhas de estilo externas poupam muito trabalho

* Folhas de estilo externas são guardadas em ficheiros CSS

* Multiplas definições de estilos convergem num só

Com o CSS, os seus documentos HTML podem ser apresentados utilizando diferentes estilos.

HTML pode ser devidamente usado para definir o layout de websites. Contudo CSS proporciona mais opções e é mais preciso e sofisticado. CSS é suportado por todos os navegadores atuais.

Depois de seguir este guia prático CSS, poderá criar uma folha de estilos, usando CSS para dar um grande visual ao seu website.

Qual é a diferença entre CSS e HTML?

HTML é usado para estruturar conteúdos. CSS é usado para formatar conteúdos estruturados.

Uma das vantagens é se tiver um website com 25 páginas e por exemplo altera o formato ou cor na primeira e deseja que todas as outras páginas sofrma a mesma transformação, então no lugar de fazer uma a uma, faz sómente um link para essa folha de estilos e automáticamente todas as páginas adquirem o mesmo formato ou côr...mas chega de teoria, nada melhor que a prática para melhor entender todos estes conceitos e vantagens de utilizar o HTML em conjunto com o CSS que não deixa de ser uma linguagem em si de HTML.

Experimente copiar este texto abaixo e vá mudando as cores (colors). Quanto aos códigos HEX das cores poderá consultar a Tabela de cores e vá vendo as alterações

Acrescentou-se o seguinte estilo CSS

body {background-color: green}

h1 {background-color: yellow}

h2 {background-color: transparent}

p {background-color: rgb(250,0,255)}

</style>

Resultado: clique nas imagens em baixo para visualizar

Exemplo de uma página só com HTML

Vamos só dar aqui uns exemplos para se ir familiarizando:

<html>

<head>

</head>

<body>

<h1>O melhor website</h1>

<h2>Minha 1ª página cheia de estilo</h2>

<p>Sem dúvida que aprender HTML e CSS são as ferramentas essenciais para a construção de websites cheios de estilo</p>

</body>

</html>

Exemplo de uma página HTML, com CSS

<html>

<head>

body {background-color: green}

h1 {background-color: yellow}

h2 {background-color: transparent}

p {background-color: rgb(250,0,255)}

</style>

</head>

<body>

<h1>O melhor website</h1>

<h2>Minha 1ª página cheia de estilo</h2>

<p>Sem dúvida que aprender HTML e CSS são as ferramentas essenciais para a construção de websites cheios de estilo</p>

</body>

</html>

Sua 2ª página web: documento salvo como exemplo: tema.html

Como funciona?

Sua 1ª página web: documento salvo como index.html

Neste caso usamos um método que é inserir através da Tag <style> , isto é estilizar a página em si, mas se tiver por exemplo 30 páginas e estar uma a uma colocar o mesmo <style> em todas é uma grande tarefa. No lugar de fazer uma a uma e inserir <style> o estilo , cores, comandos, existe um outro método que poupa muito trabalho que é ligar todas as páginas em html a uma unica folha de estilo css. Um dia quando quiser mudar o aspecto do seu site, precisa só se preocupar em fazer uma página de estilo em css, criativa, como gosta e alterar de uma vez só todas as páginas do seu site. Esta página neste caso em vez de ser salva como... ou guardada como... com a extensão .html deve ser com a extensão .css, vamos desenvolver como este método funciona....pode até ser só para uma página se quiser, mas o que é um site só com uma página? quase nada.

Nota: quantas páginas quiser podem se ligar ao padrão.css

Sua 3ª página web: documento salvo como exemplo: informações.html

CSS - style

Documento salvo com a extensão .css, exemplo: padrão.css

Como fazer essa ligação (link) ao CSS ?

Uma folha de estilos no exemplo acima é externa e é um arquivo com a extensão .css. Deverá colocar esta folha de estilos tanto no servidor (onde tem o Alojamento) como no disco rígido.

Usando o exemplo acima atribuimos o nome à folha de estilo padrão.css e obviamente temos que criar e a colocar num diretório a que atribuimos o nome estilos, isto é seja no disco rigido ou servidor vai existir um dirétorio estilos que deverá conter o arquivo padrão.css

Eis aqui um exemplo de como tudo funciona. isto é tenha 3, 20, 100 ou as páginas que tiver o seu site, se desejar mudar o estilo é só fazer uma ligação à página css e todos automáticamente ficarão neste exemplo com a côr verde de fundo.

Esta linha de código só poderá ser inserida na secção header do documento HTML, entre as tags <head> e </head>

Assim como é fácil perceber vai inserir um link no documento HTML (index.html) para a folha de estilos (padrão.css). E como? eis a instrução para fazer essa ligação em HTML:

padrão.css

estilos

tema.html

informações.html

index.html

http://criar.noble7fix.com