Главная » 2015 » Октябрь » 19 » Секреты дизайнера сайтов (основы CSS)-2

Секреты дизайнера сайтов (основы CSS)-2

Студия создания сайтов НИКА продолжает цикл заметок по основам работы с CSS. Весь CSS-код состоит из повторяющихся блоков следующего вида:

селектор  {

 свойство 1:значение;

 свойство 2: значение;

}

Такой блок называется «CSS-правило». Каждое CSS-правило содержит хотя бы один селектор и свойство. Простейшие селекторы — это селекторы по именам тегов. С их помощью можно задать стили для всех абзацев на странице, для всех ссылок, заголовков первого уровня и так далее. Такие селекторы содержат имя тега без символов < и >. Например:

p  {

/*стили для абзацев*/

}

h1  {

/*стили для заголовков*/

}

К более сложным селекторам можно отнести селекторы с использованием классов и псевдоклассов.

Класс позволяет объединять разные элементы в смысловые группы и применять к ним одинаковое оформление. Например, можно создать класс «элементы с ошибкой» и задать ему красный цвет текста. Затем можно добавлять этот класс к любому HTML-тегу: абзацу, заголовку, элементу списка и так далее.

Класс тега можно задать с помощью атрибута class, который содержит имя класса (или имена классов через пробел). Пример:

<p class="help"></p>

<p class="help error"></p>

В примере у первого абзаца задан класс help, у второго абзаца заданы классы help и error.

 

Селектор с использованием класса задаётся так:.имя_класса. Например:

<por"></p>

.help{...}

.error {...}​

Категория: Секреты дизайнера сайтов | Просмотров: 754 | Добавил: nikozavr | Рейтинг: 5.0/1
Всего комментариев: 0
avatar

Категории раздела

Заметки разработчика [8]
Заметки на тему работы с HTML. Уроки от дизайнеров и программистов студии НИКА. От простого к сложному.
Регламент веб-дизайнера [4]
Специалисты веб студии НИКА расскажут о секретках и правилах веб-дизайна.
Регламент копирайтера [2]
Специалисты студии НИКА пишут тексты с уникальностью до 100% на любую тематику. Некоторыми правилами и приемами копирайтинга делимся с начинающими писать.
Секреты дизайнера сайтов [2]
Основы работы с CSS
Опыт создания сайтов [1]
Специалисты студии НИКА рассказывают о нюансах при разработке веб-сайтов

Вход на сайт

Поиск