Css правила: CSS — правила оформления кода

Основы CSS — Поддержка

Эта функция доступна для сайтов с тарифными планами WordPress.com Premium, Business и eCommerce. Если на вашем сайте действует один из устаревших тарифных планов, этот раздел доступен для плана Pro.

Каскадные таблицы стилей (CSS) позволяют применять правила стилей к содержимому HTML. На этой странице рассматриваются некоторые основы CSS, такие как средства выбора и сортировка.

Чтобы добавить пользовательские таблицы CSS, выберите Внешний вид → Дополнительные CSS на левой боковой панели своей консоли WordPress.com.

Содержание

Средства выбора
Порядок имеет значение
Совет по тестированию
Дополнительные ресурсы

Средства выбора

Средства выбора используются для определения кода HTML, стиль которого нужно изменить. Свойства и значения используются для задания правил стиля.

Средства выбора бывают трёх типов.

Метка	Метка HTML, например h2 или p.
Класс	Атрибут, применяемый к одному или нескольким элементам, например Образец текста. . Для обращения к классу в коде CSS перед его именем ставится точка.
ID	Атрибут уникального элемента, который используется только один раз, например . Для обращения к атрибуту в коде CSS перед его именем ставится символ #.

Ниже приведены некоторые примеры.

Средство выбора метки HTML:

<p>Образец абзаца.</p>

Код CSS средства выбора метки HTML:

p {
 color: red;
 font-size: 200%;
}

Ниже представлено средство выбора метки HTML в действии: текст выделен красным цветом, а размер шрифта увеличен до 200 %.

Образец абзаца.

HTML-код средств выбора класса и идентификатора:

<p>Это абзац с классом под названием "warning".</p>
<p>Это абзац с идентификатором под названием "danger". </p>

CSS-код средств выбора класса и идентификатора:

.warning {
 background-color: #ccf;
}
#danger {
 background-color: #fcc;
}

Ниже представлены эти средства выбора класса и идентификатора в действии.

Это абзац с классом под названием «warning».

Это абзац с идентификатором под названием «danger».

В редакторе WordPress можно добавлять собственные классы CSS в элементы сайта с помощью функции Дополнительные классы CSS.

↑ Содержание ↑

Порядок имеет значение

Слово «каскадные» в расшифровке аббревиатуры CSS относится к способу определения браузером правил стиля, которые будут применяться. Каждый стиль применяется в соответствии со степенью важности средства выбора, степенью его точности и порядком CSS.

Средства выбора идентификатора важнее средств выбора класса, а средства выбора класса важнее средств выбора метки HTML. Таким образом, абзац в следующем примере будет выделен красным цветом, поскольку средство выбора идентификатора является наиболее важным.

#danger { color: red; }
.warning { color: orange; }
p { color: green; }

Можно переопределить степень важности, добавив к значению «!important», однако без крайней необходимости делать это не рекомендуется, поскольку при добавлении слишком большого числа правил !important редактирование и отладка быстро становятся запутанными.

#danger { color: red; }
.warning { color: orange; }
p { color: green !important; }

Более точные средства выбора применяются перед менее точными. Элементы HTML являются самыми внутренними и самыми точными.

<p>Это <strong><em>хороший</em></strong> образец абзаца.</p>

Метка em находится ближе к внутреннему коду HTML, чем метка strong, поэтому будет использоваться правило em.

strong { color: limegreen; }
em { color: tomato; }

Однако при наличии более точного средства выбора, например «p strong em«, будет использоваться именно это средство выбора, поскольку оно является более точным, чем просто средство выбора типа em само по себе.

p strong em { color: limegreen; }
em { color: tomato; }

Наконец, важен порядок правил. Если одно и то же правило встречается несколько раз, используется последнее правило. В следующем примере будет применено только последнее правило и редактор CSS WordPress.com удалит два первых повторяющихся правила.

p { color: indigo; }
p { color: aqua; }
p { color: teal; }

↑ Содержание ↑

Совет по тестированию

Чтобы увидеть, как ваша тема выглядит без применения её CSS, перейдите в раздел Внешний вид → Дополнительные стили, временно удалите все содержимое редактора и выберите Не использовать оригинальную CSS темы. Должен отобразиться минимум — только HTML, веб-страница без стиля. Это даст базовое представление об HTML-структуре текущей темы. Не сохраняйте изменения, если хотите просто выполнить предварительный просмотр базовой структуры. Возможность начать снова и заменить CSS темы — это дополнительная опция, которую можно использовать для полного изменения стиля любой темы WordPress. com с нуля с помощью CSS.

↑ Содержание ↑

Дополнительные ресурсы

Итак, вы изучили некоторые основы CSS и можете приступать к использованию CSS на сайте WordPress.com! Дополнительные сведения о параметрах и настройках редактирования CSS на сайте WordPress.com см. на странице Редактирование CSS.

Мы также рекомендуем ознакомиться со следующими превосходными ресурсами по CSS.

• Руководство для новичков CSS Beginner Tutorial от HTML Dog
• Изучение CSS: Codecademy
• Как найти CSS моей темы?
• Введение в CSS, или Как заставить страницы выглядеть так, как вам нравится
• Введение в CSS: поиск средств выбора CSS
• Введение в CSS: предварительный просмотр изменений на панели соответствующего правила
• Нужно ли мне изучать CSS?

Названия цветов в примерах выше взяты из списка цветов X11, поддерживаемого популярными браузерами, с добавлением оттенков серого из SVG 1.0. Просмотреть список ключевых слов основных цветов можно на той же странице.

Разнообразие тарифных планов и ценовых предложений

• Бесплатно

  Оптимальный вариант для студентов

• Personal

  Оптимальный вариант для представления своего хобби

• Premium

  Оптимальный вариант для фрилансеров

• Business

  Оптимальный вариант для малых предприятий

Ваша оценка:

Что такое HTML+CSS

С помощью языка CSS можно менять всё оформление HTML страницы, все свойства тегов. К примеру, изменять цвет текста или сам шрифт, делать цветные рамки таблицам и даже простейшую анимацию. В этой статье рассмотрим основы CSS. Затем перейдём к более сложным примерам.

К примеру, зададим особый стиль для тега <b>. Этот тег выделяет текст жирным. А мы сделаем такой текст ещё и красным. Для этого используем следующий CSS код:

b {
   color: red;
}

Строчка «color: red;» называется свойством и его значением. Нетрудно догадаться из названия, что это свойство отвечает за цвет. А значение, которое пишется через двоеточие, делает его красным. В итоге, на странице браузера текст, выделенный тегом <b>, будет автоматически становиться красным:

Часть текста выделена жирным шрифтом

Есть возможностьзадавать сразу несколько свойств для одного селектора. Тогда надо разделять из через точку с запятой «;«. Об этом читайте далее в статье.

В CSS коде выше, в примере, b называется «селектором». Этот селектор соответствует тегу <b>. По аналогии вы можете использовать другие теги в качестве селекторов: «table«, «tr«, «i» и т.д.

<!DOCTYPE html>
<html>
<head>
<title>Про мышей</title>
</head>
<body>
Тише, <b>мыши</b>, кот на крыше,<br>
а котята ещё выше. <br>
<i>Кот</i> пошёл за молоком,<br>
а котята кувырком.<br>
<i>Кот</i> пришёл без молока,<br>
а котята ха-ха-ха.
 <style>
b { 
color: green;
font-size: 120%;
}
i { 
color: red;
font-size: 80%;
}
</style>
</body>
</html>

Свойство «font-size: 120%;» задаёт размер шрифта относительно общего размера шрифта. При значении больше 100% оно увеличивает шрифт. Получится такой результат:

Тише, мыши, кот на крыше,

а котята ещё выше.
Кот пошёл за молоком,

а котята кувырком.
Кот пришёл без молока,

а котята ха-ха-ха.

В этом примере продемонстрировано как задавать несколько свойств для разных селекторов. Обратите внимание, что свойства применяются ко всем тегам на странице.

Тег <style>, внутри которого пишется CSS код, может быть где угодно на странице. Часто этот тег ставят в раздел <head>.

CSS правила могут переопределять друг-друга. Если несколько раз написать один и тот же селектор с одним и тем же свойством, то применится только последний:

b {
   color: red;
}
b {
   color: green;
}

— в таком случае текст внутри тега <b> будет зелёным, а не красным, потому что значение свойства будет переопределено последним совпадением.

Можно задать сколько угодно свойств. В том числе те свойства, которые будут переопределить родные свойства тегов. К примеру, тегу

При таком способе записи CSS и HTML перемешиваются, что сильно усложняет работу программисту. Логичным выходом является сбор всех стилей в одно место. А точнее — в один отдельный файл, который загружается при загрузке страницы. Такой файл можно подключить к HTML с помощью тега <link> внутри блока <head>

<!DOCTYPE html>
<html>
<head>
<title>Про мышей</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
Тише, <b>мыши</b>, кот на крыше,<br>
а котята ещё выше.<br>
<i>Кот</i> пошёл за молоком,<br>
а котята кувырком.<br>
<i>Кот</i> пришёл без молока,<br>
а котята ха-ха-ха.
</body>
</html>

