Uma folha de estilos em cascata (CSS) contém regras de estilos que são aplicadas a elementos em uma página da Web.Estilos CSS definem como elementos são exibidos e onde eles são posicionados na página.Em vez de atribuir atributos a cada elemento em sua página individualmente, você pode criar uma regra geral que aplica atributos sempre que o navegador da Web encontrar uma instância de um elemento ou um elemento que é atribuído a uma determinada classe de estilo .
Folhas de estilo em cascata estilos podem ser colocados interno em um único elemento HTML, agrupados em um style Bloquear dentro de seção head de uma página da Web, ou importados de uma separar folha estilo.Se os estilos forem criados em uma folha de estilos separada, você pode vincular várias páginas da Web à folha de estilos, assim dando uma aparência comum a um site inteiro.Se você estiver usando folhas de estilo em cascata para controles W3 (World Wide Web) estilo, você deve usar a propriedade CssClass para definir um nome classe folhas de estilo em cascata para ser associado com o controle ou elementos controle e, em seguida, fazer referência que Nome classe quando atribuição estilos ao controle ou controle elementos de estilo Planilha.
.gif) Observação: |
|---|
Não há suporte para estilos CSS em todos os navegadores.Os navegadores da Web mais antigos, que oferecem suporte somente a HTML 3.2 ou anterior, irão ignorar estilos CSS e o suporte de navegadores em dispositivos móveis varia.Você pode selecionar um esquema de navegador no Visual Studio .NET que irá validar os estilos você estiver usando e fornecer o IntelliSense para estilos no modo de exibição Source.Para obter detalhes, consulte Como: Selecionar A validação de esquemas para HTML edição em Visual Web Developer. |
Definir regras de estilo CSS em blocos estilo
Cada regra de estilo CSS possui duas partes principais — um seletor (como h1) e uma declaração (como color:red).A declaração inclui uma propriedade (color) e seu valor (red).A sintaxe é:
Selector { property : value ; property2 : value2}
Uma regra de estilo CSS simples, que especifica que qualquer texto contido em marcas <h1></h1> ser centralizado e a cor da fonte formatados como vermelho é escrito da seguinte maneira:
H1 {text-align:center; color:red;}
Folhas de estilo em cascata estilo regras podem ser definidas em um style Bloquear dentro de elemento head do seu página da Web.O seguinte exemplo de código define e aplica uma regra estilo folhas de estilo em cascata para Tudo dos elementos h1 em um página da Web:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>HTML 4.0 CSS Element Style Example</title>
<style type="text/css">
h1{text-align:center; color:red;}
</style>
</head>
<body>
<h1>This text is centered and red</h1>
</body>
</html>
Nessa página da Web, qualquer texto que aparece entre as marcas <h1></h1> será centralizado e vermelho.Você não precisa reatribuir esses atributos de estilo para cada marca <h1> que ocorre no documento.Se você desejar para Alterar de cor (ou qualquer outra propriedade) de todo o texto entre o <h1></h1> marcas, você pode fazer isso por edição uma regra estilo.
Precedência de regras de estilo CSS
Regras de estilo CSS ficam em cascata no sentido de que regras de estilo globais continuam a se aplicar a elementos HTML a menos que regras de estilo locais as substituam.Em geral, regras de estilo locais têm prioridade sobre regras de estilo gerais.Isso significa, de exemplo, que um estilo definido em um style Bloquear em um página da Web substitui um estilo definido em um folha de estilos externa.Da mesma forma, um estilo in-line que é definido em um único elemento HTML na página substitui quaisquer estilos que são definidos para esse mesmo elemento em outro lugar.
Partes de regras de estilo globais não substituídas pelas regras de estilo CSS locais continuam a se aplicar a elementos mesmo depois que forem aplicados os estilos local.Na exemplo de código na seção anterior, o local Estilos da CSS que regem texto em substituir o elemento h1 parte estilo global do navegador da Web regras para texto h1 (centralizar texto h1 e torná-lo em vermelho), mas eles não alteração todas as disponível estilos, such as características fonte.Ambos global e local estilo regras são aplicadas, em que ordem, fazendo Tudo o texto h1 exibir essa página em um maior fonte que está formatado como negrito, centralizado e colorido vermelho.
Estilos CSS e temas ASP.NET
O ASP.NET permite que você defina temas, que são uma combinação de configurações de propriedades para os controles do servidor Web, regras de folhas de estilos e imagens.Aplicando um tema a um site, você pode especificar uma aparência consistente em todas as páginas no mesmo.
Temas são semelhantes a estilos, pois eles definem um conjunto global de características para os elementos em uma página.No entanto, ao contrário dos estilos em um style Bloquear ou estilo folha, você pode a prioridade de configurações de controle.Por padrão, quando você aplica um tema a uma página ou a um site, os estilos e outras propriedades no tema têm prioridade sobre os estilos definidos localmente.Esse é o comportamento oposto ao modo com que estilos normalmente são aplicados.Esse comportamento foi projetado para permitir que temas sejam aplicados a páginas existentes (incluindo aquelas com estilos definidos localmente) e estabelecer o mesmo aspecto para diferentes páginas.
Você também pode aplicar um tema como um tema de folha de estilos.Nesse caso, os estilos e propriedades definidas no tema são aplicadas da mesma maneira que estilos CSS são — estilos locas têm prioridade sobre estilos que estão definidos no tema.Para obter mais informações, consulte Visão Geral de Temas e Aparências ASP.NET.
Atribuindo elementos HTML a uma classe de estilo CSS
Você pode definir estilos para aplicar a marcas pelo nome de marca, como h1.Para permitir que você crie diferentes estilos para o mesmo elemento ou o mesmo estilo para diferentes elementos, você pode criar classes CSS.Uma classe define estilos da mesma maneira que qualquer outra definição de estilo.Entretanto, você fornecer um nome ao estilo.Para aplicar o estilo a um elemento, especifique o nome do estilo como o atributo class da marca.Por exemplo, o exemplo de código a seguir é uma definição de estilo para a classe head2:
.head2 {font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic;}
Para aplicar esse tipo de estilo Em Linha, adicionar um atributo class para uma marca que ofereça suporte a Em Linha estilos conforme o seguinte exemplo de código.
O que torna head2 uma classe é o caractere ponto (.).Você poderia ter feitas head2 uma classe para marcas h1 somente por declará-la da seguinte maneira:
H1.head2 {font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic;}
Folhas de estilos em cascata externas
Uma folha de estilos externa é um arquivo de texto simples com um extensão de nome de arquivo .css que contém somente regras de estilo.Você pode link um estilo Planilha para um página da Web usando um elemento link, conforme mostrado no seguinte exemplo de código.
<link rel="stylesheet" type="text/css" href="Mystyles.css" />
Este elemento link aplica regras de estilo na estilo externo Planilha Mystyles.css para a página.
Regras de estilo listadas em um folha de estilos externa são gravadas apenas como estão quando colocados em um style Bloquear, mas sem marcas <style> </style> delimitador, conforme o seguinte exemplo de código
h1 { text-align:center; color:red; }
.head2 { font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic; }
Você pode vincular várias páginas HTML a uma folha de estilos externa, o que irá aplicar os estilos consistentemente no site inteiro.Folhas de estilos separam regras de formatação do conteúdo, tornando ainda mais fácil localizar e editar as regras de estilo.
Outros recursos