Мир Фантастики

Fan-Tv
Главная | Регистрация | Вход Приветствую Вас Гость | RSS

Меню сайта
Основное меню сайта
Новости сайта
Возмездие:
1сезон
Март-2015

Звездные врата:
Звездные врата
Февраль-2016

Звездные врата:1-й отряд(SG-1)

SG-1.1сезон(Дети богов)
Июль-2015
Друзья сайта
Рекомендованный Браузер
Mozilla Firefox

Поиск
Поиск

Календарь
Календарь
«  Март 2024  »
ПнВтСрЧтПтСбВс
    123
45678910
11121314151617
18192021222324
25262728293031

Архив записей
Наш опрос
Оцените мой сайт
Всего ответов: 1
Мини Чат
Мини-чат

Статистика
Статистика

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Вход на сайт

Теги CSS и их значение(свойства таблицы CSS)!

страница 2

 



Еще страницы -Теги CSS- стр 1..стр 2..стр 3..стр 4..стр 5..стр 6..стр 7..

                                                                        стр 8..стр 9..стр 10...

 

 

Расположение элементов в СSS

 

Стили расположения элементов позволяют располагать текст и изображения в определенное место на странице сайта. Это позволяет сделать страничку удобной для просмотра. В свойствах расположения элементов применяются следующие атрибуты:


margin-top: - задает верхнее поле между элементом страницы и его соседями сверху.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-bottom, значение верхнего поля устанавливается равным значению нижнего поля. Значение по умолчанию auto.

Пример:

margin-top: 20pt;    <!--отступ сверху 20 пунктов-->
 

margin-right: - задает правое поле между элементом страницы и его соседями справа.
Координата может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-left, значение правого поля устанавливается равным значению левого поля. Значение по умолчанию auto.

Пример:

margin-right: 20pt;    <!--отступ справа 20 пунктов-->
 

margin-bottom: - задает нижнее поле между элементом страницы и его соседями снизу.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-top, значение нижнего поля устанавливается равным значению верхнего поля. Значение по умолчанию auto.

Пример:

margin-bottom: 20pt;    <!--отступ снизу 20 пунктов-->
 

margin-left: - задает левое поле между элементом страницы и его соседями слева.
Координата может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.

Пример:

margin-left: 20pt;    <!--отступ снизу 20 пунктов-->
 

margin: - задает ширины полей между элементами страницы и его соседями. Заменяет атрибуты margin-top, margin-right, margin-bottom и margin-left.
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем полям. Если задано два значения, первое относится к верхнему и нижнему полю, а второе - к левому и правому. Если задано три значения, то первое применяется к верхнему полю, второе - к левому и правому, третье - к нижнему.

Пример:

margin: 20pt; 15pt; 10pt;    <!--отступ сверху 20 пунктов, слева-справа 15 пунктов, снизу 10 пунктов-->
 

padding-top: - задает расстояние между элементом страницы и верхней границей.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Значение по умолчанию 0, для тега <TD> 1.

Пример:

padding-top: 15pt;    <!--отступ сверху 15 пунктов-->
 

padding-right: - задает расстояние между элементом страницы и правой границей.
Координата может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Значение по умолчанию 0, для тега <TD> 1.

Пример:

padding-right: 15pt;    <!--отступ справа 15 пунктов-->
 

padding-bottom: - задает отступ между элементом страницы и нижней границей.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Значение по умолчанию 0, для тега <TD> 1.

Пример:

padding-bottom: 15pt;    <!--отступ снизу 15 пунктов-->
 

padding-left: - задает расстояние между элементом страницы и левой границей.
Координата может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Значение по умолчанию 0, для тега <TD> 1.

Пример:

padding-left: 15pt;    <!--отступ слева 15 пунктов-->
 

padding: - задает отступ между элементом страницы и различными границами. Заменяет атрибуты padding-top.
Координата может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать поле самостоятельно. При этом если задан атрибут margin-right, значение левого поля устанавливается равным значению правого поля. Значение по умолчанию auto.

