Visual Web Developer Cascading Style Sheets Overview
A cascading style sheet (CSS) contains style rules that are applied to elements in a Web page.
CSS styles define how elements are displayed and where they are positioned on the page.
Instead of assigning attributes to each element on your page individually, you can create a general rule that applies attributes whenever a Web browser encounters an instance of an element or an element that is assigned to a certain style class.
CSS styles can be placed inline within a single HTML element, grouped in a style block within the head section of a Web page, or imported from a separate style sheet.
If styles are created in a separate style sheet, you can link multiple Web pages to the style sheet, thus giving a common appearance to an entire Web site.
If you are using CSS to style web controls, you should use the CssClass property to define a CSS class name to be associated with the control or control elements and then reference that class name when assigning styles to the control or control elements in the style sheet.
.gif)
Note:
|
|---|
|
CSS styles are not supported in all browsers.
Older Web browsers that support only HTML 3.2 or earlier will ignore CSS styles, and support for browsers on mobile devices varies.
You can select a browser schema in Visual Studio .NET that will validate the styles you are using and provide IntelliSense for styles in Source view.
For details, see How to: Select Validation Schemas for HTML Editing in Visual Web Developer.
|
 Defining CSS Style Rules in Style Blocks
Each CSS style rule has two main parts — a selector (such as h1) and a declaration (such as color:red).
The declaration includes a property (color) and its value (red).
The syntax is as follows:
Selector { property : value ; property2 : value2}
A simple CSS style rule, which specifies that any text contained within <h1></h1> tags be centered and the font color formatted as red is written as follows:
H1 {text-align:center; color:red;}
CSS style rules can be defined in a style block within the head element of your Web page.
The following code example defines and applies a CSS style rule to all of the h1 elements on a Web page:
<!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>
On this Web page, any text that appears between the <h1></h1> tags will be centered and red.
You do not need to reassign these style attributes for each <h1> tag that occurs in the document.
If you want to change the color (or any other property) of all text between the <h1></h1> tags, you can do so by editing one style rule.
Precedence of CSS Style Rules
CSS style rules cascade in the sense that global style rules continue to apply to HTML elements unless local style rules override them.
In general, local style rules take precedence over general style rules.
This means, for example, that a style defined in a style block in a Web page overrides a style defined in an external style sheet.
Similarly, an inline style that is defined within a single HTML element on the page overrides any styles that are defined for that same element elsewhere.
Portions of global style rules not overridden by local CSS style rules continue to apply to elements even after local styles are applied.
In the code example in the previous section, the local CSS styles governing text in the h1 element replace some of the Web browser's global style rules for h1 text (center h1 text and make it red), but they do not change all of the available styles, such as font characteristics.
Both global and local style rules are applied, in that order, making all the h1 text on this page display in a larger font that is formatted as bold, centered, and colored red.
CSS Styles and ASP.NET Themes
ASP.NET allows you to define themes, which are a combination of property settings for Web server controls, style sheet rules, and images.
By applying a theme to a Web site, you can specify a consistent look across all of the pages in the site.
Themes are similar to styles in that they define a global set of characteristics for elements on a page.
However, unlike styles in a style block or style sheet, you can control the precedence of settings.
By default, when you apply a theme to a page or a Web site, the styles and other properties in the theme take precedence over the locally defined styles.
This is the opposite behavior from the way styles are normally applied.
This behavior was designed to allow themes to be applied to existing pages (including those with locally defined styles) and establish the same look for different pages.
You can also apply a theme as a style sheet theme.
In that case, the styles and properties defined in the theme are applied in the same way that CSS styles are — local styles take precedence over styles that are defined in the theme.
For more information, see ASP.NET Themes and Skins Overview.
Assigning HTML Elements to a CSS Style Class
You can define styles to apply to tags by tag name, such as h1.
To allow you to create different styles for the same element, or the same style for different elements, you can create CSS classes.
A class defines styles in the same way as any other style definition.
However, you give the style a name.
To apply the style to an element, you specify the style name as the class attribute of the tag.
For instance, the following code example is a style definition for the class head2:
.head2 {font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic;}
To apply this type of style inline, add a class attribute to a tag that supports inline styles as shown in the following code example.
What makes head2 a class is the period (.) character.
You could have made head2 a class for h1 tags only by declaring it as follows:
H1.head2 {font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic;}
External Cascading Style Sheets
An external style sheet is a plaintext file with a .css file name extension that contains only style rules.
You can link a style sheet to a Web page by using a link element, as shown in the following code example.
<link rel="stylesheet" type="text/css" href="Mystyles.css" />
This link element applies the style rules in the external style sheet Mystyles.css to the page.
Style rules listed in an external style sheet are written just as they are when placed within a style block, but without <style> </style> tags enclosing them, as shown in the following code example
h1 { text-align:center; color:red; }
.head2 { font-size:14pt; text-align:center; color:red; font-weight:bold; font-style:italic; }
You can link multiple HTML pages to an external style sheet, which will apply consistent styles across an entire Web site.
Style sheets separate formatting rules from content, making it much easier to locate and edit style rules.
See Also
|
Visual Web Developer Visão geral sobre folhas de estilo em cascata
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.
|
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.
Consulte também
|