Каскадные таблицы стилей

Первый взгляд на 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