Ao longo do ano passado, passei muito tempo reaprendendo como usar CSS. Desde que o ASP.NET foi lançado, o uso de Web Controls me tornou ignorante em CSS e HTML. Com o advento do ASP.NET MVC e do jQuery, combinado com a crescente demanda por experiências de usuário mais ricas, eu sabia que precisava resolver essa deficiência imediatamente. Daí minha aventura em minha série Thin ASP.NET. Demorei um pouco porque simplesmente não entendia como os seletores de CSS realmente funcionam. Quando comecei a usar o jQuery, ele finalmente apareceu para mim e realmente comecei a entender. Existem três seletores CSS fundamentais que praticamente qualquer pessoa que tenha feito algum trabalho na web entende, tipo, classe e ID do DOM.
O seletor de tipo
Este deve ser o seletor mais óbvio porque define a regra padrão a ser seguida para o elemento especificado (eu realmente os chamo de seletores de elemento, mas isso não é tecnicamente correto, eles são Seletores de tipo ). Por exemplo, a regra a seguir designa que o texto contido em um elemento
terá o tamanho da definição de tamanho da fonte do elemento que o contém e a cor do texto será preto.
P { tamanho da fonte
: 1em;
cor
: # 000;
}
Este é um bom começo. Hoje, os sites que seguem as práticas recomendadas de CSS definem uma redefinição de CSS na parte superior do arquivo. Basicamente, este é um conjunto de regras que definem o comportamento de layout padrão desses elementos na página. A razão principal por trás dessa técnica é assumir o controle sobre as regras de renderização padrão do navegador, eliminando assim muitas das diferenças frustrantes entre os navegadores. Pessoalmente, decidi adotar a redefinição YUI CSS do Yahoo como minha redefinição padrão, mas há muitos outros disponíveis e, claro, você pode definir o seu próprio.
O seletor de classes
Este regra define uma regra CSS para qualquer elemento que defina a classe a ser aplicada. Vejo essa técnica quase abusada às vezes por desenvolvedores de ASP.NET enquanto tentamos desesperadamente superar a renderização de controle do ASP.NET deficiente. Como no exemplo anterior, posso definir uma classe CSS para impor a mesma lógica de renderização:
.defaultText
{tamanho da fonte
:1em;
cor
:# 000;
}
Uma classe CSS é definida com um’.’prefixo e pode ser nomeado como quiser. Para aplicar esta regra a qualquer elemento HTML, tudo o que você precisa fazer é incluir o atributo class e configurá-lo igual ao nome da classe. Algo que aprendi no ano passado é a capacidade de definir várias regras de classe para um elemento no atributo de classe. Isso é muito útil ao atribuir plug-ins jQuery.
<
entrada
tipo
="text"
id
="txtFirstName"
classe
="defaultText textField"
/>
Para um controle da web ASP.NET, você atribui quaisquer regras de classe na propriedade CSSClass, o que acaba renderizando o atributo de classe com esses valores. p>
<
asp: TextBox
runat
="servidor"
id
="txtFirstName"
CSSClass
="defaultText textField"
/>
O seletor de ID
O último tipo de seletor encontra um elemento DOM por Id ou o nome atribuído do elemento. Portanto, nos exemplos acima, você pode definir uma regra para o elemento de entrada específico. O seletor de ID é prefixado com um’#’na regra definição.
# txtFirstName {font-size
:1em;
cor
: # 000;
}
Desta vez, em vez do atributo de classe necessário, não há necessidade de definir este valor. A regra CSS apenas será aplicada automaticamente. Neste exemplo, você provavelmente não deseja definir uma regra apenas para o elemento txtFirstName porque isso é muito específico porque a regra CSS provavelmente precisaria ser aplicada a muitos outros elementos também. Mas não há nada que diga que você não pode fazer isso e vou mostrar alguns truques para definir a mesma regra para vários seletores mais tarde na postagem.
Combinando seletores
É aqui que vejo Os novatos em CSS perdem a eficácia dos seletores de CSS em suas páginas. Em vez de alavancar o poder real dos seletores CSS, eles sujarão sua marcação com atributos de classe que são duplicados continuamente em uma página. O exemplo a seguir é um componente de login simples com elementos de entrada de e-mail e senha. Estou definindo os atributos de classe para ambos de uma forma muito ineficiente, duplicando o esforço.
<
ul
>
<
li
>
<
entrada
id
="txtEmail"
tipo
="texto"
classe
="loginText"
/>
li
>
<
li
>
<
entrada
id
="txtPassword"
digite
="senha"
classe
="loginText"
/>
li
>
<
li
>
{Botões}
li
>
ul
>
A marcação usa a regra de classe para garantir que ambas as entradas sejam semelhantes. Mas temos algum código desperdiçado aqui. E se eu definir um id para o
- e combinar alguns seletores de elemento para uma regra CSS? Isso poderia ser muito eficiente porque eu precisaria apenas de um nome e uma regra simples. Neste caso, ele é conhecido como um seletor descendente porque especifica que esta regra seja aplicada a qualquer elemento INPUT que seja filho de um LI descendente de um elemento UL chamado loginElements.
ul
#loginElementsli
input
{font-size
:1em;
cor
:# 000;
}
A marcação agora pode ter a seguinte aparência:
<
ul
id="loginElements">
<
li
>
<
input
id="txtEmail"type="text"/>
<
/li
>
<
li
>
<
input
id="txtPassword"type="password"/>
<
/li
>
<
li
>
{Botões}<
/li
>
<
/ul
>
Isso é, em última análise, menos texto sendo enviado ao navegador em cada solicitação de página e uma regra mais específica. Também nos ajuda aplicando o mesmo estilo a quaisquer outros campos de entrada que possamos querer adicionar, pense em adicionar um campo OpenId ou talvez um terceiro identificador. Isso realmente é útil em formulários mais longos.
A capacidade de combinar vários seletores também pode ser feita com nomes de classe, na verdade, você pode combinar quantos seletores quiser em praticamente qualquer combinação que puder sonhar. É preciso um pouco de prática, mas você pode ser bem específico com seus seletores e isso, em última análise, fornece precisão cirúrgica para definir como um elemento será renderizado.
No exemplo do formulário de login, posso não fazer referência ao ID do elemento, mas talvez defina a classe a seguir no elemento
- . Nesse caso, a regra CSS pode ter a seguinte aparência:
UL.loginElements
LI INPUT {font-size
:1em;
cor
:# 000;
}
Isso é muito bom, mas esqueci uma coisa! Não há rótulos no formulário para informar ao usuário o que inserir, então vamos adicioná-los.
<
ul
>
<
li
>
<
etiqueta
para
="txtEmail"
>
E-mail
etiqueta
> <
entrada
id
="txtEmail"
tipo
="texto"
classe
="loginText"
/>
li
>
<
li
>
<
etiqueta
para
="txtPassword"
>
Passwordlabel
> <
input
id
="txtPassword"
type
="password"
classe
="loginText"
/>
li
>
<
li
>
{Botões}
li
>
ul
>
Agora preciso de uma regra CSS para definir como os rótulos estão indo para renderizar. Sem problemas, posso definir uma regra semelhante à regra de entrada. Na verdade, vou usar exatamente a mesma regra, empilhando os seletores na regra.
UL.loginElements
LI LABEL, UL.loginElements
LI INPUT {font-size
:1em;
cor
:# 000;
}
Eu chamo de empilhamento porque acho que é melhor quando eles estão empilhados um em cima do outro. O termo oficial é Agrupamento . Mas isso não é bom o suficiente para mim, acho que ainda preciso definir mais algumas regras CSS para o rótulo e os elementos de entrada para torná-los um bom layout. As regras a seguir fazem com que os rótulos tenham 75 pixels de largura e flutuem para a esquerda, o que significa que todos serão alinhados ao longo do lado esquerdo. O texto também é alinhado à esquerda.
UL.loginElements
LI LABEL, UL.loginElements
LI INPUT {font-size
:1em;
cor
:# 000;
} UL.loginElements
LI LABEL {largura
:75px;
flutuante
:esquerdo;
alinhamento do texto
:esquerda;
} UL.loginElements
LI INPUT {largura
:100px;
float
:esquerda;
}
Agora o formulário está começando a ficar melhor! E demonstrei outro recurso com seletores CSS, a capacidade de definir mais de uma regra para um seletor CSS. Não há limite para o número de regras que você pode definir. Se você leu meu último post sobre as Ferramentas de Desenvolvimento integradas ao IE 8, viu que ele oferece um traço visual das regras CSS que são aplicadas a um elemento e qual seletor aplicou a regra.
Seletores irmãos
Agora vou apenas ficar chique com você e me exibir. Uma das coisas mais legais na sintaxe do seletor CSS é a capacidade de definir regras a serem aplicadas a um elemento com base em elementos que estão localizados ao lado dele, ou irmãos .
A maneira de definir um seletor de irmão é colocar um + entre o irmão esquerdo e o irmão direito. Portanto, uma regra irmã se parece com A + B, onde B é o alvo da regra.
h1
+p
{cor de fundo
:# 3399FF;
cor
:#000000;
família da fonte
: Arial, Helvetica, sans-serif;
font-size
:1em;
}
Aplicar essa regra à seguinte marcação renderiza um parágrafo com um fundo azul. As tags H1 e P são irmãs na tag DIV principal.
<
div
>
<
h1
>
Demonstração do seletor CSS
h1
>
<
p
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam tellus odio, cursus...
p
>
div
>
Infelizmente, você não pode fazer o contrário com os irmãos. Portanto, definir uma regra para P + H1 não permitirá que você defina o estilo aplicado a uma tag H1 que tenha um P próximo a ela, como o HTML acima.
Da mesma forma, você pode definir seletores descendentes onde a primeira regra do seletor é imediatamente seguida por um seletor. Portanto,’DIV P’designa qualquer parágrafo dentro de um elemento DIV. Você também pode designar’DIV> P’para selecionar qualquer parágrafo que seja descendente direto de um elemento DIV.
Seletores de atributos
Atributo seletores são outro truque de seletor muito legal que eu gosto de usar. Isso dá a você a capacidade de definir um seletor que se aplica a um elemento que contém um atributo que atende aos critérios. Você pode definir um seletor que diz que o elemento só precisa ter o atributo definido [att]:
ou um atributo com um valor específico [att=val]:
input
[type=text]
ou um atributo com pelo menos um valor correspondendo a um valor [att ~=val]:
P [title
~=Raleigh]
Finalmente, você pode combinar os valores com base na especificação do idioma [att |=val]. Este é especial porque o valor deve ser seguido por um’. Portanto, você normalmente corresponderia ao atributo lang. Portanto, um estilo de P [lang |=en] corresponderia a todos os tipos de idioma inglês.
Seletores de pseudo-classe
Pseudo classes permitem que você designe uma regra para um elemento com base em algum atributo que não faz parte da árvore do documento. Bem, isso depende da maneira como você interpreta o modelo de árvore do documento, eu acho, porque você pode designar estilos com base na posição abaixo de um elemento com seletores como o primeiro filho, etc. Portanto, tomando o exemplo do seletor irmão, você poderia definir um seletor que aplica-se apenas ao primeiro parágrafo dentro do DIV pai como o seguinte:
div
>
p
: first-child {...}
Eles todos fornecem um controle mais granular sobre como as regras de estilo são aplicadas a elementos com base em onde o mouse ou o foco do usuário é colocado na página. Você deve observar que: hover deve ser colocado depois de: link e: visitado porque a propriedade color estaria oculta de outra forma. Além disso, as pseudo classes podem ser combinadas como: focus: hover.
Seletores de elemento psuedo
Semelhante aos seletores de pseudo classe, existem seletores que realmente estendem a capacidade de controlar a renderização com base na posição do conteúdo em um elemento, pseudo-elementos . É assim que você vê coisas como uma letra maiúscula muito grande no início de um parágrafo ou uma fonte diferente ou imagem de plano de fundo para a primeira linha. O pseudo-elemento: first-letter permite uma regra específica para o primeiro caractere.
Adicionar os seguintes seletores ao exemplo altera o primeiro caractere e a primeira linha do parágrafo:
h1
+p
: primeira linha {transformação do texto
:capitalize;
cor
:#CCCCCC;
margem
-inferior
:4px;
font-size
:1.25em;
font-family
:'Times New Roman', Times, serif;
}h1
+p
: preenchimento da primeira letra {:
2px 5px 3px 5px;
cor de fundo
:#0066FF;
cor
:#333333;
família da fonte
: Arial, Helvetica, sans-serif;
tamanho da fonte
:4em;
float
:esquerdo;
margem
-certo
:8px;
}
Que produz o seguinte efeito quando é renderizado:
Resumo
Com tanto poder bruto em nosso disposição para controlar o layout e renderização de qualquer página de masterização de seletores CSS é uma habilidade obrigatória para qualquer desenvolvedor web. Espero que esta postagem possa ser usada como um documento de referência para você no futuro. E de agora em diante, espero que você tenha confiança para controlar seu layout com CSS e não controlar atributos ou, pior ainda, definições de estilo inline. Acho que você também descobrirá que sua marcação é muito mais sustentável. Mudanças em seu layout também serão muito mais fáceis de realizar.
Procure outra postagem sobre como definir seletores para trabalhar com controles da web ASP.NET e algumas de suas peculiaridades nos próximos dias.
