Como criar estilos com seletores de classe e id em dreamweaver

Video: Estilo Cascata - Diferenças entre Class e ID

seletores de classe e id no Dreamweaver têm muitas semelhanças e uma diferença fundamental. estilos de identificação só pode ser usado uma vez por página, mas estilos de classe pode ser usado quantas vezes na mesma página como você gosta.

estilos de classe e ID tem as seguintes semelhanças:

Você pode nomear estilos criados com a classe e seletores ID qualquer coisa que você gosta. Você não deve incluir espaços ou caracteres especiais em nomes de estilo, embora o sublinhado e hífen estão bem. O uso de todas as letras minúsculas é uma prática comum, mas não é obrigatório.

Video: Curso CSS ( Aula 02 ) -- Os Seletores ID e CLASS [Entendendo o ID e a CLASS]

Você pode aplicar estilos de classe e de identificação para qualquer elemento em uma página, mas eles são mais comumente aplicado a tags de cabeçalho, tags div, lista desordenadas tags, tags de parágrafo, as tags de imagem, e as novas tags HTML5.

Usando estilos criados com o seletor de classe e ID é um processo de duas etapas. Primeiro, você cria um novo estilo usando o seletor de classe ou ID e dar-lhe um nome- então você aplicar o estilo a um elemento na página.

Video: Curso de CSS3 - Aula 05 - Seletor Id e Class

Para definir um novo estilo de classe ou ID, criar e salvar um novo documento ou abrir um arquivo existente, e em seguida, siga estes passos:

1Se você estiver definindo um novo estilo que você deseja aplicar a um elemento existente, clique para colocar o cursor sobre o elemento que você deseja formatar com o novo estilo



Embora este passo não é necessário (você pode criar estilos para elementos que ainda não estão na página), o Dreamweaver cria automaticamente nomes seletor com base no elemento de página que o cursor está selecionando.

2No painel Seletores do painel Designer do CSS, selecione o nome da folha de estilo ao qual você deseja adicionar o novo estilo

Se você deseja alcançar o estilo de um tipo de mídia ou na tela de tamanho específico, definir uma consulta de mídia no painel de @media.

Se você não especificar uma consulta de mídia, Dreamweaver usará a propriedade Global e seu estilo vai funcionar em todos os formatos de mídia e tamanhos de tela.

382375.medium.jpg

3No painel Selectors, clique no sinal de mais (+)

Um novo selector é adicionado ao painel de selectores. Dreamweaver adicionou um nome selector composto, que inclui todos os estilos já aplicadas à manchete onde o cursor estava descansando quando você começou a definir o estilo.

4Clique duas vezes no nome do seletor, e editar ou substituí-lo com o nome que deseja usar para o seu estilo

Você pode nomear classe e estilos ID que quiser, contanto que você não use espaços ou caracteres especiais que não o hífen (-) ou sublinhado (_).

Se você quiser criar um estilo usando o seletor de classe, você deve começar o nome do estilo com um ponto, ou período. Se você quiser usar o seletor de ID, o nome do estilo deve começar com um sinal de libra (#).

382376.medium.jpg

5No painel Propriedades, especifique as configurações na sua regra de estilo

seletores de classe e ID são fáceis de aplicar para o conteúdo depois de criá-los porque Dreamweaver adiciona esses estilos para as listas suspensas de classe e ID no Inspetor de propriedades, localizadas na parte inferior do espaço de trabalho.


Publicações relacionadas