Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...
Поперечные профили набережных и береговой полосы: На городских территориях берегоукрепление проектируют с учетом технических и экономических требований, но особое значение придают эстетическим...
Топ:
Оценка эффективности инструментов коммуникационной политики: Внешние коммуникации - обмен информацией между организацией и её внешней средой...
Оснащения врачебно-сестринской бригады.
Когда производится ограждение поезда, остановившегося на перегоне: Во всех случаях немедленно должно быть ограждено место препятствия для движения поездов на смежном пути двухпутного...
Интересное:
Средства для ингаляционного наркоза: Наркоз наступает в результате вдыхания (ингаляции) средств, которое осуществляют или с помощью маски...
Наиболее распространенные виды рака: Раковая опухоль — это самостоятельное новообразование, которое может возникнуть и от повышенного давления...
Влияние предпринимательской среды на эффективное функционирование предприятия: Предпринимательская среда – это совокупность внешних и внутренних факторов, оказывающих влияние на функционирование фирмы...
Дисциплины:
2017-06-29 | 96 |
5.00
из
|
Заказать работу |
|
|
Цель: Научить применять свойства текста и использовать псевдостили гипертекста.
Краткие теоретические сведения
Свойства текста
text-decoration - задает специальное оформление текста: подчеркнутый, зачеркнутый и т.п.
text-decoration: none|underline|overline|line-through|blink;
text-decoration: none; - отменяет любое специальное оформление (значение по умолчанию для большинства тегов);
text-decoration: underline; - подчеркивает текст (значение по умолчанию для тегов <A>, <INS> и <U>);
text-decoration: overline; - черта сверху текста;
text-decoration: line-through; - зачеркивает текст (значение по умолчанию для тегов <DEL>, <S> и <STRIKE>);
text-decoration: blink; - мигание текста (отсутствует в IE)
text-decoration: uppercase - все буквы становятся заглавными;
text-decoration: lowercase - все буквы становятся маленькими (прописными);
text-decoration: capitalize - каждое слово в строке начинается с большой буквы.
Поддерживается IE начиная с 3.02 для текстовых элементов страницы и начиная с 4.0 для нетекстовых.
Поддерживается NN начиная с 4.0
text-underline-position - задает местонахождение линии подчеркивания: выше или ниже текста. Имеет смысл, если атрибут text-decoration равен underline или overline.
text-underline-position: below|above;
text-underline-position: below; - помещает линию подчеркивания под текстом (значение по умолчанию);
text-underline-position: above; - над текстом ("надчеркивание").
Поддерживается IE начиная с 5.5
text-align - определяет горизонтальное выравнивание текста.
text-align: left|right|center|justify;
text-align: left; - выравнивание текста по левому краю (значение по умолчанию);
text-align: right; - выравнивание по правому краю;
text-align: center; - выравнивание по центру;
text-align: justify; - выравнивание по обоим краям (по ширине).
Поддерживается IE начиная с 3.02; значение justify поддерживается начиная с 4.0
Поддерживается NN начиная с 4.0
|
text-align-last - задает горизонтальное выравнивание последней строки абзаца.
text-align-last: auto|inherit|left|right|center|justify;
text-align: auto; - выравнивает последнюю строку абзаца так же, как и остальные строки (основываясь на значении атрибута text-align) (значение по умолчанию);
text-align: inherit; - так же, как выровнен текст родителя;
text-align: left; - выравнивание текста по левому краю;
text-align: right; - выравнивание по правому краю;
text-align: center; - выравнивание по центру;
text-align: justify; - выравнивание по обоим краям (по ширине).
Поддерживается IE начиная с 5.5
text-indent - устанавливает отступ красной строки.
text-ident: {Отступ}|{Отступ}%;
Отступ может быть задан как абсолютной величиной, так и процентом от ширины родителя. Значение по умолчанию 0.
Поддерживается IE и NN начиная с 4.0
text-height - интервал между строками текста.
text-height: {Интервал}|{Интервал}%;
Интервал может быть задан как абсолютной величиной, так и процентом от ширины родителя.
Поддерживается IE и NN начиная с 4.0
text-transform - Задает преобразование регистра символов текста.
text-transform: none|capitalize|uppercase|lowercase;
text-transform: none; - отключает любые преобразования регистра символов (значение по умолчанию);
text-transform: capitalize; - преобразует первую букву каждого слова текста в верхний регистр;
text-transform: uppercase; - преобразует все символы текста в верхний регистр;
text-transform: lowercase; - в нижний регистр.
Поддерживается IE и NN начиная с 4.0
clear - задает поведение текста при "обтекании" им некоторых элементов страницы, таких как изображения.
clear: none|left|right|all;
Атрибут задается для текста, а не для элемента страницы, который он будет "обтекать".
clear: none; - разрешает тексту "обтекать" элемент страницы (значение по умолчанию);
clear: left; - запрещает тексту "обтекать" элемент страницы с левой стороны;
clear: right; - с правой стороны;
clear: all; - с обеих сторон.
Поддерживается IE и NN начиная с 4.0
word-spacing - определяет дополнительное расстояние между словами в тексте.
word-spacing: normal|{Величина};
Значение этого атрибута может быть задано либо абсолютной величиной в одной из поддерживаемых CSS единиц измерения, либо предопределенным значением normal, задающим стандартную величину расстояния между символами.
|
Значение по умолчанию normal.
Поддерживается IE начиная с 4.0
word-wrap - устанавливает, будет ли строка, выходящая за границы элемента страницы и не содержащая пробелов, переноситься по словам.
word-wrap: normal|break-word;
word-wrap: normal; - запрещает переносить строки по словам (значение по умолчанию);
word-wrap: break-word; - разрешает.
Поддерживается IE начиная с 5.5
word-mode - задает направление строк текста: горизонтальное или вертикальное.
word-mode: lr-tb|tb-rl;
word-mode: lr-tb; - задает обычное горизонтальное расположение строк текста; текст пишется слева направо и сверху вниз (значение по умолчанию);
word-mode: tb-rl; - поворачивает текст на 90° по часовой стрелке; при этом он будет писаться сверху вниз и справа налево.
Поддерживается IE начиная с 5.5
leter-spacing - определяет расстояние между символами в тексте.
letter-spacing: normal|{Величина};
Значение этого атрибута может быть задано либо абсолютной величиной в одной из поддерживаемых CSS единиц измерения, либо предопределенным значением normal, задающим стандартную величину расстояния между символами.
Значение по умолчанию normal.
Поддерживается IE начиная с 4.0
line-height - задает вертикальное расстояние между строками текста.
line-height: normal|{Y}|{Y}%;
Высота может быть задана как абсолютной величиной, так и процентом от высоты родителя. Предопределенное значение normal задает стандартное расстояние.
Значение по умолчанию normal.
Поддерживается IE и NN начиная с 4.0
direction - задает порядок чтения текста: слева направо или справа налево.
direction: ltr|rtl|inherit;
direction: ltr; - задает порядок чтения слева направо (значение по умолчанию);
direction: rtl; - справа налево;
direction: inherit; - заставляет наследовать порядок чтения у родителя.
Для документов, составленных на европейских языках, порядок чтения всегда слева направо (ltr).
Поддерживается IE начиная с 5.0
unicode-bidi - задает поведение встроенных элементов при изменении направления письма с помощью атрибута direction.
unicode-bidi: normal|embed|bidi-override;
unicode-bidi: normal; - меняет направление письма и у родителя (используется по умолчанию);
unicode-bidi: embed; - меняет направление письма только у встроенного элемента;
unicode-bidi: bidi-override; - аналогично embed за тем исключением, что направление письма меняется согласно значению атрибута direction, независимо от локальных установок Web-обозревателя.
|
Поддерживается IE начиная с 5.0
accelerator - позволяет указать, содержит ли текст элемента страницы клавишу-ускоритель.
accelerator: true|false;
Клавиша-ускоритель - это особая клавиша на клавиатуре, при нажатии которой вместе с клавишей <Alt> происходит переход к данному элементу страницы.
accelerator: true; - указывает, что текст содержит клавишу-ускоритель;
accelerator: false; - не содержит.
Значения по умолчанию не имеет.
Пример использования:
<LABEL for="txtName"><U style="accelerator: true">И</U>мя</LABEL>
<INPUT type="text" id="txtName" accesskey="B" value="Имя пользователя">
В этом случае символ "И" в слове "Имя" будет подчеркнут. Если в региональных настройках операционной системы Windows 2000 была выбрана опция Скрыть индикаторы клавиш-ускорителей до нажатия Alt, этот символ не будет подчеркнут, пока пользователь не нажмет клавишу <Alt> на клавиатуре.
Поддерживается IE начиная с 5.0
Псевдостили гиперссылок
Псевдостили применяются к гиперссылкам <A>.
active - применяется к активным гиперссылкам, т.е. гиперссылкам, на которых находится фокус ввода пользователя.
{Задание стиля гиперссылки}:active {Определение стиля};
Аналогичен атрибуту alink тега <BODY>.
Пример:
A:active {color: lime;}
активная гиперссылка будет ярко-зеленой.
По умолчанию в IE активные гиперссылки выделяются красным цветом.
Поддерживается IE начиная с 4.0
hover - применяется к гиперссылкам, когда пользователь помещает над ними курсор мыши.
{Задание стиля гиперссылки}:hover {Определение стиля};
Пример:
A:hover {color: lime; text-decoration: none;}
Гиперссылка, при наведении на нее мыши, будет ярко-зеленой и неподчеркнутой.
По умолчанию в IE гиперссылки подчеркиваются, когда пользователь помещает над ними курсор мыши.
Поддерживается IE начиная с 4.0
link - применяется к не посещенным еще пользователем гиперссылкам.
{Задание стиля гиперссылки}:link {Определение стиля};
Аналогичен атрибуту link тега <BODY>.
Пример:
A:link {color: black;}
По умолчанию в IE непосещенные гиперссылки отображаются синим цветом.
Поддерживается IE начиная с 3.02
visited - применяется к уже посещенным пользователем гиперссылкам.
|
{Задание стиля гиперссылки}:visited {Определение стиля};
Аналогичен атрибуту vlink тега <BODY>.
Пример:
A:link {color: indigo;}
По умолчанию в IE посещенные гиперссылки отображаются бордовым цветом. Поддерживается IE начиная с 3.02
Практическое задание.
1.Создать HTML-страницу с использованием CSS.
2.Определить для всех ссылок на странице цвет, размер, семейство шрифта. Изменения свойств ссылки должны происходить в следующих случаях: в момент нахождения курсора над ней, посещённой ссылки, активной ссылки и в обычном состоянии.
3.Определить один общий класс для изменения текста на все заглавные буквы, а другой – на прописные.
Контрольные вопросы.
1.Свойства текста и его атрибуты.
2.Псевдостили гиперссылок и его атрибуты.
3.Какой параметр задаёт регистр букв и объясните назначение каждого атрибута?
Подготовка отчета по практическому заданию.
Отчет должен состоять из следующих пунктов:
1. Краткие теоретические сведения.
2. Индивидуальное практическое задание, метод его выполнения, текст кода программы и полученные результаты.
3. Краткое заключение.
Пример выполнения 6-го практического задания: Каскадные таблицы стилей CSS. Использование свойств текста и псевдостилей гиперссылок.
HTML код:
Index.htm
<HTML>
<HEAD>
<TITLE>Практическое задание №6.CSS. Использование свойств текста и псевдостилей гиперссылок.</title>
</head>
<FRAMESET rows="15%, *">
<frame name="head" src="head.htm" SCROLLING="No" NORESIZE>
<FRAMESET cols="25%, *">
<FRAMESET rows="60%, *">
<frame name="menu1" src="menu1.htm" SCROLLING="Auto" NORESIZE>
<frame name="menu2" src="menu2.htm" SCROLLING="Auto" NORESIZE>
</frameset>
<frame name="main" src="main.htm" SCROLLING="Auto" NORESIZE>
</frameset>
</frameset>
</html>
Head.htm
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="main.css">
<TITLE>Практическое задание №6.CSS. Использование свойств текста и псевдостилей гиперссылок.</title>
</head>
<BODY>
<H1 class="txtdecor">Практическое задание №6</h1>
</body>
</html>
Menu1.htm
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="main.css">
<TITLE>Практическое задание №6.CSS. Использование свойств текста и псевдостилей гиперссылок.</title>
</head>
<BODY>
<UL>
<LI><A HREF="main.htm" target="main">Главная
<LI><A HREF="subject.htm" target="main">Предмет
<LI><A HREF="teacher.htm" target="main">Преподаватель
<LI><A HREF="theme.htm" target="main">Тема
<LI><A HREF="task.htm" target="main">Задание</a>
<LI><A HREF="fac.htm" target="main">Факультет</a>
<LI><A HREF="course.htm" target="main">Курс</a>
<LI><A HREF="group.htm" target="main">Группа</a>
<LI><A HREF="lastname.htm" target="main">Фамилия</a>
|
<LI><A HREF="firstname.htm" target="main">Имя</a>
</ul>
</body>
</html>
Menu2.htm
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="main.css">
<TITLE>Практическое задание №6.CSS. Использование свойств текста и псевдостилей гиперссылок.</title>
</head>
<BODY>
<UL>
<LI><A HREF="nonetxttrans.htm" target="main">Обычные буквы
<LI><A HREF="uppertxttrans.htm" target="main">Заглавные буквы
<LI><A HREF="lowertxttrans.htm" target="main">Прописные буквы
</ul>
</body>
</html>
Main.htm
<HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="main.css">
<TITLE>Практическое задание №6.CSS. Использование свойств текста и псевдостилей гиперссылок.</title>
</head>
<BODY>
<IMG SRC="img1.jpg" width="600" height="450">
</body>
</html>
Main.css
BODY {background-color: e5e5e5}
a {text-decoration: none; color: Purple;}
a:link {color: Purple; font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
a:visited {color: Navy; font-size: 12px; font-family: Arial, Helvetica, sans-serif;}
a:active {color: Red; font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-decoration: blink;}
a:hover {color: Lime; font-size: 14px; font-family: Arial, Helvetica, sans-serif; text-decoration: underline;}
.txtdecor {text-decoration: underline; text-align: center; color: red}
.txttrans1 {text-transform: uppercase;}
.txttrans2 {text-transform: lowercase;}
Рис. 6. Результат выполнения 6-го практического задания.
|
|
Семя – орган полового размножения и расселения растений: наружи у семян имеется плотный покров – кожура...
Индивидуальные очистные сооружения: К классу индивидуальных очистных сооружений относят сооружения, пропускная способность которых...
Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!