На пятой строчке примера видно, что в блоке <head> появился подключаемый файл со стилями:

<link rel="stylesheet" href="style.css">

По аналогии со ссылками в href=»…» можно писать как относитльный путь к файлу стилей, так и абсолютный.

Подключаемый файл стилей «style.css» будет содержать всё, что было внутри тега <style>. ..</style> из предыдущего примера. То есть:

b { 
color: green;
font-size: 120%;
}
i { 
color: red;
font-size: 80%;
}

CSS файл «style.css» — это точно такой же текстовый файл, что и HTML. Для изменения этого файла вам понадобится любой текстовый редактор. Нет необходимости применять специальные программы.

Последний способ указать CSS свойство — это непосредственно внутри тега, в атрибуте style=»…». В таком случае свойством будет обладать только один тег, а не все теги на странице. Применять это можно так:

Часть текста <b>выделена</b> жирным шрифтом

Можно указать сразу несколько свойств через «;«. Результат на странице будет таким:

Часть текста выделена жирным шрифтом

Помните о том, что свойства перезаписываются. Самым важным является CSS, указанный непосредственно внутри атрибута тега style=». ..». Эти свойства будут применены в любом случае. А CSS в подключенном файле в секции <head>…</head> будет перезаписываться свойствами, которые находятся на странице ниже, внутри <style>…</style>.

Работа с таблицами стилей CSS в приложении HTML5

• Для выполнения этого учебного курса потребуются следующие материалы.
• Создание приложения HTML5
• Просмотр приложений на разных устройствах
• Изменение макета
  • Создать таблицу стилей носителей
  • Добавление правил CSS
• Использование препроцессоров CSS
• Заключение
• См. также

Приложения HTML5 обычно сочетают HTML, CSS и JavaScript для создания приложений, которые запускаются в браузерах и которые отображаются на различных устройствах, включая смартфоны, планшеты и ноутбуки. В этом документе описывается, как IDE предоставляет инструменты, которые можно использовать для работы с правилами CSS для изменения компоновки приложения. Среда IDE также поддерживает создание и использование препроцессоров Sass и LESS CSS в приложениях.

Расширение NetBeans Connector для браузера Chrome позволяет просматривать приложения по мере их отображения на различных устройствах. Расширение позволяет браузеру Chrome и IDE взаимодействовать друг с другом. Функция ‘Проверка’ в режиме NetBeans может позволить найти элементы в исходном коде, выбрав их в браузере. После выбора элемента в браузере можно использовать IDE для просмотра правил и свойств CSS, которые применяются к этому элементу.

Подробнее об установке расширения NetBeans Connector для браузера Chrome см. в учебном курсе Начало работы с приложениями HTML5.

Для просмотра демонстрационного ролика этого учебного курса см. раздел Видеоролик по работе со страницами стилей CSS в приложениях HTML5.

Для выполнения этого учебного курса потребуются следующие материалы.

Примечания.

• HTML5DemoSiteTemplate.zip представляет собой шаблон сайта, используемый при создании проекта.

• При сравнении проекта с работающим решением можно загрузить + шаблон сайта+ завершенного проекта.

• Предполагается, что читатель обладает базовыми знаниями или опытом программирования на HTML, CSS и JavaScript.

Создание приложения HTML5

В данном учебном курсе рассматривается использование шаблона сайта для создания проекта HTML5. Шаблон сайта, используемый в этом учебном курсе, является тем же шаблоном, который был сохранен как шаблон сайта в учебном курсе Начало работы с приложениями HTML5. Если вы выполнили действия, описанные в учебном руководстве ‘Начало работы’, то можно использовать шаблон сайта, сохраненный в предыдущем разделе. В качестве альтернативы можно загрузить шаблон сайта HTML5DemoSiteTemplate.zip.

Для создания приложения на основе шаблона сайта выполните следующие шаги.

1. Загрузите шаблон сайта HTML5 (HTML5DemoSiteTemplate)

2. Выберите ‘Файл’ > ‘Новый проект’ (Ctrl-Shift-N; ⌘-Shift-N в Mac) в главном меню, чтобы открыть мастер создания проектов.

3. Выберите категорию HTML5, затем выберите Приложение HTML5. Нажмите кнопку ‘Далее’.

4. Введите HTML5DemoCss в качестве имени проекта и укажите местоположение. Нажмите кнопку ‘Далее’.

5. Выберите пункт Выбрать шаблон и щелкните ‘Обзор’ для поиска шаблона сайта ( HTML5DemoSiteTemplate.zip ). Нажмите кнопку ‘Готово’.

Figure 1. Укажите шаблон сайта в мастере создания приложений HTML5

После нажатия кнопки ‘Готово’ среда IDE создаст проект и откроет файл index.html в редакторе. В окне ‘Проекты’ отображается, что проект содержит index.html , таблицу стилей CSS, некоторые библиотеки JavaScript и определенные изображения. Окна ‘Правила CSS’ и ‘Навигатор’ также открывается в IDE.

Просмотр приложений на разных устройствах

В этом учебном курсе будет выполняться запуск приложений в браузере Chrome с установленным расширением NetBeans Connector. Когда расширение будет установлено, пользователи смогут использовать меню NetBeans в браузере, чтобы легко изменить размер окна браузера для просмотра приложения так, как оно будет отображаться на некоторых распространенных устройствах.

Примечания. В этом учебном курсе мы рекомендуем использовать браузер Chrome и установить расширение NetBeans для Chrome. Подробнее об устаноке расширения NetBeans Connector см. Начало работы с приложениями HTML5.

Чтобы запустить приложение в браузере Chrome, выполните следующие шаги.

1. Убедитесь, что Chrome с интеграцией NetBeans выбран в раскрывающемся списке на панели инструментов.

2. Нажмите кнопку ‘Выполнить’ на панели инструментов, чтобы запустить проект в браузере Chrome.

В браузере отобразится простое расширяемое меню.

Обратите внимание, что на вкладке браузера имеется желтая полоса, которая является уведомлением о том, NetBeans Connector выполняет отладку вкладки. IDE и браузер связаны и имеют возможность взаимодействовать друг с другом в тех случаях, когда желтая полоса видна. При запуске приложения HTML5 из IDE отладчик JavaScript включается автоматически. После сохранения изменений в файле или внесении изменений в таблицу стилей CSS не нужно перезагружать страницу, потому что окно браузера автоматически обновляется с учетом изменений.

При закрытии желтой полосы или щелчка ‘Отмена’ разрывается соединение между IDE и браузером. В случае разрыва соединения необходимо запустить приложение HTML5 из IDE.

Также следует отметить, что значок NetBeans отображается в местоположении адреса URL поля браузера. Вы можете щелкнуть значок, чтобы открыть меню, которое предоставляет различные варианты для изменения размера изображения в браузере, и для включения режима проверки в режиме NetBeans.

3. Щелкните значок ‘Открыть действие NetBeans’ в адресной строке браузера URL, чтобы открыть меню NetBeans и выбрать в меню ‘Планшет — портрет’.

Размер окна изменится до размеров браузера планшета в режиме портрета. Меню можно растянуть, чтобы заполнить правую сторону, после чего меню будет видно полностью.

Figure 2. Размер отображения планшетного портрета в браузере

Если выбрать одно из заданных по умолчанию устройств в меню, окно браузера изменится до размеров устройства. Это позволит увидеть, как приложение будет выглядеть на выбранном устройстве. Приложения HTML5 обычно реагируют на размер экрана устройства, на котором они просматриваются. Можно использовать правила JavaScript и CSS, которые реагируют на размер экрана, а также изменять способ отображения приложений так, чтобы макет был оптимизирован для устройства.

4. Щелкните значок NetBeans еще раз и выберите ‘Смартфон — пейзаж’ в меню NetBeans.

Figure 3. Выберите ‘Смартфон — пейзаж’ в меню NetBeans в браузере

Размер окна изменяется до размера смартфона в горизонтальной ориентации, и пользователь сможет увидеть, что нижняя часть меню без прокрутки не видна.

Figure 4. Размер окна браузера изменяется на ‘Смартфон — пейзаж’

В следующем разделе пользователи смогут изменить таблицу стилей, что позволит просматривать все меню без прокрутки на смартфоне в горизонтальной ориентации.

Изменение макета

У пользователей должны быть возможности внесения определенных незначительных изменений в элементы страницы без применения функции прокрутки. Эти изменения должны применяться только тогда, когда размер браузера равен размеру смартфона или меньше. При горизонтальной ориентации окно браузера смартфона составляет 480 пикселей в ширину и 320 пикселей в высоту.

Создать таблицу стилей носителей

В этом упражнении будет создана новая таблица стилей и добавлено правило носителей для устройств с дисплеями, аналогичными смартфонам. После этого будут добавлены некоторые правила CSS к правилу носителей.

1. Щелкните правой кнопкой мыши узел папки css в окне ‘Проекты’ и выберите ‘Создать’ > ‘Таблица каскадных таблиц’ во всплывающем меню.

2. Введите mycss в качестве имени файла. Нажмите кнопку ‘Готово’.

После нажатия кнопки ‘Готово’ таблица новых стилей открывается в редакторе.

3. Добавьте следующее правило носителей к таблице стилей.

