Справочник по CSS
1. Создание таблицы стилей
Создаем в папке, где находятся страницы сайта файл *.css (например, style. css). В html-документе в тегах head прописываем к нему путь:
<link href=”style. css” type=”text/css” rel=”stylesheet”>, где
type=”text/css” – указывает тип файла
rel=”stylesheet” – говорит браузеру, что данный документ – таблица стилей.
2. Изменение цвета текста/заголовков страницы
h2 {color:green;} – позволяет сделать заголовки h2 всего сайта зелеными. В html-коде при этом никаких атрибутов добавлять не нужно.
h2, p {color:green;} – делает зелеными не только заголовки h2 всего сайта, но и все абзацы <p>.
div p {color:orange;} – делает оранжевыми абзацы <p>, находящиеся в div'ах всего сайта.
h2.red {color:red;} - позволяет сделать заголовки h2, помеченные классом «red» красными. В html-коде страницы, к заголовкам которой уже применен css-стиль, к тем заголовкам h2, которые нужно выборочно сделать красными, добавляем атрибут class="red". Данный класс имеет приоритет над общим стилем.
Например:
<h2 class="red">Продолжение</h2>
.blue {color:blue;} – делает любой фрагмент (текст, заголовки, таблицы) на странице синего цвета, независимо от основного стиля. Достаточно в html-коде добавить атрибут class="blue">.
3. Изменение цвета ссылок
Изменение ссылок на сайте до нажатия, при наведении курсора, в момент и после их нажатия.
a:link {color:#000000; text-decoration:underline;}
a:visited {color:#red; text-decoration:none;}
a:hover {color:green; text-decoration:overline;}
a:active {color:orange; text-decoration:none;}
где:
a:link – ссылка до нажатия
a:visited – ссылка после нажатия
a:hover – ссылка при наведении на нее курсора мыши
a:active – ссылка в момент нажатия
text-decoration:underline – ссылка подчеркнута снизу
text-decoration:none – ссылка не подчеркнута
text-decoration:overline – ссылка подчеркнута сверху.
4. Параметры шрифтов
p. new {font-family:Verdana, Tahoma; font-size:12px; font-variant:small-caps; font-style:italic; font-weight:bold;}
Данная сточка придает шрифтам в абзацах <p>, начиная с того, в котором прописан атрибут class=”new”, указанные в ней параметры. В ней:
font-family:Verdana, Tahoma - название шрифта, первым система будет пытаться выбрать Verdana
font-size:12px – размер шрифта
font-variant:small-caps – делает все буквы заглавными
font-style:italic – делает стиль шрифта курсивом
font-weight:bold – придает шрифту плотность (жирность). Вместо bold можно указать цифры – до 900.
Чтобы не писать многократно font, данную строку можно сократить следующим образом:
p. new {font:bold italic 12px small-caps Verdana, Tahoma
!!! Важна последовательность! Первым следует указывать плотность шрифта!
5. Фон
Фоновый цвет или изображение для страницы или ее определенного участка задаются следующим способом:
body {background-color:#f6f6f6;
background-image:url(med. jpg);
background-repeat:repeat-y;
background-position:top right
margin-right:400px;
background-attachment:fixed;
}, где:
background-color:#f6f6f6; - цвет фона (в данном случае, серый). Если прописывается в body, значит, применяется для всей страницы. Также м. б. прописан в отдельных стилях, например, абзаца
background-image:url (med. jpg); - картинка, применяемая в виде фона. Если она находится в корневой папке, путь к ней не прописывается
background-repeat:repeat-y; - повторение картинки (x – по горизонтали, y – по вертикали, no-repeat – без повтора
background-position:top right – указывает, откуда начнет «тиражироваться» изображение (в данном случае с верхнего правого угла; можно задать определенное положение в пикселях по ширине и высоте: 100px 200px)
margin-right:400px; - задает границу текста (в данном случае 400 пикселей от правого края)
background-attachment:fixed; - фиксирует картинку относительно прокрутки текста.
6. Работа с текстом
.al {text-align:right;
text-decoration:line-through;
text-indent:30px;
text-transform:capitalize;
word-spacing:20px;
line-height:50px;
}, где:
text-align:right: - задает выравнивание текста (в данном случае, справа) того абзаца, к которому применен данный класс (al)
text-decoration:line-through; - делает текст зачеркнутым (в данном случае) или, например, подчеркнутым
text-indent:30px; - делает отступ «с красной строки»
text-transform:capitalize; - делает все буквы заглавными; uppercase – все слова заглавными; lowercase – все слова маленькими
word-spacing:20px; - расстояние между словами
line-height:50px; - высота строки (межстрочный интервал).
7. Рамки
.frame {
border-width:2px;
border-style:solid;
border-color:red;
}, где:
border-width:2px; - ширина рамки
border-style:solid; - стиль рамки (solid – сплошная рамка; dotted – точечная; dashed - пунктиром)
border-color:red; - цвет рамки
!!! То же самое сокращенно:
.frame {
border:2px solid red;
}
!!! Отдельные параметры для разных сторон рамки:
.frame {
border-top:5px solid red;
border-right:2px dotted black;
border-left:3px solid blue;
border-bottom:4px dashed red;
}, где:
border-top:5px solid red; - верхняя рамка
border-right:2px dotted black; - правая рамка
border-left:3px solid blue; - левая рамка
border-bottom:2px dashed red; - нижняя рамка
8. Отступы (поля)
Внешние отступы:
.pol {margin:60px;}
Данный класс создает положение, например, текста с отступом в 60 пикселей со всех сторон (в FireFox не сработало!)
Варианты:
margin-left:60px; - положение, например, текста с отступом в 60 пикселей слева
margin:60px; margin-top:auto; - делает отступ 60 пикселей со всех сторон, кроме верха
Внутренние отступы:
.pol2 {padding:30px; border:1px solid black;} – делает внутренний отступ в 30 пикселей от рамки с заданными параметрами (в FireFox сработало!)
Можно задавать нужную ширину «контейнера» (рамки), (в FireFox не сработало!) например:
.pol2 {height:300px; width:300px; float:left; border:1px solid black; margin-right:20px;}, где
height:300px; width:300px – ширина и высота «контаейнера» (рамки) в 300 пикселей
float:left; - позволяет «обтекать» таблицу текстом (в данном случае, таблица будет слева, а текст ее «обтекает» справа с отступом в 20 пикселей).
