Changes between Version 1 and Version 2 of versoes/24/HowTo/Templating/HelloWorld

Timestamp:

04/05/12 15:47:12 (12 years ago)

Author:

gustavo

Comment:

sobre css

versoes/24/HowTo/Templating/HelloWorld

@@ -87 +87 @@
 
 Na alteração do arquivo {{{hellow.js}}} acima adicionamos uma linha que obtém uma representação do usuário cujo id é igual a {{{1003}}} e passa para o template. No template esta variável é utilizada para escrever o nome do usuário no título do texto dentro da janela.
+
+== !HelloWorld parte 3 ==
+
+Seguindo o exemplo, começaremos a usar o css para estilizar nossa interface, para isso vamos alterar nosso template 
+
+'''Arquivo''' {{{hellow.ejs}}}
+{{{
+01    <h1>Hello <%= data.user.name %>!</h1>
+02    <p>Templating like a boss!</p>
+03    <div class="my-div">Div que vai ser estilizada</div>
+}}}
+
+Com isto, podemos criar um arquivo .css, e dentro dele inserir seus estilos
+
+'''Arquivo''' {{{hellow.css}}}
+{{{
+01   .hello-world-win .my-div{
+02      background-color : red;
+03   }
+}}}
+
+É importante notar que, como estamos fazendo um estilo para a hellow, sempre começaremos um estilo dessa forma
+
+'''Arquivo''' {{{hellow.css}}}
+{{{
+01   .hello-world-win ... {//Continua
+02   //Meus estilos
+03   } //final da classe
+}}}
+
+Isto é, sempre estamos dizendo que este estilo é somente para os dados que estão dentro da hello-world-win, que é o nosso foco