Revisando o nível de prioridade de estilo CSS
A folha de estilo em cascata (CSS) é, penso eu, o mais simples dos idiomas em comparação com outras linguagens relacionadas à web, por isso não é surpreendente encontrar muitas pessoas que estão apenas começando a aprender como criar um site em geral aprenderão essa linguagem e o HTML primeiro.
Neste post, vamos voltar ao básico do CSS. Vamos revisar como os estilos CSS são aplicados inicialmente, quais estilos serão aplicados, como algumas declarações de estilos se sobrescrevem enquanto outras não.
Então, este post é especificamente dedicado para iniciantes que estão apenas começando a pegar o jeito dos desafios, provavelmente ainda cometendo erros e erros ao compilar sua primeira folha de estilo. Então, vamos apenas começar.
Estilos de Navegador Padrão
Firefox, Chrome, Safari, Opera e Internet Explorer são atualmente os cinco principais navegadores de desktop do mercado. Esses navegadores e todos os outros navegadores seguem uma regra padrão para incluir estilos padrão internos para renderizar os elementos HTML.
Então, quando colocamos alguns elementos HTML aleatórios sem adicionar nenhum estilo, você verá que ele ainda está renderizado corretamente no navegador.
Mas, se inspecionarmos esses elementos com cuidado, cada navegador terá valores (ligeiramente) diferentes para seus “padrão” declaração que causa inconsistência entre os navegadores, particularmente no antigo como o IE6, 7 e Firefox 3.0.
Por exemplo, como você pode ver na captura de tela acima, o mais novo Firefox processou bloco de citação por padrão com margem: 16px 40px 16px 40px, enquanto do outro lado Internet Explorer 7 vai renderizar bloco de citação com margem: 0px 40px.
Para superar as inconsistências mostradas acima, muitos web designers e desenvolvedores preferem sobrescrever todos esses estilos com Redefinição de CSS. Este arquivo CSS geralmente contém quase todo o HTML Tipo seletores, definindo-os com regras iguais.
Há muitas redefinições de CSS disponíveis, mas aqui estão os três principais favoritos:
- Normalize.css
- Redefinição de CSS
- Folha de estilo de redefinição de HTML5
Seletores
Você provavelmente lê muitas vezes esse termo nos blogs de design / desenvolvimento da Web visitados; Seletores.
O Seletor em CSS é a sintaxe usada para segmentar quaisquer partes no documento HTML para os estilos a serem aplicados. Existem três seletores básicos que vamos discutir aqui, pois eles provavelmente serão os seletores comuns usados no seu primeiro site. Nós cobriremos outras pessoas em posts futuros.
Seletor de tipos
Nós mencionamos uma vez acima, o seletor de tipo irá direcionar quaisquer elementos HTML especificados no documento. Por exemplo:
p / ** declaração ** /
vai corresponder a todos p ou o parágrafo elementos e usá-lo acabará por substituir os estilos padrão dados a partir dos navegadores.
Seletor de Classe
Depois de adicionar uma classe ou até mesmo muitas classes a um elemento, você também pode segmentar essas classes. o Seletor de Classe começa com um ponto parâmetro.
.caixa / ** declaração ** /
O snippet acima irá corresponder a todos os elementos que têm a classe box, ou também podemos selecionar mais especificamente.
p.box / ** declaração ** /
Ele segmentará apenas o p elemento que tem o caixa classe.
Quando estamos usando o Classe selector, todos os mesmos estilos de declaração de ambos Tipo seletor e o Navegador padrão será sobrescrito.
Seletor de ID
o identidade é um atributo muito restritivo, só podemos ter um identidade em um elemento e deve ser único também.
Conteúdo
Caso tenhamos um identidade em um elemento, podemos usar o seletor de id para direcionar esse elemento; o seletor de id é definido com um hash # parâmetro.
#uniqueID / ** declaration ** /
Desde o identidade é único, tem o nível de prioridade mais forte do tipo de seletor. Então, quando nós declaramos estilos com o identidade seletor acabará por substituir a mesma declaração do Classe, Tipo seletores e o Navegador padrão Estilos.
Incorporando os estilos
Nós passamos por todos os seletores básicos essenciais e agora vamos ver como esses estilos estão embutidos em um documento HTML.
Estilos Externos
Estilos externos são os estilos que são adicionados em um arquivo separado, geralmente em um .css arquivo que, em seguida, são vinculados ao documento HTML usando o tag para aplicar esses estilos.
E todos os estilos declarados nos arquivos se comportarão como o que mencionamos no Seletores seção acima, ou seja, substituirá principalmente o navegador padrão estilo e substituir por outra declaração de estilo, dependendo do nível de prioridade dos seletores.
Essa prática é a maneira mais recomendada de anexar os estilos, especialmente quando você tem milhares de linhas de códigos CSS com muitas páginas para anexar.
Ao fazer isso, os estilos também serão facilmente gerenciáveis, por exemplo, você pode separar os arquivos CSS em vários arquivos, dependendo de sua função específica, como typography.css para controlar todos os estilos relacionados à Tipografia e assim por diante..
Estilos Internos
Os estilos internos são os estilos que são incorporados diretamente em um documento HTML, geralmente dentro do tag.
Mas essa prática não é recomendada quando você terá centenas de linhas de estilos, pois sua página HTML será muito longa e o estilo afetará apenas onde os estilos estão incorporados. Quando você tiver digamos dez páginas, precisará copiar esses estilos e incorporá-los em todas as páginas, e quando precisar alterar os estilos, terá que alterá-los para dez páginas diferentes, o que obviamente é uma tarefa tediosa..
Com base no seu nível de prioridade, o estilo interno é maior, por isso, sobrescreve os estilos externos.
Estilos Inline
Estilos in-line são os estilos que são incorporados diretamente no elemento HTML.
Este é um parágrafo
Este exemplo acima irá adicionar 5 px margem para o elemento de parágrafo e também irá sobrescrever as margens que foram declaradas para aquele elemento tanto em estilos internos quanto externos.
Mas evite fazer isso, pois sua marcação ficará cheia de todas as declarações de estilo; se você tem um monte de estilos embutidos, vai se tornar um pesadelo para ver e manter todos os seus estilos e html.
Leitura adicional: Três maneiras de inserir CSS - W3CSchools.
A importante regra
Existem algumas circunstâncias em que temos de aplicar um estilo específico para um elemento, mas o mesmo estilo para esse elemento também foi declarado em outro lugar na folha de estilo ou no documento. Por exemplo:
Nós temos a seguinte tag âncora com estilos incorporados
Este é um link
E também temos um estilo separado para essa tag de âncora na folha de estilo.
uma borda: 1px sólido # 333; background-color: # 555;
Nesse exemplo, podemos usar o !importante regra para forçar o navegador a usar os estilos na folha de estilos em vez de um no elemento.
a border: 1px solid # 333! important; background-color: # 555! importante;
o !importante regra irá indicar que este estilo é o mais importante e deve ser aplicado sobre o outro estilo, mesmo quando está diretamente embutido no elemento (Estilos Inline).
Leitura adicional: importantes declarações CSS: como e quando usá-las - Smashing Magazine.
Conclusão
Nós viemos através de todo o assunto neste artigo. Podemos ver agora que cada seletor e a forma como incorporamos os estilos têm diferentes níveis de prioridade no mecanismo do navegador. Como eu mencionei anteriormente, esses assuntos são destinados a níveis iniciantes, então eles definitivamente não são algo novo para web designers experientes.
Mas, eu acho que todo web designer em geral concordará que voltar ao básico às vezes é necessário rever nosso conhecimento fundamental de um assunto. Na verdade, muitas vezes sentimos falta de algumas das coisas básicas, já que tendemos a ficar mais impressionados com coisas incríveis (e loucas) como essa..
Por fim, forneci um arquivo de demonstração e fonte para você examinar nossa discussão neste artigo.
- Demonstração
- Fonte de download
Espero que você goste deste post e se você encontrar alguma imprecisão nele, ou eu perdi alguns pontos importantes, não hesite em me notificar na seção de comentários abaixo.
