[CSS] Стили сайта

Внедряем CSS в HTML. JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2209
Зарегистрирован: Сб авг 11, 2012 7:39 am
Поблагодарили: 81 раз

[CSS] Стили сайта

#1

Сообщение Slash » Вт сен 18, 2012 9:50 am

Данная статья посвящена стилю сайта, здесь я расскажу, как сделать страницы своего творения эстетичнее. Для изменения стиля используют язык CSS, с помощью которого добиваются желаемого вида интернет странички, а именно: цвет и размер текста, ссылок; положение на странице; вид полосы прокрутки и т.д. Приведу простой пример изменений с помощью CSS. Мы попробуем изменить цвет полосы прокрутки. Для этого между тегами <head></head> пишем следующий код:

Код: Выделить всё

<style type="text/css"> 
body {
    scrollbar-face-color: green;
}
</style> 
Сохраняем документ и видим бегунок зелёного цвета. Добавляем строчку: background: #999999;

Код: Выделить всё

<style type="text/css">
body {
    background: #999999;
    scrollbar-face-color: green;
}
</style> 
И получаем цветной фон, в данном случае фон будет серым. Если Вам необходимо изменить фон только таблицы, а не всего документа целиком, то слово body в начале кода меняем на table.

Писать код, отвечающий за стиль сайта, можно как в самом документе, так и в отдельном файле, что на мой взгляд намного удобнее. Приведу пример: мы пишем сайт объёмом 100 страниц и в каждой странице задаём стиль, проходит какое – то время, нам надо изменить размер шрифта, начинаем “ковырять” каждую страницу – это долго и нудно. Но создав отдельный файл, нам не придётся изменять каждую страницу, достаточно один раз изменить код и на всех документах шрифт поменяется сам. Для этого создаём файл style.css, заносим в новоиспечённый файл нужные нам стили, и всё готово, остаётся лишь соединить страницы сайта с файлом style.css. Соединять файл будем между тегов <head></head>, следующим кодом:

Код: Выделить всё

<link href="style.css" rel=stylesheet> 
Страницы должны находится в одной папке с соединяемым файлом, в другом случае пишется полный адрес файла. В самом файле style.css писать код <style type="text/css"> и </style> не надо, он нужен только, если стиль задаётся на странице.

Теперь давайте разберём css коды и посмотрим за что они отвечают.
Свойства текста
text-decoration
задаёт оформление шрифта
пример: a {text-decoration: none;}
underline – подчёркнутый текст
none - стандартный текст
line-through – зачёркнутый текст
overline - надчёркивание

text-transform
задает преобразование регистра текста при отображении
пример: a {text-transform: uppercase;}
capitalize – первая буква каждого слова преобразуется в заглавную
uppercase - все буквы преобразуются в заглавные
lowercase – все буквы преобразуются в строчные
none - отменяет установленные преобразования

text-align
выравнивание текста
пример: p {text-align: justify;}
left – выравнивание по левой стороне
right - выравнивание по правой стороне
justify - равномерное выравнивание текста
center - выравнивает текст по центру

text-indent
устанавливает отступ первой строки текста
пример: p {text-indent:15pt;}

line-height
устанавливает интервал между строками текста
пример: p {line-height:70%;}

font-family
устанавливает шрифт или шрифтовое семейство
пример: p {font-family:Arial, Helvetica, sans-serif;}
font-family - можно указать до трёх шрифтовых семейств. Это нужно делать на случай, если у посетителя сайта отсутствует одно из семейств, то за отображение будет подобрано которое есть и на компьютере и на сайте.

font-style
устанавливает способ начертания шрифта
пример: p {font-style:normal;}
italic - шрифт курсивом
normal - нормальный шрифт
oblique - наклонный шрифт

font-variant
устанавливает варианты начертания шрифта
пример: p {font-variant:normal;}
small-caps - все буквы заглавные
normal - нормальный шрифт

font-weight
устанавливает степень жирности шрифта
пример: b {font-weight:lighter;}
параметры жирности: lighter, bolder, bold, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900

font-size
устанавливает размер шрифта
пример: p {font-size:100%;}
параметр можно указывать в процентах, пикселях, сантиметрах

Цвет документа
color
устанавливает цвет элемента
пример: i {color:#999999;}

background-color
устанавливает цвет фона для элемента
пример: h4 {background-color:#FF0000;}

Полоса прокрутки
scrollbar-3dlight-color
устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки
пример: body {scrollbar-3dlight-color:chartreuse;}

scrollbar-arrow-color
устанавливает цвет стрелок на кнопке со стрелками
пример: body {scrollbar-arrow-color:dodgerblue;}

scrollbar-base-color
устанавливает цвет основных элементов ползунка
пример: body {scrollbar-base-color:dodgerblue;}

scrollbar-darkshadow-color
устанавливает цвет тени для ползунка и кнопок со стрелками
пример: body {scrollbar-darkshadow-color:red;}

scrollbar-face-color
устанавливает цвет ползунка и кнопок со стрелками
пример: body {scrollbar-face-color: lawngreen;}

scrollbar-highlight-color
устанавливает цвет подсветки
пример: body {scrollbar-highlight-color:magenta;}

scrollbar-track-color
устанавливает цвет дорожки для ползунка
пример: body {scrollbar-track-color:mediumslateblue;}

Границы
border-widths
устанавливает ширину границы
пример: table {border-widths: ?;}
вместо знака вопроса вставляйте:
thick - толстая линия
medium - средняя линия
thin - тонкая линия
так же можно задать толщину в пикселях, пример: 3px

border-color: ?
устанавливает цвет границы
пример: table {border-color: ?;}
вместо знака вопроса вставляйте код цвета, пример: #dd00aa

border-style
устанавливает стиль границы
пример: table {border-style: ?;}
вместо знака вопроса вставляйте: ridge, outset, hidden, inset, none, dotted, dashed, solid, groove, double

Реклама

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 0 гостей