25 anos, carioca, residente da cidade de Nova Iguaçu. Trabalha com web há 6 anos. Foi ouvidor e designer do grupo Telemar por 3 anos, onde desenvolveu projetos e intranets.
A empresa de tecnologia divulgou a criação de um componente capaz de alcançar até 40 gigabits por segundo e 20 ...
Publicado em 11/03/2010 - 16:26
O Google lançou na última quarta-feira, 10/03, um novo sistema para a visualização do Google Reader. A interface recebe o ...
Publicado em 11/03/2010 - 16:22
O que você faria se não pudesse usar nada da Google por uma semana? Fizemos a experiência e você lê ...
Publicado em 10/03/2010 - 8:51
Pouco menos de um mês após o Google anunciar seus planos de teste de uma banda larga ultrarrápida nos ...
Publicado em 10/03/2010 - 8:28
Acompanhe os últimos episódios desse programa que é sucesso na rede.
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 .
Veja a Atualização nos blogs da equipe Mx Masters
R$ 40,00
R$ 79,90
R$ 59,90
8/04/08 às 11:05
8/04/08 às 11:52
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!
12/04/08 às 16:30
parabéns Felipe
Muito obrigado
2/05/08 às 22:03
21/05/08 às 0:37
2/07/08 às 0:47
4/07/08 às 1:35
Não entendi ao certo. Você quer saber qual programa pode ser usado?
4/07/08 às 17:25
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
4/07/08 às 19:39
contato[@]mxmasters.com.br
Fico no aguardo.
[]´s
24/07/08 às 6:58
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!
24/07/08 às 18:51
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
24/07/08 às 19:50
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!
3/08/08 às 18:19
4/08/08 às 23:04
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
6/09/08 às 18:26
9/09/08 às 21:00
E a formataçao fika bem padronizada sendo compativel com a maioria dos browsers existente inclusive no proprio linux
Vlw Felipe!
26/09/08 às 18:08
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…
9/10/08 às 11:26
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
16/10/08 às 20:14
3/11/08 às 21:36
mais uma aula assistida e compriendida !
Obrigado !
6/11/08 às 9:24
Abraço e fique com Deus
6/11/08 às 10:31
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
7/11/08 às 1:16
Abraço e fique com Deus!
8/02/09 às 20:14
Valeu
8/02/09 às 20:38
24/04/09 às 11:16
Tenho uma duvida.
Se eu quiser diminuir o espaçamento entre as linhas de dois paragrafos, como faço?
paragrafo 1
paragrafo 2
o line-height só altera as linhas dentro do mesmo paragrafo.
O que poso usar pra isso?
16/07/09 às 22:32
barra de rolagem no para o navegador firefox?
agradeço a resposta desde já
17/07/09 às 8:33
26/08/09 às 20:57
Só uma observação que tenho a fazer é que vc esqueceu de ensinar como linkar o arquivo css pra a página poder importar os estilos desejados.
Tanto na 1ª aula quanto na segunda ficou faltando este pequeno detalhe.
Abraço.
29/08/09 às 17:54
30/08/09 às 18:57
Sou fã ai do site …obrigado !
abraço
5/10/09 às 14:18
5/10/09 às 14:51
26/10/09 às 15:05
Obrigado.
1/11/09 às 9:34
1/11/09 às 10:08
3/11/09 às 12:46
3/11/09 às 12:55
11/01/10 às 17:17
18/01/10 às 22:44
Publiquei este site (www.usoracional.xpg.com.br) e a formatação css não aparece. Se puder dar um olhada(claro ainda faltam as outras páginas) e me orientar sobre meus erros eu agradeceria muito…desde já obrigado!!!
19/01/10 às 10:44
background-image:url(file:///C|/ecologic/topo.jpg);
Por isso não vai aparecer, coloque o caminho correto da imagem, no caso se estivesse dentro de uma pasta chamado imagens, seria assim:
background-image:url(imagens/topo.jpg);
E certifique-se que a imagens está na sua hospedagem.
19/01/10 às 22:16