Пример:

padding: auto;    <!--отступ по умолчанию-->
 

width: - задает ширину свободно позиционирования элемента.
Ширина может быть задана как абсолютной величиной X, так и процентом % от ширины родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать ширину элемента самостоятельно.
Значение по умолчанию auto.

Пример:

width: 40%;    <!--ширина 40 процентов-->
 

height: - задает высоту свободно позиционированного элемента.
Высота может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать высоту элемента самостоятельно.
Значение по умолчанию auto.

Пример:

height: 40%;    <!--высота 40 процентов-->
 

top: - задает вертикальную позицию верхней границы свободно позиционированного элемента относительно родителя.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель устанавливать высоту элемента самостоятельно.
Значение по умолчанию auto.

Пример:

top: 20%;    <!--отступ сверху 20 процентов-->
 

bottom: - задает вертикальную позицию нижней границы свободно позиционированного элемента относительно родителя.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
Значение по умолчанию auto.

Пример:

bottom: 20%;    <!--отступ снизу 20 процентов-->
 

left: - задает горизонтальную позицию левой границы свободно позиционированного элемента относительно родителя.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
Значение по умолчанию auto.

Пример:

left: 20%;    <!--отступ слева 20 процентов-->
 

right: - задает горизонтальную позицию правой границы свободно позиционированного элемента относительно родителя.
Координата может быть задана как абсолютной величиной X, так и процентом % от высоты родителя.
Предопределенное значение auto заставляет Web-обозреватель позиционировать элемент самостоятельно.
Значение по умолчанию auto.

Пример:

right: 20%;    <!--отступ справа 20 процентов-->
 

float: - определяет обтекание элемента другими слева или справа вместо помещения под ним.
float: none; - заставляет элемент страницы появляться там, где он задан (используется по умолчанию);
float: left; - принудительно выравнивает элемент страницы по левому краю;
float: right; - по правому краю.

Пример:

float: left;    <!--выравнивание по левому краю-->
 

vertical-align: - задает вертикальное выравнивание элемента страницы внутри родителя.
vertical-align: auto; - выравнивает элемент страницы согласно значению атрибута layout-flow;
vertical-align: baseline; - задает выравнивание базовой линии элемента страницы по базовой линии родителя (используется по умолчанию);
vertical-align: sub; - превращает текст в нижний индекс;
vertical-align: super; - превращает текст в верхний индекс;
vertical-align: top; - выравнивает верх элемента страницы по самому верху родителя;
vertical-align: text-top; - выравнивает верх текста элемента страницы по верху текста родителя;
vertical-align: middle; - выравнивает центр элемента страницы по центру родителя;
vertical-align: bottom; - выравнивает низ элемента страницы по низу родителя;
vertical-align: text-bottom; - выравнивает низ текста элемента страницы по низу текста родителя.

Пример:

vertical-align: text-top;    <!--выравнивание текста по верху-->
 

overflow: - задает поведение элемента страницы, если содержимое в нем не помещается.
overflow: visible; - заставляет элемент страницы расшириться так, чтобы все его содержимое было видно (значение по умолчанию);
overflow: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
overflow: hidden; - скрывает все то, что выходит за пределы элемента страницы;
overflow: auto; - аналогично scroll за тем исключением, что полосы прокрутки отображаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).

Пример:

overflow: scroll;    <!--отображение полос прокрутки-->
 

overflow-x: - задает поведение элемента страницы, если его ширина меньше ширины содержимого.
overflow: visible; - заставляет элемент страницы расшириться по горизонтали так, чтобы все его содержимое было видно (значение по умолчанию);
overflow-x: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
overflow-x: hidden; - скрывает все то, что выходит за пределы элемента страницы;
overflow-x: auto; - аналогично scroll за тем исключением, что полосы прокрутки отображаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).

