Olá Pessoal, tudo bom?
O artigo de hoje está relacionado a adição de arquivos no formato CSS (Cascading Style Sheet). Para isso, o ponto de partida será o artigo que fala sobre a criação de um projeto Maven + JSF. Veja na continuação desse post…
Cascading Style Sheet (CSS)
Cascading Style Sheets é um mecanismo para adicionar estilo a um documento web. Em vez de colocar a formatação dentro do documento, o CSS cria um link para uma página que contém os estilos. Quando quiser alterar a aparência do portal, basta modificar apenas um arquivo. Isso ajuda no reuso de código dentro de várias páginas Html e derivadas como Xhtml.
Criação do arquivo geral.css
Primeiramente vamos crie uma folder (não lembra? aqui) de nome resources dentro da folder webapp. Em seguida crie uma nova folder chamada css dentro da folder resources recém criada. Agora clique com o botão direito em cima da pasta css, vá em new > File e crie o arquivo geral.css. Suas pastas deverão ficar igual a da Figura 01.
Agora é necessário editar esse arquivo com os css desejados. Abaixo existe um exemplo de algumas características em CSS.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
body{ color: black; font-size: 12px; font-weight: bold; font-family: Arial, Verdana, Serif; text-align: center; background: center url('#{facesContext.externalContext.requestContextPath}/resources/images/bg.jpg') no-repeat; } .wrapper { width: 100%; overflow: hidden; } .headerLeft { width: 10%; } .headerRight { width: 90%; } .labelField { font-size: 14px; font-weight: bold; border: 0px solid white; } .textField { font-size: 12px; font-weight: normal; border: 0px solid white; } .conteudoPanel { background: #fff0; } .ui-panelgrid tr, .ui-panelgrid td, .noBorder.ui-widget-content, .ui-layout-unit-content { background: #fff0 !important; border-style: none !important; } |
Adicionar o caminho de um arquivo CSS a um XHtml
Para adicionar a um arquivo XHtml você deverá utilizar a seguinte tag JSF:
|
1 |
<h:outputStylesheet name="geral.css" library="css"/> |
Onde resources/css/geral.css é o caminho para a pasta que você acabou de criar para abrigar os css.
Essa tag deve ser utilizada dentro do Head da página.
finally{
Duvidas ou sugestões? Deixe seu feedback! Isso ajuda a saber a sua opinião sobre os artigos e melhorá-los para o futuro! Isso é muito importante!
Até um próximo post!
Leave a Reply