No HTML, o atributo de nome é usado para especificar um nome para um elemento em HTML, como idade, data e muito mais. Também é utilizado na forma de referência quando os dados em um formulário são enviados. Além disso, o usuário pode estilizar o elemento “nome”Ao acessá -lo com a ajuda de um seletor e, em seguida, aplique propriedades CSS, incluindo“altura","cor","cor de fundo","tamanho da fonte”E muito mais de acordo com sua escolha.

Este post demonstrará sobre a aplicação do estilo CSS em um nome de elemento.

Como posso aplicar um estilo CSS em um nome de elemento?

Sim, o usuário pode estilizar o nome do elemento com a ajuda de várias propriedades CSS, aplicando -as a. Para fazer isso, experimente o procedimento passo a passo dado.

Etapa 1: Crie um contêiner div

Inicialmente, utilize o “”Tag para criar um contêiner div. Em seguida, adicione um atributo de classe e atribua um nome à classe de acordo com suas preferências. Nesse cenário, o “Div-Main”Está definido como o nome da classe.

Etapa 2: Adicionar cabeçalho

Em seguida, insira o título com a ajuda de “

”E incorporar texto entre a tag de abertura e fechamento do cabeçalho.

Etapa 3: Crie um formulário

Para criar um formulário, siga este procedimento:

• Primeiro, adicione um “”Elemento usado para criar um formulário.
• Em seguida, utilize o “”Elemento para incorporar o rótulo e depois o“”O elemento é usado para alocar os campos de formulário.
• O tipo de entrada é definido como “texto”Que especifica o campo de texto no formulário.
• O "espaço reservado”Aloca uma dica curta que define o valor a ser exibido no campo de entrada.
• ““nome”Atributo define uma referência esperada quando o formulário é enviado.
• O "min”Especifica o valor mínimo para um“" elemento.
• O tipo de entrada “enviar”É utilizado para adicionar um botão ao formulário:

Estilo CSS para um nome de elemento

Seu nome




Seu gênero




Sua idade

Pode -se notar que o formulário foi criado com sucesso:

Etapa 4: Acesso aula

Agora, acesse a classe utilizando o seletor de classe com o nome da classe. Por exemplo, ".Div-MainӃ usado para acessar a classe principal.

Etapa 5: aplique propriedades CSS

Depois de acessar a aula, aplique as propriedades CSS para estilo:

.Div-Main
estilo de fronteira: tracejado;
Margem: 20px 70px;
preenchimento: 20px;
cor de fundo: RGB (177, 245, 222);

Aqui:

• ““estilo de borda”A propriedade é utilizada para adicionar um estilo à borda do elemento.
• ““margem”Define um espaço fora da borda definida ao redor do elemento, onde o primeiro valor é“20px”E adiciona espaço na parte superior e inferior, e o segundo valor,“70px”, Define o espaço nos lados esquerdo e direito.
• ““preenchimento”Define um espaço dentro do limite.
• ““cor de fundo”É utilizado para especificar a cor na parte traseira do elemento.

Saída

Etapa 6: elemento de acesso "nome"

Agora, acesse o “" elemento "nome”. Por exemplo, acessaremos o campo de entrada com o nome “idade”.

Etapa 7: aplique o estilo CSS no elemento "nome"

Em seguida, aplique estilos CSS no elemento “nome”Ao utilizar as propriedades listadas:

entrada [name = "idade"]
Altura: 40px;
Cor: RGB (243, 242, 242);
Background-Color: RGB (241, 34, 7);
Negrito;
tamanho de fonte: grande;

No código acima:

• ““altura”Propriedade aloca altura ao elemento selecionado.
• ““cor”É usado para especificar a cor do texto do elemento.
• ““cor de fundo”É usado para definir a cor de fundo do elemento.
• ““Fonte"É definido como"audacioso”Para torná -lo proeminente.
• ““tamanho da fonte”Especifica o tamanho da fonte. Quando o tamanho da fonte é modificado, também altera os tamanhos da fonte.

Como resultado, o elemento “idade”Será estilizado da seguinte maneira:

Nós ensinamos você sobre a aplicação do estilo CSS no nome do elemento.

Conclusão

Sim, o usuário pode estilizar o nome do elemento com a ajuda de diferentes propriedades do CSS, aplicando -as a. Para fazer isso, primeiro, crie um formulário e adicione vários campos. Então, acesse o “nome”Elemento do“”Tag utilizando o“entrada [nome = ""]Sintaxe. Em seguida, aplique as propriedades CSS necessárias. Este post explicou o método para modelar o nome do elemento aplicando propriedades CSS.