Trabalhando com Folhas de Estilo CSS em uma Aplicação em HTML5

As aplicações em HTML5 costumam combinar HTML, CSS e JavaScript para criar aplicações executadas em um browser e exibidas em diversos dispositivos, incluindo smartphones, tablets e laptops. Este documento demonstra como o IDE oferece ferramentas que podem ajudá-lo a trabalhar com regras de CSS para modificar o layout de uma aplicação. O IDE também fornece suporte para criar e usar os pré-processadores Sass e LESS CSS em sua aplicação.

A extensão NetBeans Connector para o browser Chrome pode ajudá-lo a exibir aplicações da forma como elas seria, exibidas em vários dispositivos. A extensão ativa o browser Chrome e o IDE para se comunicarem um com o outro. O modo Inspecionar no NetBeans pode ajudá-lo a localizar elementos no seu código-fonte, selecionando-os no browser. Depois que você selecionar um elemento no browser, poderá usar o IDE para exibir as regras de CSS e as propriedades aplicadas a esse elemento.

Para obter detalhes sobre como instalar a extensão NetBeans Connector para o browser Chrome, consulte o tutorial Conceitos Básicos sobre Aplicações em HTML5 .

Para observar um screencast deste tutorial, consulte Vídeo do Trabalho com Folhas de Estilo CSS em Aplicações HTML5.

Conteúdo

O conteúdo desta página se aplica ao NetBeans IDE 6.8, 6.9, 7.4 e 8.0

Para concluir este tutorial, você precisará dos recursos a seguir:

Software ou Recurso Versão Necessária
NetBeans IDE, Java 7.4, 8.0
JDK (Java Development Kit) 7 ou 8
Browser Chrome --
Extensão NetBeans Connector para Chrome 1.1 ou mais recente
HTML5DemoSiteTemplate.zip --
Pré-processador de CSS Sass ou
LESS

Observações:

  • O modelo HTML5DemoSiteTemplate.zip é um modelo de site que você irá usar ao criar o projeto.
  • Se você quiser comparar seu projeto com uma solução em funcionamento, poderá fazer download do modelo de site do projeto acabado.
  • Este tutorial pressupõe que você tenha alguma experiência com programação ou algum conhecimento básico de HTML, CSS e JavaScript.

Criando a Aplicação do NetBeans em HTML5

Neste tutorial, você utilizará um site modelo para criar o projeto em HTML5. O modelo de site que você usa neste tutorial é o mesmo que foi salvo como modelo de site no tutorial Conceitos Básicos sobre Aplicações em HTML5. Se você tiver executado as etapas do tutorial Conceitos Básicos, poderá usar o modelo de site que salvou na última seção. Como alternativa, você pode fazer download do modelo de site HTML5DemoSiteTemplate.zip.

Execute as etapas a seguir para criar a aplicação de um modelo de site.

  1. Faça download do modelo HTML5 (HTML5DemoSiteTemplate)
  2. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac) no menu principal para abrir o assistente Novo Projeto.
  3. Selecione a categoria HTML5e, em seguida, selecione Aplicação HTML5. Clique em Próximo.
  4. Digite HTML5DemoCss para nome do projeto e especifique uma localização. Clique em Próximo.
  5. Selecione a opção Selecionar Modelo e clique em Procurar para localizar o modelo de site (HTML5DemoSiteTemplate.zip). Clique em Finalizar.
    tela do assistente Nova Aplicação em HTML5

Quando você clica em Finalizar, o IDE cria o projeto e abre o arquivo index.html no editor. Na janela Projetos, você pode ver que o projeto contém index.html, uma folha de estilo CSS, algumas bibliotecas JavaScript e algumas imagens. As janelas Regras de CSS e Navegador também são abertas no IDE.

Exibindo a Aplicação em Dispositivos Diferentes

