MX Masters

12/03/2008 - 14:39 > 17.355 Visualizações > 43 comentários

CSS+Tableless no Dreamweaver – Parte 2

4 votos

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 .

Posts relacionados

Felipe Cardozo

É sócio diretor do MX Masters, portal de desenvolvimento especializado em vídeo aulas. Trabalha com ferramentas OpenSource como Wordpress, Magento entre outros, além de ministrar palestras em universidades do Rio de Janeiro.


Outros posts deste autor

Este autor atualmente possui 281 posts

Veja todos os posts de Felipe Cardozo


Comentários / Deixe seu Comentário

43 respostas para 'CSS+Tableless no Dreamweaver – Parte 2'

  1. João AlbertoNo Gravatar Diz:

    Esta video aula não esta disponivel para downloads??

  2. Felipe CardozoNo Gravatar Diz:

    Olá João!
    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!

  3. AndréNo Gravatar Diz:

    estou gostando de aprender CSS em vídeo aulas
    parabéns Felipe
    Muito obrigado

  4. Alexander VaconcellosNo Gravatar Diz:

    Felipe! como faço para usar essa interação do Dw com o CSS? para na hora que for programar as linguagens entrem automaticamente domo no HTML?

  5. Rafael NeryNo Gravatar Diz:

    Cara vc tirou uma duvida minha sobre padding continue postando essas aulas dia 1 vou adquirir meu DVD um abraço

  6. RafaelNo Gravatar Diz:

    olá Felipe tudo bom ?eu queria tira uma duvida sobre css, qual codigo eu uso pra usa esse codiogs em css que vc esta esplicando na video aula,abraço..

  7. Felipe CardozoNo Gravatar Diz:

    Olá Rafael, tudo bem?
    Não entendi ao certo. Você quer saber qual programa pode ser usado?

  8. RafaelNo Gravatar Diz:

    Desculpa as palavras embaralhadas , srsr
    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

  9. Felipe CardozoNo Gravatar Diz:

    Rafael, faz o seguinte: Compacte os arquivos e me envie para eu analisar.

    contato[@]mxmasters.com.br

    Fico no aguardo.

    []´s

  10. Bruno MendesNo Gravatar Diz:

    Olá Felipe,
    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!

  11. Felipe CardozoNo Gravatar Diz:

    Olá Bruno!

    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

  12. Bruno MendesNo Gravatar Diz:

    Entendi, mas acho isso muito ruim, pois toda alteração que faço
    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!

  13. Marcos ViníciusNo Gravatar Diz:

    Eu tenho um problema parecido com o do Rafael. Quando eu criei meu estilos.css acompanhando a parte 3 da video aula “Criando Um Site Completo”, as mudanças que eu fazia surtiam efeito no layout que eu já tinha feito. Depois que eu fechei os arquivos e no dia seguinte os abri de novo pra terminar o meu site, as mudanças no estilo.css não fizeram mais efeito algum (nem dando F12, como no caso Bruno). Mas diferente do Rafael, eu não coloquei o index.html na mesma pasta que o estilos.css, pois montei uma estrutura idêntica ao do layout feito na video aula “Criando Um Site Completo”. Ambos, index.html e estilos.css devem necessáriamente ficar juntos na mesma pasta? Porque quando eu coloco eles juntos, o meu layout não aparece. :(

  14. Felipe CardozoNo Gravatar Diz:

    Marcos, não precisam estar na mesma pasta.

    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

  15. AllanNo Gravatar Diz:

    Felipe, não estão aparecendo as video aulas, onde eu consigo elas?

  16. Vinicius Felix/MG/18No Gravatar Diz:

    Muito bom deu pra tirar algumas duvidas.
    E a formataçao fika bem padronizada sendo compativel com a maioria dos browsers existente inclusive no proprio linux

    Vlw Felipe!

  17. JotaNo Gravatar Diz:

    Olá, em 1º lugar parabéns pelo excelente conteúdo do site, o qual está me ajudando muito em meu aprendizado, pois sou “quase” um autodidata em webdesign, digo “quase” porque, apesar de nunca ter feito nenhum curso em relação a informática eu sempre busco aprender coisas na internet mesmo, e principalmente no mxmasters, pois as video-aulas são muito bem elaboradas.
    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…

  18. Felipe CardozoNo Gravatar Diz:


    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

  19. Filipe GoesNo Gravatar Diz:

    Muito bom ja to usando no meu projeto

  20. Manoel MendesNo Gravatar Diz:

    Muito bom Felipe !
    mais uma aula assistida e compriendida !
    Obrigado !

  21. Juarez SilvaNo Gravatar Diz:

    Olá Sr. Felipe Cardozo, queria parabenizá-lo pelas vídeo-aulas, realmente muito bem explicadas e de fácil entendimento, mas queria saber como trabalho com imagens e textos no mesmo “box” por exemplo, alinhando… Por ex: dentro de uma box tenho uma imagem alinhada à esquerda e o texto à direita..não sei se ficou bem explicado.
    Abraço e fique com Deus

  22. Felipe CardozoNo Gravatar Diz:


    Oi Juarez, tudo bem? Eu entendi sim. Para fazer isso, basta colocar o “ e o

    como align=left”, não esquecendo de colocar um margin na imagem para o texto não colar nela.

    []´s

  23. Juarez SilvaNo Gravatar Diz:

    Blz Felipe..vou testar. Lembrei também de uma video-aula sua em que vc fatia o layout do fire e exporta pro dreamweaver, no meu caso fiz um layout ficando centralizado no fire e quando coloquei as “fatias” no dream usando css, alguns itens não ficaram alinhados da forma em que estava no fire. Ql seria a forma correta de configuar esse layout?
    Abraço e fique com Deus!

  24. Alex MeloNo Gravatar Diz:

    Parabéns muito legal, estou assistindo para colocar todo o meu site que ainda esta em contrução, em CSS.
    Valeu

  25. Alex MeloNo Gravatar Diz:

    Muito bom, parabéns

  26. Rodrigo MarcelNo Gravatar Diz:

    Eai, felipão.. tranquilo.
    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?

  27. samara reisNo Gravatar Diz:

    olá felipe ql codigo css que faz com que possamos colocar
    barra de rolagem no para o navegador firefox?
    agradeço a resposta desde já

  28. David CHCNo Gravatar Diz:

    @samara, não sei se entendi, se vc quer colocar uma barra de rolagem. Use overflow:auto; e defina uma altura e largura a esse elemento

  29. Diego OliveiraNo Gravatar Diz:

    Cara, muito massa as video aulas.
    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.

  30. Luis ArmandoNo Gravatar Diz:

    Sensacional as suas aulas, mas infelizmente a id #box1 não esta funcionando. nem o background e nem o border. sera q poderia ajudar? valeu !

  31. Luis ArmandoNo Gravatar Diz:

    Felipe, ja consegui solucionar aqui… foi falta de atenção no codigo,mesmo…coloquei ao inves de . Tudo funcionando maravilha.
    Sou fã ai do site …obrigado !
    abraço

  32. BrunoNo Gravatar Diz:

    como eu baixo essas aulas ?

  33. David CHCNo Gravatar Diz:

    @Bruno, as aulas não são disponibilizadas para download, pq tenha pessoas q estavam vendendo as aulas, por esse motivo e entre outro, não posto para download.

  34. RodolphoNo Gravatar Diz:

    Muito boa essas aulas, da para tirar bastante dúvidas.

    Obrigado.

  35. nandoNo Gravatar Diz:

    sao muito boas as suas vidio aulas so que eu tou a ter alguns problemas em arquivos que criei dame erros nao sei se sera da verção do dreamweaver eu utilizo o mx 2004

  36. David CHCNo Gravatar Diz:

    @nando, qual o erro q apresenta?

  37. nandoNo Gravatar Diz:

    da um erro de compatiblidade

  38. David CHCNo Gravatar Diz:

    @nando, o ideal é vc utilizar um versão mais nova. Mas aconselho, se quiser aprender tableless, usar o NotePad++ ou PsPad, são mais leve, vc vai se acostumar a digitar o código, que é a melhor maneira de desenvolver qualquer projeto.

  39. Higgor bastosNo Gravatar Diz:

    olá tenho me empenhado no aprendizado de css mas estou tendo um problema e queria pedir a ajuda de vocês….o css que escrevi não aparece quando aperto F12…posso contar com seu conhecimento? Desde Já obrigado e parabens pelas aulas estão otimas!!!

  40. Higgor BastosNo Gravatar Diz:

    Olá Felipe tenho seguido suas aulas e quero deixar aqui expresso meu agradecimento, pois, embora saiba que muito ainda tenho para aprender, o material o qual voce nos disponibilizou foi que grande valia e utilidade, melhorou muito minha visão em relação atableless e css. Porém quero aproveitar o espaço para que talvez possa me esclarecer uma dúvida.
    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!!!

  41. David CHCNo Gravatar Diz:

    @Higgor Bastos, provavelmente vc deve está se referindo a imagem do #boxlogo pq não está aparecendo. Isso pq vc colocou o caminho absoluto do seu PC, veja:

    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.

  42. hIGGOR BASTOSNo Gravatar Diz:

    Ok. Muito obrigado!!!Resolvido

  43. WashingtonNo Gravatar Diz:

    Muito Bom cara, sem duvida vocês são os melhores!

Deixe seu Comentário

Publicidade

www.mxmasters.com.br - todos os Direitos Reservados : Desenvolvido com Wordpress

Desenvolvido por David CHC e Felipe Cardozo