← HTML + CSS

[CSS][Ajuda] CSS

Lida 13513 vezes

Offline

icaro 
Membro
Mensagens 128 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

Como sou teimoso decedi investigar isto das CSS, apresento aqui os resultados. Não será novidade para muita gente mas pelo menos para mim é:

Imaginemos que eu queria fazer um web site que por acaso ficava com o seguinte nome www.esparsos.net

o primeiro problema para chegar a configuração que está na página era a colocação do texto na página com aquela disposição: Tabelas ou CSS?

estive a ler as recomendações da w3c sobre o uso de css em vez de tabelas

e sinceramente não me convenceram muito, mas como sou bem mandado, nada de tabelas!

Avançando, descobri que com o Dreamweaver é facilimo e vantajoso usar as Cascading Style Sheets

para o exemplo do site esparsos utilizei um css esterno que configura todas as páginas:

no dreamweaver MX 2004:

File-New-Html

Tex-Css Styles-New

botar nome e selecionar a opção pre defenida (Class can apply to any tag)

gravar com a extenção css (no caso esparsos.css). Depois é só configurar ao gosto

no esparsos fiz assim:


Código: [Seleccione]

.esparsos1 {
position: absolute;
left: 50mm;
top: 0mm;
margin: 3mm;
padding: 1mm;
height: 1cm;
width: 10cm;


}
.esparsos2 {
position: absolute;
top: 15mm;
width: 15cm;
margin: 3mm;
padding: 1mm;
left: 50mm;
border: thin solid #000099;
background-color: #FFFFFF;

}
.esparsos3 {
position: absolute;
left: 0mm;
top: 15mm;
width:3cm;
margin: 3mm;
padding: 1mm;
border: thin solid #000099;
background-color: #FFFFFF;
}
a:link {
text-decoration: none;
color: #BBBBBB;
}
a:visited {
text-decoration: none;
color: #BBBBBB;
}
a:hover {
text-decoration: none;
color: #000077 ;
}
a:active {
text-decoration: none;
}
a {
font-weight: bold;
}

body {
background-image: url(imagens/esparsos2.gif);
}



Agora como quero utilizar este estilo em todas as páginas e por isso criei um ficheiro .css basta ligar este ficheiro a todas as minhas páginas da seguinte forma entre os tags <Head></Head>:



Código: [Seleccione]
<link href="esparsos.css" rel="stylesheet" type="text/css">


poderia não utilizar um link colocando o estilo na própria página bastando para isso colocar o código inteiro também no <Head> mas entre os tags:
Código: [Seleccione]
<Head>
<style type="text/css">
<!--
código aqui
-->
</style>
</head>

Mas só utilizaria dentro da página se esse estilo se aplicasse apenas a essa página caso contrário seria perda de tempo

A vantagem de ter utilizado css é que me formatou todo o texto de todas as páginas e com ele consigo controlar o comportamento da página face aos diferentes browsers, tamanho e resoluções de ecrã. tudo isto com um pequeno código.
Offline

fpware 
Fundador
Mensagens 15318 Gostos 7
Troféus totais: 38
Trófeus: (Ver todos)
Linux User Mobile User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5

Excelente texto icaro! :D

Muito obrigado!
Offline

icaro 
Membro
Mensagens 128 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

esqueci-me de referir como utilizar os estilos criados na página que queremos fica assim então:



Código: [Seleccione]

<html>
<Head>
<link href="esparsos.css" rel="stylesheet" type="text/css">
</Head>
<Body>
<DIV CLASS="esparsos1">texto aqui
</div>
<DIV CLASS="esparsos2">texto aqui</DIV>
<DIV CLASS="esparsos3">texto aqui</div>
</body>
</html>


refiro texto mas pode ser qualquer coisa
Offline

icaro 
Membro
Mensagens 128 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

Citação de: "fpware"
Excelente texto icaro! :D

Muito obrigado!


Já estava na altura de contribuir com o pouco que sei  :D
Offline

fpware 
Fundador
Mensagens 15318 Gostos 7
Troféus totais: 38
Trófeus: (Ver todos)
Linux User Mobile User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5

É uma excelente contribuição! :D
Offline

vkthor 
Membro
Mensagens 34 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Level 5 Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post

Olá...

Este forum está-se a tornar espetacular!
Ok. Já era, só que agora está cada vez mais... :-D

Fica a sugestão (off-topic, mas paciência) para os administradores criarem um espaço para tutoriais, cursos, artigos e afins... deixando o fórum só para as dúvidas e outras questões relacionadas com os tópicos.

Já agora, que tal fazer um wiki? Assim todos podem editar e contribuir para o melhor resultado, pois deve haver mais gente a perceber do assunto e com vontade de colaborar. Não sendo especialista, contem comigo para o css :-)

