Первый взгляд на CSS • • • • • • Что такое CSS Несколько CSS свойств Использование каскадной таблицы стилей Каскады и наследование стилей Селекторы Единицы измерения Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Что такое CSS Каскадные таблицы стилей (CSS) являются средством, с помощью которого вы определяете презентацию (внешний вид и форматирование) HTML документов Далее покажу, как создавать и применять CSS стили, почему они называются каскадными таблицами стилей Онлайн курс «Web разработка на базе ASP.NET MVC» на study.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.net Примеры CSS свойств background-color – Устанавливает для элемента цвет заднего фона border – Определяет рамку, которая окружает элемент color – Устанавливает для элемента цвет переднего плана font-size – Устанавливает размер шрифта для текста элемента height – Устанавливает высоту элемента padding – Определяет количество пространства (размер пустого места) между содержимым элемента и его рамкой text-decoration – Определяет декор (украшение), применяемое к тексту элемента, включая подчеркивание width – Устанавливает ширину элемента Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Применение стиля 1. Применение напрямую к элементу через атрибут style <a href="http://smarly.net" style="background-color: grey; color: white">Посетите smarly.net</a> 2. Применение через HTML элемент style <style type="text/css"> a { background-color: grey; color: white; } </style> 3. Применение через присоединенный файл <link rel="stylesheet" type="text/css" href="styles.css"></link> Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Браузерные стили Браузерные стили (более известные как стили пользовательского агента) являются стилями по умолчанию, которые браузер применяет к элементу, если не были указаны другие стили. Эти стили немного различаются у разных браузеров, но они, как правило, в целом аналогичны. Онлайн курс «Web разработка на базе ASP.NET MVC» на study.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.net Каскадирование стилей Порядок поиска значения свойств: 1. Внутренние стили (стили, которые определяются для элемента с помощью глобального атрибута style) 2. Встроенные стили (стили, которые определены элементом style) 3. Внешние стили (стили, которые импортируются при помощи элемента link) 4. Пользовательские стили (стили, которые были определены пользователем) 5. Браузерные стили (стили по умолчанию, которые применяются браузером) Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Изменение порядка при помощи !important Приоритет отдается значению с объявлением !important Для обычных значений авторские стили используются прежде чем пользовательские стили, но это порядок меняется, когда речь идет о значениях !important. Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Селекторы * – выбирает все элементы <type> – выбирает элементы определенного типа .<class> – выбирает элементы определенного класса <type>.<class> – выбирает элементы определенного типа, которые являются членами определенного класса #<id> – выбирает элементы с конкретным значением атрибута id Онлайн курс «Web разработка на базе ASP.NET MVC» на study.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.net Выбор по виду отношений <selector> <selector> – выбирает элементы, которые соответствуют второму селектору и которые являются потомками элементов, соответствующих первому селектору <selector> > <selector> – выбирает элементы, которые соответствуют второму селектору и которые являются дочерними элементами для элементов, соответствующих первому селектору Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Единицы измерения Абсолютные величины Относительные величины in – дюймы em – относительная к размеру шрифта элемента cm – сантиметры ex –относительная к размеру mm – миллиметры символа x pt – пункты (1 пункт равен 1/72 дюйма) px – число CSS пикселей pc – пики (1 пика равна 12 пунктам) (предположительно на экране 96dpi) % – процентное отношение к другой величине Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net Материал Материал для прочтения http://smarly.net/pro-jquery-osnovi-css http://smarly.net/html5-getting-started-with-css PowerPoint презентация http://storage.smarly.net/study-web-development-asp-net-mvc/lesson-03.pptx Видео урок http://youtu.be/01xRMG8zpus Онлайн курс «Web разработка на базе ASP.NET MVC» на study.smarly.net