Автор: Пользователь скрыл имя, 11 Ноября 2011 в 18:43, реферат
Точно рассказано о том как легко и просто своими руками научиться создавать сайты
</head>
<body>
<h1>Заголовок</h1>
</body>
</html>
Атрибут
href задает путь к файлу, который содержит
таблицу стилей. Файл должен иметь расширение
style.css. Содержимое файла style.css
в данном примере состоит из двух строк:
BODY {background: #FFF;}
H1 {font: 22px Arial;}
Селектор
Селекторы
– это конструкция, позволяющая выбрать
элемент, к которому будут применены данные
стили.
Четыре вида селекторов:
Селектор
по элементу
Пример,
задать все заголовки первого
уровня темно-серого цвета, шрифт Arial
и расстояние между буквами 10 пикселей:
H1
{color: #666; font-family: Arial; letter-spacing: 10px;}
Селектор,
в данном случае – H1.
Селектор
по классу
В данном
примере для описания стиля ссылок
используем атрибут class=”menu”.
<table>
<tr>
<td>
<a href=”about.html” class=”menu”
</td>
</tr>
</table>
Селектор
по классу формируется следующим
образом: первым идет название элемента,
затем – точка, после – название
класса. Например:
a.menu
{text-decoration: none;}
Селектор
по ID
В HTML существует
специальный атрибут id,
который используется для поддержки селектора
CSS. В одном HTML-документе может быть только
один элемент с определенным ID, т.е. такой
элемент является уникальным.
Например,
первый абзац в тесте выводится
полужирным наклонным шрифтом:
<p id=”first”>Первый абзац</p>
<p>Второй
абзац</p>
С помощью
селектора по ID напишем стиль для первого
абзаца:
p#first
{font-style: italic; font-weight: bold;}
В селекторе по ID для разделения элемента и идентификатора first используется знак #.
Название
элемента можно опустить, и тогда
данный стиль можно будет применять к
любому элементу с идентификатором id=”first”:
#first
{font-style: italic; font-weight: bold;}
Свойства
CSS
Шрифт
Свойство
font-family устанавливает семейство шрифта,
которое будет использоваться для оформления
текста содержимого. Список шрифтов может
включать одно или несколько названий,
разделенных запятой. Если в имени шрифта
содержатся пробелы, например, Trebuchet MS,
оно должно заключаться в одинарные или
двойные кавычки.
H1 {font-family: Arial;}
P
{font-family: 'Times New Roman';}
Свойство font-size определяет размер шрифта элемента, например:
P
{font-size: 14px;}
Свойство font-style определяет начертание шрифта normal – обычное, italic – курсивное или oblique – наклонное.
P
{font-style: italic;}
Свойство font-weight устанавливает насыщенность шрифта, которое задается с помощью ключевых слов: bold – полужирное, bolder – жирное; lighter – светлое, normal – нормальное начертание. Также допустимо использовать условные единицы от 100 до 900.
H1 {font-weight: normal;}
.select {color: maroon;
font-weight: 600;}
Универсальный параметр font позволяет установить одновременно несколько атрибутов стиля шрифта.
A
{font: bold italic 12px Arial;}
Цвет
Свойство
color задает цвет текста в элементе, используя
цветовую схему RGB. Таблица базовых цветов
представлена в файле «Таблица базовых
цветов.doc».
Свойство
background-color определяет цвет фона в элементе.
A
{color: #FFF; background-color: #F60;}
Свойство
border-color задает цвет рамки элемента.
P
{ border-color: #FFF;}
Фон
Свойство
background-image задает фоновое изображение
элемента. Например, определим для блока
div фоновое изображение:
#menu
{background-image: url(img/dots.gif);}
<div id=”menu”>
…
</div>
Cпециальная
функция url задает путь к файлу и используется
только для задания фонового изображения.
Свойство
background-repeat позволяет запретить повторение
фонового изображения или разрешить его
повторение только по оси Y или X. Принимаемые
значения:
no-repeat – запретить повторение,
repeat-X – разрешить повторение только по оси X;
repeat-Y
– разрешить повторение только по оси
Y;
Например,
разрешить повторение фонового изображения
только по оси X:
#menu
{background-image: url(img/dots.gif); background-repeat: repeat-X;}
Текст
Свойство
text-decoration добавляет оформление текста
в виде его подчеркивания, перечеркивания,
линии над текстом и мигания. Одновременно
можно применить более одного стиля, перечисляя
значения через пробел.
| blink | Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте |
| line-through | Создает перечеркнутый
текст ( |
| overline | Линия проходит над текстом (пример). |
| underline | Устанавливает подчеркнутый текст (пример) |
| none | Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию |
A {text-decoration: none;}
A:hover
{text-decoration: underline;}
Свойство text-align определяет горизонтальное выравнивание текста в пределах элемента и может принимать значения center – выравнивание текста по центру, justify – по ширине, left – по левому краю и right – по правому краю.
H1
{ text-align: center;}
Свойство line-height устанавливает интерлиньяж (межстрочный интервал) текста. Высота строки вычисляется относительно размера шрифта, лучше задавать ее в процентах или безразмерных числах, например:
P
{font: 12px Verdana; line-height: 1.5;}
Свойство letter-spacing позволяет устанавливать расстояние между буквами в словах.
H1
{font: 12px Arial; letter-spacing: 10px;}
Границы
Свойство
border позволяет одновременно установить
толщину, стиль и цвет рамки вокруг элемента.
Толщина задается с помощью свойства
border-width, стиль – border-style
и цвет –color.
Свойство
border-style может принимать значения, представленные
на рисунке.
Приведем несколько примеров:
div.brd { border-width: 4px; border-style: double; color: black;} или
div.brd {border: 4px double black;}
Если рамка нужна только с какой-то одной стороны, то существуют четыре свойства: border-top, border-right, border-bottom и border-left. Например, если нужна рамка только слева, то можно написать такой стиль:
.bleft {border-left: 1px solid #999;}
Псевдоклассы
| active | определяет стиль для активной ссылки. Активной ссылка становится при нажатии на нее |
| hover | определяет стиль элемента при наведении на него курсора мыши, при этом элемент не активирован, иными словами кнопка мыши не нажата |
| link | применяется к ссылкам, которые еще не посещались пользователем, и задает для них стилевое оформление |
| visited | применяется к ссылкам, уже посещенные пользователем, и задает для них стилевое оформление |
Пример:
a:link { color: #0000d0;} /* Цвет ссылок */
a:visited { color: #900060;} /* Цвет посещенных ссылок */
a:active
{ color: #f00;}
/* Цвет активной ссылки */
Единицы
измерения
На практике
используются следующие единицы
измерения:
#status
{width: 200px; height: 70px;}
Также задают размер
шрифта, например:
#comment
{font: 12px Verdana;}
#comment
{font: 12px Verdana; padding: 2em;}
означает, что для блока comment отступы будут составлять 24 пикселя.
%. Проценты
вычисляются относительно базового элемента
и зависят от контекста.
Задание для самостоятельной
верстки
1. Используя текст в сером прямоугольнике, сверстайте страницу в соответствии с макетом, представленном ниже.
Что такое CSSОсновным
понятием CSS является стиль – т. е.
набор правил оформления и форматирования,
который может быть применен к
различным элементам страницы. CSS
действует более удобным и
экономичным способом. Для присвоения какому-либо элементу определенных характеристик вы должны один раз описать этот элемент и определить это описание как стиль, а в дальнейшем просто указывать, что элемент, который вы хотите оформить соответствующим образом, должен принять свойства стиля, описанного вами. |
Используя
атрибут style, задать стиль следующим
элементам:
– для элемента <body> установить фоновое изображение, используя файл “img/bg-main.jpg”.
– для заголовка первого уровня <h1> определить шрифт Arial, нижнюю границу с помощью свойства border-bottom толщиной 1 пикселя и установить расстояние между буквами в словах, равное 2 пикселям.