Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Что такое CSS Несколько CSS свойств Использование каскадной таблицы стилей Каскады и наследование стилей Селекторы Единицы измерения Первый взгляд на CSS
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Каскадные таблицы стилей (CSS) являются средством, с помощью которого вы определяете презентацию (внешний вид и форматирование) HTML документов Далее покажу, как создавать и применять CSS стили, почему они называются каскадными таблицами стилей Что такое CSS
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net CSS стиль состоит из одного или нескольких объявлений, разделенных точкой с запятой. Каждое объявление состоит из свойства CSS и значения этого свойства, разделенных двоеточием background-color:grey; color:white background-color и color – свойства grey и white – значения background-color:grey и color:white – объявление
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net background-color – Устанавливает для элемента цвет заднего фона border – Определяет рамку, которая окружает элемент color – Устанавливает для элемента цвет переднего плана font-size – Устанавливает размер шрифта для текста элемента height – Устанавливает высоту элемента padding – Определяет количество пространства (размер пустого места) между содержимым элемента и его рамкой text-decoration – Определяет декор (украшение), применяемое к тексту элемента, включая подчеркивание width – Устанавливает ширину элемента Примеры CSS свойств
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net 1.Применение напрямую к элементу через атрибут style Посетите smarly.net 2.Применение через HTML элемент style a { background-color: grey; color: white; } 3.Применение через присоединенный файл Применение стиля
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Браузерные стили (более известные как стили пользовательского агента) являются стилями по умолчанию, которые браузер применяет к элементу, если не были указаны другие стили. Эти стили немного различаются у разных браузеров, но они, как правило, в целом аналогичны. Браузерные стили
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Большинство браузеров позволяют пользователям определять свои собственные таблицы стилей. Стили, которые содержатся в этих таблицах, называются пользовательскими стилями. Google Chrome – редактирование C:\Users\Administrator\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css Mozilla Firefox – добавление файла в папку профиля\chrome\userContent.css Пользовательские стили
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Порядок поиска значения свойств: 1.Внутренние стили (стили, которые определяются для элемента с помощью глобального атрибута style ) 2.Встроенные стили (стили, которые определены элементом style ) 3.Внешние стили (стили, которые импортируются при помощи элемента link ) 4.Пользовательские стили (стили, которые были определены пользователем) 5.Браузерные стили (стили по умолчанию, которые применяются браузером) Каскадирование стилей
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Приоритет отдается значению с объявлением !important Для обычных значений авторские стили используются прежде чем пользовательские стили, но это порядок меняется, когда речь идет о значениях !important. Изменение порядка при помощи !important
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net * – выбирает все элементы – выбирает элементы определенного типа. – выбирает элементы определенного класса. – выбирает элементы определенного типа, которые являются членами определенного класса # – выбирает элементы с конкретным значением атрибута id Селекторы
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net [attr] – выбирает элементы с атрибутом attr, независимо от значения, данного атрибуту [attr="val"] – выбирает элементы с атрибутом attr, значение этого атрибута = val [attr^="val"] – выбирает элементы с атрибутом attr, значение этого атрибута начинается со строки val [attr$="val"] – выбирает элементы с атрибутом attr, значение этого атрибута заканчивается строкой val [attr*="val"] – выбирает элементы с атрибутом attr, значение этого атрибута содержит строку Выбор по атрибуту
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net – выбирает элементы, которые соответствуют второму селектору и которые являются потомками элементов, соответствующих первому селектору > – выбирает элементы, которые соответствуют второму селектору и которые являются дочерними элементами для элементов, соответствующих первому селектору Выбор по виду отношений
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Абсолютные величины in – дюймы cm – сантиметры mm – миллиметры pt – пункты (1 пункт равен 1/72 дюйма) pc – пики (1 пика равна 12 пунктам) Относительные величины em – относительная к размеру шрифта элемента ex –относительная к размеру символа x px – число CSS пикселей (предположительно на экране 96dpi) % – процентное отношение к другой величине Единицы измерения
Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Материал для прочтения PowerPoint презентация Видео урок Материал