Текущее время: 22 ноя 2017, 08:29

Город ХОББИ

Путь к счастливой жизни - это занятие любимым хобби!

Уроки CSS

WEB технологии, дизайн, сайтостроение, SEO
Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

Уроки CSS

Сообщение Еремин » 08 апр 2013, 21:19

CSS: СВОЙСТВА ШРИФТА
font-family Используется для указания шрифта или шрифтового семейства, которым будет отображаться элемент.
P {font-family: Times New Roman, sans-serif;}
font-style Задает способ начертания шрифта: normal - Нормальный (по умолчанию), italic - Курсив, oblique - Наклонный.
P {font-style: italic;}
font-variant Задает варианты начертания шрифта: normal - Нормальный (по умолчанию), small-caps - Все буквы заглавные).
P {font-variant: small-caps;}
font-weight Определяет степень жирности шрифта с помощью параметров: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900
B {font-weight: bolder;}
font-size Устанавливает размер шрифта. Параметр может указываться как в относительной (проценты), так и абсолютной величине (пункты, пикселы, сантиметры)
H1 {font-size: 200%;}
H2 {font-size: 150px;}
H3 {font-size: 400pt;}

Примечания
font-family - Можно указать до трех семейств шрифта. Это необходимо, так как, если на компьютере клиента отсутствует, скажем, семейство Verdana, а в правиле указано только оно, то разработчик не может предположить, как страница будет выглядеть на экране пользователя. В том, случае, когда в правилах указано несколько семейств, браузер будет последовательно перебирать все перечисленные, пока не найдет того, которое присутствует на машине клиента. Браузер при запуске сам распределяет имеющиеся семейства для подстановки вместо стандартных.


--------------------------------------------------------------------------------

font-weight - Значения bolder и lighter являются относительными. Т.е. если элемент является дочерним к элементу со значением font-weight: bold и правило font-weight для него задано lighter, то он будет отображен нормальным шрифом.


--------------------------------------------------------------------------------

font-size - В абсолютных размерах можно использовать некоторые предопределенные значения: xx-small | x-small | small | medium | large | x-large | xx-large. При использовании относительных размеров задаются размеры шрифта относительно родительского элемента. Возможные значения: larger, smaller. И наконец, можно использовать точные значения - Задаются размеры шрифта в единицах длины, допускаемых в рекомендациях W3C. Это: px - логические пиксели, pt - логические пункты, em - единицы размера шрифта. em подразумевает, что размер шрифта устанавливается относительно размера шрифта в родительском элементе. 1em равно размеру шрифта родительского элемента. Либо используются проценты - Задаются размеры шрифта в процентах по отношению к родительскому элементу



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

CSS: ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА

Сообщение Еремин » 08 апр 2013, 21:20

CSS: ЦВЕТ ЭЛЕМЕНТА И ЦВЕТ ФОНА
color Определяет цвет элемента
I {color: green;}
background-color Устанавливает цвет фона для элемента – именно для элемента, а не для странички. Разные броузеры отображают это свойство по-разному: Microsoft IE отводит под фон элемента всю доступную ширину страницы, а Netscape Navigator – лишь ширину, занимаемую этим элементом.
H4 {background-color: yellow;}
В скриптовых языках используйте object.style.backgroundColor [ = sColor ]
background-image Устанавливает или получает фоновый рисунок для элемента
Может принимать значения
none - По умолчанию. Используется цвет родительского объекта
sUrl - Задается абсолютный или относительный путь к рисунку
H3 {background-image: yellow;}
В скриптовых языках используйте object.style.backgroundImage [ = sLocation ]
background-attachment Устанавливает или получает поведение фонового рисунка для элемента
Может принимать значения
scroll - По умолчанию. Фоновый рисунок прокручивается вместе с элементом
fixed - Фоновый рисунок не прокручивается вместе с элементом
body {background-attachment: fixed;}
В скриптовых языках используйте object.style.backgroundAttachment [ = sAttachment ]



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

CSS: СВОЙСТВА ТЕКСТА

Сообщение Еремин » 08 апр 2013, 21:20

CSS: СВОЙСТВА ТЕКСТА

text-decoration Устанавливает эффекты оформления шрифта, такие, как подчеркивание или зачеркнутый текст