Neste tutorial, você executará a aplicação no browser Chrome com a extensão NetBeans Connector instalada. Quando a extensão for instalada, você poderá usar o menu do NetBeans no browser para redimensionar facilmente a janela do browser e exibir a aplicação como ela apareceria em dispositivos comuns.

Observações. Para esse tutorial, é recomendável usar o browser Chrome e instalar a extensão do NetBeans para Chrome. Consulte o tutorial Conceitos Básicos sobre Aplicações em HTML5 para obter detalhes sobre como instalar a extensão NetBeans Connector.

Execute as etapas a seguir para executar a aplicação no browser Chrome.

  1. Confirme que Chrome com Integração NetBeans está selecionado na lista drop-down, na Barra de Ferramentas.
  2. Clique no botão Executar na barra de ferramentas para executar a projeto no browser Chrome.

    No browser, você pode ver uma menu expansível simples.

    Você perceberá que há uma barra amarela na guia do browser que o notifica que o NetBeans Connector está depurando a guia. O IDE e o browser são conectados e podem se comunicar um com o outro quando a barra amarela está visível. Quando você inicializa uma aplicação HTML5 do IDE, o depurador JavaScript é ativado automaticamente. Quando você salva as alterações em um arquivo ou faz alterações em uma folha de estilos CSS, não precisa recarregar a página, pois a janela do browser será atualizada automaticamente para exibir as alterações.

    Se você fechar a barra amarela ou clicar em Cancelar, quebrará a conexão entre o IDE e o browser. Se você interromper a conexão, será necessário iniciar a aplicação em HTML5 a partir do IDE.

    Você obsevará também que o ícone do NetBeans ficará visível no campo do local do URL do browser. É possível clicar no ícone para abrir um menu que oferece várias opções para alterar o tamanho de exibição do browser e para ativar o modo Inspecionar no NetBeans.

  3. Clique no ícone Abrir Ação do NetBeans no campo URL do browser para abrir o menu NetBeans e selecionar Retrato do Tablet no menu.

    A janela é redimensionada para o tamanho de um browser do tablet em modo retrato. O menu é estendido para preencher o lado direito e todo o menu ficar visível.

    tela do browser na view Retrato do Tablet

    Se você selecionar um dos dispositivos default no menu, a janela do browser se redimensionará de acordo com as dimensões do dispositivo. Isso permite que você veja como será a aparência da aplicação no dispositivo selecionado. As aplicações em HTML5 geralmente são projetadas para responder ao tamanho da tela do dispositivo em que são exibidas. Você pode usar regras de JavaScript e CSS que respondam ao tamanho da tela e modificar a forma como as aplicações são exibidas, de maneira que o layout seja otimizado para o dispositivo.

  4. Clique no ícone NetBeans novamente e selecione Paisagem do Smartphone no menu do NetBeans.
    tela do menu NetBeans no browser

    A janela é redimensionada para o tamanho de um smartphone em orientação paisagem e você poderá ver que a parte inferior do menu não fica visível sem a rolagem de tela.

    tela da janela do browser redimensionada para Paisagem do Smartphone

Na próxima seção, você modificará a folha de estilo para que seja possível exibir todo a menu sem rolar a tela em um smartphone ma view Paisagem.

Modificando o Layout

Deve haver a possibilidade de fazer algumas pequenas alterações no elementos da página, de forma que nenhum rolagem de tela seja necessária. Essas alterações só devem ser aplicadas quando o tamanho do browser equivaler ao de um smartphone ou for menor. Quando está em orientação de paisagem, a janela do browser de um smartphone tem 480 pixels de largura e 320 pixels de altura.

Criar uma Folha de Estilo de Mídia