/*My rule for smartphone*/
@media (max-width: 480px) {
}

Любые правила CSS, которые пользователи добавляют в скобках для этого правила, будут применяться только в том случае, когда размер окна браузера составляет 480 пикселей в ширину или меньше.

Создание шаблонов кода для фрагментов кода, которые можно использовать часто. Можно создавать шаблоны кода CSS на вкладке ‘Шаблоны кода’ в категории ‘Редактор’ окна ‘Параметры’.

4. Сохраните изменения.

5. Откройте index.html в редакторе.

6. Добавьте следующую ссылку на таблицу стилей между тегами <head> в index.html . Сохраните изменения.

<link type="text/css" rel="stylesheet" href="css/mycss.css">

Можно использовать функцию автозавершения кода в редакторе, чтобы добавлять ссылку на таблицу стилей.

Добавление правил CSS

1. В браузере Chrome щелкните значок NetBeans и выберите в меню ‘Проверить в режимеNetBeans’.

2. Щелкните изображение в браузере.

Элемент подсвечивается, когда он выбран в режиме ‘Проверка’. На этом снимке можно увидеть, что изображение подсвечивается синим цветом.

Figure 5. Изображение выбрано в браузере Chrome

В IDE можно увидеть, что правила и свойства CSS, которые применяются к img , перечислены в окне ‘Стили CSS’. Вкладка ‘Выбор’ в окне ‘Стили CSS’ имеет три панели, которые содержат подробные сведения о выбранном элементе.

Figure 6. Окно ‘Стили CSS’, где выбрано изображение

Верхняя панель

В верхней панели ‘Свойства’ можно увидеть, что шесть пар свойство-значение применяются к элементу img . Три пары ( border , float и margin ) применяются с помощью правила CSS для элемента img . Остальные три пары применяется потому, что элемент img наследует свойства класса средств выбора, которые применяются к объектам, содержащим элемент img . Пользователи могут четко видеть структуру DOM в окне ‘Навигатор’. Свойство border в настоящее время выбрано на панели ‘Свойства’ в окне ‘Стили CSS’.

Средняя панель

На средней панели ‘Примененные стили’ можно увидеть, что свойство border и значение указано в правиле CSS, которое определяет элемент img . Правило находится на строке 12 в файле basecss.css . Можно нажать местоположение на панели, чтобы открыть таблицу стилей в редакторе.

Нижняя панель

В нижней панели отображаются все свойства, которые определены в правиле CSS для правила, выбранного в средней панели. В этом случае видно, что правило для img определяет свойства border , float и margin-right .

3. В окне ‘Стили CSS’ перейдите на вкладку ‘Документы’.

4. Выберите узел css/mycss.css и нажмите кнопку ‘Изменить правила CSS’ (). В результате откроется диалоговое окно ‘Изменение правил CSS’.

Figure 7. Диалоговое окно ‘Изменение правил CSS’

5. Выберите элемент в качестве типа средства выбора и введите img в качестве средства выбора.

6. Выберите css/mycss.css в качестве таблицы стилей и (макс-шир:480пкс) как At-Rule. Нажмите кнопку ‘ОК’.

Figure 8. Диалоговое окно ‘Изменение правил CSS’

При нажатии кнопки ОК в IDE создается правило CSS для img в таблице стилей css/mycss.css между скобками правила носителей. Новое правило сейчас указано на панели ‘Примененные стили’.

7. В окне ‘Стили CSS’ перейдите на вкладку ‘Выбор’.

Можно видеть, что имеется два правила CSS для img . Одно из правил находится в mycss.css , а другое находится в basecss.css .

8. Выберите новое правило img (определено в mycss.css ) на панели ‘Примененные стили’ в окне ‘Стили CSS’.

Figure 9. Стили для выбранного элемента в окне ‘Стили CSS’

В нижней панели окна видно, что это правило не имеет свойств.

9. Нажмите ‘Добавить свойство’ в левом столбце нижней панели окна ‘Стили CSS’ и введите width.

10. Введите 90px в правом столбце напротив свойства width и нажмите клавишу Return.

Figure 10. Панель ‘Свойства изображения’ в окне ‘Стили CSS’

При вводе символов в столбце значений отображается список часто используемых значений свойства width .

При нажатии клавиши Return ширина изображения в браузере автоматически меняется на 90 пикселей. IDE добавляет свойство к правилу CSS в таблице стилей mycss.css . В редакторе таблиц стилей теперь должно содержаться следующее правило.

/*My rule for smartphone*/
@media (max-width: 480px) {
    img {
        width: 90px;
    }
}

Некоторые дополнительные изменения должны быть внесены в таблицу стилей, потому что меню по-прежнему не помещается в окно.

11. Выберите элемент неупорядоченного списка ( <ul> ) в окне браузера.

Figure 11. Выводит список элементов, выбранных в браузере

При выборе элемента списка в окне ‘Обзор DOM’ выбирается элемент <ul> , а в окне ‘Стили CSS’ отображаются стили, примененные к этому элементу.

Figure 12. Элемент списка, выбранный в окне ‘Обзор DOM’

Если выбрать font-family в окне ‘Стили CSS’, то видно, что свойство и значение font-family определены в средстве выбора классов .ui-widget .

12. Щелкните файл index.html в редакторе, а затем перейдите на вкладку ‘Документ’ в окне ‘Стили CSS’.

13. Разверните узел css/mycss.css в окне ‘Стили CSS’.

Figure 13. Таблица стилей, выбранная на вкладке ‘Документ’ окна ‘Стили CSS’

14. Нажмите кнопку ‘Изменить правила CSS’ () в окне ‘Стили CSS’, чтобы открыть диалоговое окно ‘Изменить правила CSS’.

15. Выберите ‘Класс’ как ‘Тип средства выбора’ и введите ui-widget как ‘Средство выбора’.

16. Выберите * css/mycss.css * как таблицу стилей и (макс-шир:480пкс) как At-Rule. Нажмите OK.

После щелчка OK в IDE добавляется новое правило к таблице стилей mycss.css и открывается файл в редакторе. Если файл не открывается в редакторе, вы можете дважды щелкнуть правило ui-widget в узле css/mycss.css окна таблицы стилей, чтобы открыть таблицу стилей. Курсор помещается в строку, содержащую правило в таблице стилей.

17. Добавьте следующее свойство и значение (выделено полужирным шрифтом) к правилу для ui-widget .

.ui-widget {
    *font-size: 0.9em;*
}

Когда вы изменяете значение в таблице стилей, страница автоматически обновляется в окне браузера.

Можно ввести свойство и значение в редакторе и использовать функцию завершения кода для решения проблемы. В качестве альтернативы можно выбрать правило .ui-widget в верхней панели и щелкнуть кнопку ‘Добавить свойство’ в нижней панели, чтобы открыть диалоговое окно ‘Добавить свойство’.

Figure 14. Автозавершение кода CSS в редакторе

После добавления правила видно, что меню теперь помещается на странице.

Figure 15. Страница, просматриваемая в браузере, с новыми примененными правилами CSS

18. Щелкните значок NetBeans в браузере и выберите в меню ‘Планшет- портрет’.

После изменения размера окна стало очевидно, что изменения таблицы стилей не повлияли на отображаемое изображение, если ширина экрана была больше 480 пикселей.

Использование препроцессоров CSS

Помимо инструментов редактирования стандартных файлов CSS среда IDE поддерживает препроцессоры CSS — Sass и LESS, используемые для создания таблиц стилей для приложений. В среде IDE предусмотрены мастера для создания файлов препроцессоров CSS и указания контролируемых каталогов. Если указан контролируемый каталог, файлы CSS будут создаваться автоматически при каждом изменении файлов препроцессора CSS в этом каталоге.

Примечание. Для использования препроцессора CSS необходимо установить соответствующее программное обеспечение и указать расположение исполняемого файла. Расположение исполняемого файла можно указать в окне ‘Параметры’.

1. Установите программное обеспечение препроцессора CSS на локальном компьютере.

В среде IDE поддерживаются препроцессоры Sass и LESS. В этом учебном курсе показано, как создавать файлы CSS с помощью препроцессора Sass. Для препроцессора LESS используется сходная конфигурация.

Примечание. При установке препроцессора LESS в операционной системе X убедитесь, что в каталоге usr/bin присутствует файл Node.js. Дополнительные сведения см. в примечании.

2. Разверните структуру проекта HTML5Demo в окне ‘Файлы’.

3. В том же окне ‘Файлы’ щелкните правой кнопкой мыши папку public_html и выберите Создать > Папка в раскрывающемся меню.

Если в меню нет пункта ‘Папка’, выберите ‘Другие’ и укажите тип файла ‘Папка’ в категории ‘Другие’ мастера создания проектов.

4. В поле ‘Имя файла’ введите scss. Нажмите кнопку ‘Готово’.

При нажатии кнопки ‘Готово’ в мастере среда IDE создает новую вложенную папку в папке public_htmll .

5. Щелкните правой кнопкой мыши узел папки scss в окне ‘Проекты’ и выберите Создать > Файл Sass в раскрывающемся меню.

6. В поле ‘Имя файла’ введите mysass.

