#14: 💅 Adicionando estilos - CSS
Com o Angular, podemos estilizar os componentes de uma forma que não afete o resto da nossa aplicação. Dessa forma, é uma boa prática encapsular o estilo relacionado aos componentes.
Também podemos definir regras gerais de estilo para serem usadas em toda a nossa aplicação. Isso é bom para criar a mesma aparência para todos os nossos componentes. Por exemplo, podemos decidir qual paleta de cores será usada como o tema do nosso aplicativo. Então, se quisermos mudar as cores ou oferecer temas diferentes, podemos mudá-lo em um só lugar em vez de cada componente.
O Angular nos oferece diferentes métodos de encapsulamento de estilo, mas nós seguiremos com o padrão.
O Angular-CLI já gerou um estilo geral no src/style.css. Cole o código a seguir no arquivo de estilo:
html, body, div, span,
h1, p, ul, li {
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
body {
background: #f1f1f1;
font-size: 16px;
line-height: 22px;
color: #404040;
font-family: 'Lucida Grande', Verdana, sans-serif;
}
ol, ul {
list-style: none;
}
.btn {
background: lightseagreen;
color: #fff;
padding: 3px 10px;
margin: 0 0 0 3px;
border: none;
border-radius: 5px;
font-size: 12px;
line-height: 24px;
cursor: pointer;
vertical-align: bottom;
}
.btn:hover {
background: lightslategrey;
}
.btn-red {
background: red;
}
.btn-red:hover {
background: darkred;
}
.app-title {
font-size: 52px;
line-height: 52px;
margin-bottom: 30px;
font-weight: bold;
text-align: center;
letter-spacing: -0.8px;
}Como o projeto irá acessar este arquivo? No arquivo de configuração Angular-CLI
.angular-cli.jsonemprojects.todo-list.architect.build.options.stylesvocê pode definir os arquivos relacionados para que a ferramenta de compilação o reconheça e adicione ao projeto. Você pode abrir as ferramentas de desenvolvimento do navegador e observar o estilo dentro do elemento:
Nós adicionamos estilos diretamente nos elementos (html, body, div, span, h1, p, ul, li) o que afeta diretamente o nosso aplicativo. Nós também adicionamos estilos utilizando as classes/seletores CSS. Nós precisamos adicionar as classes nos elementos relevantes.
No app-root, adicione a classe app-title no elemento h1:
-> src/app/app.component.ts
No input-button, adicione a classe btn no elemento botão:
-> src/app/input-button/input-button.component.ts
Agora, vamos adicionar estilos específicos de nossos componentes.
Adicione o estilo a seguir no input-button.component.css:
Como essa folha de estilo fica atrelada ao componente input-button? Dê olha olhada no arquivo input-button.component.ts. Uma das propriedades que o objeto passa para o decorator @Component é o styleUrls. Ele é uma lista de folhas de estilo (stylesheets) que será utilizado pelo Angular e encapsula o estilo que pertence ao componente.
O seletor :host é aplicado no elemento que pertence a esse componente - <app-input-button>. Este elemento não faz parte do modelo deste componente. Aparece no modelo do seu pai. É assim que podemos controlar seu estilo a partir do componente.
Nós precisamos adiiconar a classe todo-input no elemento input:
-> src/app/input-button-unit/input-button-unit.component.ts
Agora vamos adicionar o estilo específico do componente list-manager. Abra o arquivo list-manager.component.css e cole o código a seguir:
-> src/app/list-manager/list-manager.component.css
Nós vamos encapsular o conteúdo desse componente utilizando um elemento <div> com toda a classe todo-app:
-> src/app/list-manager/list-manager.component.ts
Por fim vamos adicionar o seguinte estilo no todo-item.component.css:
-> src/app/todo-item/todo-item.component.css
Encapsule o conteúdo do componente todo-item com um elemento <div> e a classe todo-item
Nós vamos utilizar as classes todo-checkbox e o todo-title nos próximos capítulos
Você pode mudar o estilo como você quiser - o tamanho dos elementos, as cores - tudo o que você quiser!
Observe: você pode usar arquivos SCSS no projeto, o que é uma maneira mais agradável de escrever estilo e possui excelentes recursos que ajudam o desenvolvedor. Os arquivos SCSS são compilados para o css quando o projeto é criado.
Last updated