Таблица каскадных стилей представляет собой набор правил для оформления различных элементов страницы. Применяя CSS можно для каждого элемента страницы прописать свой стиль, такие как цвет текста,размер и расположение шрифта, как будет выглядеть меню.
Описание стилей размещается между тегами<HEAD> и </HEAD> в тегах <STYLE> и </STYLE>.
Описание стилей может распологаться как в самой странице сайта, так и в отдельном файле. Если сайт большой, в нем много страниц, описание стилей удобнее распологать в отдельной странице. Для этого открываем блокнот,сохраняем его в той же директории, где лежат файлы сайта, под именем"style.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>
<HEAD>
<TITLE> </TITLE>
<LINK href="style.css" type=text/css rel="stylesheet">
</HEAD>
<BODY>
<BODY>
Если у вас одна или несколько страниц сайта, стили можно прописывать в самой странице сайта так:
<HTML>
<HEAD>
<TITLE> </TITLE>
<STYLE type="text/css">
<HEAD>
<TITLE> </TITLE>
<STYLE type="text/css">
<!--
Здесь будет само описание стилей
-->
</STYLE>
</HEAD>
<BODY>
</STYLE>
</HEAD>
<BODY>
Комментариев нет:
Отправить комментарий