Пример:

overflow-x: scroll;    <!--отображение полос прокрутки-->
 

overflow-y: - задает поведение элемента страницы, если его высота меньше высоты его содержимого.
overflow: visible; - заставляет элемент страницы расшириться по вертикали так, чтобы все его содержимое было видно (значение по умолчанию);
overflow-y: scroll; - заставляет Web-обозреватель отобразить в элементе страницы полосы прокрутки, пользуясь которыми можно прокручивать его содержимое;
overflow-y: hidden; - скрывает все то, что выходит за пределы элемента страницы;
overflow-y: auto; - аналогично scroll за тем исключением, что полосы прокрутки отображаются только тогда, когда они реально необходимы (значение по умолчанию для <TEXTAREA>).

Пример:

overflow-y: scroll;    <!--отображение полос прокрутки-->
 

zoom: - задает масштаб отображения элемента страницы.
Масштаб может быть задан как числом с плавающей точкой, обозначающим степень увеличения или уменьшения, так и процентной величиной. Предопределенное значение normal задает масштаб 1.0 или 100%.
Значение по умолчанию normal.

Пример:

zoom: normal;    <!--масштаб 100%-->
 

table-lowout: - позволяет "зафиксировать" значения ширины ячеек таблицы.
table-lawout: auto; - устанавливает ширину ячейки по ширине ее содержимого (значение по умолчанию);
table-lawout: fixed; - использует для установки ширин ячеек значения атрибутов WIDTH или, если они не заданы, просто дает ячейкам равную ширину.
Другими словами, задание значения auto позволит точно "подогнать" значения ширин ячеек, но таблица при этом будет выводиться очень долго. Значение fixed этого атрибута позволит Web-обозревателю вывести таблицу значительно быстрее, но Web-дизайнер должен будет сам задать значения ширин ячеек. Это может сильно ускорить вывод больших таблиц на экран.
Применяется только для тега <TABLE>.

Пример:

table-lowout: auto;    <!--ширина ячейки по содержимому-->

 

 

 

Цвета в Таблицах стилей CSS

 

Цвета необходимы для того, чтобы выделить абзац или часть его, заголовок и т.д. для усиления визуального воздействия на пользователя. Управлять свойствами цветов в таблицах стилей (CSS) можно применяя следующие атрибуты:


color: - Определяет цвет элемента.
В качестве значения этого атрибута задается либо непосредственно имя нужного цвета, либо его шестнадцатиричное значение.
color: red; - задает цвет элемента, используя имя цвета
color: #FF0000; - задает цвет элемента, используя код цвета

Пример:

color: red;    <!--имя цвета - красный-->
 

background-color - задает фоновый цвет Web-страницы или ее элемента.
Предопределенное значение transparent задает "прозрачный" фон. Оно же является значением по умолчанию. Может принимать значение имени цвета или его шестнадцатиричный эквивалент
background-color: #FF0000; - задает цвет фона;
background-color: transparent; - цвет фона - прозрачный

Пример:

background-color: #FF0000;    <!--цвет фона - красный-->
 

background-image - задает фоновый рисунок Web-страницы или ее элемента.
Предопределенное значение none отключает фоновый рисунок. Оно же является значением по умолчанию.
background-image: url - задает интернет-адрес файла рисунка
background-image: none - отключает фоновый рисунок

Пример:

background-image: none;    <!--отключает фоновый рисунок-->
 

background-attachment - данный атрибут позволяет "зафиксировать" фоновый рисунок, чтобы он не прокручивался вместе с содержимым Web-страницы.
background-attachment: scroll; - фоновое изображение прокручивается вместе с содержимым страницы (значение по умолчанию);
background-attachment: fixed; - фоновое изображение фиксируется на одном месте и не прокручивается с содержимым страницы;

Пример:

background-attachment: scroll;    <!--прокрутка изображения-->
 

