- •Компьютерные сети, как средство обмена информацией.
- •Технология World Wide Web (www).
- •Браузеры и их назначение. Google Chrome, Opera, Firefox, Safari, ie.
- •Понятие веб-дизайна. Профессия веб-дизайнера
- •Искусство веб-дизайнера. Необходимые навыки.
- •Основные компоненты web-страницы и способы их визуального представления на страницах сайта.
- •Этапы разработки web-сайта
- •Основные языки веб-программирования. Клиентские и серверные языки.
- •Синтаксис гипертекстовой разметки. Теги. Атрибуты.
- •Структура html-документа
- •Заголовок и тело html-документа Заголовок документа
- •Тело документа
- •Цветовое оформление документа
- •Разделение текста на строки, абзацы. Внутристрочное форматирование. Разрыв строки.
- •Логическое форматирование гипертекста
- •Физическое форматирование
- •Использование графики в html-документах
- •Гиперссылки. Абсолютный и относительный url
- •Списки в html. Виды. Общая характеристика.
- •Нумерованные списки в html
- •Маркированные списки в html
- •Виды верстки веб-страниц. Общая характеристика.
- •Табличная верстка в html.
- •Блочная верстка в html.
- •Выравнивание данных в ячейках. Align и valign
- •Объединение ячеек в нтмl.
- •Общее определение каскадных таблиц стилей css. Цель создания css
- •Способы подключения css к документу
- •Построение правила css. Виды селекторов Построение правила css
- •Виды селекторов
- •Наследование. Каскадирование. Приоритеты стилей css.
- •Преимущества и недостатки css-вёрстки
- •Классы элементов. Идентификаторы элементов.
- •Подготовка иллюстраций для web. Gif. Jpeg.
- •Общее понятие фреймов.
- •Хостинг. Размещение сайта в Интернете.
-
Построение правила css. Виды селекторов Построение правила css
В первых трёх случаях подключения таблицы CSS к документу (см. выше) каждое правило CSS из таблицы стилей имеет две основные части — селектор и блок объявлений. Селектор, расположенный в левой части правила, определяет, на какие части документа распространяется правило. Блок объявлений располагается в правой части правила. Он помещается в фигурные скобки, и, в свою очередь, состоит из одного или более объявлений, разделённых знаком «;». Каждое объявление представляет собой сочетание свойства CSS и значения, разделённых знаком «:». Селекторы могут группироваться в одной строке через запятую. В таком случае свойство применяется к каждому из них.
селектор, селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
В четвёртом случае подключения таблицы CSS к документу (см. список) правило CSS (являющееся значением атрибута style тега, на который оно действует) представляет собой переченьобъявлений («свойство CSS : значение»), разделённых знаком «;».
Виды селекторов
Селекторы правила CSS могут быть
-
селекторами элементов;
p {font-family: Garamond, serif;}
-
селекторами классов;
.note {color: red; background: yellow; font-weight: bold;}
-
селекторами идентификаторов;
#paragraph1 {margin: 0;}
-
селекторами атрибутов;
a[href="http://www.somesite.com"]{font-weight:bold;}
-
селекторами потомков (контекстными селекторами);
div#paragraph1 p.note {color: red;}
-
селекторами дочерних элементов;
p.note > b {color: green;}
-
селекторами сестринских элементов;
h1 + p {font-size: 24pt;}
-
селекторами псевдоклассов;
a:active {color:yellow;}
-
селекторами псевдоэлементов.
p:first-letter {font-size: 32px;}
-
Также в CSS существует так называемый универсальный селектор, обозначающий любой элемент, встречающийся в документе. Например, * {color:red;}. Перед любым селектором, задающим класс или идентификатор, можно поставить знак универсального селектора, в результате получится эквивалентное выражение, например, .first {...} и *.first {...} имеют один и тот же смысл.
-
Наследование. Каскадирование. Приоритеты стилей css.
Применение CSS к документам HTML основано на принципах наследования и каскадирования. Принцип наследования заключается в том, что свойства CSS, объявленные для элементов-предков, наследуются элементами потомками. Но, естественно, не все свойства CSS наследуются — например, если для тега параграфа p средствами CSS задана рамка, то она не будет наследоваться ни одним тегом, содержащимся в данном теге p, а вот если для параграфа p средствами CSS задан цвет шрифта (например, color:green;), то это свойство будет унаследовано каждым элементом-тегом, находящимся в параграфе.
Принцип каскадирования применяется в случае, когда какому-то элементу HTML одновременно поставлено в соответствие более одного правила CSS, то есть, когда происходит конфликт значений этих правил. Чтобы разрешить такие конфликты вводятся правила приоритета.
-
Наиболее низким приоритетом обладает стиль браузера;
-
Следующим по значимости является стиль, заданный пользователем браузера в его настройках;
-
И наиболее высоким приоритетом обладает стиль, заданный непосредственно автором страницы. И далее, уже в этом авторском стиле приоритеты расставляются следующим образом:
-
Самым низким приоритетом обладают стили, наследуемые в документе элементом от своих предков;
-
Более высоким приоритетом обладают стили, заданные во внешних таблицах стилей, подключённых к документу;
-
Ещё более высоким приоритетом обладают стили, заданные непосредственно селекторами всех десяти видов (см. подраздел «виды селекторов»), содержащимися в контейнерах style данного документа. Нередки случаи, когда к какому-нибудь элементу имеют отношение, задают его вид, несколько таких селекторов. Такие конфликты между ними разрешаются с помощью расчёта специфичности каждого такого селектора и применения этих селекторов к данному элементу в порядке убывания их специфичностей. При расчёте специфичности селектора принимается во внимание:
-
количество идентификаторов (#id) в селекторе —- ((1,0,0) за каждый объявленный идентификатор в селекторе правила CSS);
-
количество классов (.class) и псевдоклассов (:pseudoclass) в селекторе —- ((0,1,0) за каждый объявленный класс и псевдокласс в селекторе правила CSS );
-
количество тегов в селекторе —- ((0,0,1) за каждый объявленный тег в селекторе правила CSS). (Принцип расчёта таков, что, например, (1,0,0) будет иметь большую специфичность, соответственно — бо́льший приоритет, чем даже (0,10,0), а (0,1,0) будет иметь большую специфичность, больший приоритет, чем (0,0,10). Если же рассчитанные таким образом специфичности окажутся одинаковыми, то к элементу будет применено правило, описанное селектором, расположенным в документе ниже других.)
-
-
Ещё более высоким приоритетом обладают стили, объявленные непосредственно в теге данного элемента посредством атрибута style этого тега;
-
И наконец самым высоким приоритетом обладают стили, объявленные автором страницы или пользователем, с помощью сопроводительного слова !important. Если таких свойств несколько, то предпочтение отдаётся в первую очередь стилям, заданным пользователем, а для остальных свойств (которые будут являться задаваемыми автором страницы) потребуется определить их специфичности по принципам, описанным выше, и применять эти свойства в порядке убывания этих их специфичностей.
-