7. Нажмите ‘Настроить’. В результате откроется вкладка ‘Препроцессор CSS’ в окне ‘Параметры’.

8. Укажите путь к исполняемому файлу Sass или нажмите кнопку ‘Обзор’ и найдите исполняемый файл на локальном компьютере. Для закрытия окна «Параметры» нажмите кнопку «ОК».

Figure 16. Страница, просматриваемая в браузере, с новыми примененными правилами CSS

9. В мастере создания файлов выберите ‘Компилировать файлы Sass при сохранении’. Нажмите кнопку ‘ОК’.

Figure 17. Страница, просматриваемая в браузере, с новыми примененными правилами CSS

При нажатии кнопки ОК в редакторе открывается новый файл Sass mysass. scss .

10. Добавьте следующие элементы в файл mysass.scss и сохраните изменения.

img {
    margin-right: 20px;
    float:left;
    border: 1px solid;
    @media (max-width: 480px) {
        width: 90px;
    }
}
.ui-widget {
    @media (max-width: 480px) {
        font-size: 0.9em;
        li {
            color: red;
        }
    }
}

При сохранении файла препроцессор Sass создает новый файл CSS mysass.css в папке css . Если открыть файл mysass.css в редакторе, в нем можно увидеть правила, созданные на основе файла scss . По умолчанию в файле mysass.css генерируется отладочная информация CSS. Если отладочная информация больше не требуется, можно отменить ее генерацию на вкладке ‘Препроцессоры CSS’ в окне ‘Параметры’.

Примечания.

• Если вы хотите изменить правила CSS, необходимо вносить изменения в файл препроцессора Sass mysass. scss , а не в файл таблицы стилей mysass.css , потому что таблица стилей создается заново при каждом сохранении измененного файла препроцессора.

• Документацию о синтаксисе Sass и других компонентах Sass см. в разделе Справочные материалы Sass.

11. Откройте файл index.html и измените ссылку на таблицу стилей с mycss.css на mysass.css . Сохраните изменения.

<link type="text/css" rel="stylesheet" href="css/*mysass.css*">

При сохранении файла автоматически обновляется страница в браузере. Элементы списка теперь выделены красным цветом.

Заключение

В этом учебном курсе описывается, как добавлять и изменять правила CSS приложения HTML5 для улучшения отображения приложения на устройстве с меньшим размером экрана. Вы просмотрели приложения в браузере, размер которого был изменен до размера обычного смартфона. Вы использовали ‘Проверка’ в режиме NetBeans в браузере Chrome для поиска правил стилей, а затем изменили правила для оптимизации макета в соответствии с меньшим размером экрана.

Отправить отзыв по этому учебному курсу

См. также

Подробнее о поддержке приложений HTML5 в IDE см. в следующих материалах на сайте www.netbeans.org:

• Начало работы с приложениями HTML5. Документ, который показывает, как установить расширение NetBeans Connector для Chrome, а также выполнить создание и запуск простого приложения HTML5.

• Отладка и тестирование JavaScript в приложениях HTML5. Документ, который демонстрирует, как IDE предоставляет инструменты, которые могут использоваться в отладке и тестировании файлов сценариев JAVA в IDE.

• Глава Разработка приложений HTML5 в документе Руководство пользователя по разработке приложений в IDE NetBeans

Дополнительные сведения о jQuery доступны в официальной документации:

• Официальная домашняя страница: http://jquery.com

• Домашняя страница UI: http://jqueryui.com/

• Учебные курсы: http://docs.jquery.com/Tutorials

• Главная страница документации: http://docs. jquery.com/Main_Page

• Демонстрации интерфейса пользователя и документация: http://jqueryui.com/demos/

Использование CSS для создания страниц и содержимого в Dreamweaver

1. Руководство пользователя Dreamweaver
   
2. Введение
   1. Основы гибкого веб-дизайна
   2. Новые возможности Dreamweaver
   3. Веб-разработка с помощью Dreamweaver: обзор
   4. Dreamweaver / распространенные вопросы
   5. Сочетания клавиш
   6. Системные требования Dreamweaver
   7. Обзор новых возможностей
3. Dreamweaver и Creative Cloud
   1. Синхронизация настроек Dreamweaver с Creative Cloud
   2. Библиотеки Creative Cloud Libraries в Dreamweaver
   3. Использование файлов Photoshop в Dreamweaver
   4. Работа с Adobe Animate и Dreamweaver
   5. Извлечение файлов SVG, оптимизированных для Интернета, из библиотек
4. Рабочие среды и представления Dreamweaver
   1. Рабочая среда Dreamweaver
   2. Оптимизация рабочей среды Dreamweaver для визуальной разработки
   3. Поиск файлов по имени или содержимому | Mac OS
5. Настройка сайтов
   1. О сайтах Dreamweaver
   2. Настройка локальной версии сайта
   3. Подключение к серверу публикации
   4. Настройка тестового сервера
   5. Импорт и экспорт параметров сайта Dreamweaver
   6. Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
   7. Специальные возможности в Dreamweaver
   8. Дополнительные настройки
   9. Настройка установок сайта для передачи файлов
   10. Задание параметров прокси-сервера в Dreamweaver
   11. Синхронизация настроек Dreamweaver с Creative Cloud
   12. Использование Git в Dreamweaver
6. Управление файлами
   1. Создание и открытие файлов
   2. Управление файлами и папками
   3. Получение файлов с сервера и размещение их на нем
   4. Возврат и извлечение файлов
   5. Синхронизация файлов
   6. Сравнение файлов
   7. Скрытие файлов и папок на сайте Dreamweaver
   8. Включение заметок разработчика для сайтов Dreamweaver
   9. Предотвращение использования уязвимости Gatekeeper
7. Макет и оформление
   1. Использование средств визуализации для создания макета
   2. Об использовании CSS для создания макета страницы
   3. Создание динамичных веб-сайтов с помощью Bootstrap
   4. Создание и использование медиазапросов в Dreamweaver
   5. Представление содержимого в таблицах
   6. Цвета
   7. Гибкий дизайн с использованием «резиновых» макетов
   8. Extract в Dreamweaver
8. CSS
   1. Общие сведения о каскадных таблицах стилей
   2. Создание макетов страниц с помощью конструктора CSS
   3. Использование препроцессоров CSS в Dreamweaver
   4. Установка настроек стиля CSS в Dreamweaver
   5. Перемещение правил CSS в Dreamweaver
   6. Преобразование встроенного CSS в правило CSS в Dreamweaver
   7. Работа с тегами div
   8. Применение градиентов к фону
   9. Создание и редактирование эффектов перехода CSS3 в Dreamweaver
   10. Форматирование кода
9. Содержимое страницы и ресурсы
   1. Задание свойств страницы
   2. Задание свойств заголовка CSS и свойств ссылки CSS
   3. Работа с текстом
   4. Поиск и замена текста, тегов и атрибутов
   5. Панель DOM
   6. Редактирование в режиме интерактивного просмотра
   7. Кодировка документов в Dreamweaver
   8. Выбор и просмотр элементов в окне документа
   9. Задание свойств текста в инспекторе свойств
   10. Проверка орфографии на веб-странице
   11. Использование горизонтальных линеек в Dreamweaver
   12. Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
   13. Работа с ресурсами
   14. Вставка и обновление даты в Dreamweaver
   15. Создание и управление избранными ресурсами в Dreamweaver
   16. Вставка и редактирование изображений в Dreamweaver
   17. Добавление мультимедийных объектов
   18. Добавление видео Dreamweaver
   19. Добавление видео HTML5
   20. Вставка файлов SWF
   21. Добавление звуковых эффектов
   22. Добавление аудио HTML5 в Dreamweaver
   23. Работа с элементами библиотеки
   24. Использование текста на арабском языке и иврите в Dreamweaver
10. Создание ссылок и навигация
    1. О создании ссылок и навигации
    2. Создание ссылок
    3. Карты ссылок
    4. Устранение неполадок со ссылками
11. Графические элементы и эффекты jQuery
    1. Использование пользовательского интерфейса и графических элементов jQuery для мобильных устройств в Dreamweaver
    2. Использование эффектов jQuery в Dreamweaver
12. Написание кода веб-сайтов
    1. О программировании в Dreamweaver
    2. Среда написания кода в Dreamweaver
    3. Настройка параметров написания кода
    4. Настройка цветового оформления кода
    5. Написание и редактирование кода
    6. Подсказки по коду и автозавершение кода
    7. Свертывание и развертывание кода
    8. Повторное использование фрагментов кода
    9. Анализ Linting для проверки кода
    10. Оптимизация кода
    11. Редактирование кода в представлении «Дизайн»
    12. Работа с содержимым заголовков для страниц
    13. Вставка серверных включений в Dreamweaver
    14. Использование библиотек тегов в Dreamweaver
    15. Импорт пользовательских тегов в Dreamweaver
    16. Использование вариантов поведения JavaScript (общие инструкции)
    17. Применение встроенных вариантов поведения JavaScript
    18. Сведения об XML и XSLT
    19. Выполнение XSL-преобразования на стороне сервера в Dreamweaver
    20. Выполнение XSL-преобразования на стороне клиента в Dreamweaver
    21. Добавление символьных сущностей для XSLT в Dreamweaver
    22. Форматирование кода
