Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Что такое CSS Несколько CSS свойств Использование каскадной таблицы. - презентация

1 Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Что такое CSS Несколько CSS свойств Использование каскадной таблицы стилей Каскады и наследование стилей Селекторы Единицы измерения Первый взгляд на CSS

2 Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Каскадные таблицы стилей (CSS) являются средством, с помощью которого вы определяете презентацию (внешний вид и форматирование) HTML документов Далее покажу, как создавать и применять CSS стили, почему они называются каскадными таблицами стилей Что такое CSS

3 Онлайн курс «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 – объявление

4 Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net background-color – Устанавливает для элемента цвет заднего фона border – Определяет рамку, которая окружает элемент color – Устанавливает для элемента цвет переднего плана font-size – Устанавливает размер шрифта для текста элемента height – Устанавливает высоту элемента padding – Определяет количество пространства (размер пустого места) между содержимым элемента и его рамкой text-decoration – Определяет декор (украшение), применяемое к тексту элемента, включая подчеркивание width – Устанавливает ширину элемента Примеры CSS свойств

5 Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net 1.Применение напрямую к элементу через атрибут style Посетите smarly.net 2.Применение через HTML элемент style a { background-color: grey; color: white; } 3.Применение через присоединенный файл Применение стиля

6 Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Браузерные стили (более известные как стили пользовательского агента) являются стилями по умолчанию, которые браузер применяет к элементу, если не были указаны другие стили. Эти стили немного различаются у разных браузеров, но они, как правило, в целом аналогичны. Браузерные стили

7 Онлайн курс «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 Пользовательские стили

8 Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Порядок поиска значения свойств: 1.Внутренние стили (стили, которые определяются для элемента с помощью глобального атрибута style ) 2.Встроенные стили (стили, которые определены элементом style ) 3.Внешние стили (стили, которые импортируются при помощи элемента link ) 4.Пользовательские стили (стили, которые были определены пользователем) 5.Браузерные стили (стили по умолчанию, которые применяются браузером) Каскадирование стилей

9 Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Приоритет отдается значению с объявлением !important Для обычных значений авторские стили используются прежде чем пользовательские стили, но это порядок меняется, когда речь идет о значениях !important. Изменение порядка при помощи !important

10 Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net * – выбирает все элементы – выбирает элементы определенного типа. – выбирает элементы определенного класса. – выбирает элементы определенного типа, которые являются членами определенного класса # – выбирает элементы с конкретным значением атрибута id Селекторы

11 Онлайн курс «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, значение этого атрибута содержит строку Выбор по атрибуту

12 Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net – выбирает элементы, которые соответствуют второму селектору и которые являются потомками элементов, соответствующих первому селектору > – выбирает элементы, которые соответствуют второму селектору и которые являются дочерними элементами для элементов, соответствующих первому селектору Выбор по виду отношений

13 Онлайн курс «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) % – процентное отношение к другой величине Единицы измерения

14 Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.netstudy.smarly.net Материал для прочтения PowerPoint презентация Видео урок Материал