Passa a Passo: Criando e Modificando Arquivos CSS

  • Artigo

Essa explicação passo a passo apresenta os recursos folhas (folhas de estilo em cascata) de estilos em cascata em .Ele te guia na criação de um layout de página com três colunas, ilustrando as técnicas básicas de criação de uma nova página Web e uma nova folha de estilo.

Essa explicação passo-a-passo ilustra as seguintes tarefas:

  • Criar um site Web do sistema de arquivos.

  • Personalizar a página Web utilizando os recursos orientados à CSS.

  • Criação de um layout de página de três colunas utilizando o CSS.

Pré-requisitos

Para concluir a explicação passo a passo, você precisará do seguinte:

Criando um site da Web

Nesta parte da explicação passo a passo, você irá criar um site e adicionará uma nova página a ele.Na próxima seção, você pode adicionar arquivos CSS e então executar a página em um navegador Web.

Se você já tiver criado um site da Web (por exemplo, seguindo as etapas no. Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer, você pode usar esse site e Ir para " Adicionando e Styling elementos da página " posteriormente nessa explicação passo a passo.Caso contrário, crie um novo site seguindo as seguintes etapas.

Para criar um novo site de sistema de arquivos

  1. Em Visual Web DeveloperNa File Menu, clique em NovoSite.

  2. Na Novo Site da Web Caixa em Modelos Visual Studio instaladoClique em Web Site ASP.NET.

  3. Na Local caixa, clique em Sistema de arquivos e digite o nome da pasta na qual você deseja manter as páginas do seu site da Web.

    Por exemplo, digite a seguinte pasta Nome: C:\CSSWebSite

  4. Na Linguagem lista, clique em Visual Basic ou **Visual C#**e em seguida, clique em OK.

    Observação:

    A linguagem de programação que você escolher será o padrão do site, mas você pode definir a linguagem de programação para cada página individualmente.

    Visual Web Developer Cria a pasta e um Nova Página nomeado Padrão.aspx.

Adicionando e Modernizando Elementos da Página

Para permitir que você se foque na formatação e ferramentas de estilo ao invés da criação de elementos de estilo, um conjunto de elementos de página é fornecido nessa seção.Você pode copiar e colar esses elementos em uma página.O código inclui seções feitas com DIV Elementos que incluem um Cabeçalho, Esquerda e Direito lateral seções, uma seção de conteúdo principal e um rodapé.Esses elementos simples contém textos que você pode trabalhar e IDs de elementos.Em alguns casos, os elementos contém classes CSS que você pode utilizar para aplicar estilos a elementos específicos da página.

Adicionando Elementos de Página

No seguinte procedimento, você irá copiar os elementos da página com os quais você deseja trabalhar utilizando as ferramentas CSS.Os elementos da página consistem de um banner com texto e um caixa de pesquisa, e três seções de texto.O conteúdo principal da página está na última seção de texto.

Para adicionar elementos de página a página padrão


  1. Abrir ou Switch para a Padrão.aspx a página.

    Observação:

    Você pode utilizar qualquer página que esteja disponível na página Web.

  2. Switch Para Origem Exiba.

  3. Adicione o código a seguir após o < formulário > marca:

    < DIV ID = "pageContêiner" > < DIV ID = "faixa" > Página Styling AdventureWorks < H1 > < / H1 > < H2 > fazendo folhas de estilo em cascata Styling Easier no design Exibir < / H2 > < DIV ID = "pesquisar" > Localizar: < ID de entrada = "searchbox" Tipo = "texto" / &Gt; < ID de entrada = "searchBotão" Tipo = "botão" Valor = "Go" / &Gt; < / DIV > < / DIV > < DIV ID = "leftsidebar" Classe = "colunas" > Matters da Web < H3 > < / H3 > < p > Lorem ipsum dolor Sit Amet, consectetuer adipiscing elit. Curabitur em without. Vivamus adipiscing vulputate lacus. SED enim lorem fringilla eget nonummy SED, Sit Amet ullamcorper, diam. SED uma Justo. Curabitur nibh quis sentar Amet nunc malesuada rutrum. < /p > < / DIV > < DIV ID = "rightsidebar" class = "colunas" > Matters da Web < H3 > < / H3 > < p > Lorem ipsum dolor Sit Amet, consectetuer adipiscing elit. Curabitur em without. Vivamus adipiscing vulputate lacus. SED enim lorem fringilla eget nonummy SED, Sit Amet ullamcorper, diam. SED uma Justo. Curabitur nibh quis sentar Amet nunc malesuada rutrum. < /p > < / DIV > < DIV ID = "mainConteúdo" class = "colunas" > Matters da Web < H2 > < / H2 > < p > Pellentesque mattis tincidunt ipsum. Donec Tempus, nunc imperdiet rhoncus vitae, eros turpis accumsan risus, lacus ipsum luctus UT um felis. Vestibulum primis ipsum ante em faucibus orci luctus et ultrices posuere cubilia Curae; Aenean convallis euismod nulla. Suspendisse potenti. Donec em mi NEC odio tincidunt luctus. Donec euismod, mauris cursus molestie convallis, quam pede Tempus magna, mollis dapibus quam EST et magna. Massa eros Aenean elementum vehicula dapibus eget, lobortis não, mauris. Vivamus nisl ante, interdum eget, vel sagittis, scelerisque NEC, magna. Praesent placerat nibh vel metus viverra tincidunt. < /p > < p > Fusce magna urna gravida não sodales vehicula, consequat AC, lacus. Ut eros SED sentar Amet neque malesuada malesuada. Fusce porttitor cursus eros. Maecenas libero odio convallis vel ID tristique, vel sodales, leo. Curabitur nibh neque, interdum eget, ID convallis, adipiscing NEC, risus. Suspendisse rutrum DUI SED urna. Pellentesque leo felis, eu Tempor convallis venenatis, auctor vitae, Justo. Em massa. < /p > < / DIV > < DIV ID = "Rodapé" > < p > Lorem ipsum dolor Sit Amet, consectetuer adipiscing elit 2007. < /p > < / DIV > < / DIV >

  4. Salve a página.

  5. Switch Para Design Exiba para ver a formatação padrão.

Aplicando Estilos no Modo Design

Usando Design Exibir, você pode aplicar estilos para elementos de página e ver imediatamente os resultados.Você não precisa escrever o CSS e então alterna para a página e verificar se o estilos está como desejado.

Em Design modo de exibição, você pode aplicar estilo para elementos individuais em uma página de várias maneiras.Você pode usar estilos Em Linha, que são gravados como o Estilo Atributo de um elemento individual.Essas regras de estilos apenas se aplicam àquele elemento.

Você pode Gravar estilo regras em uma Estilo Elemento de MTML Cabeça Elemento da página.Nessa caso, a regra de estilo se aplicar apenas ao elemento naquela página.Finalmente, você pode escrever regras de estilos em um arquivo CSS externo.Nessa caso, as regras de estilos podem ser aplicadas à qualquer páginas no site Web.

Para essa explicação passo a passo, você irá gravar as informações de formatação e estilos da página Estilo Elemento seção e como estilos in-Linha.Posteriormente, você pode mover as informações Planilhas de estilo em cascata a um Externo Planilha de estilos para usar outros recursos no .

Formatando um Banner da Página

O primeiro elemento você formatará é a seção de faixa, que inclui elementos en Fechada in a < DIV ID = "faixa" > Marca.Nesse exemplo, você usará o Direcionar Estilo de aplicativos barra de ferramentas para alterar o estilo e a posição do título.Você também irá definir o tamanho da área do banner e adicionar uma cor do plano de fundo.

Para formatar um texto do banner

  1. Em Design Exibir, clique no texto de título na seção de faixa que diz " AdventureWorks Styling Page ".

    Observe que a seleção tem uma caixa azul ao redor-lo e um guia que indica que o H1 Elemento foi selecionado.

  2. Na Estilo de aplicativos barra de ferramentas, in a Regra de destino lista, clique em Aplicar estilo novo.

    O Novo estilo caixa de diálogo é exibida.

    O Direcionar Estilo de aplicativos Opção padrões para ManualPara que você irá aplicar o estilo manualmente.

  3. Na Seletor lista, clique em H1 Para que você possa criar um estilo que Aplica-se a todos H1 Os elementos.

    Observe que o Definir em Lista é definida como Página atual.Isso indica que a regra de estilo é Criado em um Estilo elemento na página atual.

  4. Na Fonte-family lista, Selecionar uma espessura da fonte, como Impacto.

  5. Na Font-size caixa, Enter ou selecione Xx-grande.

  6. Na Font-variant caixa, Enter ou selecione Pequeno - Maiúsculas.

  7. Clique em OK.

  8. Para ver a regra de estilo que foi criada, Switch para Origem Exibir e rolar para a Estilo elemento, que está localizado dentro de Cabeça Elemento.

    Você pode ver que a regra de estilos CSS que tenha sido criada para o H1 Elemento.

  9. Use as seguintes etapas para estilo de H2 Elemento na faixa de uma maneira semelhante:

    1. Abrir o Novo estilo caixa de diálogo as in a etapa 2.

    2. Selecione o H2 Elemento,

    3. Definir o Seletor Valor in a Novo estilo caixa para H2.

    4. Definir o Fonte-family para Comic Sans MS e defina o Tamanho da fonte para Pequeno.

Selecionando Elementos da Página

Em t aqui são várias maneiras para selecionar os elementos na página.Você pode usar o Seletor Rápido de Marca, que está na seção inferior das Design Exibir Painel.Quando você colocar o cursor em qualquer lugar da página, a barra de seleção rápida de marcas exibe marcas que mostram as marcações HTML existentes para aquela área.Marcações que contenham as marcações atuais aparecem ao lado esquerdo na barra seletora de marcações.Por exemplo, se o ponto de inserção estiver em uma célula de tabela, o TD marca aparece na barra de Seletor Rápido de Marca e é precedida por um TR Marca para a linha da tabela e um Tabela Marca para a tabela.

Quando você Mover o ponteiro sobre uma marca o Seletor Rápido de Marca, a marca do conteúdo está realçado no Design modo de exibição e uma seta aparece na marca.Você pode Clique nessa seta para selecionar uma marca e seu conteúdo, selecione somente o conteúdo da marca, editar ou remover a marca, Abrir o Editor Rápido de Marca caixa de diálogo, ou abra o Propriedades caixa de diálogo de um item.

Você também pode utilizar a tecla ESC para subir na hierarquia de elementos.Por exemplo, o H1 Elemento está aninhado dentro de DIV Elemento da faixa.Para selecionar todo o DIV Elemento, clique na H1 Elemento para selecioná-lo e, em seguida, use o tecla ESC para selecionar a faixa DIV Elemento.Observe que a Primeiro tempo você pressionar o tecla ESC, ele destaca a H1 Elemento e mostra o enchimento e as margens do elemento.(Como nós não definimos isso, essas são chamadas de configurações padrão) Quando você Pressionariona a tecla ESC novamente, todo o DIV Elemento é selecionado.Quando o elemento é selecionado, exibe a marca #Banner DIV.

Dimensionando o Banner e Posicionando seu Conteúdo

Você pode dimensionar e Posição a faixa e seu conteúdo em Design modo de exibição usando a Direcionar Estilo de aplicativos barra de ferramentas.As regras de estilos são escritas para a página atual, que é a mesma localização onde as regras de estilo anteriores foram escritas.

Observação:

Você pode utilizar a tecla CTRL e as teclas de direção para mudar o tamanho, mesmo já definido, dos elementos.Por exemplo, se você arrastar a largura do banner para 785 pixels, você pode usar a combinação de teclas CTRL + Seta para a Esquerda para reduzir a largura para 780 pixels.

Para dimensionar o banner

  1. Switch Para Design Exiba.

  2. Clique na H1 Texto (" AdventureWorks Styling Página ") para selecioná-lo e, em seguida, pressione o tecla ESC duas vezes para selecionar o elemento delimitador, que é a faixa DIV Elemento.

  3. Arraste a alça de redimensionamento no canto inferior direito para redimensionar a faixa DIV Elemento.

    Note que conforme você arrasta, uma dica de ferramenta exibe os valores da largura e da altura.Esses valores também são mostrados na barra de status, que está na seção inferior das Design janela de exibição.

  4. Redimensione o elemento até a largura de 780 pixels e altura de 100 pixels.

  5. Para ver a regra de estilo que foi criada, Ir para Split Exibir e rolar para a Estilo Elemento.

    Você pode ver que uma regra de estilo foi criada para a faixa DIV element **(**Usando o #Banner Seletor).

  6. Em Design Exibir, certifique-se que a faixa DIV Elemento é selecionado (#Banner DIV ainda devem ser Selecionado no navegador a marca)

  7. Na Formato Menu, clique em Cor de plano de fundo.

    O selecionador de cores é exibido.

  8. Selecione uma cor para a faixa e em seguida, clique em OK.

Você também pode aplicar regras de estilo que centralizam o texto no cabeçalho.Você pode fazê-lo definindo valores de preenchimento.

Para posicionar os elementos do cabeçalho dentro de um banner

  1. Em Design Exibir, selecione a faixa DIV Elemento.

  2. Sobre o Formato Menu, clique em Paragraph.

    O Paragraph caixa de diálogo é exibida.

    Porque o H1 Elemento tem o mesmo comprimento de faixa DIVVocê pode posicionar o texto dentro de H1 Elemento para Centralizar-lo em área de cabeçalho.

  3. Na Paragraph Caixa, in a Alinhamento drop-down list, selecione Center e em seguida, clique em OK.

  4. Selecione o H2 Elemento e em seguida, Repetir as etapas 2 e 3.

  5. Selecione a faixa DIV Elemento.

  6. Enquanto controladora Para Baixo a tecla SHIFT, mantenha a ponteiro do mouse sobre a borda do DIV Elemento até que uma Dica de ferramenta exibe o valor atual de preenchimento.

  7. Arraste a borda de preenchimento até que seja adjacente a parte superior b Ordem das DIV Elemento.

  8. Arrasta até que os dois elementos de texto estejam centralizados (Cerca de 30 pixels).

Para concluir a faixa, você deve posicionar a pesquisa DIV elemento e seus elementos na faixa.Você pode usar outro recurso do a grade de posicionamento, para fazer isso.

Para posicionar o elemento div de busca dentro do banner

  1. Em Design Exibir, selecione a pesquisa DIV (elemento #Search DIV).

  2. Sobre o Formato Menu, clique em Definir posiçãoe em seguida, selecione Absolute.

  3. Arraste a pesquisa DIV Elemento pela sua guia (o texto lê #Search DIV para uma posição que está dentro da faixa, mas para o Direito dos elementos de texto.

    Note que duas linhas azuis se estendem da seleção, que indicam o valor da posição no alto e na esquerda.

  4. versão a pesquisa DIV Elemento quando você tiver-posicionada onde desejar.

Criando um Layout Flexível de Três Colunas

Você pode usar Visual Web Developer Para criar regras de estilo por Formatação elementos na página Design Exiba.Você também pode utilizar essas mesmas ferramentas para criar seu layout de página.

Nessa passo a passo, você criará um layout de três colunas utilizando a regra de estilo Flutuante.Primeiro, você definirá o tamanho e a posição das barras laterais da esquerda e da direita, e então você pode ajustar o preenchimento da seção de conteúdo principal para cria uma layout flexível de três colunas.

Observação:

Para ver os elementos posicionados corretamente no Design modo de exibição, talvez seja necessário ocultar o Toolbar.Você terá maior espaço para exibir a posição dos elementos da página.

Criando Colunas das Barras Laterais

Você pode redimensionar as colunas laterais no layout da página da mesma forma que o banner foi redimensionado.Quando você redimensiona as colunas da barra lateral, você deseja apenas definir a largura, e não a altura, para que o texto possa estender o tamanho da coluna, se necessário.Para definir somente a largura das DIV Elemento, você pode arrastar à direita das DIV Elemento em vez de captura de faixas a partir do canto do DIV elemento, como no exemplo anterior.

Para redimensionar e posicionar as barras laterais direita e esquerda dos elementos div.

  1. Em Design Exibir, selecione a lateral esquerda DIV Elemento.(Você pode fazer isso por seleção DIV.Coluna#leftsidebar No marca do Navigator.).

  2. Arraste a borda direita da barra lateral à esquerda DIV Elemento para redimensionar o elemento até que ele sobre 200 pixels.

    Note que conforme você arrasta, o valor da altura é mostrado entre parênteses, que indica que ele não está sendo definido.

  3. Na Formato Menu, clique em Position.

    O Position caixa de diálogo é exibida.

  4. Em Quebra Automática de estiloSelecione À esquerda e em seguida, clique em OK.

  5. Selecione a lateral direita DIV Elemento e arraste a borda direita até que a largura é sobre 250 pixels.

  6. Sobre o Formato Menu, clique em Position.

  7. Em Quebra Automática de estiloClique em Direita e em seguida, clique em OK.

Criando a Coluna Central

Para criar a coluna central, você pode definir as margens e o preenchimento para deixar o conteúdo longe das colunas esquerda e direita.Você criará primeira a borda esquerda, e então usar o preenchimento para mover o conteúdo para longe da borda.

Para aplicar estilo a colina central

  1. Em Design Exibir, selecione o conteúdo principal DIV Elemento.

  2. Mantendo pressionada a tecla CTRL, arraste a margem direita do conteúdo principal DIV Elemento para definir a margem direita como 260 pixels.Arrasta a margem esquerda para o valor de 210 pixels.

  3. Enquanto o conteúdo principal DIV elemento estiver selecionado, no Formato menu, selecione Bordas e Sombreamento.

    O Bordas e Sombreamento caixa de diálogo é exibida.

  4. Em ConfiguraçõesSelecione Personalizado.

  5. Na Style Na lista, selecione Sólidoe em PreviewClique no botão de borda esquerda.

  6. Na Width caixa de texto, digite 1px.

  7. Em Enchimentoin a À esquerda caixa, digite 10px.

  8. Clique em OK.

Ajustando o rodapé

Se o usuário redimensiona a página ou se ela é exibida em um monitor de formato maior, o rodapé pode quebrar automaticamente e aparecer na margem de uma coluna.Para evitar isso, você pode definir a regra de estilo Clear.

Para ajustar o elemento div de rodapé

  1. Em Design Exibir, selecione o rodapé DIV Elemento.

  2. Sobre o Formato Menu, clique em Novo estilo.

    O Novo estilo caixa de diálogo é exibida.

  3. Na Seletor caixa, Enter ou selecione # footer.

  4. Na Category (Categoria) lista, clique em Layout.

  5. Na Limpar Na lista, selecione Ambos.

  6. Clique em OK.

Criando e aplicando uma folha de estilos

Um modo eficiente de se trabalhar com o CSS é colocando as regras de estilo em uma folha de estilos.Os estilos podem então ser referenciados por todas as páginas, para que pareçam consistentes.

Você também pode utilizar folhas de estilo em cascada com temas ASP.NET.Para usar uma folha de estilo com um tema, você deve colocá-lo na pasta correta.Para obter mais informações sobre os temas e folhas de estilo em cascata, consulte Visão Geral de Temas e Aparências ASP.NET.

Para criar um folha de estilos, você utiliza as mesmas técnicas que foram utilizadas para criar uma nova página.

Para criara uma folha de estilos e anexá-la à página.

  1. Em Explorer soluçãoClique com botão direito do mouse o nome do site da Web e em seguida, clique em Adicionar novo item.

  2. Em Modelos Visual Studio instaladoSelecione Style Sheet.

  3. Na Name (Nome) caixa, digite Layout.csse em seguida, clique em Adicionar.

    Abre o editor com um novo Planilha de estilos que contém um vazio Corpo regra de estilo.

  4. Abrir ou alterne para a página default.aspx e alternar para Design Exiba.

  5. Na Formato Menu, clique em Folhas de estilo em cascata estilose em seguida, clique em Gerenciar estilos.

    O Gerenciar estilos janela é aberta.(Por padrão, a janela está inacessível.)

  6. Clique em Anexar Folha de Estilos.

  7. O Selecionar folha de estilos caixa de diálogo é exibida.

  8. Selecione o arquivo Layout.css e em seguida, clique em OK.

    A Novo guia chamado Layout.css é criado na Gerenciar estilos a janela.

Você pode atribuir uma folha de estilo à uma página de diversos modos.A maneira mais simples é arrastar o arquivo de Explorer solução Para o elemento Cabeçalho da página em Modo de exibição Origem.

Movendo Regras de Estilo de uma Página para um Folha de Estilos

Você pode usar o Gerenciar estilos Painel para mover os estilos de uma página a um Outro, ou para ver como as regras de estilo são aplicadas em uma página.

De até esse ponto no exame Através, as regras de estilo que você criou foram salvas na Estilo Elemento da página Padrão.aspx.Você pode move essas regras de estilo para a nova folha de estilos que você criou.

Para mover as regras de estilo utilizando o painel Gerenciar Estilo.

  1. Na Página atual Guia das Gerenciar estilos janela, Selecionar Tudo os estilos.(você pode selecioná-los utilizando a combinação SHIFT + CLIQUE.)

  2. Arraste os estilos selecionados para o Layout.css Guia das Gerenciar estilos a janela.

    As regras de estilos são removidas da página Default.aspx e movidos para o arquivo Layout.css.Você pode confirmar isso, exibindo a página default.aspx Origem Exibir e alternando para o Layout.css página no editor.

Você também pode alterar a ordem dos estilos in a folha de estilos, usando o Gerenciar estilojanela s.Por exemplo, você pode arrastar o regra de estilo da pesquisa para que essa esteja diretamente abaixo da regras de estilo do banner.

Próximas etapas

Essa explicação passo a passo tem ilustrado as técnicas básicas para trabalhar com Estilos da CSS usando o interface do usuário em .Você poderá também querer explorar as seguintes formas de controlar a aparência das páginas Web:

Consulte também

Tarefas

Demonstra Passo a passo: Criando uma página da Web básica no Visual Web Developer

Conceitos

Tipos de Sites no Visual Web Developer