Como definir estilos com o seletor de tags no dreamweaver

Você pode criar completamente novos estilos no Dreamweaver usando a chamada ou ID seletores, mas você também pode criar estilos que mudam a formatação de tags HTML existentes. Estes estilos são criados usando o seletor de tags,

que também é conhecido como o elemento selector. Quando você definir um estilo usando o seletor de tags, você pode alterar a aparência, posição e outras características de qualquer tag HTML existente.

Muitas tags HTML já incluem opções de formatação. Por exemplo, as tags de cabeçalho incluem formatação de texto do estilo usando um grande negrito. Quando você cria um estilo com um seletor de tags, você tem que considerar as opções de formatação já associados a essa marca. Quaisquer opções que definem ou será adicionado à formatação existente ou substituir a formatação.

Você pode perguntar: “Por que eu iria redefinir a tag em vez de apenas criar um novo estilo do título usando o seletor de classe ou ID?” Embora você possa definir um novo estilo de classe em vez de redefinir uma tag HTML, às vezes usando uma tag HTML existente é melhor .

Video: Inserir CSS inline, CSS incorporado e CSS externo

estilos de título são especialmente importantes na web porque o texto formatado em uma tag é bem reconhecido como o texto mais importante em uma página. Entre outras coisas, o texto formatado em uma marca pode obter uma consideração especial dos motores de busca.

Para criar um estilo que redefine uma tag HTML (como a tag) com o seletor de tags, crie primeiro um arquivo ou abrir uma já existente e, em seguida, siga estes passos:

1No painel Seletores do painel Designer do CSS, selecione a folha de estilo para o qual você deseja adicionar o novo estilo

Quando você cria um estilo para uma tag HTML existente, você não precisa aplicar o próprio estilo a maneira de fazer com estilos de classe e ID. Onde quer que você usou a tag HTML, as configurações de definição de estilo são aplicadas.

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



Usando consultas de mídia com estilos é opcional. 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.

382368.medium.jpg

3Clique no sinal de mais (+) no painel de seletores

Um novo selector é adicionado ao painel de selectores.

Video: 015 Utilização da tag Span para formatar texto inline com CSS

Quando você clicar no sinal de mais (+) para criar um novo seletor, algumas coisas podem acontecer, dependendo do que já está na página aberta no Dreamweaver. A primeira vez que você criar um estilo em uma página da web em branco, Dreamweaver entra corpo no painel de selectores.

Se você estiver trabalhando em uma página com texto ou outro conteúdo que está formatado com marcas ou estilos HTML, Dreamweaver pode adicionar um seletor composto com base nos elementos que cercam o que quer que você selecionou com o cursor.

382369.medium.jpg

4No painel Selectors, clique duas vezes o nome selector. Comece a digitar o nome da tag HTML, e em seguida, selecione a tag a partir da lista drop-down que aparece

Você pode digitar o nome de qualquer tag HTML para criar um estilo usando o seletor de tags. Conforme você digita uma tag HTML, uma lista drop-down aparece com tags que começam com a mesma letra que você digitou. Selecionando a tag desejada na lista em vez de digitar o nome inteiro tag si mesmo é uma boa prática, porque você evitar erros de digitação.

Video: Como Crear un Meta Tag Usando Homestead Site Builder

382370.medium.jpg

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

A fonte e cor são imediatamente aplicada ao texto na página formatada com o tag.

Se você quer ser capaz de usar a mesma tag HTML com diferentes formatação em diferentes partes da mesma página, você pode criar estilos de compostos. estilos compostos são úteis, por exemplo, se você deseja que o texto formatado com a tag olhar diferente na parte principal de sua página do que em uma barra lateral.


Publicações relacionadas