H4 {text-decoration: underline;} - подчеркивание
A {text-decoration: none;} - стандартный текст
I {text-decoration: line-through;} - зачеркивание
B {text-decoration:overline;} - надчеркивание

text-transform Задает преобразование регистра текста при отображении

H4 {text-transform: capitalize;} - Первая буква каждого слова преобразуется в заглавную
A {text-transform: uppercase;} - Все буквы преобразуются в заглавные
I {text-transform: lowercase;} - Все буквы преобразуются в строчные
B {text-decoration:none;} - Отменяет установленные преобразования
text-align Определяет выравнивание элемента. Возможные значения: left, right, center, justify
P {text-align:justify}
H5 {text-align: center}
text-indent Устанавливает отступ первой строки текста. Чаще всего используется для создания параграфов с табулированной первой строкой.
P {text-indent: 50pt;}
line-height Управляет интервалами между строками текста.
P {line-height: 50 %}
word-spacing Устанавливает интервалам между словами. Можно использовать отрицательные значения
P {word-spacing: 50 %}
letter-spacing Устанавливает интервалам между буквами
P {letter-spacing: 50 pt}
vertical-align Устанавливает вертикальное положение элемента. Может принимать следующие значения: baseline middle sub super text-top text-bottom top bottom
P {vertical-align: 50 pt}



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

CSS: Позиционирование

Сообщение Еремин » 08 апр 2013, 21:21

CSS: Позиционирование
position Устанавливает или определяет позицию элемента. Может принимать значения:
static - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам
absolute - Позиция объекта определяется относительно позиции родительского объекта или отностительно объекта body, если позиция родителя не определена свойствами top и left
relative - Позиция объекта определяется смещением от заданных свойств top и left
left/top Устанавливает или определяет позицию элемента относительно левого/верхнего края следующего объекта. Может принимать значения:
auto - По умолчанию. Позиция объекта определяется текущей разметкой HTML по стандартным правилам
length - число с заданной единицей измерения (10mm;5px;3em)
percentage - число процентов от ширины/высоты родительского объекта (10%)
Свойство left или top можно использовать, если задан атрибут position, иначе параметры просто игнорируются
z-index Устанавливает или получает порядок слоев для объектов. В скриптовых языках используйте конструкцию object.style.zIndex [ = vOrder ]. Может принимать два значения:
строку auto (по умолчанию) - Позиция объекта определяется текущей разметкой HTML по стандартным правилам
Order - число, задающее позицию объекта в слоях.
С помощью данного свойства можно накладывать один объект на другой (или прятать за другой объект). Можно использовать и отрицательные значения. Данное свойство применимо только к объектам, имееющим атрибут absolute или relative свойства position
Нельзя применять к объектам, имеющим окно (например, select)
Пример применения в скрипте



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

CSS: Границы

Сообщение Еремин » 08 апр 2013, 21:21

CSS: Границы
Спецификация CSS2 описывает атрибут стиля border, который позволяет задать вид границ вокруг объектов. Атрибут border может быть применен к любым объектам. Могут быть установлены следующие параметры границы: border-width Ширина границы. Может быть задана значением в пикселях или с помощью зарезервированных слов thin (тонкая), medium (средняя), thick (толстая).
table {border-width: 2px;}
border-color Цвет границы. Может принимать значение transparent для задания невидимой, но имеющей ширину, границы, что иногда полезно
table {border-color: green;}
border-style Задает стиль рисования границы. Может принимать следующие значения: none (по умолчанию), hidden, dotted, dashed, solid, double,groove, ridge, inset, outset
table {border-style: dashed;}
table {border-style: groove;}
border-collapse Задает стиль рисования таблицы. Может принимать следующие значения:
separate (по умолчанию) - Ячейки отделены друг от друга
collapse - ячейки не имеют промежутков между собой
<TABLE STYLE="border-collapse:collapse">



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

CSS: ПОЛОСА ПРОКРУТКИ

Сообщение Еремин » 08 апр 2013, 21:24

