# Стилизация через атрибут style в Vue

CSS стили можно напрямую добавлять через атрибут `style`. Для этого в атрибут передается объект, в котором желаемые CSS свойства должны быть ключами этого объекта, а соответствующие значения CSS свойств - значениями этого объекта.

Давайте для примера покрасим какой-нибудь абзац в красный цвет и добавим границу зеленого цвета:

`<template> <p :style="{color: 'red', border: '1px solid green'}"> text </p> </template>`

Давайте теперь вместо границы установим ему `font-size` в `30px`. Так как в объекте не может быть ключа с дефисом, мы должны взять его в кавычки:

`<template> <p :style="{color: 'red', 'font-size': '30px'}"> text </p> </template>`

Можно также вместо `font-size` написать `fontSize` - это также будет работать:

`<template> <p :style="{color: 'red', fontSize: '30px'}"> text </p> </template>`

Дан абзац. Покрасьте его текст в зеленый цвет, а его фон - в желтый.

Дан абзац. Сделайте его текст жирным и курсивным.

←→
↑