CSS- свойства: фон, оформление таблиц
Фон
Как и в языке HTML, в CSS фоном служит заливка цветом или изображение. Фоновое изображение может быть повторяющимся.
background-color – устанавливает цвет фона. Пример: TD.head {background-color: #ffff00}
background-image – устанавливает в качестве фона изображение: BODY {background-image: url(images/bg.jpg)}
background-attachment – задает поведение фонового изображения при прокрутке. По умолчанию задается значение scroll – фон прокручивается вместе с содержимым. Значение fixed делает фон неподвижным.
background-position – начальное положение фонового изображения по горизонтали (left, center, right) и вертикали (top, center, bottom). Вместо ключевых слов можно указывать расстояние в пикселях или процентах.
background-repeat – указывает, в каком направлении должно размножаться фоновое изображение:
repeat – по горизонтали и вертикали (по умолчанию);
repeat-x – только по горизонтали;
repeat-y – только по вертикали;
no-repeat – отключить повторение.
Теги DIV и SPAN
До сих пор в лекциях мы применяли стили CSS к тегам, уже имеющим заранее заданную функцию: таблицам, заголовкам, параграфам и т.д. Но иногда нужно применить стили к фрагменту содержимого, не включенного в от- дельный тег. Например, выделить фоном несколько слов в тексте.
Теги <div>…</div> и <span>…</span> используются там, где не подходит никакой другой тег. Сами по себе они не определяют никакого форматирования, но удобны для привязки к ним стилей. При этом DIV является блочным элементом, а SPAN – строчным.
|
|
|
Основное различие между блочными и строчными элементами заключается в следующем: строчные элементы идут друг за другом в строке текста, а блочные – располагаются один по другим. К строчным элементам относятся такие теги, как <a>, <img>, <input>, <select>, <span>, <sub>, <sup> и др.
К блочным: <div>, <form>, <h1>…<h6>, <ol>, <p>, <table>, <ul> и некоторые другие. Рассмотри различие на примере. Для тега <span> указано стилевое правило, задающее цвет фона.
HTML-код:
<span style="background-color: #eeeeee">Строчные элемен-
ты</span>
<sub>располагаются</sub>
<img src="v_stroke.gif" alt="в строке">
<sup>и идут друг за другом.</sup>
В браузере:
Рассмотрим пример для блочных тегов:
<html>
<head>
<title>Блочные элементы</title>
<style>
H3, DIV, TABLE {
border: black dotted 1px;
margin: 5px;
padding: 5px;
}
</style>
</head>
<body>
<h3>Заголовок</h3>
<div>Содержимое <div>
<div>Вложенный <div> №1</div>
<div>Вложенный <div> №2</div>
</div>
<table>
<tr><td>Таблица из одной ячейки</td></tr>
</table>
</body>
</html>
Блочные элементы располагаются друг под другом, многие занимают всю возможную ширину. Блочные элементы могут включать в себя строчные и другие блочные. Но строчные элементы не могут содержать блочные!
|
|
|
Еще одним отличием является то, что для строчных элементов не работают такие свойства, как margin-top, margin-bottom, padding-top и paddingbottom.
Исключением являются теги <img>, <input>, <textarea> и <select> – для них можно задавать отступы padding-top и paddingbottom.
Псевдоклассы
В CSS существует несколько псевдоклассов. С помощью псевдоклассов можно задать стиль в зависимости от состояния элемента или его положения в документе.
Для ссылок определено 4 псевдокласса:
link – ссылки, которые не посещались пользователем;
visited – посещенные ссылки;
active – активная (нажатая) ссылка;
hover – ссылка, на которую наведен курсор.
Пример:
<html>
<head>
<title>Пример</title>
<style>
A:link, A:visited {
color: black;
font-family: Verdana, sans-serif;
text-decoration: none;
}
A:hover {
color: #de7300;
text-decoration: underline;
}
</style>
</head>
<body>
<a href="index.html">Главная</a><br>
<a href="hobby.html">Мое хобби</a><br>
<a href="photo.html">Фотоальбом</a><br>
</body>
</html>
Псевдокласс (или псевдоэлемент) first-line – применяется для блочных элементов. Задает форматирование первой строки текста. Пример:
<html>
<head>
|
|
|
<title>Пример</title>
<style>
P:first-line {text-decoration: underline}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. </p>
</body>
</html>
Псевдокласс (или псевдоэлемент) first-letter – позволяет задать форматирование первой буквы текста. Для примера создадим «буквицу» – начальную букву текста увеличенного размера:
<html>
<head>
<title>Пример</title>
<style>
P:first-letter {
color: red;
font-size: 200%;
border: red solid 1px;
padding: 2px;
margin: 2px;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing
elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. </p>
</body>
</html>
Задание. С помощью текстового редактора Блокнот разработать веб-сайт (не менее 3 страниц). Сайт должен содержать: списки, таблицы, рисунки, ссылки, различное оформление текста (начертание, размер шрифта, выравнивание и т.д.) с использованием css, формы (например, на одной из страниц организовать форму для опроса посетителей сайта). Структура сайта должна быть организована с помощью фреймов.
Тематику сайта выбрать согласно варианту или взять свою тему.
Дата добавления: 2019-02-22; просмотров: 195; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!