CSS: ПОЛОСА ПРОКРУТКИ
Данные настройки применимы ко всем элементам, имеющим полосы прокрутки: сама страница (элемент BODY), текстовый блок (TEXTAREA) и т.д. scrollbar-3dlight-color Определяет или устанавливает цвет верха и левой части ползунка и кнопок со стрелками на полосе прокрутки
body {scrollbar-3dlight-color: green;}
scrollbar-arrow-color Устанавливает или определяет цвет стрелок на кнопке со стрелками
body {scrollbar-arrow-color: red;}
scrollbar-base-color Устанавливает или определяет цвет основных элементов ползунка: ползунка, кнопок со стрелками, дорожки для ползунка, если не определены параметры в scrollbar-face-color
body {scrollbar-base-color: green;}
scrollbar-darkshadow-color Устанавливает или определяет цвет тени для ползунка и кнопок со стрелками
body {scrollbar-darkshadow-color: red;}
scrollbar-face-color Устанавливает или определяет цвет ползунка и кнопок со стрелками. Также, если вы не задали параметр SCROLLBAR-TRACK-COLOR, у вас изменится цвет дорожки
body {scrollbar-face-color: green;}
scrollbar-highlight-color Устанавливает или получает цвет подсветки, создающий эффект объёмности. Это цвет, который окаймляет освещённую часть кнопочки. Когда кнопка не нажата, то цвет заливает левый верхний угол и стороны между ним, когда нажата - нижний правый угол
body {scrollbar-highlight-color: green;}
scrollbar-shadow-color Схоже с scrollbar-darkshadow-color
body {scrollbar-shadow-color: green;}
scrollbar-track-color Устанавливает или получает цвет дорожки для ползунка
body {scrollbar-track-color: aqua;}



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

CSS: РАЗМЕР ЭЛЕМЕНТА

Сообщение Еремин » 08 апр 2013, 21:25

CSS: РАЗМЕР ЭЛЕМЕНТА
min-height Устанавливает или получает минимальную высоту элемента
TR {min-height: 10px;}
Данный атрибут применим к TR, TD, TH в таблице, у которой свойство table-layout имеет значение fixed



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

CSS: Отступы

Сообщение Еремин » 08 апр 2013, 21:25

CSS: Отступы
margin Задает или получает ширину отступа от четырех сторон объекта
H4 {margin:1cm;}
body {margin:5mm;}
margin-top Задает или получает высоту верхнего отступа объекта
H5 {margin-top:3cm;}
margin-left Задает или получает ширину левого отступа объекта
img {margin-left:2cm;}
margin-right Задает или получает ширину правого отступа объекта
img {margin-right:2cm;}
margin-bottom Задает или получает высоту нижнего отступа объекта
img {margin-bottom:2cm;}
padding Задает или получает величину пространтства, вставляемого между объектом и его отступом или, если объект имеет границы, между объектом и его границей
td {padding:2cm;}
padding-bottom Задает или получает величину пространтства, вставляемого между объектом его нижней границей
td {padding-bottom:2cm;}
padding-left Задает или получает величину пространтства, вставляемого между объектом его левой границей
td {padding-left:2cm;}
padding-right Задает или получает величину пространтства, вставляемого между объектом его правой границей
td {padding-right:2cm;}
padding-top Задает или получает величину пространтства, вставляемого между объектом его верхней границей
td {padding-top:2cm;}



Аватар пользователя
 
Сообщений: 52
Зарегистрирован: 01 апр 2013, 10:31

CSS: СВОЙСТВА ТАБЛИЦЫ

Сообщение Еремин » 08 апр 2013, 21:26

CSS: СВОЙСТВА ТАБЛИЦЫ
table-layout Устанавливает или получает алгоритм обработки таблицы
TABLE {table-layout: fixed;}
Имеет два значения
auto - По умолчанию. Браузер самостоятельно вычисляет необходимые размеры таблицы
fixed - Браузер не учитывает содержимое отдельных ячеек при вычислении ширины таблицы и отдельных ячеек. Он использует значения ширины таблицы, ширины столбцов, рамок и расстояний между ячейками. Ширина столбцов таблицы вычисляется в следующем порядке:
используя значение атрибута WIDTH элементов COL
используя значение атрибута WIDTH элементов TD первого ряда таблицы
если данные значения не установлены, то ширина столбцов вычисляется соответственно контенту ячеек




Вернуться в WEB технологии, дизайн, сайтостроение, SEO

Кто сейчас на форуме

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