|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
|
|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
По шестнадцатеричному значению
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов — красный, зеленый и синий — может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних — зеленую, а два последних — синюю. Допускается использовать сокращенную форму вида #rgb, где каждый символ следует удваивать (#rrggbb). К примеру, запись #fe0 расценивается как #ffee00. По названию Браузеры поддерживают некоторые цвета по их названию. В табл. 6.3 приведены названия, шестнадцатеричный код и описание.
С помощью RGB Можно определить цвет, используя значения красной, зеленой и синей составляющей в десятичном исчислении. Значение каждого из трех цветов может принимать значения от 0 до 255. Также можно задавать цвет в процентном отношении. Вначале указывается ключевое слово rgb, а затем в скобках, через запятую указываются компоненты цвета, например rgb(255, 0, 0) или rgb(100%, 20%, 20%). В примере 6.6 представлены различные способы задания цветов элементов веб-страниц. Пример 6.6. Представление цвета <! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Цвета< /title> < style type=" text/css" > BODY { background-color: #3366CC; /* Цвет фона веб-страницы */ } H1 { background-color: RGB(249, 201, 16); /* Цвет фона под заголовком */ } P { background-color: maroon; /* Цвет фона под текстом абзаца */ color: white; /* Цвет текста */ } < /style> < /head> < body> < h1> Lorem ipsum dolor sit amet< /h1> < p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.< /p> < /body> < /html>
Результат данного примера показан на рис. 6.3.
Рис. 6.3. Цвета на веб-странице Адреса Адреса (URI, Uniform Resource Identifiers, унифицированный идентификатор ресурсов) применяются для указания пути к файлу, например, для установки фоновой картинки на странице. Для этого применяется ключевое слово url(), внутри скобок пишется относительный или абсолютный адрес файла. При этом адрес можно задавать в необязательных одинарных или двойных кавычках (пример 6.7). Пример 6.7. Адрес графического файла <! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Добавление фона< /title> < style type=" text/css" > body { background: url('http: //webimg.ru/images/156_1.png') no-repeat; } div { background: url(images/warning.png) no-repeat; padding-left: 20px; margin-left: 200px; } < /style> < /head> < body> < div> Внимание, запрашиваемая страница не найдена! < /div> < /body> < /html>
В данном примере в селекторе body используется абсолютный адрес к графическому файлу, а в селекторе div — относительный. Ключевые слова В качестве значений активно применяются ключевые слова, которые определяют желаемый результат действия стилевых свойств. Ключевые слова пишутся без кавычек. Правильно: P { text-align: right; } Селекторы тегов Начало формы Конец формы
В качестве селектора может выступать любой тег HTML для которого определяются правила форматирования, такие как: цвет, фон, размер и т.д. Правила задаются в следующем виде. Тег { свойство1: значение; свойство2: значение; ... } Вначале указывается имя тега, оформление которого будет переопределено, заглавными или строчными символами не имеет значения. Внутри фигурных скобок пишется стилевое свойство, а после двоеточия — его значение. Набор свойств разделяется между собой точкой с запятой и может располагаться как в одну строку, так и в несколько (пример 7.1). Пример 7.1. Изменение стиля тега абзаца
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Селекторы тегов< /title> < style type=" text/css" > P { text-align: justify; /* Выравнивание по ширине */ color: green; /* Зеленый цвет текста */ } < /style> < /head> < body>
< p> Более эффективным способом ловли льва в пустыне является метод золотого сечения. При его использовании пустыня делится на две неравные части, размер которых подчиняется правилу золотого сечения.< /p>
< /body> < /html>
В данном примере изменяется цвет текста и выравнивание текста абзаца. Стиль будет применяться только к тексту, который располагается внутри контейнера < p>. Следует понимать, что хотя стиль можно применить к любому тегу, результат будет заметен только для тегов, которые непосредственно отображаются в контейнере < body>. Классы Начало формы Конец формы
Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий. Тег.Имя класса { свойство1: значение; свойство2: значение; ... } Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определенным классом, к тегу добавляется атрибут class=" Имя класса" (пример 8.1). Пример 8.1. Использование классов
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Классы< /title> < style type=" text/css" > P { /* Обычный абзац */ text-align: justify; /* Выравнивание текста по ширине */ } P.cite { /* Абзац с классом cite */ color: navy; /* Цвет текста */ margin-left: 20px; /* Отступ слева */ border-left: 1px solid navy; /* Граница слева от текста */ padding-left: 15px; /* Расстояние от линии до текста */ } < /style> < /head> < body> < p> Для искусственного освещения помещения применяются люминесцентные лампы. Они отличаются высокой световой отдачей, продолжительным сроком службы, малой яркостью светящейся поверхности, близким к естественному спектральным составом излучаемого света, что обеспечивает хорошую цветопередачу.< /p> < p class=" cite" > Для исключения засветки экрана дисплея световыми потоками оконные проемы снабжены светорассеивающими шторами.< /p> < /body> < /html>
Результат данного примера показан на рис. 8.1.
Рис. 8.1. Вид текста, оформленного с помощью стилевых классов Первый абзац выровнен по ширине с текстом черного цвета (этот цвет задается браузером по умолчанию), а следующий, к которому применен класс с именем cite — отображается синим цветом и с линией слева. Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий. .Имя класса { свойство1: значение; свойство2: значение; ... } При такой записи, класс можно применять к любому тегу (пример 8.2). Пример 8.2. Использование классов
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Классы< /title> < style type=" text/css" > .gost { color: green; /* Цвет текста */ font-weight: bold; /* Жирное начертание */ } .term { border-bottom: 1px dashed red; /* Подчеркивание под текстом */ } < /style> < /head> < body> < p> Согласно < span class=" gost" > ГОСТ 12.1.003-83 ССБТ & quot; Шум. Общие требования безопасности& quot; < /span>, шумовой характеристикой рабочих мест при постоянном шуме являются уровни звуковых давлений в децибелах в октавных полосах. Совокупность таких уровней называется < b class=" term" > предельным спектром< /b>, номер которого численно равен уровню звукового давления в октавной полосе со среднегеометрической частотой 1000& nbsp; Гц. < /p> < /body> < /html>
Результат применения классов к тегам < span> и < b> показан на рис. 8.2.
Рис. 8.2. Вид тегов, оформленных с помощью классов Классы удобно использовать, когда нужно применить стиль к разным элементам веб-страницы: ячейкам таблицы, ссылкам, абзацам и др. В примере 8.3 показано изменение цвета фона строк таблицы для создания «зебры». Пример 8.3. Использование классов
<! DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01//EN" " http: //www.w3.org/TR/html4/strict.dtd" > < html> < head> < meta http-equiv=" Content-Type" content=" text/html; charset=utf-8" > < title> Камни< /title> < style type=" text/css" > table.jewel { width: 100%; /* Ширина таблицы */ border: 1px solid #666; /* Рамка вокруг таблицы */ } th { background: #009383; /* Цвет фона */ color: #fff; /* Цвет текста */ text-align: left; /* Выравнивание по левому краю */ } tr.odd { background: #ebd3d7; /* Цвет фона */ } < /style> < /head> < body> < table class=" jewel" > < tr> < th> Название< /th> < th> Цвет< /th> < th> Твердость по Моосу< /th> < /tr> < tr class=" odd" > < td> Алмаз< /td> < td> Белый< /td> < td> 10< /td> < /tr> < tr> < td> Рубин< /td> < td> Красный< /td> < td> 9< /td> < /tr> < tr class=" odd" > < td> Аметист< /td> < td> Голубой< /td> < td> 7< /td> < /tr> < tr> < td> Изумруд< /td> < td> Зеленый< /td> < td> 8< /td> < /tr> < tr class=" odd" > < td> Сапфир< /td> < td> Голубой< /td> < td> 9< /td> < /tr> < /table> < /body> < /html>
Результат данного примера показан на рис. 8.3. В примере класс с именем odd используется для изменения цвета фона строки таблицы. За счет того, что этот класс добавляется не ко всем тегам < tr> и получается чередование разных цветов.
Рис. 8.3. Результат применения классов |
Последнее изменение этой страницы: 2017-03-14; Просмотров: 188; Нарушение авторского права страницы
