Caixa de diálogo Compiladora de Estilo
The Construtor de estilo caixa de diálogo fornece opções que possibilitam que você defina em cascata folha de estilos atributos de estilo (CSS).Um estilo CSS combina individuais formatação e posicionamento de atributos em um conjunto de atributos que podem ser aplicadas todas ao mesmo time.
The Construtor de estilo caixa de diálogo é dividida em dois painéis.O painel esquerdo lista oito categorias Geral (Fonte, Plano de fundo, Texto, Posição, Layout, Bordas, Listas, and Outros).Quando você seleciona uma categoria, o painel direito mostra as opções para a categoria selecionada.À medida que você selecionar opções de estilo, a Construtor de estilocaixa de diálogo cria definições de estilo CSS para você.
Você pode aplicar os atributos de estilo CSS diretamente para elementos HTML individuais em uma única página da Web ou você pode adicionar atributos de estilo a regras de estilo CSS armazenadas em estilo externo folhas.estilo externo folhas podem ser usadas para definir uma aparência comum para muitas páginas da Web ao mesmo time.
Para exibir a caixa de diálogo estilo construtor
clicar Formato no menu principal e, em seguida, clicar Estilo.
A caixa de diálogo Style Builder aparece.
selecionar uma opção no painel da esquerda para definir atributos de estilo CSS.
Criando estilos embutido CSS no modo de modo de exibição de Design
Ao formatar um elemento HTML selecionado na exibição Design, os atributos de estilo são inseridos embutido em marcação para o elemento.Alterne para modo de exibição para exibição HTML e ajuste os novos atributos de estilo inseridos.
Para aplicar atributos de estilo CSS diretamente aos elementos HTML na página da Web
em aberto o documento HTML no modo de exibição de Design do HTML Designer.
em em aberto a janela estrutura do documento, selecionar um elemento que deseja formatar e, em seguida, clicar Estilo on the Formato menu para em em aberto o Construtor de estilo caixa de diálogo.
selecionar uma opção no painel da esquerda para definir atributos de estilo CSS.
O título do Construtor de estilocaixa de diálogo incluirá o nome do elemento selecionado.Estilos CSS podem ser aplicados a elementos dentro de <BODY> elemento do documento HTML.
Marcação de estilo CSS no modo de HTML
Quando você adiciona um estilo in-line a um elemento HTML no modo de modo de exibição de Design, adicione marcação HTML seu marca de abertura que você pode exibir e edição no modo de exibição de HTML, sistema autônomo mostrado no exemplo de código a seguir.
<DIV style="font-size:9pt; font-weight:bold; color:darkblue;">CSS Styles</DIV>
Como alternativa, você pode criar um STYLE Bloquear dentro do <HEAD> elemento do documento HTML. Por exemplo:
<STYLE TYPE="text/css">
BODY {background:#FBFBFB; font-family:Verdana, Arial, Helv, Geneva, Helvetica, sans-serif; font-size:9pt;}
A:link {color:blue;text-decoration:none}
A:active {color:red;text-decoration:none}
A:visited {color:blue;text-decoration:none}
.term { font-size:9pt; font-weight:bold; color:darkblue;}
</STYLE>
CSS estilo s no estilo folhas externas
Você também pode criar estilos em uma separada folha de estilos documento que tenha uma extensão .css.
Para criar estilo s em uma separada estilo documento de folha que tem uma extensão .css
Abra uma folha de estilos externo (documento .css) para edição, ou crie um se não tiver um aplicativo Web Web seguindo estas etapas:
clicar com o botão direito do mouse em site do e, em seguida, clique em Adicionar novo item.
From a O Visual Studio Installed Templates lista o Adicionar novo item caixa de diálogo de de seleçãofolha de estilos e, em seguida, clicar Adicionar para adicionar um novo folha de estilos ao seu site da Web.
clicar duas vezes o estilo folha para abri-lo para edição.
clicar Adicionar regra de estilo from the Estilos menu para inserir uma definição de estilo em branco.
Coloque o ponto de inserção entre chaves curvas ({}) que o seletor para a regra de estilo, clicar Estilose, em seguida, clicar compilação Estilo on the Estilos menu para em aberto o Estilo compilação er diálogo caixa e adicionar atributos a definição de estilo.
.gif "Observação") Observação: |
|---|
O Estilos menu, cujas opções incluem Adicionar regra de estilo and Criar estilo, é exibida quando você em aberto uma folha de estilos CSS externa para edição.Sobre o Estilos menu, the Criar estilo opção fica disponível quando você coloca o ponto de inserção dentro de chaves que seguem o seletor para uma regra de estilo. |
Para tornar sistema autônomo estilos definidos em uma folha de estilos externo disponível para sistema autônomo elementos HTML em uma página da Web, crie um link para uma folha de estilos externo dentro de <HEAD> elemento na página, sistema autônomo neste exemplo de código a seguir.
<LINK REL=stylesheet Type="text/css" HREF="Mystyles.css">
Aplicando definições de estilo a elementos de classe e ID
Iniciar uma definição de estilo com um período para definir um estilo de CLASS propriedade, sistema autônomo mostrado no exemplo de código a seguir.
.term { font-size:9pt; font-weight:bold; color:darkblue;}
Você pode aplicar um estilo definido CLASS propriedade a um elemento na página da Web de modo de design ou HTML do HTML Designer. Na visualização Design, você pode selecionar texto ou elementos no editor WYSIWYG ou use a janela documento estrutura de tópicos para selecionar elementos.selecionar um estilo no Estilo menu suspenso de a Formato barra de ferramentas e ele é aplicado ao elemento selecionado.
No modo de exibição de HTML, você pode usar a janela documento estrutura de tópicos para selecionar o elemento em aberto a janela Propriedades, role até o CLASS propriedade do elemento selecionado e insira o seletor para o estilo CSS desejado (sem o ponto). Isso irá inserir um CLASS propriedade em marcação HTML do elemento. Por exemplo:
<DIV CLASS="term">World Wide Web</DIV>
Usando a definição anterior para o "term"estilo, as palavras "World Wide Web" será exibido em uma fonte pt 9, em negrito e azul escuro.
Os estilos exclusivos também podem ser definidos para serem usados em apenas um local em uma página.Comece o nome de um estilo exclusivo com um sinal numérico (#), sistema autônomo neste exemplo de código a seguir.
#bigdeal {font-decoration:underline; font-size:24pt; color:red;}
Para aplicar um estilo exclusivo a um elemento na página da Web
em aberto a página no modo de exibição HTML do HTML Designer.
Use a janela documento estrutura de tópicos para selecionar o elemento e abra a janela Propriedades
O ID propriedade desse elemento, insira o seletor para o estilo desejado.
Isso irá inserir um ID atributo em marcação para o elemento. Por exemplo:
<P ID="bigdeal">Happy Birthday</P>
- Usando a definição anterior para o "term"estilo, as palavras "Feliz aniversário" será exibido em uma fonte de 24 pt, sublinhada e vermelho.
Tarefas
Demonstra Passo a passo: Edição no Visual Web Developer de HTML básica
Demonstra Passo a passo: Criando e modificando um arquivo CSS
Elementos da Interface do Usuário
Para obter mais informações sobre as opções para |
Consulte |
|---|---|
Fontes |
|
Planos de fundo |
|
Texto |
|
Posição dos elementos em uma página |
|
Controle de fluxo, área de excedentes, corte e imprimir as quebras de página |
|
Bordas, margens e preenchimento |
|
Listas |
|
A interface do usuário (UI), tabelas e efeitos visuais |
Consulte também
Conceitos
Trabalhando com CSS: Uma visão geral