13. Процессы взаимодействия продуктов
    1. Установка и использование расширений в Dreamweaver
    2. Обновления в Dreamweaver, устанавливаемые через приложение
    3. Вставить документы Microsoft Office в Dreamweaver (только для Windows)
    4. Работа с Fireworks и Dreamweaver
    5. Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
    6. Интеграция Dreamweaver с Business Catalyst
    7. Создание персонализированных кампаний почтовой рассылки
14. Шаблоны
    1. О шаблонах Dreamweaver
    2. Распознавание шаблонов и документов на их основе
    3. Создание шаблона Dreamweaver
    4. Создание редактируемых областей в шаблонах
    5. Создание повторяющихся областей и таблиц в Dreamweaver
    6. Использование дополнительных областей в шаблонах
    7. Определение редактируемых атрибутов тега в Dreamweaver
    8. Создание вложенных шаблонов в Dreamweaver
    9. Редактирование, обновление и удаление шаблонов
    10. Экспорт и импорт XML-содержимого в Dreamweaver
    11. Применение или удаление шаблона из существующего документа
    12. Редактирование содержимого в шаблонах Dreamweaver
    13. Правила синтаксиса для тегов шаблона в Dreamweaver
    14. Настройка предпочтений выделения для областей шаблона
    15. Преимущества использования шаблонов в Dreamweaver
15. Мобильные и многоэкранные устройства
    1. Создание медиазапросов
    2. Изменение ориентации страницы для мобильных устройств
    3. Создание веб-приложений для мобильных устройств с помощью Dreamweaver
16. Динамические сайты, страницы и веб-формы
    1. Общие сведения о веб-приложениях
    2. Настройка компьютера для разработки приложений
    3. Устранение неполадок подключений к базам данных
    4. Удаление сценариев подключения в Dreamweaver
    5. Дизайн динамических страниц
    6. Обзор динамических источников содержимого
    7. Определение источников динамического содержимого
    8. Добавление динамического содержимого на страницы
    9. Изменение динамического содержимого в Dreamweaver
    10. Отображение записей баз данных
    11. Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
    12. Добавление заказных вариантов поведения сервера в Dreamweaver
    13. Создание форм с помощью Dreamweaver
    14. Использование форм для сбора информации от пользователей
    15. Создание и включение форм ColdFusion в Dreamweaver
    16. Создание веб-форм
    17. Расширенная поддержка HTML5 для компонентов формы
    18. Разработка формы с помощью Dreamweaver
17. Визуальное построение приложений
    1. Создание главной страницы и страницы сведений в Dreamweaver
    2. Создание страниц поиска и результатов поиска
    3. Создание страницы для вставки записи
    4. Создание страницы обновления записи в Dreamweaver
    5. Создание страниц удаления записей в Dreamweaver
    6. Применение ASP-команд для изменения базы данных в Dreamweaver
    7. Создание страницы регистрации
    8. Создание страницы входа
    9. Создание страницы с доступом только для авторизованных пользователей
    10. Защита папок в ColdFusion с помощью Dreamweaver
    11. Использование компонентов ColdFusion в Dreamweaver
18. Тестирование, просмотр и публикация веб-сайтов
    1. Предварительный просмотр страниц
    2. Предварительный просмотр веб-страниц Dreamweaver на нескольких устройствах
    3. Тестирование сайта Dreamweaver

Изучите базовую структуру макета CSS и узнайте, как создавать страницы и содержимое с помощью CSS в Dreamweaver.

В макете страницы CSS для организации содержимого на веб-странице вместо традиционных таблиц и фреймов используется формат каскадных таблиц стилей. Основным строительным блоком макета CSS является тег Div — тег HTML, который в большинстве случаев ведет себя как контейнер для текста, изображений и других элементов страницы. При создании макета CSS теги Div размещаются на странице, в них добавляется содержимое, и они позиционируются в различных местах. В отличие от ячеек таблицы, которые существуют только внутри строк и столбцов таблицы, теги Div можно поместить в любое место веб-страницы. Можно выполнять позиционирование тегов div абсолютно (указывая координаты X и Y) или относительно (указывая его размещение относительно его текущего положения). Расположить теги div также можно, указав отступы, заполнения и поля, что по современным стандартам является предпочтительным методом.

Перед тем как продолжить изучение этого раздела, необходимо познакомиться с основными понятиями CSS.

Основным строительным блоком макета CSS является тег Div — тег HTML, который в большинстве случаев ведет себя как контейнер для текста, изображений и других элементов страницы. Следующий пример демонстрирует страницу HTML, содержащую три отдельных тега div: один большой тег-контейнер и два других тега — тег боковой панели и тег основного содержимого внутри тега-контейнера.

A. Тег-контейнер Div B. Тег Div боковой панели C. Тег Div основного содержимого 

Далее приведен код для всех трех тегов Div в HTML.

<!--container div tag--> 
<div> 
<!--sidebar div tag--> 
    <div> 
    <h4>Sidebar Content</h4> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     
<!--mainContent div tag--> 
    <div> 
    <h2> Main Content </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h3>h3 level heading </h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div>

В вышеприведенном примере ни к одному из тегов Div не прикреплены стили. Без заданных правил CSS каждый тег Div и его содержимое занимают на странице расположение по умолчанию. Если каждый тег Div имеет уникальный идентификатор (как в вышеприведенном примере), то можно использовать идентификаторы для создания правил CSS, применение которых изменяет стиль и позиционирование тегов Div.

Следующее правило CSS, которое может размещаться либо в заголовке документа, либо во внешнем файле CSS, создает правила стилей для первого тега на странице, т.  н. «тега-контейнера».

#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
}

Правило #container задает для тега-контейнера ширину 780 пикселов, белый фон, отсутствие полей (с левой стороны страницы), сплошную черную рамку толщиной в 1 пиксел и текст, выровненный по левому краю. Результат применения правила к тегу-контейнеру Div следующий.

A. Текст выровнен по левому краю B. Белый фон C. Сплошная черная граница толщиной в 1 пиксел 

Следующее правило CSS создает правила стилей для тега Div боковой панели.

#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
}

Правило #sidebar задает для тега Div боковой панели ширину 200 пикселов, серый фон, верхнее и нижнее заполнение 15 пикселов, правое заполнение 10 пикселов и левое заполнение 20 пикселов. (Исходный порядок для отступов: сверху-справа-снизу-слева.) Кроме того, правило задает для тега Div боковой панели плавающее позиционирование float: left — это свойство сдвигает тег боковой панели Div налево по отношению к тегу-контейнеру Div. Результат применения правила к тегу Div боковой панели следующий.

A. Ширина 200 пикселов B. Верхнее и нижнее заполнение, 15 пикселов 

Наконец, правило CSS для тега-контейнера Div основного содержимого завершает макет.

#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
}

Правило #mainContent задает для тега Div основного содержимого левое поле 250 пикселов, это означает, что свободное пространство между левой стороной тега-контейнера Div и левой стороной тега Div основного содержимого равно 250 пикселам. Кроме того, правило задает интервалы в 20 пикселов справа, внизу и слева от тега Div основного содержимого. Результат применения правила к тегу Div основного содержимого следующий.

Полный код выглядит следующим образом.

A. 20 пикселов заполнения слева B. 20 пикселов заполнения справа C. 20 пикселов заполнения снизу 

<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
#container { 
    width: 780px; 
    background: #FFFFFF; 
    margin: 0 auto; 
    border: 1px solid #000000; 
    text-align: left; 
} 
#sidebar { 
    float: left; 
    width: 200px; 
    background: #EBEBEB; 
    padding: 15px 10px 15px 20px; 
} 
#mainContent { 
    margin: 0 0 0 250px; 
    padding: 0 20px 20px 20px; 
} 
</style> 
</head> 
<body> 
<!--container div tag--> 
<div> 
    <!--sidebar div tag--> 
    <div> 
    <h4>Sidebar Content</h4> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p> 
    <p>Maecenas urna purus, fermentum id, molestie in, commodo  porttitor, felis.</p> 
      </div> 
     <!--mainContent div tag--> 
    <div> 
    <h2> Main Content </h2> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum.</p> 
    <p>Phasellus tristique purus a augue condimentum adipiscing. Aenean  sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio.</p> 
    <h3>h3 level heading </h3> 
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam,  justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam  ante ac quam.</p> 
    </div> 
</div> 
</body>

Приведенный выше код создает макет из двух столбцов с фиксированной слева боковой панелью. Данный код является упрощенной версией кода, который используется при создании документа с применением макетов, предустановленных в Dreamweaver.

При создании новой страницы в Dreamweaver можно создать страницу, которая уже содержит макет CSS. Dreamweaver поставляется более чем с 16 различными макетами CSS на выбор. Кроме того, можно создавать собственные макеты CSS и добавлять их в папку конфигураций. Созданные макеты появятся в диалоговом окне «Создать документ» в списке выбора макетов.

Создание страницы с макетом CSS

1. Выберите «Файл» > «Создать».

2. В диалоговом окне «Создать документ» выберите категорию «Пустая страница». (Это выбор по умолчанию.)

