|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
• Инструкции по работе с : |
|
|
|
| Подписка на рассылку |
|
Как создать сайт на SMC-движках, таких как, JOOMLA, PHP Fusion, установить на свой сайт форум, гостевую книгу, создать собственную рассылку, установить форму оплаты и т.д.
О выпуске этих и других уроков вы узнаете, подписавшись на рассылку |
|
|
|
ТАБЛИЦА КАСКАДНЫХ СТИЛЕЙ
Урок - 7
Таблица каскадных стилей представляет собой набор правил
для оформления различных элементов страницы. Применяя CSS можно для
каждого элемента страницы прописать свой стиль, такие как цвет текста,размер
и расположение шрифта, как будет выглядеть меню. Описание стилей размещается
между тегами <HEAD> и </HEAD> в тегах
<STYLE> и </STYLE>.
Описание стилей может распологаться как в самой странице
сайта, так и в отдельном файле. Если сайт большой, в нем много страниц,
описание стилей удобнее распологать в отдельной странице. Для этого
открываем блокнот,сохраняем его в той же директории, где лежат файлы
сайта, под именем "style.css" и начинаем прописывать элементы,например:( пишите только то,что в левой колонке красным шрифтом, комментарий писать не надо) это не учебник по CSS,
эдесь мы описываем только те стили,которые будем применять при создании
учебного сайта. Главное, если вы поймете принцип как это делается,
то сможете применять и другие стилиПримечание:
|
html,body {
margin:0px;
padding:0px;
}
td.menu {
PADDINGLEFT:30px;
PADDING-top: 30px;
}
.newText {
PADDING-LEFT: 220px;
PADDING-right: 220px;
FONT-WEIGHT: bold;
FONT-SIZE: 16px;
FONT-FAMILY:arial, verdana, sans-serif; color: black
}
p {
padding-left:0px; padding-right: 15px;
}
.Nav2 {
COLOR: #000000;
text-align:middle;
font-weight: bold;
}
.Nav2 A:link {
COLOR: #000000;
text-decoration: none;
font-weight: bold;
}
.Nav2 A:visited {
COLOR: #000
text-decoration: none;
font-weight: bold;
}
.Nav2 A:hover {
COLOR: #DC143C;
text-decoration: none
font-weight: bold;
}
.navText {
PADDING-LEFT: 15px;
FONT-WEIGHT: bold;
FONT-SIZE: 14px;
LINE-HEIGHT: 20px;
FONT-FAMILY:arial, verdana, sans-serif;
color: #FFFFFF;
text-align:middle;
}
|
Чтобы не было промежутков между таблицей и границами экрана
Указывает отступ слева и сверху от края, для таблицы в которой
расположено меню
Это описание стиля для бегущей строки, ее можете вставлять по
желанию, если она не нужна удалите ее
Указывает границы текста помещенного в теги <p>
Расположение и цвет текста класа Nav2,в данном примере цвет черный,текст
жирный, располагается посредине
Цвет ссылки, text-decoration: none: - означает,что ссылка не
будет подчеркнутой, если вместо "none" написать "underline" ,ссылка
будет подчеркнутой.
Цвет и шрифт посещенной ссылки
Цвет ссылки при наведении на нее курсора.
Padding-left:15px - отступ текста меню слева на 15 пикселей,
bold - шрифт жирный, размером 12 пикселей,высота ячейки меню 20
пикселей, цвет шрифта и расположение текста, в данном примере
посредине.
|
Теперь сохраняем файл style.css, а в странице сайта между тегами<HEAD>
и </HEAD> добавляем ссылку на файл CSS, в коде
страницы сайта это будет выглядеть так:
<HTML>
<HEAD>
<TITLE> </TITLE>
<LINK href="style.css" type=text/css rel="stylesheet">
</HEAD>
<BODY>
Если у вас одна или несколько страниц сайта, стили можно прописывать
в самой странице сайта так:
<HTML>
<HEAD>
<TITLE> </TITLE>
<STYLE type="text/css">
<!--
Здесь будет само описание стилей
-->
</STYLE>
</HEAD>
<BODY>
Как указывать что мы применяем тот или иной элемент на сайте, рассмотрим
в уроке
Делаем сайт на практике
|
| Для оформления сайта |
| |
|
| страницы сайта |
|
|
|
|
|
|
| |
|
