Приложения Angular имеют стиль стандартного CSS. Это означает, что вы можете применять все, что вы знаете о таблицах стилей CSS, селекторах, правилах и медиа-запросах, непосредственно к приложениям Angular.
Кроме того, Angular может объединять стили компонентов с компоненты, позволяющие получить более модульный дизайн, чем обычные таблицы стилей.
Использование стилей компонентов
Для каждого компонента Angular, который вы пишете, вы можете определить не только шаблон HTML, но и стили CSS, которые идут с этим шаблоном, указав все необходимые селекторы, правила и медиа-запросы.
Один из способов сделать это — установить стили свойство в метаданных компонента. Свойство styles принимает массив строк, содержащих код CSS. Обычно вы даете ему одну строку, как в следующем примере:
@Component ({selector: 'app-root', template: ` стили CSS в Angular
`, styles: ['h1 {font-weight: normal;}']}) класс экспорта AngularCssComponent {/*. . . */}
Объем стилей
Применяются только стили, указанные в метаданных @Component в шаблоне этого компонента .
Они не наследуются никакими компонентами, вложенными в шаблон, ни каким-либо содержимым, проецируемым в компонент.
Это ограничение области действия является функцией модульности стилей .
- Вы можете использовать имена классов CSS и селекторы, которые имеют наибольший смысл в контексте каждого компонента.
- Имена классов и селекторы являются локальными для компонента и не конфликтуют с классами и селекторами, используемыми где-либо еще в приложении.
- Изменения стилей в другом месте приложения не влияют на стили компонента.
- Вы можете разместить код CSS каждого компонента вместе с кодом TypeScript и HTML компонента, что приводит к в аккуратную и аккуратную структуру проекта.
- Вы можете изменить или удалить код CSS компонента, не выполняя поиск по всему приложению, чтобы найдите, где еще используется код.
Загрузка стилей компонентов
Есть несколько способов добавить стили в компонент:
- путем установки стилей или метаданных styleUrls.
- Встроенный в шаблон HTML.
- С помощью CSS импорт.
Стили в метаданных компонента
Вы можете добавить свойство массива стилей в декоратор @Component .
Каждая строка в массиве определяет некоторый CSS для этого компонента.
@Component ({selector: 'app-root', template: ` Angular CSS
`, стили: ['h1 {font-weight: normal; } ']}) экспортный класс AngularCssComponent {/*. . . */}
Примечание: эти стили применяются только к этому компоненту. Они не наследуются никакими компонентами, вложенными в шаблон, или каким-либо контентом, проецируемым в компонент..
Команда Angular CLI ng generate component определяет пустой массив стилей при создании компонента с флагом —inline-style.
` `` ng generate component hero-app --inline-style``
Файлы стилей в метаданных компонента
Вы можете загружать стили из внешних файлов CSS, добавив свойство styleUrls в декоратор @Component компонента:
@Component ({selector: 'app-root', template: ` Angular CSS Tutus
`, styleUrls: ['./angular-app.component.css'ght})export class AngularCssComponent {/*. . . */}
Примечание: стили в файле стилей применяются только к этому компоненту. Они не наследуются никакими компонентами, вложенными в шаблон, ни каким-либо содержимым, проецируемым в компонент.
Вы можете указать более одного файла стилей или даже комбинацию стилей и styleUrls.
Когда вы используете команду Angular CLI ng generate component без флага —inline-style, она создает для вас пустой файл стилей и ссылается на этот файл в сгенерированных styleUrls компонента.
`` ng generate component hero-app``
Встроенные стили шаблона
Вы можете встроить стили CSS непосредственно в шаблон HTML, поместив их в теги .
@Component ({selector: 'app-hero-controls', template : ` button {background-color: white; border: 1px solid # 777;} Элементы управления
`})
Теги ссылок шаблона
Вы также можете записывать теги в HTML-шаблон компонента .
@Component ({selector: 'app-hero-team', template: ` Команда
- {{member}}
`})
При сборке с помощью интерфейса командной строки обязательно включите связанный файл стиля среди ресурсов, которые нужно скопировать на сервер, как описано в вики-странице интерфейса командной строки.
После включения интерфейс командной строки будет включать таблицу стилей независимо от того, находится ли URL href тега ссылки относительно корня приложения или файла компонента.
CSS @imports
Вы также можете импортировать файлы CSS в файлы CSS, используя стандартное правило CSS @import. Подробнее см. @Import на сайте MDN.
В этом случае URL-адрес относится к файлу CSS, в который вы импортируете.
/* Компилятору AOT нужен `./`, чтобы показать, что это локальный */@ import './hero-details-box.css';
Внешние и глобальные файлы стилей
При сборке с помощью интерфейса командной строки необходимо настроить angular.json для включения всех внешних ресурсов , включая файлы внешнего стиля.
Зарегистрируйте файлы глобальных стилей в разделе стилей, который по умолчанию предварительно настроен с помощью файла global styles.css.
Не- Файлы стилей CSS
Если вы строите с помощью интерфейса командной строки, вы можете писать файлы стилей с помощью sass, less или стилуса и указывать эти файлы в метаданных @ Component.styleUrls с помощью соответствующие расширения (.scss, .less, .styl), как в следующем примере:
@Component ({selector: 'app-root', templateUrl: './app .component.html ', styleUrls: [' ./app.component.scss ']})
Процесс сборки CLI запускает соответствующий препроцессор CSS.
При создании файла компонента с помощью ng generate component интерфейс командной строки по умолчанию генерирует пустой файл стилей CSS (.css). Вы можете настроить CLI по умолчанию на предпочитаемый вами препроцессор CSS, как описано в вики-странице CLI.
Строки стиля, добавленные в массив @ Component.styles , должны быть написаны на CSS , потому что интерфейс командной строки не может применить препроцессор к встроенным стилям.
