Valerapsh ~~~
К оглавлению
Оглавление:

Стили

Можно подключить(Таблицы связанных стилей) <html> <head> <link rel="stylesheet" type="text/css" href="mysite.css"> -- Из директории сайта <link rel="stylesheet" type="text/css" href="http://www.mysite.ru/main.css"> -- из Интернета ... </head> ... <html>
Можно задать в style (Таблицы глобальных стилей) <html> <head> ... <style> body{ background:#0; font-family: 'Fira Sans',sans-serif; font-size:20px; } </style> ... </head> ... <html>
Можно задать непосредственно при обьявлении элемента(Внутренние стили) <html> <head> ... </head> <body> ... <h1 style="text-decor:underline;" >Подчеркнутый текст</h1> ... <html> Где почитать

Шрифты

Распространенные
русифицированные шрифты
Вид на странице Название шрифта
Шрифт- Arial
Шрифт- Arial Cyr
Шрифт- Arial Black
Шрифт- Book antiqua
Шрифт - Bookman old style
Шрифт - Calibri
Шрифт - Cambria
Шрифт - Candara
Шрифт - Century
Шрифт - Century gothic
Шрифт - Comic Sans Ms
Шрифт - Consolas
Шрифт - Constantia
Шрифт - Corbel
Шрифт - Courier
Шрифт - Courier New
Шрифт - Courier, monospace
Шрифт - Cursive
Шрифт - Franklin Gothic
Шрифт - Gabriola
Шрифт - Garamond
Шрифт - Georgia
Шрифт - Helvetica
Шрифт - Impact
Шрифт - Lucida console
Шрифт - Lucida Sans Unicode
Шрифт - Mistral (Mistral)
Шрифт - monospace
Шрифт - Monotype Corsiva
Шрифт - MS Sans Serif
Шрифт - MS Serif
Шрифт - Palatino Linotype
Шрифт - Sans-serif
Шрифт - Segoe print
Шрифт - Segoe script
Шрифт - Sylfaen
Шрифт - Tahoma
Шрифт - Times New Roman
Шрифт - Trebuchet ms
Шрифт - Verdana
Таблица взята отсюда





Табл. 1. Атрибуты CSS для управления шрифтами
Свойство Значение Описание Пример
font-family имя шрифта Задает список шрифтов P {font-family: Arial, serif}
font-style normal
italic
oblique
Нормальный шрифт
Курсив
Наклонный шрифт
P {font-style: italic}
font-variant normal
small-caps
Капитель (особые прописные буквы) P {font-variant: small-caps}
font-weight normal
lighter
bold
bolder
100–900
Нормальная жирность
Светлое начертание
Полужирный
Жирный
100 — светлый шрифт,
900 — самый жирный
P {font-weight: bold}
font-size normal
pt
px
%
нормальный размер
пункты
пикселы
проценты
font-size: normal
font-size: 12pt
font-size: 12px
font-size: 120%
Где почитать

Цвет фона и текста

Табл. 1. Управление цветом фона и текста
Свойство Значение Описание Пример
color

Цвет

Устанавливает цвет текста P { color: #330000 }
background-color Цвет
transparent
Цвет фона BODY { background-color: #6699FF }
background-image URL
none
Фоновый рисунок BODY { background-image: url (bg.gif) }
background-repeat repeat
repeat-x
repeat-y
no-repeat
Повторяемость фонового рисунка BODY { background-image: url (bg.gif) background-repeat: repeat-y }
background-attachment scroll
fixed
Прокручиваемость фона вместе с документом BODY { background-image: url (bg.gif) background-attachment: fixed }
background-position Проценты
Пикселы
top
center
bottom
left
right
Начальное положение фонового рисунка BODY { background-position: left top }
Где почитать

Списки

Табл. 1. Свойства CSS для управления видом списка
Свойство Значение Описание Пример
list-style-type disc
circle
square
decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none
Вид маркера. Первые три используются для создания маркированного списка, а остальные — для нумерованного. LI {list-style-type: circle}
LI {list-style-type: upper-alpha}
list-style-image none
URL
Устанавливает символом маркера любую картинку. LI {list-style-image: url(check.gif)}
list-style-position outside
inside
Выбор положения маркера относительно блока строк текста. LI {list-style-position: inside}
list-style   Универсальное свойство, включает одновременно все вышеперечисленные свойства.  
Табл. 2. Возможные виды списков
Код HTML Пример
<li style="list-style: disc"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style="list-style: circle"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style="list-style: square"> Что следует учитывать при тестировании сайта:
  • работоспособность всех ссылок
  • поддержку разных браузеров
  • читабельность текста
<li style="list-style: decimal">

Нумерованный список с арабскими цифрами:

  1. первый
  2. второй
  3. третий
<li style="list-style: lower-roman">

Нумерованный список со строчными римскими цифрами:

  1. первый
  2. второй
  3. третий
<li style="list-style: upper-roman">

Нумерованный список с заглавными римскими цифрами:

  1. первый
  2. второй
  3. третий
<li style="list-style: lower-alpha">

Нумерованный список со строчными буквами латинского алфавита:

  1. первый
  2. второй
  3. третий
<li style="list-style: upper-alpha">

Нумерованный список с заглавными буквами латинского алфавита:

  1. первый
  2. второй
  3. третий
Где почитать

Курсоры

Табл. 1. Курсоры для использования на веб-странице
Вид Значение Тест Пример
default cursor: default
crosshair cursor: crosshair
pointer cursor: pointer
move cursor: move
text cursor: text
wait cursor: wait
help cursor: help
n-resize cursor: n-resize
ne-resize cursor: ne-resize
e-resize cursor: e-resize
se-resize cursor: se-resize
s-resize cursor: s-resize
sw-resize cursor: sw-resize
w-resize cursor: w-resize
nw-resize cursor: nw-resize
Где почитать

Еденицы измерения

Табл. 1. Относительные единицы измерения
Единица Описание
em Высота шрифта текущего элемента
ex Высота символа x
px Пиксел
% Процент
Табл. 2. Абсолютные единицы измерения
Единица Описание
in Дюйм (1 дюйм равен 2,54 см)
cm Сантиметр
mm Миллиметр
pt Пункт (1 пункт равен 1/72 дюйма)
pc Пика (1 пика равна 12 пунктам)
Где почитать

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

position

absolute
Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задается свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчет координат ведется от края окна браузера. Если у родителя значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.
fixed
По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы. Браузер Firefox вообще не отображает полосы прокрутки, если положение элемента задано фиксированным, и оно не помещается целиком в окно браузера. В браузере Opera хотя и показываются полосы прокрутки, но они никак не влияют на позицию элемента.
relative
Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения.
static
Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
inherit
Наследует значение родителя.
Где почитать

right

Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края (рис. 1). В случае значения relative, right отсчитывается от правого края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от правого края родителя (рис. 2).



В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства right может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от ширины родительского элемента. auto Не изменяет положение элемента. inherit Наследует значение родителя
Где почитать

top

Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчет координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).


Где почитать
Аналогично с left и bottom
bottom
left

float

Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
left
Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне.
right
Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне.
none
Обтекание элемента не задается.
inherit
Наследует значение родителя.

margin

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Где почитать
С margin-left, margin-right, margin-top, margin-bottom все то же самое, только для отдельных сторон
margin-left
margin-right
margin-top
margin-bottom

padding

Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

Где почитать
Аналогично с margin имеет padding-left, padding-right, padding-top, padding-bottom
padding-left
padding-right
padding-top
padding-bottom

Примеры Позиционирования

Position:
position: static
position: relative
position: absolute
position: fixed
position: relative + absolute
position: relative + absolute х 2
position: relative + absolute х 2 исправленное
Float:
float: left
float: left x 2
float: left + flow: right
float: left + float: right+ overflow:scroll

Где почитать

Margin,padding:
No margin, no padding
margin:40px
padding:40px
margin:40 + padding:40

border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определенных сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис.
border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате. inherit наследует значение родителя.
border-style: dashed
border-style: dashed
border-style: solid
border-style: double
border-style: groove
border-style: ridge
border-style: inset
border-style: outset
Четыре разных рамки

Где почитать

Есть возможность задать рамку картинкой,читать тут

Также есть возможность закруглять края рамок с помощью border-bottom-right-radius, border-bottom-left-radius, border-top-right-radius, border-top-left-radius, можно скруглять, как по окружности, так и по эллипсу
Скругленные края

Окружность

text-decoration

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
blink
Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
line-through
Создает перечеркнутый текст (пример).
overline
Линия проходит над текстом (пример).
underline
Устанавливает подчеркнутый текст (пример).
none
Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
inherit
Значение наследуется у родителя.

Где почитать

text-indent

Устанавливает величину отступа первой строки блока текста (например, для абзаца p). Воздействия на все остальные строки не оказывается. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. При задании значения в процентах, отступ первой строки вычисляется в зависимости от ширины блока. Допустимо использовать отрицательные значения, но при этом в разных браузерах возможно появление ошибок. inherit Наследует значение родителя.
Где почитать

text-shadow

Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line. Имеено с помощью text-shadow создается обводка другого цвета для контрастности.
none
Отменяет добавление тени.
цвет
Цвет тени в любом доступном CSS формате. По умолчанию цвет тени совпадает с цветом текста. Необязательный параметр.
сдвиг по x
Смещение тени по горизонтали относительно текста. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
сдвиг по y
Смещение тени по вертикали относительно текста. Также допустимо использовать отрицательное значение, которое поднимает тень выше текста. Обязательный параметр.
радиус
Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0. Учтите, что алгоритм сглаживания в браузерах обычно разный, поэтому вид тени может несколько различаться в зависимости от заданных параметров сглаживания.

Допускается указывать несколько параметров тени, разделяя их между собой запятой. В CSS3 учитывается следующий порядок: первая тень в списке размещается на самом верху, последняя в списке — в самом низу. В CSS2 порядок наоборот: первая тень размещается в самом низу, а последняя на самом верху.
Пример

Где почитать

text-transform

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменен.
capitalize
Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют.
lowercase
Все символы текста становятся строчными (нижний регистр).
uppercase
Все символы текста становятся прописными (верхний регистр).
none
Не меняет регистр символов.
inherit
Наследует значение родителя.

Где почитать

transform

Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций.
 Функции трансформации
matrix
Задаёт матрицу преобразований.
Табл. 1. Коэффициенты матрицы преобразований
Коэффициент Преобразование Описание
a Изменение размера по горизонтали Изменение масштаба по горизонтали. Значение больше 1 расширяет элемент, меньше 1, наоборот, сжимает.
b Наклон по вертикали Наклон по горизонтали. Положительное значение наклоняет влево, отрицательное вправо.
c Наклон по горизонтали Наклон по вертикали. Положительное значение наклоняет вверх, отрицательное вниз.
d Изменение размера по вертикали Изменение масштаба по вертикали. Значение больше 1 расширяет элемент, меньше 1 — сжимает.
tx Смещение по горизонтали в пикселах Смещение по горизонтали в пикселах. Положительное значение сдвигает элемент вправо на заданное число пикселов, отрицательное значение сдвигает влево.
ty Смещение по вертикали в пикселах Смещение по вертикали в пикселах. При положительном значении элемент опускается на заданное число пикселов вниз или вверх при отрицательном значении.
rotate
Поворот элемента на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.

transform: rotate(<угол>)

scale
Масштаб элемента по горизонтали и вертикали.

transform: scale(sx[, sy]);

Значение больше 1 увеличивает масштаб элемента, меньше 1 — уменьшает масштаб.

scaleX
Масштабирует элемент по горизонтали.

transform: scaleX(sx);

scaleY
Масштабирует элемент по вертикали.

transform: scaleY(sy);

skewX
Наклоняет элемент на заданный угол по вертикали.

transform: skewX(<угол>)

skewY
Наклоняет элемент на заданный угол по горизонтали.

transform: skewY(<угол>)

translate
Сдвигает элемент на заданное значение по горизонтали и вертикали.

transform: translate(tx[, ty])

translateX
Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.

transform: translateX(tx)

translateY
Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.

transform: translateY(ty)
 
 
 
Пример

Где почитать

unicode-bidi

В европейских языках чтение текста происходит слева направо, в то время как есть языки, где текст читается справа налево. При смешении в одном документе разных по написанию символов (русского с ивритом, к примеру) в системе юникод, их направление определяется браузером из характеристик и содержимого текста. Свойства unicode-bidi и direction задают, как должен располагаться текст используемого языка.
normal
Браузер самостоятельно определяет, как ему следует отображать текст на основе символов юникода.
embed
Переопределяет параметры текста, располагая его, как указано в свойстве direction.
bidi-override
Аналогичен embed, но при этом также меняется порядок символов в тексте, подчиняясь значению direction.
inherit
Наследует значение родителя.

Лупа и Пупа устроились на работу. Проработали целый месяц, трудились не покладая рук и не жалея живота своего. В конце месяца Лупа и Пупа пошли получать зарплату. В бухгалтерии все как обычно перепутали. И, в итоге, Лупа получил за Пупу, а Пупа за ЛУПУ!

Где почитать

vertical-align

baseline
Выравнивает базовую линию текущего элемента по базовой линии родителя. Если родительский элемент не имеет базовой линии, то за нее принимается нижняя граница элемента.
bottom
Выравнивает основание текущего элемента по нижней части элемента строки, расположенного ниже всех.
middle
Выравнивание средней точки элемента по базовой линии родителя плюс половина высоты родительского элемента.
sub
Элемент изображается как подстрочный, в виде нижнего индекса. Размер шрифта при этом не меняется.
super
Элемент изображается как надстрочный, в виде верхнего индекса. Размер шрифта остается прежним.
text-bottom
Нижняя граница элемента выравнивается по самому нижнему краю текущей строки.
text-top
Верхняя граница элемента выравнивается по самому высокому текстовому элементу текущей строки.
top
Выравнивание верхнего края элемента по верху самого высокого элемента строки.
inherit
Наследует значение родителя.

В качестве значения также можно использовать проценты, пикселы или другие доступные единицы. Положительное число смещает элемент вверх относительно базовой линии, в то время как отрицательное число опускает его вниз. При использовании процентов, отсчет ведется от значения свойства line-height, при этом 0% аналогично значению baseline. Для выравнивания по вертикали в ячейках таблицы применяются следующие значения.
baseline
Выравнивает базовую линию ячейки с базовой линией первой текстовой строки или другого вложенного элемента.
bottom
Выравнивает по нижнему краю ячейки.
middle
Выравнивает по середине ячейки.
top
Выравнивает содержимое ячейки по ее верхнему краю.

Где почитать

visibility

Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остается за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.
visible
Отображает элемент как видимый.
hidden
Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы.
collapse
Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden. В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none. Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer.
inherit
Наследует значение родителя.

Где почитать

word-spacing

Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.
В качестве значений принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение может быть и отрицательным, но следует проверять работоспособность в разных браузерах. Процентная запись не применима.

Пример пример

Где почитать

display

Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Табл. 1. Поддержка браузерами значений display
Значение Описание
block Элемент показывается как блочный. Применение этого значения для встроенных элементов, например тега <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
inline Элемент отображается как встроенный. Использование блочных тегов, таких как <div> и <p>, автоматически создает перенос и показывает содержимое этих тегов с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
inline-block Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно встроенному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде тега <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как встроенный.
inline-table Определяет, что элемент является таблицей как при использовании тега <table>, но при этом таблица является встроенным элементом и происходит ее обтекание другими элементами, например, текстом.
list-item Элемент выводится как блочный и добавляется маркер списка.
none Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учетом вновь добавленного элемента.
run-in Устанавливает элемент как блочный или встроенный в зависимости от контекста.
table Определяет, что элемент является блочной таблицей подобно использованию тега <table>.
table-caption Задает заголовок таблицы подобно применению тега <caption>.
table-cell Указывает, что элемент представляет собой ячейку таблицы (тег <td> или <th>).
table-column Назначает элемент колонкой таблицы, словно был добавлен тег <col>.
table-column-group Определяет, что элемент является группой одной или более колонок таблицы, как при использовании тега <colgroup>.
table-footer-group Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой тега <tfoot>.
table-header-group Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой тега <thead>.
table-row Элемент отображается как строка таблицы (тег <tr>).
table-row-group Создает структурный блок, состоящий из нескольких строк таблицы аналогично действию тега <tbody>.

Где почитать