Neste exercício, você criará uma nova folha de estilo e adicionará uma regra de mídia para dispositivos com exibições de smartphone. Em seguida, você adicionará alguma Regras de CSS à regra de mídia.

  1. Clique com o botão direito do mouse no nó da pasta css, na janela Projetos, e escolha Nova > Folha de Estilo em Cascata no menu pop-up.
  2. Digite mycss como Nome de Arquivo. Clique em Finalizar.

    Quando você clicar em Finalizar, a nova folha de estilo será aberta no editor.

  3. Adicione a regra de mídia a seguir à folha de estilo.
    /*My rule for smartphone*/
    @media (max-width: 480px) {
    
    }

    Toda regra de CSS que você adicionar entre colchetes para esta regra será aplicada apenas quando a dimensão do browser for de 480 pixels de largura ou menos.

    Crie modelos de código para os snippets de código que você usa mais frequentemente. Você pode criar modelos de código CSS na guia Modelos de Código na categoria Editor da janela Opções.

  4. Salve as alterações.
  5. Abra index.html no editor.
  6. Adicione o link a seguir à folha de estilo entre as tags <head> no index.html. Salve as alterações.
    <link type="text/css" rel="stylesheet" href="css/mycss.css">

    Você pode usar a funcionalidade autocompletar código no editor para ajudá-lo a adicionar o link à folha de estilo.