Quanto ao icaro, parabéns pelo artigo.
Offline

fpware 
Fundador
Mensagens 15318 Gostos 7
Troféus totais: 38
Trófeus: (Ver todos)
Linux User Mobile User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5

Citação de: "vkthor"
Fica a sugestão (off-topic, mas paciência) para os administradores criarem um espaço para tutoriais, cursos, artigos e afins... deixando o fórum só para as dúvidas e outras questões relacionadas com os tópicos.


Essas funcionalidades já estão a ser preparadas ;)

Citação de: "vkthor"
Já agora, que tal fazer um wiki? Assim todos podem editar e contribuir para o melhor resultado, pois deve haver mais gente a perceber do assunto e com vontade de colaborar. Não sendo especialista, contem comigo para o css :-)


É algo a pensar ;)
Offline

vkthor 
Membro
Mensagens 34 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Level 5 Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post

Citação de: "icaro"
a:link {
   text-decoration: none;
   color: #BBBBBB;
}
a:visited {
   text-decoration: none;
   color: #BBBBBB;
}
a:hover {
   text-decoration: none;
   color: #000077 ;
}
a:active {
   text-decoration: none;
}


Só uma pequena dica:
As instruções iguais podem ser agrupadas e isso diminui o nosso código:
Código: [Seleccione]

a:link,
a:visited
{
 text-decoration: none;
 color: #BBBBBB;
}

a:hover
{
 text-decoration: none;
 color: #000077 ;
}

a:active
{
text-decoration: none;
}


Reparaste na vírgula a separar o link normal do visited?
Offline

fpware 
Fundador
Mensagens 15318 Gostos 7
Troféus totais: 38
Trófeus: (Ver todos)
Linux User Mobile User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5

Exacto Vkthor!
Offline

icaro 
Membro
Mensagens 128 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

Citação de: "vkthor"
Citação de: "icaro"
a:link {
   text-decoration: none;
   color: #BBBBBB;
}
a:visited {
   text-decoration: none;
   color: #BBBBBB;
}
a:hover {
   text-decoration: none;
   color: #000077 ;
}
a:active {
   text-decoration: none;
}


Só uma pequena dica:
As instruções iguais podem ser agrupadas e isso diminui o nosso código:
Código: [Seleccione]

a:link,
a:visited
{
 text-decoration: none;
 color: #BBBBBB;
}

a:hover
{
 text-decoration: none;
 color: #000077 ;
}

a:active
{
text-decoration: none;
}


Reparaste na vírgula a separar o link normal do visited?


gracias pela dica não sabia que dava para fazer isso, mas como quem escreveu o código foi o dreamweaver...
Offline

vkthor 
Membro
Mensagens 34 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Level 5 Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post

Olá icaro

Citação de: "icaro"

gracias pela dica não sabia que dava para fazer isso, mas como quem escreveu o código foi o dreamweaver...


É o mal dessas modernices  :-) Como venho do tempo em que era tudo na base dos comandos digitados mesmo, eheheh já estás a ver...

Para as minhas páginas (podem não ser grande coisa, mas...) uso sempre editores de texto simples e código escrito à unha LOL.

Este é a minha coqueluche :-) PSPad
Experimenta e pode ser que passes a gostar. Tem livrarias para várias linguagens, tabed navigation, gestão de projectos, ftp integrado, suporta vários tipos de páginas de código, incluindo utf-8 etc...

A ver e explorar por quem gostar.


PS. Hey! Como é que se mete aquele url a funcionar?! Devia aceitar assim... :evil:
Offline

fpware 
Fundador
Mensagens 15318 Gostos 7
Troféus totais: 38
Trófeus: (Ver todos)
Linux User Mobile User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5

Citação de: "vkthor"
PS. Hey! Como é que se mete aquele url a funcionar?! Devia aceitar assim... :evil:


Sem as "" - já editei ;)
Offline

vkthor 
Membro
Mensagens 34 Gostos 0
Troféus totais: 23
Trófeus: (Ver todos)
Level 5 Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post

Olá fpware e obrigado.

Citação de: "fpware"

Sem as "" - já editei


Drole de BBCode... %#$#%$# :-)
Aspas para umas coisas, sem aspas para outras... e afinal até tem uma cábula por cima da janela de edição... estou a ficar velho demais para isto LOL
Offline

fpware 
Fundador
Mensagens 15318 Gostos 7
Troféus totais: 38
Trófeus: (Ver todos)
Linux User Mobile User Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5

:lol:  :lol:  :lol:

Este BBcode sempre foi um pouco esquisito ;)
Offline

icaro 
Membro
Mensagens 128 Gostos 0
Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1 100 Posts

isto tá muito bonito mas reparei agora que não consigo configurar a coisa para que imprima só a coluna do meio.

alguém pode ajudar?