Estilos Inline São Rápidos, Mas Perigosos
A forma mais rápida de aplicar estilos em elementos é inserindo-os na própria tag html do elemento, através do atributo style="". Todas propriedades e valores inseridos entre as aspas do atributo style serão aplicados ao elemento que o contiver, porém, não faça isso! Na presente postagem explicaremos melhor o que você deve preferir na hora de estilizar seu código.
Por que não devemos usar estilos direto nos elementos (inline) html?
Primeiro porque não é considerada uma boa prática misturar código html e css no mesmo local, o que causa desorganização e problemas para pesquisar e corrigir erros. O outro bom motivo para não utilizar estilos inline é que em pequenos projetos como os exemplos html que usamos, onde há poucas linhas de códigos e poucos elementos, você não terá problema em usá-los, porém conforme o código for crescendo e com isso a complexidade dele, você não achará uma boa ideia usar estilos inline. Aqui vai um exemplo: se você tivesse um código com um único botão, não haveria problema ou dificuldade alguma em utilizar estilo inline nele, ainda que não seja o mais adequado, isso funcionaria e seria rápido. Porém, imagine que você tivesse uma página como um e-commerce com dezenas ou centenas de botões e decidisse alterar algo simples como a cor deles. Essa simples alteração se tornaria uma tarefa penosa caso você utilizasse estilo inline, pois teria que repetir a configuração para cada botão da página, um a um. Por exemplo: seria preciso inserir o atributo style="background-image = orange" em todos os elementos <button> .
 |
| Alterando a cor dos botões para laranja manualmente |
Uma solução mais elegante e eficiente
Utilizando css quer seja na tag <style></style> aninhadas na tag <head></head> (embora mais prático do que estilo inline, essa também não é uma boa prática, por misturar código css com html) ou inserindo estilo externo usando a tag <link href=""> dentro da tag <head></head> onde o caminho (path) ou url dentro das aspas no argumento href="arquivo.css" deve apontar para o nome do arquivo de texto contendo as regras css e com extensão ".css".
A única linha de código necessária no arquivo css ou dentro da tag <style></style> necessária para alterar a cor de todos os botões da página para a cor laranja de uma só vez, seria:
button {
background-image: orange;
}
button {
background-image: orange;
}
o resultado com muito menos código e esforço seria:
 |
| Alteração de cor dos botões com css |
Comentários
Postar um comentário