background-repeat - устанавливает порядок повторения фонового рисунка на Web-странице или ее элементе.
Иногда этот атрибут необходим, чтобы занять все свободное пространство, если фоновый рисунок слишком мал, чтобы покрыть пространство без повторения.
background-repeat: repeat; - размножает фоновое изображение во всех направлениях (значение по умолчанию);
background-repeat: no-repeat; - запрещает фоновому изображению повторяться;
background-repeat: repeat-x; - размножает фоновое изображение только по горизонтали;
background-repeat: repeat-y; - размножает фоновое изображение только по вертикали

Пример:

background-repeat: repeat;    <!--размножить изображение во всех направлениях-->
 

background-position-x - задает горизонтальную координату фонового рисунка.
Координата может быть задана целым числом X (абсолютная координата), процентом от соответствующего размера фонового рисунка % (относительная координата) или предопределенным значением. Доступны три предопределенных значения: left, center, right, которые задают выравнивание фонового рисунка на странице по левому краю, по центру и по правому краю соответственно. Значение по умолчанию 0%.

Пример:

background-position-x: 0%;    <!--горизонтальная координата не задана-->
 

background-position-y - задает вертикальную координату фонового рисунка.
Координата может быть задана целым числом Y (абсолютная координата), процентом от соответствующего размера фонового рисунка % (относительная координата) или предопределенным значением. Доступны три предопределенных значения: top, center, bottom которые задают выравнивание фонового рисунка на странице по верху, по центру и по низу страницы соответственно. Значение по умолчанию 0%.

Пример:

background-position-y: 0%;    <!--вертикальная координата не задана-->
 

background - задает все свойства фона элемента страницы в один прием. Заменяет собой атрибуты background-attachment, background-color, background-image, background-repeat, background-position и background-repeat.
Значение по умолчанию scroll transparent none repeat 0% 0%. Значения этих свойств могут располагаться в любом порядке.

Пример:

background: scroll; transparent; none; repeat; 0%; 0%;    <!--все доступные значения по умолчанию-->
 

scrollbar-3dlight-color - задает цвет верхней и левой границ полосы прокрутки, ее бегунка и стрелок.
scrollbar-3dlight-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-3dlight-color: red;    <!--имя цвета-->
 

scrollbar-arrow-color - задает цвет стрелок на кнопках полосы прокрутки.
scrollbar-arrow-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-arrow-color: red;    <!--имя цвета-->
 

scrollbar-base-color - задает цвет бегунка и кнопок-стрелок полосы прокрутки.
scrollbar-base-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-base-color: red;    <!--имя цвета-->
 

scrollbar-darkshadow-color - задает цвет "тени", отбрасываемой бегунком и кнопками прокрутки полосы прокрутки (цвет правых и нижних границ).
scrollbar-darkshadow-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-darkshadow-color: red;    <!--имя цвета-->
 

scrollbar-face-color - задает цвет бегунка и кнопок прокрутки полосы прокрутки.
scrollbar-face-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-face-color: red;    <!--имя цвета-->
 

scrollbar-highlight-color - задает цвет "освещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет левых и верхних их граней).
scrollbar-highlight-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-highlight-color: red;    <!--имя цвета-->
 

scrollbar-shadow-color - задает цвет "неосвещенной" части бегунка и кнопок прокрутки полосы прокрутки (цвет правых и нижних их граней). Не путать с цветом "тени", задаваемым атрибутом scroll-darkshadow-color.
scrollbar-shadow-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-shadow-color: red;    <!--имя цвета-->
 

scrollbar-track-color - задает цвет рабочей части полосы прокрутки, т.е. той ее части, по которой перемещается бегунок.
scrollbar-track-color: {Цвет}; Значение цвета может быть задано именем или его шестнадцатиричным эквивалентом.

Пример:

scrollbar-track-color: red;    <!--имя цвета-->

 

 
Copyright MyCorp © 2024
Конструктор сайтов - uCoz