- •Тема 2.1.4 Современные средства разработки web-приложений Введение.
- •Раздел 1. Общие сведения о www-сервисе Интернет.
- •1.1. Основные понятия.
- •Раздел 2. Основы сайтостроения.
- •2.1. Содержание, структура и дизайн web-сайта.
- •2.2. Язык html и каскадные таблицы стилей css.
- •2.2.1. Введение в язык html.
- •2.2.2. Введение в таблицы стилей css.
- •2.3. Инструментальные средства разработки web-сайта.
2.2.2. Введение в таблицы стилей css.
Существует несколько различных способов применения стилей к объектам документа.
1) В большинстве html-тэгов, может быть использован атрибут style, значением которого является набор правил в синтаксисе CSS. Эти правила будут применены только к тому элементу, в котором объявлены. Например:
|
Html-код |
<p>Новый абзац |
<p style="color:#FF0000; font-size:24px">Новый абзац |
|
Просмотр |
Новый абзац текста |
Новый абзац текста |
2) В разделе <head>…</head> в контейнере style может быть описан набор правил стиля в соответствии с синтаксисом CSS . Эти правила будут применены к элементам данного документа. Элемент style позволяет определить стиль отображения для стандартных тэгов html-разметки, и для произвольных классов (селектор class). Определенный в CSS класс связывается с любым html-тэгом при помощи атрибута class.
Например:
|
Html-код |
Просмотр |
|
<html> <head> <title>CSS</title> <style> p { color:#FF0000; font-size:24px } .blue-20 {color:#0000FF; font-size:20px; font-family:Arial} </style> </head> <body> <p>Новый абзац текста. <p class=blue-20>Еще один. <h1 class=blue-20>Заголовок 1</h1> </body></html> |
Новый абзац текста. Еще один. Заголовок 1
|
3) Наиболее рационально с точки зрения разработки сайта и его сопровождения сохранять стилевые описания, актуальные для ряда документов в отдельных файлах. При необходимости можно будет внести нужные изменения в файлы описаний, и внешний вид документов сайта соответственно будет изменен при отображении браузером. В разделе <head>…</head> внешние таблицы стилей присоединяются с помощью элемента <link>…</link>. Например:
|
Html-код файла css.css |
Html-код файла css.htm |
Просмотр |
|
p { color:#FF0000; font-size:24px } .blue-20 { color:#0000FF; font-size:20px; font-family:Arial } |
<html><head> <title>CSS</title> <link type="text/css" rel="stylesheet" href="css.css"> </head> <body> <p>Новый абзац текста.<p class=blue-20>Еще один. <h1 class=blue-20>Заголовок 1</h1> </body></html> |
Новый абзац текста. Еще один. Заголовок 1 |
При описании стилей стандартных тэгов html-разметки возможны следующие конструкции.
через запятую перечисляет селекторы-элементы, которые отображаются одинаково;
запись через пробел определяет стиль второго селектора, в случае его вложения в первый тэг.
Например:
|
Html-код файла css.css |
Html-код файла css.htm |
Просмотр |
|
b, i {color:#008000; font-style:normal; font-weight:normal } |
<html> <head> <title>CSS</title> <link type="text/css" rel="stylesheet" href="css.css"> </head><body> <b>Жирный текст</b><br> <i>Текст курсивом</i><br> <b><i>Жирный + курсив</i></b> </body></html> |
Жирный текст Текст курсивом Жирный + курсив |
|
b i {color:#008000; font-style:normal; font-weight:normal } |
Жирный текст Текст курсивом Жирный + курсив |
Существуют псевдоклассы и псевдоэлементы, которые позволяют задать особые стили, связанные с элементами <a> и <p>. От названия элемента они отделяются двоеточием.
Псевдоклассы.
a:link { … }- для непосещенных. a:visited { … }- дляпосещенных ссылок.
a:hover { … } - для ссылок на которые наведен курсор мыши. a:active { … } - для активизированных ссылок. a:focus { … } - для ссылок получивших фокус.
Псевдоэлементы.
P:first-line { … } – для первой буквы абзаца. P:first-letter { …} – для первой строки абзаца.
Общее описание стиля элемента выглядит следующим образом.
Имя тэга или .имя класса { объявление свойства; …; объявление свойства }.
Объявление свойства состоит: название свойства: значение или список через пробел.
Описание некоторых свойств CSS представлено в приложении 2.