Папиллярные узоры пальцев рук - маркер спортивных способностей: дерматоглифические признаки формируются на 3-5 месяце беременности, не изменяются в течение жизни...
Механическое удерживание земляных масс: Механическое удерживание земляных масс на склоне обеспечивают контрфорсными сооружениями различных конструкций...
Топ:
Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...
Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов...
Интересное:
Берегоукрепление оползневых склонов: На прибрежных склонах основной причиной развития оползневых процессов является подмыв водами рек естественных склонов...
Наиболее распространенные виды рака: Раковая опухоль — это самостоятельное новообразование, которое может возникнуть и от повышенного давления...
Распространение рака на другие отдаленные от желудка органы: Характерных симптомов рака желудка не существует. Выраженные симптомы появляются, когда опухоль...
Дисциплины:
 2020-05-07 |
 188 |
из
5.00
|
Заказать работу |
|
|
|
|
Мы с Вами частично уже затрагивали методы стилизации строк и столбцов таблицы в статье «Селекторы. Часть 3.». В этой статье мы рассматривали применение группового псевдокласса :nth-child 
, который позволяет чередовать стили строк в таблицах с использованием значений even (четный) и odd (нечетный), либо по элементарной математической формуле.
Давайте повторим ранее рассмотренные методы и познакомимся с новыми способами стилизации строк и столбцов в таблицах. Перейдем к примерам.
<!DOCTYPE html>
<html>
<head>
<title> Пример использования псевдокласса:nth-child с таблицами </title>
<style>
table {
width: 100%; /* задаем ширину таблицы */
border-collapse: collapse; /* объединяем границы ячеек в одну */
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
}
tr:nth-child(even) { /* выбираем все четные строки */
border: 3px solid red; /* задаем сплошную границу размером 3 пикселя красного цвета */
}
td:nth-child(4n+2) { /* выбираем каждый четвертый элемент, начиная со второго */
background: #E8E8FF; /* задаем цвет заднего фона */
}
</style>
</head>
<body>
<table>
<tr>
<th> 1 </th><th> 2 </th><th> 3 </th><th> 4 </th><th> 5 </th><th> 6 </th><th> 7 </th>
<th> 8 </th><th> 9 </th><th> 10 </th><th> 11 </th><th> 12 </th><th> 13 </th><th> 14 </th>
</tr>
<tr>
<td> 2 </td><td></td><td></td><td></td><td></td><td></td><td></td>
|
|
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td> 3 </td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
<tr>
<td> 4 </td><td></td><td></td><td></td><td></td><td></td><td></td>
<td></td><td></td><td></td><td></td><td></td><td></td><td></td>
</tr>
</table>
</body>
</html>
В данном примере мы:
· Указали, что наша таблица занимает 100% от родительского элемента, промежутки между ячеек отсутствуют.
· С использованием псевдокласса :nth-child задали, что все четные строки имеют сплошную границу 3 пикселя красного цвета.
· С использованием псевдокласса :nth-child задали, что каждая четвёртая ячейка данных таблицы (тег <td>) внутри строки, начиная со второй ячейки таблицы, будет выделена цветом (4n – каждый четвертый элемент выделяется, 2 – с какого элемента начинать).
Результат нашего примера:
Рис. 152 Пример использования псевдокласса:nth-child с таблицами.
Перейдем к следующему примеру, в котором рассмотрим варианты стилизации строк таблицы.
<!DOCTYPE html>
<html>
<head>
<title> Пример стилизации строк в таблицах </title>
|
|
<style>
table {
width: 100%; /* задаем ширину таблицы */
border-collapse: collapse; /* объединяем границы ячеек в одну */
}
td, th {
border: 1px solid; /* задаем сплошную границу размером 1 пиксель */
}
tfoot {
background-color: coral; /* задаем цвет заднего фона */
}
thead {
background-color: silver; /* задаем цвет заднего фона */
}
tbody tr:hover { /* стилизуем элемент, на который в данный момент указывает курсор мыши */
background-color: khaki; /* задаем цвет заднего фона */
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th> Услуга </th><th> Стоимость </th>
</tr>
</thead>
<tfoot> <!-- Тег <tfoot> применяется для создания "подвала" таблицы. Его принято писать после закрывающего тега </thead>, но отображается он в самом низу таблицы. -->
<tr>
<td> Сумма </td><td> 15 000 </td>
</tr>
</tfoot>
<tbody>
<tr>
<td> 1 </td><td> 1 000 </td>
</tr>
<tr>
<td> 2 </td><td> 2 000 </td>
</tr>
<tr>
<td> 3 </td><td> 3 000 </td>
|
|
</tr>
<tr>
<td> 4 </td><td> 4 000 </td>
</tr>
<tr>
<td> 5 </td><td> 5 000 </td>
</tr>
</tbody>
</table>
</body>
</html>
В этом примере мы:
· Установили ширину таблицы в 100% от ширины родительского элемента, для заголовочных и ячеек данных установили сплошную границу шириной 1px.
· Установили для элемента <tfoot> («подвал» таблицы) цвет заднего фона – coral, для элемента <thead> («шапка» таблицы) установили цвет заднего фона silver.
· Для элементов <tr>, которые находятся внутри элемента <tbody> (тело таблицы) установили изменение цвета заднего фона при наведении (псевдокласс :hover) c белого на цвет khaki (подсвечивается вся строка).
Результат нашего примера:
Рис. 153 Пример стилизации строк в таблицах
Следующий пример рассматривает применение скругления углов к ячейкам таблицы (свойство border-radius ).
<!DOCTYPE html>
<html>
<head>
<title> Пример скругления углов ячейки </title>
<style>
table {
margin: 0 auto; /* центруем по горизонитали внешними отступами */
}
th {
width: 50px; /* задаем ширину ячейки */
height: 50px; /* задаем высоту ячейки */
border: 5px solid transparent; /* устанавливаем сплошную прозрачную границу размером 5 пикселей */
}
th:hover { /* стилизуем элемент, на который в данный момент указывает курсор мыши */
background: blue; /* задаем цвет заднего фона */
color: orange; /* устанавливаем цвет текста */
border-radius: 100%; /* задаем радиус скругления */
border: 5px solid orange; /* устанавливаем сплошную границу размером 5 пикселей оранжевого цвета */
|
|
}
</style>
</head>
<body>
<table>
<tr>
<th> 1 </th><th> 2 </th><th> 3 </th><th> 4 </th><th> 5 </th>
</tr>
</table>
</body>
</html>
В этом примере мы:
· Отцентровали таблицу внешними отступами, задали для заголовочных ячеек ширину и высоту 50px, указали прозрачную границу 5 пикселей.
· Установили, что при наведении (псевдокласс :hover) на заголовочную ячейку она получает задний фон синего цвета, оранжевый цвет текста, границу оранжевого цвета 5 пикселей и радиус скругления 100%.
· Прозрачная граница необходима для того, чтобы зарезервировать место под границу, которая будет отображена при наведении, если этого не сделать таблица будет «прыгать».
Результат нашего примера:
Рис. 154 Пример скругления углов ячейки.
Следующий пример затрагивает использование HTML элементов <colgroup> и <col> и их стилизации.
<!DOCTYPE html>
<html>
<head>
<title> Пример подсветки колонок таблицы </title>
<style>
table {
width: 100%; /* задаем ширину таблицы */
border-collapse: collapse; /* объединяем границы ячеек в одну */
}
td, th {
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
width: 25%; /* задаем ширину ячеек */
}
col:first-child {
background: rgba(0,0,0,.3); /* задаем цвет заднего фона */
}
col:nth-of-type(2) {
background: rgba(0,0,0,.2); /* задаем цвет заднего фона */
}
col:last-child {
background: rgba(0,0,0,.1); /* задаем цвет заднего фона */
}
</style>
</head>
<body>
<table>
<colgroup>
< col >
<col>
<col span = "2" > <!-- объединяем два столбца в одну колонну (атрибут span="2") -->
</colgroup>
<tr>
<th> № заявки </th><th> Услуга </th><th> Цена, руб. </th><th> Итого </th>
</tr>
<tr>
<td> 1 </td><td> Пение </td><td> 6 000 </td><td> 6 000 </td>
</tr>
|
|
<tr>
<td> 2 </td><td> Мытье </td><td> 2 000 </td><td> 2 000 </td>
</tr>
<tr>
<td> 3 </td><td> Уборка </td><td> 1 000 </td><td> 1 000 </td>
</tr>
<tr>
<td> 4 </td><td> Нытьё </td><td> 1 500 </td><td> 1 500 </td>
</tr>
<tr>
<td> 5 </td><td> Чтение </td><td> 3 000 </td><td> 3 000 </td>
</tr>
</table>
</body>
</html>
В этом примере мы:
· Устанавливаем, что наша таблица занимает 100% от родительского элемента, ячейки таблицы занимают 25% от родительского элемента и имеют сплошную границу 1 пиксель зеленого цвета. Промежуток между ячейками мы убрали, используя свойство border-collapse со значением collapse.
· К сожалению, единственное, что пока можно сделать с элементом <col>, используя css, это задать цвет заднего фона и определить через HTML, сколько он занимает колонок таблицы. В этом примере мы создали группу из трех колонок, третья из них при этом занимает 2 столбца (атрибут span элемента <col> со значением "2").
· Используем псевдокласс :first-child, который выбирает первый дочерний элемент <col> своего родителя (<colgroup>) и задаем ему задний фон.
· Используем псевдокласс :nth-of-type(2) в котором указан элемент, который является заданным дочерним элементом своего родительского элемента (второй элемент <col>) и задаем ему задний фон.
· По аналогии с псевдоклассом :first-child, который выбирает первый дочерний элемент, используем псевдокласс :last-child и выбираем последний дочерний элемент <col> своего родителя (<colgroup>), благодаря которому мы стилизуем третью и четвертую колонку.
Результат нашего примера:
Рис. 155 Пример подсветки колонок таблицы.
Ну и заключительный пример, который довольно сложен для понимания и требует продвинутых знаний в CSS, так как затрагивает будущие темы, планируемые к подробному изучению в рамках этого курса.
В предыдущем примере мы поняли, что к HTML элементу <col> можно применить только одно CSS свойство – цвет заднего фона (background-color), но при этом задать цвет заднего фона при наведении (псевдокласс :hover) на этот элемент напрямую нельзя. В этом примере мы рассмотрим, как подсветить столбец таблицы, используя только CSS.
<!DOCTYPE html>
<html>
<head>
<title> Пример подсветки колонок и строк таблицы при наведении </title>
<style>
table {
width: 100%; /* задаем ширину таблицы */
border-collapse: collapse; /* объединяем границы ячеек в одну */
position: relative; /* элемент с относительным позиционированием */
}
td, th {
border: 1px solid green; /* устанавливаем сплошную границу размером 1 пиксель зеленого цвета */
width: 25%; /* задаем ширину ячеек */
height: 45px; /* задаем высоту ячеек */
}
tr:hover:not(:first-child) { /* стилизуем элемент, на который в данный момент указывает курсор мыши (но не строка с заголовочными ячейками) */
background: lime; /* задаем цвет заднего фона */
}
td:hover:after { /* стилизуем элемент, на который в данный момент указывает курсор мыши и добавляем содержимое после каждого такого элемента */
content: ''; /* добавляем наше содержимое */
display: block; /* отображает элемент как блочный элемент */
position: absolute; /* элемент с абсолютным позиционированием */
width: 25%; /* задаем ширину блока, который будет появляться */
top: 0; /* определяем смещение позиционированного элемента относительно верхнего края */
bottom: 0; /* определяем смещение позиционированного элемента относительно нижнего края */
background: forestgreen; /* задаем цвет заднего фона */
z-index: -1; /* определяем порядок наложения элемента по оси z */
}
</style>
</head>
<body>
<table>
<tr>
<th> № заявки </th><th> Услуга </th><th> Цена, руб. </th><th> Итого </th>
</tr>
<tr>
<td> 1 </td><td> Пение </td><td> 6 000 </td><td> 6 000 </td>
</tr>
<tr>
<td> 2 </td><td> Мытье </td><td> 2 000 </td><td> 2 000 </td>
</tr>
<tr>
<td> 3 </td><td> Уборка </td><td> 1 000 </td><td> 1 000 </td>
</tr>
<tr>
<td> 4 </td><td> Нытьё </td><td> 1 500 </td><td> 1 500 </td>
</tr>
<tr>
<td> 5 </td><td> Чтение </td><td> 3 000 </td><td> 3 000 </td>
</tr>
</table>
</body>
</html>
В этом примере мы:
· Устанавливаем, что наша таблица занимает 100% от родительского элемента, ячейки таблицы занимают 25% от родительского элемента и имеют сплошную границу 1 пиксель зеленого цвета, высота заголовочных и ячеек данных составляет 45px. Промежуток между ячейками мы убрали, используя свойство border-collapse со значением collapse.
· Для элемента <tr> установили при наведении (псевдокласс :hover) изменение цвета заднего фона c белого на lime (подсвечивается вся строка). Но мы, добавили псевдокласс отрицания :not (:first-child), который сообщает браузеру: - ты строки то подсвечивай, но только не первую дочернюю своего родителя (первая строка таблицы, состоящая из заголовочных элементов <th>).
· Кроме того мы установили свойство position для таблицы, которое определяет, что она у нас является элементом с относительным позиционированием (relative). Это означает, что при смещении элемент сдвигается относительно его текущей позиции. Это нам необходимо, чтобы мы могли позиционировать блок, который будет появляться при наведении на любой элемент <td>.
· И так, используя псевдоэлемент ::after добавляем содержимое после каждого элемента <td> при наведении. Псевдоэлемент ::after обязательно используется вместе со свойством content, благодаря которому мы вставляем блочный элемент, который имеет задний фон цвета forestgreen и имеет абсолютное позиционирование.
· Абсолютное позиционирование здесь необходимо для смещения элемента относительно заданного края его предка, при этом предок должен иметь значение position отличное от установленного по умолчанию - static, иначе отсчёт будет вестись относительно, указанного края окна браузера, по этой причине мы установили для таблицы относительное позиционирование (relative).
· Установили для нашего сгенерированного блока свойство top, которое указывает направление смещения позиционированного элемента от верхнего края и свойство bottom, которое указывает направление смещения позиционированного элемента от нижнего края. Для обоих свойств указали значение 0, таким образом, блок будет полностью занимать элемент от низа и верха таблицы, ширину этого блока задали 25% это значение соответствует значению ширины самой ячейки.
· И заключительное свойство, которое мы установили для этого блока: z-index со значением "-1" оно определяет порядок расположения позиционированных элементов по оси Z. Это свойство необходимо, чтобы текст находился впереди этого блока, а не за ним, если не задать значение меньше нуля, то блок будет закрывать текст.
Результат нашего примера:
Рис. 156 Пример подсветки колонок и строк таблицы при наведении.
Если Вам на этом этапе изучения не понятен процесс позиционирование элементов, то не расстраивайтесь это сложная для понимания тема, которую мы к тому же не рассматривали, но обязательно рассмотрим в следующей статье учебника " Позиционирование элементов в CSS ".
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
· Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
· Используя полученные знания составьте следующую таблицу:
Практическое задание № 31.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
Задание цветового оформления. Выбор цветовой схемы.
Запустив web-редактор Dreamweaver, мы увидим главноеокно программы, примерный вид которого приведен на рисунке 1. Главное окно служит «вместилищем» для множества другихокон, содержащих как открытые web-страницы, так и различные инструменты, предназначенные для работы с ними.
Рассмотрим назначение некоторых элементов интерфейса Dreamweaver, которые потребуются нам в дальнейшей работе. Окно документа – окно, в котором отображается открытаядля редактирования web-страница.
Группа панелей – объединенные в группы панели, содержащие различные инструменты, предназначенные для работы над web-страницами. Чтобы переключиться на нужную панель в
группе, необходимо щелкнуть левой кнопкой мыши по вкладке, на
которой написано название этой панели.
Пользователю предоставлена возможность самостоятельноопределять, какие панели будут располагаться в группе, икомбинировать их расположение. Например, можно добавить вгруппу панель History, которая хранит историю редактированияweb-страницы, и позволяет вернуться на один из предыдущих
шагов редактирования или повторить какой-либо шаг. Помимо группы панелей, существуют панели,
зафиксированные вдоль верхнего и нижнего края главного окна.
Панель Insert – содержит набор кнопок, при нажатии которыхна web-страницу помещается соответствующий элемент. Этикнопки расположены на нескольких вкладках. Для переключениямежду вкладками нужно нажать кнопку, на которой написаноназвание вкладки, которая расположена в левой части
инструментария, и выбрать нужную вкладку в появившемся меню.
Панель Document – содержит элементы, позволяющиеизменять режим редактирования web-страницы, и его параметры.
Панель Properties – панель свойств, позволяет просматриватьи редактировать свойства выделенного объекта.
Задание
1) Создать новый гипертекстовый документ.
Выполнение:
а) запустите Dreamweaver, используя главное меню Windows;
б) в разделе стартового окна Create New щелкните по пункту
HTML.
Автоматически будет создан «пустой» гипертекстовый
документ. Обычно он имеет следующий вид:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-
1251" />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>
Этот «пустой» документ состоит из двух компонентов –
описание документа и корневой элемент.
Описание создаваемого документа представляет собой строку
<!DOCTYPE … >. В этой строке указывается тип документа и
версия языка HTML, используемого при создании web-страницы.
За описанием документа всегда следует корневой элемент, в данном случае элемент HTML, границы которого определяются тегами <html> и </html>. В элемент HTML помещены два обязательных элемента, соответствующие разделу заголовка иосновному разделу. Раздел заголовка обозначается тегами <head> и
</head>. Этот раздел содержит установки параметров web-страницы. Основной раздел находится между тегами <body> и
</body>. В этом разделе размещаются элементы web-страницы.
2) Сохранить «пустую» web-страницу в папку своей группы.
Выполнение:
а) используя пункты главного меню программы File ► Save или
сочетание клавиш CTRL+S, вызовите диалог сохранения файла;
б) откройте папку своей группы;
в) укажите имя файла, используя следующий образец: pc*.html.
Где вместо знака * необходимо указать номер своего компьютера.
Например: pc2.html;
г) нажмите кнопку Сохранить.
3) Изменить заголовок web-страницы.
Выполнение:
а) найти в разделе заголовка web-страницы строку <title>Untitled
Document</title>.
б) заменить Untitled Document на текст заголовка, содержащий
ваше имя и фамилию. Например: Web-страница Ивана Иванова.
в) выполните просмотр web-страницы в браузере, последовательно
нажимая на пункты главного меню программы File ► Preview in
Browser ► IExplore 6.0 илинажавнаклавиатуреклавишу F12. На
вопрос о сохранении изменений Save changes to… ответьте
утвердительно. В заголовке окна открывшегося браузера можно
увидеть результат, пример которого изображен на рисунке 2.
г) закройте браузер.
Рисунок 2 – Измененный заголовок web-страницы
4) Изменить цвет фона web-страницы.
Выполнение:
а) найдите в HTML-коде web-страницы тег <body>;
б) добавьте тегу <body> атрибут bgcolor. Для этого, после слова
body поставьте пробел и напишите слово bgcolor и нажмите Enter.
В появившемся окне-палитре, приведенном на рисунке 3, используя
мышь, выберите понравившийся цвет;
в) выполните просмотр web-страницы в браузере.
Рисунок 3 – Окно-палитра
5) Создать на web-странице заголовок первого уровня.
Установить выравнивание текста заголовка по центру страницы,
изменить цвет шрифта.
Выполнение:
а) добавьте несколько пустых строк между тегами <body></body>,
нажав несколько на клавиатуре клавишу Enter;
б) напишите в пустой строке теги <H1></H1>;
в) напишите между тегами <H1></H1> текст заголовка страницы.
В заголовке укажите свое имя, фамилию и группу;
г) добавьте в открывающий тег заголовка <H1>, атрибут align с
параметром равным center;
д) после открывающего тега заголовка <H1> поместите тег <font>;
е) добавьте тегу <font> атрибут color. Для этого, после слова font
поставьте пробел, напишите слово color и нажмите Enter. В
появившемся окне-палитре, используя мышь, выберите
понравившийся цвет;
ж) перед закрывающим тегом заголовка </H1> поместите тег
</font>
з) выполните просмотр web-страницы в браузере.
6) Набрать текст и выполнить его форматирование.
Выполнение:
а) отступите от заголовка несколько строк и наберите следующий
текст:
б) чтобы отделить абзацы текста друг от друга, заключите их в теги
<p></p>;
в) перереключите web-редактор в режим визуального
редактирования web-страницы, используя пункты главного меню
View ► Design илинажавкнопку Design напанелиинструментов
текущего документа;
г) если панель Properties в нижней части окна свернута –
разверните ее щелчком левой кнопки по ее названию;
д) для выравнивания заголовка исторической справки выделите его
мышью и нажмите на панели Properties кнопку;
е) для остального текста установите выравнивание по ширине;
ж) выделите аббревиатуры и английские слова полужирным
шрифтом и курсивом, используя кнопки и;
з) установите для каждого абзаца свой цвет текста. Для этого
выделив абзац, на панели Properties щелкните левой кнопкой
мыши по квадрату образца цвета (см. рисунок 4), вызвав окно-
палитру;
Рисунок 4 – Панель свойств
и) измените шрифт каждого абзаца, используя на панели Properties
выпадающий список свойства Font;
к) используя на панели Properties выпадающий список свойства
Size, установите для каждого абзаца свой размер шрифта;
л) для того чтобы изменить отступы текста от края web-страницы
последовательно выберите пункты главного меню программы
Modify ► Page Properties…ивоткрывшемсядиалоговомокне
установите значения параметров Left margin и Right margin
равными 50 pixels;
м) перейдите в режим правки HTML-кода, используюя пункты
главного меню View ► Code, ипосмотрите, чтоизменилосьвкоде
страницы;
н) сохраните web-страницу.
7) Создать таблицу, приведенную на рисунке 5.
Рисунок 5 – Таблица
Выполнение:
Для создания таблиц удобнее пользоваться визуальными
возможностями редактирования HTML-документов в Dreamweaver.
а) переключите web-редактор в режим визуального редактирования
web-страницы;
б) добавьте несколько пустых строк после исторической справки;
в) используя пункты главного меню программы Insert ► Table,
откройте диалоговое окно вставки таблицы. Вид этого диалогового
окна приведен на рисунке 5;
г) установите значение параметра Rows равным 5, параметра
Columns равным 7, а значение параметра Table width равным 350 и
нажмите кнопку Ok;
Рисунок 6 – Диалоговое окно вставки таблицы
д) курсором мыши выделите ячейки таблицы;
е) на панели свойств Properties установите значение параметра H
равным 50, изменив высоту строк таблицы;
ж) заполните ячейки таблицы числами дней недели текущего
месяца.
8) Добавить в таблицу подписи дней недели.
Выполнение:
а) щелкните правой кнопкой мыши по ячейке первой строки;
18
б) в появившемся контекстном меню последовательно выберите
пункты Table ► Insert Row;
в) в новой строке таблицы поместите сокращенные названия дней
недели.
9) Изменить выравнивание текста в ячейках.
Выполнение:
а) выделите мышью ячейки первой строки;
б) на панели Properties измените свойство Horz на Center, а
свойство Vert на Middle (см. рисунок 7);
Рисунок 7 – Панель свойств таблицы
в) аналогичным образом измените выравнивание чисел месяца в
таблице, расположив их в правом верхнем углу ячеек.
10) Изменить цвет фона ячеек и цвет границ таблицы.
Выполнение:
а) выделите мышью ячейки с названиями дней недели;
б) измените фоновый цвет ячеек на оранжевый. Для этого на
панели Properties щелкните по квадратику рядом с надписью Bg и
выберите на палитре соответствующий цвет;
в) используя предыдущий опыт, измените фоновый цвет ячеек
будних и выходных дней на голубой и зеленый соответственно, а
цвет текущего дня на красный;
г) измените цвет границ таблицы. Щелкнит
|
|
|
История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...
Механическое удерживание земляных масс: Механическое удерживание земляных масс на склоне обеспечивают контрфорсными сооружениями различных конструкций...
Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...
Состав сооружений: решетки и песколовки: Решетки – это первое устройство в схеме очистных сооружений. Они представляют...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!