Для начала можешь внимательно полистать полезные статьи на форуме по дизайну, там есть очень хорошие. Для твоего обучения я буду пользоваться разными учебниками по CSS, если тебе будет интересно, ты потом сам сможешь посмотреть в интернете что-то подробнее.
Начнем.
Что же такое CSS?
Для начала как всегда немного теории. CSS расшифровывается как Cascading Style Sheets (каскадные листы стилей). Вообще CSS предназначен для того, чтобы делать оформление Веб-страниц. Это немного похоже на то, что можно делать в текстовом редакторе, например, в Microsoft Word'е. Но на самом деле, с помощью CSS можно делать намного больше.
Все форумы или сайты состоят из страниц, текста, ссылок. Определенный дизайн же просто делает форум удобнее для чтения и восприятия, но ничего более. Дизайн делает форум или сайт более красивым, отличает его от других, подчеркивает его тематику. Собственно, главные цели самого дизайнера я тоже уже перечислила.
Селекторы, свойства, значения
Так же, как в HTML есть теги, в CSS есть "селекторы". Селекторы – это имена стилей. Селектор определяет тот элемент, который будет каким-то образом меняться. Учить селекторы не нужно, их всегда можно подглядеть в исходном коде, так как это уникальные индентификаторы и классы элементов.
У каждого селектора есть "свойства", определяемые внутри фигурных скобок. Свойства – это ключевые слова, такие как color, font-weight или background-color, которым присвоены определенные значения. Свойство - это то, что будет меняться в элементе, который мы выбрали селектором (например, фон). Значения свойств присваиваются при помощи двоеточия и разделяются точкой с запятой. С помощью значений мы указываем, что именно будет меняться (например, цвет фона).
Не бывает такого, чтобы свойство было отдельно от значения. Они всегда вместе.
body {
font-size: 0.8em;
color: #12007F;
}
В данном примере создается селектор body, в котором определяется два свойства – font-size и color, которым присваиваются соответствующие значения. Таким образом, если этот стиль подключить к HTML документу, то текст между тегами body (что на самом деле весь контент в основном окне браузера) будет отображаться шрифтом размером 0.8 em и темно-синим цветом.
В коде css индентификаторы обозначаются решеткой (#), а классы точкой (.).
#pun-title table tbody tr .title-logo-tdr {position: absolute; z-index: 1; left: 500px; top: 0px
}
Таких пар "свойство: значение" у селектора может быть несколько. В таком случае, мы указываем их через точку с запятой:
#селектор {
свойство: значение;
свойство: значение;
свойство: значение;
}
Параметры CSS
Фон
1. Цвет
backroung-color
Цвет фона какого-то элемента. Значением здесь может быть только веб-название выбранного цвета.
2. Картинка
backround-image
Фоновая картинка. Значения:
url("...") - вместо многоточия идет прямая ссылка на выбранную картинку, естественно, загруженную через какой-то сервер. Если картинки нет, то можно оставить пустые скобки без кавычек внутри или же использовать значение none.
3. Повторение
backround-repeat
Определяет, будет ли повторяться фоновая картинка. Значения:
repeat (или repeat-xy) - повторяется
no-repeat - не повторяется
repeat-y - повторяется по оси y (вертикально)
repeat-x - повторяется по оси х (горизонтально)
4. Прокрутка
backround-attachment
Определяет, будет ли прокручиваться фон или нет. Значения:
fixed - не будет
scroll - будет
5. Расположение
backround-position
Определяет расположение фоновой картинки. Значения:
top - сверху
center - по центру
bottom - снизу
left - слева
right - справа
Шрифт, текст
Для более удобной работы стиль для шрифта можно прописывать в одну строчку, через запятую указывая значения.
font - все нижеперечисленные параметры шрифта вместе.
1. Цвет
color
Определяет цвет шрифта в элементе. Как значение может употребляться только веб-название какого-то цвета.
2. Размер
font-size
Определяет размер шрифта. В качестве значений можно использовать любые единицы измерения CSS (их все я привожу позже), а можно так называемые константы - стандартные размеры (xx-small, x-small, small, medium, large, x-large, xx-large).
3. Стиль
font-style
Определяет начертание шрифта. Значения:
normal - нормальное, обычное
italic - курсив
oblique - немного менее наклонный, чем курсив
4. Толщина
font-weight
Определяет толщину начертания. Значения:
bold — полужирное начертание
bolder — жирное начертание
lighter — светлое начертание
normal — нормальное начертание
Число от 100 (минимальная жирность) до 900 (максимальная)
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.
5. Семейство шрифта
font-family
Список шрифтов может включать несколько названий, но тогда их нужно разделять запятой. Если в имени шрифта содержатся пробелы, например, Times New Roman, оно должно заключаться в одинарные или двойные кавычки.
6. Выравнивание
text-align
Определяет выравнивание текста внутри элемента. Значения:
center - по центру
justify - по ширине
left - слева
right - справа
7. Украшения
text-decoration
Определяет декоративные элементы текста. Значения:
underline - нижнее подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание
Границы (рамки)
Для более удобной работы стиль для границ можно прописывать в одну строчку без запятых.
border - все нижеперечисленные параметры.
border-top - все параметры верхней рамки (это не селектор, а свойство).
border-bottom - все параметры нижней рамки (это не селектор, а свойство).
border-right - все параметры правой рамки (это не селектор, а свойство).
border-left - все параметры левой рамки (это не селектор, а свойство).
1. Цвет
border-color
Определяет цвет границы (рамки). В качестве значения может использоваться только веб-название какого-то цвета.
2. Толщина
border-weight
Определяет толщину границы (рамки). Значения пойдут ниже (см. единицы измерения).
3. Стиль
border-style
Опрелеляет стиль сторон рамки. Значения:
none - рамки нет вообще
dotted - пунктирная рамка из точек
dashed - обычная пунктирная рамка
solid - одинарная сплошная рамка
double - двойная сплошная рамка
groove - трехмерная впадающая рамка
ridge - трехмерная возвышающаяся рамка
inset - трехмерная заглубленность фона
outset - трехмерная выпуклость фона
Значения CSS
1. Единицы измерения
Единицы измерения
em (например, font-size: 2em) используется для определения размера шрифта. Так "2em" означает, что заданный шрифт будет в два раза больше шрифта по умолчанию.
px (например, font-size: 12px) единица измерения - пиксели.
pt (например, font-size: 12pt) единица измерения – пункты.
% (например, font-size: 80%) единица измерения – проценты.
Другие единицы измерения – pc (пики), cm (сантиметры), mm (миллиметры) и in (дюймы).
Если значение равно нулю, то нет необходимости указывать единицы измерения. Например, если ты хочешь полностью убрать рамку вкруг элемента, то можно задать "border: 0".
2. Цвета
Для всех параметров, требующих указания цвета, нужно указывать веб-название этого самого цвета. Оно состоит из шести знаков после решетки (#).
Задание на закрепление
Для следующих селекторов задаешь следующие параметры и выкладываешь сюда получившийся у тебя код. Дальше разбираем ошибки.
1. Для селектора фон задаешь такие параметры:
- любая фоновая картинка
- картинка повторяется по оси у
- картинка находится слева
- фон прокручивается
2. Для селектора шрифт задаешь такие параметры:
- цвет выбираешь сам
- размер шрифта 1.1em
- нормальное начертание
- шрифт Comic Sans Ms
3. Для селектора текст задаешь такие параметры:
- текст выравнивается по ширине
- имеет верхнее подчеркивание
4. Для селектора границы задаешь такие параметры:
- верхняя граница имеет толщину 6 пикселей, трехмерная возвышающаяся, цвет выбираешь сам
- нижняя граница имеет толщину 6 пикселей, трехмерная возвышающаяся, цвет выбираешь сам
- правая граница имеет толщину 3 пикселя, пунктирная из точек, цвет выбираешь сам
- левая граница имеет толщину 3 пикселя, пунктирная из точек, цвет выбираешь сам
