Наука + Бизнес = $$$

Карта Сайта

Четверг, 28.03.2024, 23:22
Приветствуем Вас Гость
Главное Меню
Помощь Сайту
Информационная:
Пожалуйста, расскажите о нас друзьям и сделайте репост:

Финансовая:
Если этот сайт вам помог, будем благодарны за любую финансовую помощь:
R598551293139

Урок №3: селекторы и их свойства

Селекторы и их значения в CSS

Стили могут задаваться ко всем стандартным элементам HTML. HTML теги могут быть использованы в качестве селекторов CSS. Селекторы – это имена стилей, которые необходимо определить во внутренних или внешних таблицах стилей. Значения и свойства селекторов берутся в фигурные скобки - {}. Полное объявления селектора будет выглядеть так - имя селектора {свойство:значение; свойство:значение;}. Допустим необходимо задать фон и цвет текста всей страницы, в качестве селектора будет body, в качестве свойств будут background-color(задаст фон всего тела документа) и color(задаст цвет текста всего документа), в качестве значений сделаем фон черным(black), а текст белым (white). В результате получим такую струю строчку:

body{background-color:black; color:white;}

Добавьте эту строчку в свой документ с расширением .css и смотрите результат в браузере. Если вы все сделали правильно и документ подключен к HTML страничке, появится текст белого цвета на черном фоне, как и ожидалось.


Комментарии в CSS документах

Также как и в HTML, в CSS документе можно оставлять подсказки, комментарии и заметки, на вашем сайте они никак отображаться не будут. Начинаются такие комментарии с символов /* , а заканчиваются наоборот */. Вот как это выглядит на практике:

body{background-color:black; /* Фон всего контейнер body - черный */
color:white; /* Цвет всего текста в контейнере body - белый*/ }

Идентификаторы селекторов

С помощью идентификаторов и классов можно создать свой собственный стиль и применить его к любому элементу HTML. Вначале рассмотрим идентификаторы. В отличие от классов, идентификаторы можно применить не больше одного раза на странице. Идентификаторы всегда начинаются с символа - решетка # в css документе. Например создадим такой идентификатор:

#firstid {color:blue; text-align:right;}

Идентификатор может быть применен к любому объекту на странице, например к названию и задается в HTML таким образом:

<h1 id="firstid">Благодаря идентификатору текст названия будет синего цвета и выравниваться по правую сторону страницы</p>


Классы селекторов

Стиль заданный в виде класса, в отличие от идентификаторов, применяется для форматирования любого количества элементов страницы. В CSS селектор класса обозначается именем, которое следует за точкой (.). А в остальном использование классов очень похоже на использование идентификаторов. Например создадим в документе css, такой класс:

.stred{color: red; font-weight: bold;}

Этот класс делает текст заданного элемента страницы жирным и красным. В тегах классы задаются с помощью параметра class="ваш css класс". Для примера применим наш класс stred к абзацу на страничке: 

<p class="stred">Содержимое абзаца будет написано жирным текстом с красным цветом</p>

Если класс будет применяться только к определенным элементам HTML, тогда в css документе необходимо просто указать HTML селектор перед названием класса. Например: p.zero{заданный стиль}. В таком случае стиль будет применяться только для параграфов, в которых указан класс zero.

Далее рассмотрим все свойства CSS для редактирования и настройки фона страниц: Работа с фонами в CSS


Форма входа
Поиск по сайту
Полезные Сайты
Счетчики
Счетчик PR-CY.Rank
Подписка на обновления
Ваш e-mail: *
Ваше имя: *
Контакты
PhantomX5 © 2014-2017Пишем нам: PhantomX5@mail.ru