CSS+Tableless no Dreamweaver - Parte 2
Arquivo de (Tableless/CSS) por Felipe Cardozo em 12-03-2008 - 4,798 visualizações
Tags: classes, css, Dreamweaver, seletores, Tableless
Olá!
Na segunda parte de CSS+Tableless no dreamweaver, vamos aprender regras de agrupamento de seletores, seletores classe e seletores ID. Esta regra é bastante utilizada para incluir uma formatação em mais de um seletor (elemento html, div, id, etc…). Esta vídeo aula é imprescindível para você tem uma maior idéia das características da CSS.
Assista à vídeo aula
Agrupamento de seletores
h1, h2, h3, h4, h5, h6 {
color: #990000;
font-size:12px;
font-family: Arial, "Times New Roman", Times, serif;
}
Qualquer forma de título entre o H1 até o H6 terá a formatação acima.
Seletores classe
elemento HTML.classe
p.classe1 {
color:#FF6600;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-weight:bold;
}
Nota: Qualquer elemento HTML que esteja com o parágrafo (P) terá a formatação acima.
Leia mais e assista à vídeo aula:
.classe2 {
color:#003366;
font-size:10px;
font-family:Arial, Helvetica, sans-serif;
text-align:right;
}
Nota: Qualquer elemento HTML que for determinado por “Classe2″ terá a formatação acima.
EX:
<h1 class="classe2"> Título </h2> ou <p class= "classe2">
Seletor ID
#box1 {
background-color:#CCCC66;
border:#000000;
padding-top: 10px;
}
O conteúdo ficaria assim:
<div id="box1">
Aqui o conteúdo HTML que terá a formatação da "ID box 1"
</div>
Obs: O seletor ID difere do seletor classe por ser único e pode ser aplicado a um único elemento .
Infelizmente alguns vídeos ficaram bastante pesados para mandar pro servidor.
Porém, estamos otimizando algumas vídeo aulas para poder colocar todas para download.
Forte abraço!
parabéns Felipe
Muito obrigado
Não entendi ao certo. Você quer saber qual programa pode ser usado?
obs:eu coloquei o index na mesma pasta aonde esta o estilo css da mesma forma que vc fez na primeira video aula ,+ ele naum respondem quando eu mudo em css os codigos o html naum vê a mudança , eu consegui fazer + agora voltou o mesmo ploblema , eu queria fazer sem pensa que foi por acaso que aconteceu .Abraço
contato[@]mxmasters.com.br
Fico no aguardo.
[]´s
estou adorando as videos aula de css,
mas estou com o mesmo problema que o Rafael,
eu crio o css e faço a alteração no arquivo html,
mas não aparece a alteração, só aparece quando
eu dou F12 para visualizar a pagina na internet.
Será que é alguma configuração no meu dreamweaver?
Você pode me ajudar?
Obrigado!
Isso é natural. Algumas vezes o dreamweaver não mostra o conteúdo com o CSS. Os efeitos e configurações só aparecerão quando visto no HTML, ou seja, após o F12.
[]´s
eu preciso fazer esse procedimento de salvar e visualizar (F12) e isso atrapalha um pouquinho…
mas não tem outro jeito mesmo né? então vou fazer minha páginas assim mesmo.
Obrigadão!
Parabéns pelo seu trabalho e de toda a equipe da MXMASTERS,
graças a vocês pessoas como eu (interessadas) conseguem aprender muito sobre WEB entre outros.
VALEU!
Se você coloca o arquivo.css numa pasta chamada estilos, você tem que colocar o caminho do css da seguinte forma:
estilos/arquivo.css
E por aí vai…
[]´s
E a formataçao fika bem padronizada sendo compativel com a maioria dos browsers existente inclusive no proprio linux
Vlw Felipe!
Minha dúvida é a seguinte:
Acompanhei todos os vídeos do Felipe Cardozo sobre CSS e Dreamweaver e já estou fazendo meus sites todos em CSS/Tableless, mas ainda há uma grande dúvida, qual a melhor maneira de organizar várias fotos em uma página?
Por exemplo:
Eu estou fazendo um site para uma imobiliária e o cliente me pediu para fazer as páginas das fotos de imóveis com a seguinte disposição:
9 fotos por página, sendo que as fotos deverão ser distribuídas em 3 colunas e 3 linhas, não necessariamente uma “tabela”, mas ele quer que apareça cada foto com um texto descritivo embaixo da mesma. Tentei criar um “box” para cada foto e texto, deu um trabalhão para dispor as fotos e textos corretamente nas páginas, mas o site se comporta de maneira totalmente inesperada em alguns navegadores. Tentei fazer isso também com uma tabela mesmo, não tive conhecimento suficiente para organizar a tabela “CSSmente” no meio da página, mas sei também que essa não é a melhor maneira…
PS: Os programas que criam álbuns de fotos automaticamente (inclusive tem uma video-aula aqui) não adiantam nesse caso, pois apesar de os mesmos fornecerem o código html para que se possa personalizar as páginas daria um trabalho muito maior para inserir o menu (que o cliente quer que apareça em todas as páginas do site), o topo do site, etc.
Então fica aqui o meu probleminha, esperando que alguém possa me ajudar…
Grande abraço a todos…
OLá Jota, tudo bem?
A melhor maneira é através de List Item, as conhecidas (LI).
Irei desenvolver uma vídeo aula explicando isso para melhorar a compreensão…
[]´s
mais uma aula assistida e compriendida !
Obrigado !
Abraço e fique com Deus
Oi Juarez, tudo bem? Eu entendi sim. Para fazer isso, basta colocar o “
como align=left”, não esquecendo de colocar um margin na imagem para o texto não colar nela.
[]´s
Abraço e fique com Deus!