Adicionando Regras de CSS

  1. No browser Chrome, clique no ícone do NetBeans e selecione Inspecionar no Modo NetBeans, no menu.
  2. Clique ma imagem no browser.

    Um elemento é realçado quando selecionado no modo Inspecionar. Nesta tela, você pode ver que a imagem está realçada de azul.

    tela da imagem selecionada no browser

    No IDE, você pode ver que as regras e propriedades de CSS aplicadas ao img são listadas na janela Estilos de CSS. A guia Seleção da janela Estilos de CSS tem três painéis que oferecem detalhes sobre o elemento selecionado.

    tela da janela Estilos de CSS quando a imagem é selecionada

    Painel Superior

    No painel Propriedades da janela, é possível ver que seis pares propriedade-valor são aplicados ao elemento img. Três dos pares (borda, flutuação e margem) são aplicados via regra CSS para o elemento img. Os três pares restantes são aplicados porque o elemento img herda as propriedades dos seletores de classe que são aplicadas aos objetos que contêm o elemento img. Você pode ver claramente a estrutura do DOM na janela Navegador. A propriedade borda está selecionada no momento no painel Propriedades da janela Estilo CSS.

    Painel Central

    No painel central Estilos Aplicados, você pode ver que a propriedade borda e o valor especificado em uma regra CSS definem o elemento img. A regra está localizado na linha 12 do arquivo basecss.css. Você pode clicar no local do painel para abrir a folha de estilo no editor.

    Painel Inferior

    O painel inferior exibe todas as propriedades definidas na regra CSS para a regra que está selecionada no painel central. Nesse caso, é possível verificar que a regra para img define as propriedades borda, flutuação e margem.


  3. Clique na guia Documento na janela Estilos de CSS.
  4. Selecione o nó css/mycss.css e clique no botão Editar Regras de CSS (Botão Editar Regras de CSS) para abrir a caixa de diálogo Editar Regras de CSS.
    tela da caixa de diálogo Editar Regras de CSS
  5. Selecione o Elemento como Tipo de Seletor e digite img como Seletor.
  6. Selecione css/mycss.css como Folha de Estilo e (max-width:480px) como Na Regra. Clique em OK.
    tela da caixa de diálogo Editar Regras de CSS

    Quando você clica em OK, o IDE cria uma regra de CSS para img na folha de estilo css/mycss.css entre os colchetes da regra de mídia. A nova regra agora está listada no painel Estilos Aplicados.

  7. Clique na guia Seleção na janela Estilos de CSS.

    Você pode ver que há duas regras de CSS para img. Uma das regras está localizada em mycss.css e a outra em basecss.css.

  8. Selecione a nova regra img (definida em mycss.css) no painel Estilos Aplicados da janela Estilos de CSS.
    tela de estilos para o elemento selecionado na janela Estilos de CSS.

    No painel inferior da janela, você pode ver que a regra não têm propriedades.

  9. Clique em Adicionar Propriedade na coluna esquerda, no painel inferior da janela Estilos de CSS e digite largura.
  10. Digite 90px na coluna direita próxima à propriedade width e tecle em Voltar ao teclado.
    tela do painel Propriedades da Imagem da janela Estilos de CSS

    Quando você começar a digitar na coluna de valor verá que uma lista drop-down exibirá valores comuns para a propriedades width.

    Quando você acessa a chave Retornar a imagem no browser é automaticamente redimensionada para ficar com 90 pixels de largura. O IDE adicionou a propriedade à regra de CSS na folha de estilo mycss.css. O editor a folha de estilo deve agora conter a regra a seguir.

    /*My rule for smartphone*/
    @media (max-width: 480px) {
    
        img {
            width: 90px;
        }
    
    }

    Algumas alterações adicionais precisam ser feitas na folha de estilo porque o menu ainda não cabe na janela.

  11. Selecione o elemento (<ul>) da lista não ordenada na janela do browser.
    tela do elemento de lista selecionado no browser

    Quando você seleciona o elemento, pode ver que <ul> está selecionada na janela Browser DOM e você pode ver os estilos aplicados a esse elemento na janela Estilo de CSS.

    tela da janela Browser DOM

    Se você selecionar font-family na janela Estilos de CSS, poderá ver que a propriedade e o valor font-family são definidos no seletor de classe .ui-widget.

  12. Clique no arquivo index.html no editor e clique na guia Documento na janela Estilos de CSS.
  13. Expanda o nó css/mycss.css ma janela de Estilos de CSS.
    tela da guia Documento da janela Estilos de CSS
  14. Clique no botão Editar Regras de CSS (Botão Editar Regras de CSS) na janela Estilos de CSS para abrir a caixa de diálogo Editar Regras de CSS.
  15. Selecione a Classe como Tipo de Seletor e digite ui-widget como Seletor.
  16. Selecione css/mycss.css como Folha de Estilo e (max-width:480px) como Na Regra. Clique em OK.

    Quando você clica em OK, o IDE adiciona a nova regra à folha de estilo mycss.css e abre o arquivo no editor. Se o arquivo não for aberto no editor, você pode clicar duas vezes na regra ui-widget no nó css/mycss.css na janela Estilos de CSS para abrir a folha de estilo. O cursor é colocado na linha que contém a regra na folha de estilo.

  17. Adicione a propriedade e o valor (em negrito) a seguir à regra para a ui-widget.
    .ui-widget {
        font-size: 0.9em;
    }

    Quando você altera o valor na folha de estilo, a página o atualiza automaticamente na janela do browser.

    Você pode digitar a propriedade e o valor no editor e usar o recurso autocompletar código para ajudá-lo. Como alternativa, selecione a regra .ui-widget no painel superior e clique no botão Adicionar Propriedade no painel inferior para abrir a caixa de diálogo Adicionar Propriedade.

    tela do recurso autocompletar código de CSS no editor

    Depois de adicionar a regra, você pode ver que o menu agora se ajusta à página.

    tela da página no browser após a aplicação das regras de CSS
  18. Clique no ícone do NetBeans no browser e selecione Retrato do Tablet no menu.

    Quando a janela do browser é redimensionada, você pode ver que as alterações na folha de estilo não afetam a exibição quando o tamanho da tela é maior do que 480 pixels de largura.

Usando Pré-processadores de CSS

Além das ferramentas para editar os arquivos CSS padrão, o IDE também suporta o uso de pré-processadores Sass e LESS CSS para gerar folhas de estilo para suas aplicações. O IDE fornece assistente para gerar arquivos do pré-processador de CSS e para especificar diretórios com watch. Se você especificar um diretório com watch, os arquivos CSS serão gerados automaticamente cada vez que você modificar os arquivos do pré-processador de CSS no diretório.