3. В «Тип страницы» выберите вид создаваемой страницы.

   Необходимо выбрать тип страницы HTML для макета. Например, можно выбрать HTML, ColdFusion®, PHP и т. п. Невозможно создать страницу ActionScript™, CSS, Library Item, JavaScript, XML, XSLT или ColdFusion Component с макетом CSS. Типы страниц в диалоговом окне «Создать документ» в списке «Другое» также не могут содержать макеты страниц CSS.

4. В списке «Макет» выберите макет CSS, который планируется использовать. Можно выбрать из 16 различных макетов. Окно «Просмотр» показывает макет и дает краткое описание выбранного макета.

   Предварительно созданные макеты CSS позволяют выбрать следующие типы колонок.

   Fixed

   Ширина столбца задана в пикселах. Размер столбца не изменяется в зависимости от размера браузера или текстовых параметров посетителя сайта.

   Liquid

   Ширина столбца задана в процентах от ширины браузера. Оформление меняется, когда посетитель сайта меняет ширину окна браузера, но не меняется в зависимости от параметров шрифта, заданных посетителем сайта.

5. Выберите тип документа из всплывающего меню «Тип документа».

6. Выберите положение макета CSS в «Макет CSS» во всплывающем меню.

   Добавить в заголовок

   Добавляет таблицу стилей CSS для макета в заголовок создаваемой страницы.

   Создание нового файла

   Добавляет CSS для макета в новую внешнюю таблицу стилей CSS и прикрепляет новую таблицу стилей к создаваемой странице.

   Ссылка на существующий файл

   Позволяет задать существующий файл CSS, который уже содержит правила CSS, необходимые для макета. Этот параметр особенно полезен, если необходимо использовать один и тот же макет CSS (правила CSS, содержащиеся в одном файле) в нескольких документах.

7. Выполните одно из следующих действий.

   • Если во всплывающем меню «Макет CSS» выбрано «Добавить в заголовок» (параметр по умолчанию), то щелкните «Создать».
   • Если во всплывающем меню «Макет CSS» выбрано «Создать новый файл», щелкните «Создать», затем укажите имя для нового внешнего файла в диалоговом окне «Сохранить файл таблицы стилей как».
   • Если во всплывающем меню «Макет CSS» выбрано «Ссылка на существующий файл», то добавьте внешний файл в текстовое поле «Присоединить файл CSS», щелкнув значок «Добавить таблицу стилей». По окончании нажмите кнопку «Создать» в диалоговом окне «Создать документ».

   Если выбран параметр «Ссылка на существующий файл», то в указанном файле должны содержаться правила для файла CSS.

   Если поместить макет CSS в новый файл или привязать к существующему файлу, Dreamweaver автоматически привяжет файл к создаваемой HTML-странице.

   Условные комментарии Internet Explorer (CCs), которые помогают устранять проблемы отображения в IE, остаются встроенными в заголовок документа с новым макетом CSS, даже если в качестве места для макета CSS выбран пункт «Создать внешний файл» или «Существующий внешний файл».

8. (Необязательно) При создании страницы, не связанной с макетом CSS, к ней также можно присоединить таблицы стилей CSS. Для этого щелкните значок «Присоединить таблицу стилей» над областью «Присоединить CSS-файл» и выберите существующую таблицу стилей CSS.

   Подробные пошаговые инструкции по этому процессу см. в статье Дэвида Пауэра Автоматическое присоединение таблиц стилей к новым документам.

Добавление заказных макетов CSS в список вариантов для выбора

1. Создайте HTML-страницу, содержащую макет CSS, который вы хотите добавить в список вариантов для выбора в диалоговом окне «Создание документа». CSS для макета должен размещаться в заголовке HTML-страницы.

   Чтобы согласовать заказной макет CSS с другими макетами, которые поставляются с Dreamweaver, необходимо сохранить HTML файл с расширением «.htm».

2. Добавьте HTML-страницу в папку Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts.

3. (Необязательно) Добавьте изображение для просмотра макета (например, файл с расширением .gif или .png) в папку Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts. Изображения по умолчанию, поставляемые с Dreamweaver, это PNG-файлы шириной в 227 пикселов и высотой в 193 пиксела.

   Назовите файл предварительного просмотра так же, как и HTML-файл, чтобы его можно было легко отследить. Например, если HTML-файл называется myCustomLayout.htm, то назовите изображение для просмотра myCustomLayout.png.

4. (Необязательно) Создайте файл примечаний для заказного макета, открыв папку Adobe Dreamweaver CS5\Configuration\BuiltIn\Layouts\_notes, скопировав и добавив в эту же папку все существующие файлы примечаний и переименовав копию для своего заказного макета. Например, можно скопировать файл oneColElsCtr.htm.mno и переименовать его в oneColElsCtr.htm.mno.

5. (Необязательно) После создания файла примечаний для заказного макета можно открыть файл и указать имя макета, описание и изображение для просмотра.

Справки по другим продуктам

• Общие сведения о каскадных таблицах стилей
• Создание пустой страницы
• Задание типа и кодировки документов по умолчанию
• Связывание с внешней таблицей стилей CSS

Виды и правила написания селекторов в CSS

В одной из прошлых статей я все же вернулся к теме создания сайтов, а конкретнее — начал рассказывать про каскадные таблицы стилей (CSS). Основную информацию вы можете прочесть по приведенной ссылке. В этой статье мы более подробно рассмотрим css селекторы — их виды, правила написания, а также примеры использования.

Как известно, язык css создан дабы оптимизировать описание внешнего вида документа. Без него практически любой html документ (более или менее нормально оформленный) выглядел бы довольно пугающе для поисковых систем, ведь они исследуют код страницы, который, в свою очередь, был бы наполнен разными тегами и атрибутами.

С помощью CSS все параметры внешнего вида можно поместить в один файл, который потом можно просто подключить к документу.

В прошлой статьей по этой теме мы создали два файла, page.html и style.css — веб-документ и файл со стилями соответственно. Также мы выполнили подключение файла к документу (тег style в шапке страницы). Css файл был вот такого содержания:

А в страничке был такой код:

С подключенным файлом каскадной таблицы стилей она приобрела вот такой вид:

В прошлой статье я дал лишь основные, базовые знания о языке стилей, да и то не полностью. Поэтому сразу хочу начать с того, что еще не сказал.

Содержание

1. Виды селекторов и правила их употребления
2. Универсальный селектор
3. Селекторы элемента
4. Селекторы атрибутов
5. Селектор классов
6. Селекторы идентификаторов
7. Селекторы дочерних элементов
8. Селектор сестринских элементов
9. Селекторы потомков
10. Селекторы псевдо классов

В языке стилей существуют так называемые приоритеты, более подробно мы их рассмотрим в следующей статьей этой рубрики.  Самым низким приоритетом обладает стиль самого браузера.

Да, у всех современных браузеров есть свой файл стилей, который будет использоваться в самую последнюю очередь. Следом за ним идут стили, заданные пользователем (вами).

Вы сами можете создать файл стилей, записать в него свойства и этот файл действительно будет использоваться, но только в одном случае — если у сайта нет своих стилей, заданных автором.

Вот они и обладают наивысшим приоритетом — стили автора. CSS файл, который вы прикрепляете, свойства, которые прописываете в шапке или же отдельно в тегах, все это является стилем автора и ставится на первое место при обработке браузером документа (хотя и среди перечисленных элементов есть свои правила приоритетов).

Но это далеко не все — в стилях автора имеют место свои правила приоритетов, которые зависят от иерархии, правил и селекторов. Вот с последних и начнем. Итак, виды css селекторов. Чтобы все не просто прочесть, но и изучить на практике, рекомендую использовать ранее созданные файлы html и css.

Универсальный селектор

Селектор, который задает стандартный стиль для всех элементов. Обозначается звездочкой. Имеет самый низкий приоритет. Вот такой свойство окрашивает все элементы в зеленый цвет:

Селекторы элемента

Задает стили для тегов. Помните картинку с прошлой записи, где я указывал что такое селектор и правило? Вот там был задан селектор элемента абзац (тег p). Результат — стандартный шрифт семейства cursive зеленого цвета

Селекторы атрибутов

Задают указанные свойства для каждого тега, в котором есть данный атрибут. Вот пример (все содержимое тегов с атрибутом title окрасится в синий цвет) :

Есть у этих селекторов и свои особенности. Например, для того, чтобы применить стили к атрибутам с конкретными значениями, нужно просто прописать эти значения:

Если нужно изменить стиль атрибутов, в значении которых содержится какой-либо текст, даже если он является частью слова, то используем следующее :

Если же нам нужно изменить стиль атрибута, в котором содержится слово целиком, то поможет такая конструкция:

Если изменить атрибут, который начинается с определенного текста то делаем вот так:

И, наконец, изменяем атрибут, который заканчивается на какой-либо текст:

Селектор классов

Здесь все основывается на универсальном атрибуте class, который применим ко всем тегам. Это одно из основных средств верстки сайта.

Структура css стиля:

Так как атрибут универсальный, то можно применить его к любому тегу:

Результат — все содержимое тегов, которые содержат класс abs, будет окрашено в красный цвет. Использовать можно сколь угодно много раз на странице. Также позволяется использовать сразу несколько классов для одного тега. Каждый записывается через пробел в атрибуте class:

Вообще, селекторы классов являются самыми популярными, потому что с их помощью можно довольно легко управлять элементами сайта — изменять внешний вид, передвигать и т. д.

Селекторы идентификаторов

Отличаются от предыдущей группы только тем, что могут использоваться только 1 раз на странице. В теге используется атрибут id:

А в стилях такой селектор обозначается символом решетки #:

Селекторы дочерних элементов

Используется если нужно задать стиль для какого-либо дочернего элемента, не затронув остальные (честно говоря, легче использовать атрибут class). Имеем вот такую конструкцию:

Чтобы выполнить поставленную задачу используются селекторы потомков:

Как видите, мы указали, что тег a является дочерним тегом p, и изменили его цвет. Если же вы хотите изменить все элементы-потомки, то вместо знака «больше» нужно вставить пробел:

В результате обе ссылки будут красного цвета.

Селектор сестринских элементов

Если вам нужно изменить стиль соседских элементов (по иерархии), то можно использовать следующую конструкцию:

Селекторы потомков

Позволяют изменять содержимое только тех тегов, которые содержат указанный параметр — атрибут, класс, идентификатор. Выглядят следующим образом:

Прошу заметить, div.abs пишется без пробелов. В этом случае все элементы, находящиеся в теге div с атрибутом class=»abs» будут окрашены в красный цвет. Пример:

Если же нужно изменить стиль элементов с идентификатором, то вместо точки нужно будет поставить символ #.

Селекторы псевдо классов

Псевдо классы — классы, наличие которых зависит от состояния объекта или документа. Чаще всего их используют для изменения внешнего вида каких-либо форм или ссылок. В css стили для таких элементов задаются по следующему шаблону:

В данном случае, все ссылки в документе при наведении на них курсора станут зелеными. Псевдо классов не так много, но их использование может сильно помочь при работе с дизайном.

Вот вроде бы и все виды селекторов в CSS. Надеюсь, вы их опробовали на тех файлах, которые мы создавали на прошлом уроке. В следующей статье из рубрики «Основы HTML и CSS» мы поговорим о приоритетах в CSS, без знания которых будет довольно сложно работать с внешним видом сайта.

Классы и идентификаторы в HTML и CSS

В предыдущем уроке в качестве селекторов правил CSS мы использовали имена тегов HTML. Например, для абзаца у нас было следующее правило:

p {
  font-size: 18px;
  font-family: Verdana, sans-serif;
}

Оно действовало для всех элементов p документа. Но что делать, если какие-то из них надо оформить по-другому?

Более тонкая разметка страницы и настройка ее элементов выполняется с помощью использования классов, идентификаторов, комбинированных и других селекторов. В этом уроке мы рассмотрим только классы и идентификаторы.

У открывающих или одиночных тегов HTML может быть атрибут class, которому присваивается произвольное (вами придуманное) имя класса. Например:

<p>…текст…</p>

Теперь в CSS, чтобы оформить этот абзац по особому, в таблице стилей мы обращаемся к нему с помощью такого синтаксиса:

. название_класса {
    ...
}

То есть перед именем класса ставим точку, само имя в кавычки не берем.

По смыслу скорее именно в CSS мы определяем класс и создаем для него правило, а в HTML обращаемся к нему с помощью атрибута class, то есть применяем какой-то класс к элементу. Другими словами, делаем элемент принадлежащим определенному классу.

Одному классу может принадлежать множество html-элементов. На скрине выше два абзаца и один раздел принадлежат классу addition.

Если мы хотим ограничить применимость класса только к одному типу элементов, а не к любому, то в css-правиле перед точкой следует указать этот элемент. Например:

p.addition {
  font-size: 18px;
  font-weight: bold;
  color: DimGrey;
  margin-left: 15px;
}

В таких случаях назначение класса другим элементам бессмысленно (ошибки не будет, но стилевое правило класса не будет применено):

<div>
  Содержимое раздела
</div>

Однако для другого элемента в таблице стилей может иметься свой класс с таким же именем:

div. addition {
  border-style: ridge;
}

В этом случае для каждого типа элементов будет применяться свое правило.

Вернемся к нашему исходному примеру, в котом один класс может применяться к разным html-элементам:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" 
content="width=device-width, 
initial-scale=1">
<style> 
 
  body {
    background: WhiteSmoke;  
  } 
 
  p {
    font-size: 20px;
    font-family: Verdana, sans-serif;
  } 
 
  .addition {
    font-size: 18px;
    font-weight: bold;
    color: DimGrey;
    margin-left: 15px;
  }
 
</style>
</head>
<body>
 
<p>Первый абзац</p>
 
<p>Второй абзац</p>
 
<p>Третий абзац</p>
 
<p>Четвертый абзац</p>
 
<p>Пятый абзац</p>
 
<div>
  Содержимое раздела
</div>
 
</body>
</html>

Если вы присмотритесь к абзацам класса addition, то заметите, что семейство их шрифта такое же как у обычных абзацев, то есть один из вариантов sans-serif – шрифта без засечек. В то же время у раздела div начертание serif – с засечками.

Дело в том, что согласно концепции специфичности языка CSS, к элементу применяется более специфичное правило. Класс в этой иерархии имеет более высокий приоритет и переопределяет стиль с более низким приоритетом.

В нашем случае, когда класс применяется к абзацу, более низкий приоритет оказывается у правила с селектором имени тега p. Но это не значит, что к элементу не применяется стиль, обладающий меньшей специфичностью. Правило с более высоким приоритетом (более специфичное) как бы накладывается на него.

Таким образом, к абзацам с классом было применено правило с селектором p и затем правило с селектором .addition. Если какое-либо свойство описывалось в обоих правилах, то применялось значение этого свойства для класса addition.

Что касается элемента div, то его семейство шрифта нами не менялось, оно осталось в варианте по-умолчанию, заданном браузером. Правило с селектором p для div неприменимо.

Взаимоотношения между селектором-тегом и селектором-классом можно было бы назвать наследованием, когда непереназначенные свойства берутся из менее специфичного правила (условно родительского), в более специфичном переопределяются лишь некоторые, остальные наследуются. Однако в концепции CSS наследованием называют другое: когда некоторые свойства элемента-контейнера наследуются для вложенных в него элементов. Например, размер и семейство шрифта можно задать для body, и эти значения будут работать для всех элементов страницы. Но при этом мы можем переопределять их для отдельных.

Теперь перейдем к идентификаторам. Их применение похоже на то, как это происходит с классами. Однако вместо html-атрибута class используется id, при этом в правиле CSS селектор с идентификатором записывается через решетку.

<!DOCTYPE html>
<html>
<head>
<style> 
 
  body {
    background: WhiteSmoke;  
  } 
 
  p {
    font-size: 20px;
    font-family: Verdana, sans-serif;
  } 
 
  #special {
    font-size: 22px;
    border-style: dotted;
    border-width: 2px;
    color: Red;
    padding: 15px;
  }
 
</style>
</head>
<body>
 
<p>Первый абзац</p>
 
<p>Второй абзац</p>
 
<p>Особенный абзац</p>
 
<p>Четвертый абзац</p>
 
<p>Пятый абзац</p>
 
</body>
</html>

Смысловое (на самом деле вы можете прописать один идентификатор нескольким элементам) отличие идентификаторов от классов заключается в следующем: класс применим ко множеству элементов на странице, конкретный идентификатор следует использовать только с одним элементом. Другими словами, для каждого элемента на странице подразумевается свой уникальный идентификатор.

Обращение к элементам через идентификаторы часто используется в JavaScript. Например, при нажатии на одну кнопку вызывается определенная функция, которая что-то изменяет на странице. При этом не надо, чтобы эта функция вызывалась при нажатии на любую другую кнопку или иной элемент.

К элементу может применяться несколько классов. В таких случаях они указываются через пробел в атрибуте class. У элемента может быть и идентификатор, и класс/классы:

<p>
...
</p>

Специфичность идентификатора выше, чем у класса; то есть, если у элемента есть как идентификатор, так и класс, то значения свойств первого переопределят значения второго.

При применении к элементу нескольких классов мы касаемся такого понятия в CSS как каскад (на то они и каскадные таблицы стилей – Cascading Style Sheets): последующее определение свойства в одинаковом по специфичности селектора правиле переопределяет ранее объявленное. В примере ниже элементы, использующие два класса, будут синими:

.addition {
  font-size: 18px;
  font-weight: bold;
  color: DimGrey;
  margin-left: 15px;
}
.another {
  color: Blue;
}

В данном случае второй классовый стиль переопределит свойство color первого. Просто потому, что он описан после него. Это касается таблицы CSS, но не упоминания классов в атрибуте class тега. Так в нижеследующих абзацах нет никакой стилевой разницы:

<p>...</p>
<p>...</p>

Также обратим внимание на то, что некоторые html-элементы не используются на странице множество раз. Например, многие семантические теги: main, article, footer и др. Для них обычно не указывают идентификаторы, а при создании css-правила в качестве селектора пишут имя тега.

С другой стороны, если имеется определенный элемент, требующий уникального оформления, которое вряд ли будет использоваться где-либо еще, даже на других страницах сайта, и обращаться к которому мы не планируем посредством JavaScript, то предпочтительно описывать его стиль в самом элементе с помощью атрибута style.

<p>
Первый абзац
</p>

Специфичность добавленных непосредственно в тег css-объявлений самая высокая. Она выше, чем у идентификатора, тем более класса.

Атрибут style – это еще один из способов добавления CSS-кода к HTML-коду. До этого мы использовали только вставку таблицы стилей между тегами <style></style>.

Структура и правила CSS

[ Базовый синтаксис | Псевдоклассы и псевдоэлементы | Каскадный порядок]

Правила

Селекторы

Любой элемент HTML является возможным селектором CSS1. Селектор — это просто элемент, связанный с определенным стилем. Например, селектор в

 P {текстовый отступ: 3em} 

это Р .

Селекторы классов

Простой селектор может иметь разные классы , что позволяет одному и тому же элементу иметь разные стили. Например, автор может захотеть отображать код другим цветом в зависимости от его языка:

 code.html {цвет: #191970}
code.css {цвет: #4b0082} 

В приведенном выше примере созданы два класса, css и html , для использования с элементом HTML CODE . Атрибут CLASS используется в HTML для указания класса элемента, напр. ,

 
Для каждого селектора допускается только один класс.
Например, code.html.proprietary недействителен.
 

Классы также могут быть объявлены без ассоциированного элемента:

 .note {размер шрифта: маленький} 

В этом случае класс note может использоваться с любым элементом.

Хорошей практикой является именование классов в соответствии с их функцией , а не их внешним видом . примечание 9Класс 0022 в приведенном выше примере мог бы быть назван small , но это имя стало бы бессмысленным, если бы автор решил изменить стиль класса, чтобы он больше не имел мелкого размера шрифта.

Селекторы ID

Селекторы ID назначаются индивидуально с целью определения для каждого элемента. Этот тип селектора следует использовать с осторожностью из-за присущих ему ограничений. Селектор идентификатора назначается с использованием индикатора «#» перед именем. Например, селектор ID может быть назначен так:

 #svp94O {текстовый отступ: 3em} 

В HTML на это будет ссылаться атрибут ID :

 
Отступ текста 3em
 

Контекстные селекторы

Контекстные селекторы — это просто строки из двух или более простых селекторов, разделенных пробелом. Этим селекторам можно присвоить обычные свойства, и, благодаря правилам каскадного порядка, они будут иметь приоритет над простыми селекторами. Например, контекстный селектор в

 P EM { фон: желтый } 

— это PEM . Это правило гласит, что выделенный текст внутри абзаца должен иметь желтый фон; выделенный текст в заголовке не изменится.

Декларации

Свойства

Свойство назначается селектору для управления его стилем. Примеры свойств включают цвет , поле и шрифт .

Значения

Декларация значение — это присвоение, которое получает свойство. Например, свойство цвет может получить значение красный .

Группировка

Чтобы уменьшить количество повторяющихся операторов в таблицах стилей, допускается группировка селекторов и объявлений. Например, всем заголовкам в документе можно дать одинаковые объявления посредством группировки:

 h2, h3, h4, h5, H5, H6 {
  красный цвет;
  семейство шрифтов: без засечек } 

 /* КОММЕНТАРИИ НЕ МОГУТ БЫТЬ ВЛОЖЕННЫМИ */ 

 селектор: псевдокласс {свойство: значение} 

 селектор: псевдоэлемент {свойство: значение} 

 selector.class:псевдокласс {свойство: значение} 

 selector.class:псевдоэлемент {свойство: значение} 

 A:ссылка {цвет: красный}
A: активный {цвет: синий; размер шрифта: 125% }
A: посетил { цвет: зеленый; размер шрифта: 85% } 

Часто в газетных статьях, таких как Wall Street Journal , первая строка текста статьи отображается жирным шрифтом и заглавными буквами. CSS1 включил эту возможность в качестве псевдоэлемента. Псевдоэлемент первой строки может использоваться в любом элементе блочного уровня (например, P , h2 и т.д.). Примером псевдоэлемента первой строки может быть:

 P:первая строка {
  вариант шрифта: капитель;
  вес шрифта: полужирный } 

Первая буква псевдоэлемента

Псевдоэлемент first-letter используется для создания буквиц и других эффектов. Первая буква текста в назначенном селекторе будет отображаться в соответствии с назначенным значением. Псевдоэлемент first-letter может использоваться в любом элементе блочного уровня. Например:

 P: первая буква { размер шрифта: 300%; поплавок: слева } 

создаст буквицу в три раза больше обычного размера шрифта.

При использовании нескольких таблиц стилей таблицы стилей могут бороться за контроль над определенным селектором. В этих ситуациях должны быть правила, определяющие, какое правило таблицы стилей будет иметь преимущество. Следующие характеристики будут определять результаты противоречивых таблиц стилей.

1. ! важно

   Правила можно обозначить как важные, указав ! важный . Стиль, обозначенный как важный, победит противоречивые стили, имеющие в остальном равный вес. Точно так же, поскольку и автор, и читатель могут указывать важные правила, правило автора будет иметь приоритет над правилом читателя в важных случаях. Пример использования ! важная инструкция :

    BODY { background: url(bar.gif) white;
          фоновый повтор: повтор-x ! важно } 

2. Происхождение правил (авторские и читательские)

   Как упоминалось ранее, и авторы, и читатели могут задавать таблицы стилей. Когда правила между ними противоречат друг другу, правила автора берут верх над правилами читателя, имеющими в остальном равный вес. Таблицы стилей автора и читателя переопределяют встроенные таблицы стилей браузера.

   Авторы должны быть осторожны при использовании ! важны правила , так как они переопределяют любые правила пользователя ! важные правила . Пользователю, например, могут потребоваться большие размеры шрифта или специальные цвета из-за проблем со зрением, и такой пользователь, вероятно, объявит определенные правила стиля равными 9.0021 ! Important , так как некоторые стили необходимы пользователю для чтения страницы. Любой ! важные правила имеют приоритет над обычными правилами, поэтому авторам рекомендуется использовать только обычные правила, чтобы пользователи с особыми потребностями в стиле могли читать страницу.

3. Правила выбора: расчет специфичности

   Таблицы стилей также могут переопределять конфликтующие таблицы стилей в зависимости от их уровня специфичности, где более конкретный стиль всегда имеет преимущество перед менее конкретным. Это просто игра на подсчет, чтобы вычислить специфичность селектора.

   1. Подсчитайте количество атрибутов ID в селекторе.
   2. Подсчитайте количество атрибутов CLASS в селекторе.
   3. Подсчитайте количество имен тегов HTML в селекторе.

   Наконец, запишите три числа в точном порядке без пробелов и запятых, чтобы получить трехзначное число. (Обратите внимание, что вам может потребоваться преобразовать числа в большее основание, чтобы в итоге получить три цифры.) Окончательный список чисел, соответствующих селекторам, легко определит специфичность, когда более высокие числа выигрывают над более низкими числами. Ниже приведен список селекторов, отсортированных по специфичности:

    #id1 {xxx} /* a=1 b=0 c=0 --> специфичность = 100 */
   UL UL LI.red {xxx} /* a=0 b=1 c=3 --> специфичность = 013 */
   LI.red {xxx} /* a=0 b=1 c=1 --> специфичность = 011 */
   LI {xxx} /* a=0 b=0 c=1 --> специфичность = 001 */
    

4. Заказ спецификации

   Для упрощения, когда два правила имеют одинаковый вес, выигрывает последнее указанное правило.

[ Базовый синтаксис | Псевдоклассы и псевдоэлементы | Каскадный порядок ]

Индекс CSS ~ Структура CSS ~ CSS-свойства

Дом, Форумы, Ссылка, Инструменты, Часто задаваемые вопросы, Статьи, Дизайн, Ссылки

Copyright © 1996 — 2006. Все права защищены.

Наследование CSS, Каскад и Специфичность

Вернуться на страницу четвертого класса »

Теперь, когда вы начинаете привыкать к некоторым основным правилам CSS, пришло время приступить к изучению «больших концепций» CSS. Наследование, Каскад и Специфика — это большая тройка. Понимание этих концепций позволит вам писать очень мощные таблицы стилей, а также сэкономить время за счет написания меньшего количества правил CSS.

Наследство

В CSS некоторые стили унаследованы вниз по дереву документа HTML, а другие нет.

Хотя это может сбивать с толку, принцип, лежащий в основе этого, на самом деле разработан, чтобы позволить писать меньше правил CSS.

Унаследованные стили

Наследуемые стили обычно связаны со стилем текста документа.

Свойство шрифта унаследовано. Вот почему мы обычно используем элемент для прикрепления наших стилей шрифта.

Элемент body в нашем HTML является родителем всех наших других элементов HTML (за исключением раздела ). Установка свойства шрифта в элементе body позволяет остальной части документа наследовать правило шрифта.

 body { шрифт: 14px/18px Helvetica, Verdana, без засечек; } 

 <тело>
   <дел>
      <ул>
        
ссылка
        
ссылка