Observação. Para usar um pré-processador de CSS é necessário instalar o software do pré-processador e especificar o local do executável. Você pode especificar o local do executável na janela Opções.

  1. Instale o software do pré-processador de CSS no sistema local.

    O IDE suporta os pré-processadores Sass e LESS. Este tutorial demonstra como usar Sass para gerar os arquivos CSS, mas a configuração para LESS é semelhante.

    Observação. Se estiver instalando o LESS no OS X pode ser necessário confirmar se o Node.js pode ser encontrado no diretório usr/bin. Para obter detalhes, consulte a seguinte nota.

  2. Expanda o projeto HTML5Demo na janela Arquivos.
  3. Clique com o botão direito do mouse na pasta public_html na janela Arquivos e escolha Nova > Pasta no menu pop-up.

    Se Pasta não for uma opção no menu pop-up, escolha Outro e selecione o tipo de arquivo Pasta na categoria Outro do assistente Novo Arquivo.

  4. Digite scss para Nome do Arquivo. Clique em Finalizar.

    Quando você clicar em Finalizar o IDE gerará a nova pasta na pasta public_html.

  5. Clique com o botão direito do mouse no nó da pasta scss, na janela Projetos, e escolha Novo > Arquivo Sass no menu pop-up.
  6. Digite mysass como o Nome do Arquivo.
  7. Clique em Configurar para abrir a guia Pré-processador de CSS na janela Opções.
  8. Digite o caminho para o executável Sass ou clique em Procurar para localizar o executável em seu sistema local. Clique em OK para fechar a janela Opções.
    tela da página no browser após a aplicação das regras de CSS
  9. Selecione Compilar Arquivos Sass ao Salvar no assistente Novo Arquivo. Clique em OK.
    tela da página no browser após a aplicação das regras de CSS

    Quando clicar em OK, o novo arquivo mysass.scss de Sass será aberto no editor.

  10. Adicione o seguinte em mysass.scss e salve suas alterações.
    img {
        margin-right: 20px; 
        float:left; 
        border: 1px solid;
    
        @media (max-width: 480px) {
            width: 90px;
        }
    }
    
    
    .ui-widget {
        @media (max-width: 480px) {
            font-size: 0.9em;
            li {
                color: red; 
            }
        }
    }

    Ao salvar o arquivo, o pré-processador gera um arquivo mysass.css de CSS na pasta css. Se abrir mysass.css no editor, você poderá ver as regras que foram geradas no arquivo scss. Por default, as informações de depuração de CSS são geradas em mysass.css. Quando não quiser mais que as informações de depuração sejam geradas, você pode desativar a geração em uma guia Pré-processadores de CSS na janela Opções.

    Observações.

    • Quando quiser modificar as regras de CSS você deve editar o arquivo mysass.scss do pré-processador de Sass e não a folha de estilos mysass.css porque a folha de estilos é gerada novamente cada vez que o arquivo do pré-processador é modificado e salvo.
    • Para documentação sobre a sintaxe de Sass e outras funcionalidades de Sass, consulte a referência de Sass.
  11. Abra index.html e faça as seguintes alterações no link da folha de estilos de mycss.css para mysass.css. Salve as alterações.
    <link type="text/css" rel="stylesheet" href="css/mysass.css">

    Quando salvar o arquivo, a página do browser será atualizada automaticamente. Você poderá ver que os elementos do item da lista agora estão em vermelho.

Resumo

Neste tutorial, você aprendeu a adicionar e modificar as regras de uma aplicação em HTML5 para aprimorar a forma como a aplicação é exibida com um tamanho de tela menor. Você exibiu a aplicação em um browser que foi redimensionado ao tamanho de um smartphone padrão. Você usou o Modo Inspecionar no NetBeans no browser Chrome para ajudá-lo a localizar as regras de estilo de CSS e depois modificou as regras para otimizar o layout para uma tela menor.



Consulte Também

Para obter mais informações sobre suporte para aplicações no HTML5 no IDE, consulte os seguintes recursos em netbeans.org:

Para obter mais informações sobre o jQuery, consulte a documentação oficial:

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo