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

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)!

страница 4

 



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

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

 

 

Границы элементов в CSS

 

 

 

В этой главе мы рассмотрим стили границ элементов, используемые в таблицах стилей и их значения.

 

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


border-top-color: - задает цвет верхней границы элемента страницы.
border-top-color: {Цвет}; Может задаваться посредством имени цвета или его шестнадцатиричным эквивалентом.

Пример:

border-top-color: red;    <!--цвет верхней границы - красный-->
 

border-bottom-color: - задает цвет нижней границы элемента страницы.
border-bottom-color: {Цвет}; Может задаваться посредством имени цвета или его шестнадцатиричным эквивалентом.

Пример:

border-bottom-color: #FF0000;    <!--цвет нижней границы - красный-->
 

border-left-color: - задает цвет левой границы элемента страницы.
border-left-color: {Цвет}; Может задаваться посредством имени цвета или его шестнадцатиричным эквивалентом.

Пример:

border-left-color: green;    <!--цвет левой границы - зеленый-->
 

border-right-color: - задает цвет правой границы элемента страницы.
border-right-color: {Цвет}; Может задаваться посредством имени цвета или его шестнадцатиричным эквивалентом.

Пример:

border-right-color: #008000;    <!--цвет правой границы - зеленый-->
 

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

Пример:

border-color: red; green; blue;    <!--верхняя граница - красная, левая-правая - зеленая, нижняя - синяя-->
 

border-color: - (для NN) задает цвет границ элемента страницы.
border-color: none|{Цвет}; Может быть задано либо цветное значение, либо none, обозначающее отсутствие границ.

Пример:

border-color: none;    <!--без границ-->
 

border: - задает все свойства границ элемента страницы в один прием. Заменяет атрибуты border-color, border-style и border-width. Значения этих атрибутов могут располагаться в любом порядке.
border: [{border-color}] [{border-style}] [{border-width}];
Значение по умолчанию none none medium.

Пример:

border: none; none; medium;    <!--границы без цвета, без типа, толщина - средняя-->
 

border-top-style: - задает тип верхней границы элемента страницы.
border-top-style: none; - запрещает рисование границы (значение по умолчанию);
border-top-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-top-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-top-style: solid; - рисует сплошную линию;
border-top-style: double; - рисует двойную сплошную линию;
border-top-style: groove; - рисует трехмерную вдавленную границу;
border-top-style: ridge; - рисует трехмерную выпуклую границу;
border-top-style: inset; - рисует трехмерную "ступеньку вверх";
border-top-style: outset; - рисует трехмерную "ступеньку вниз".

Пример:

border-top-style: solid;    <!--рисует сплошную линию-->
 

border-bottom-style: - задает тип нижней границы элемента страницы.
border-bottom-style: none; - запрещает рисование границы (значение по умолчанию);
border-bottom-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-bottom-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-bottom-style: solid; - рисует сплошную линию;
border-bottom-style: double; - рисует двойную сплошную линию;
border-bottom-style: groove; - рисует трехмерную вдавленную границу;
border-bottom-style: ridge; - рисует трехмерную выпуклую границу;
border-bottom-style: inset; - рисует трехмерную "ступеньку вверх";
border-bottom-style: outset; - рисует трехмерную "ступеньку вниз".

Пример:

border-bottom-style: solid;    <!--рисует сплошную линию-->
 

border-left-style: - задает тип левой границы элемента страницы.
border-left-style: none; - запрещает рисование границы (значение по умолчанию);
border-left-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-left-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-left-style: solid; - рисует сплошную линию;
border-left-style: double; - рисует двойную сплошную линию;
border-left-style: groove; - рисует трехмерную вдавленную границу;
border-left-style: ridge; - рисует трехмерную выпуклую границу;
border-left-style: inset; - рисует трехмерную "ступеньку вверх";
border-left-style: outset; - рисует трехмерную "ступеньку вниз".

Пример:

border-left-style: solid;    <!--рисует сплошную линию-->
 

border-right-style: - задает тип правой границы элемента страницы.
border-right-style: none; - запрещает рисование границы (значение по умолчанию);
border-right-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-right-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-right-style: solid; - рисует сплошную линию;
border-right-style: double; - рисует двойную сплошную линию;
border-right-style: groove; - рисует трехмерную вдавленную границу;
border-right-style: ridge; - рисует трехмерную выпуклую границу;
border-right-style: inset; - рисует трехмерную "ступеньку вверх";
border-right-style: outset; - рисует трехмерную "ступеньку вниз".

Пример:

border-right-style: solid;    <!--рисует сплошную линию-->
 

border-style: - задает тип сразу всех границ элемента страницы в один прием. Заменяет атрибуты border-top-style, border-right-style, border-bottom-style и border-left-style.
border-style: none; - запрещает рисование границы (значение по умолчанию);
border-style: dotted; - рисует точечную линию (не поддерживается в NN);
border-style: dashed; - рисует штриховую линию (не поддерживается в NN);
border-style: solid; - рисует сплошную линию;
border-style: double; - рисует двойную сплошную линию;
border-style: groove; - рисует трехмерную вдавленную границу;
border-style: ridge; - рисует трехмерную выпуклую границу;
border-style: inset; - рисует трехмерную "ступеньку вверх";
border-style: outset; - рисует трехмерную "ступеньку вниз".

Пример:

border-style: ridge;    <!--рисует трехмерную выпуклую границу-->
 

border-top-width: - задает толщину верхней границы элемента страницы.
Толщина может быть задана числовым значением Х. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.

Пример:

border-top-width: 3;    <!--толщина верхней рамки-->
 

border-bottom-width: - задает толщину нижней границы элемента страницы.
Толщина может быть задана числовым значением Х. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.

Пример:

border-bottom-width: thin;    <!--толщина нижней рамки - тонкая-->
 

border-left-width: - задает толщину левой границы элемента страницы.
Толщина может быть задана числовым значением Х. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.

Пример:

border-left-width: medium;    <!--толщина левой рамки - средняя-->
 

border-right-width: - задает толщину правой границы элемента страницы.
Толщина может быть задана числовым значением Х. Также доступны три предопределенных значения: thin, medium, thick, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.

Пример:

border-right-width: thick;    <!--толщина правой рамки - толстая-->
 

border-width: - задает толщину всех границ элемента страницы. Заменяет атрибуты border-top-width, border-right-width, border-bottom-width и border-left-width.
Может быть задано от одного до четырех значений. Если задано одно значение, оно применяется ко всем четырем границам. Если задано два значения, первое относится в верхней и нижней границам, а второе - к левой и правой. Если задано три значения, то первое применяется к верхней границе, второе - к левой и правой, третье - к нижней.
Толщина может быть задана числовым значением Х. Также доступны три предопределенных значения: thin, medium, thick,, рисующие тонкую, среднюю и толстую линию соответственно.
Значение по умолчанию medium.

Пример:

border-width: 2; 3;    <!--толщина верхней и нижней рамки; толщина левой и правой рамки-->
 

border-top: - задает все свойства верхней границы элемента страницы за один прием. Заменяет атрибуты border-top-color, border-top-style и border-top-width. Значения этих атрибутов могут располагаться в любом порядке.
border-top: [{border-top-color}] [{border-top-style}] [{border-top-width}];
Значение по умолчанию none medium none.

Пример:

border-top: red; medium; 3;    <!--цвет, тип и толщина верхней рамки-->
 

border-bottom: - задает все свойства нижней границы элемента страницы за один прием. Заменяет атрибуты border-bottom-color, border-bottom-style и border-bottom-width. Значения этих атрибутов могут располагаться в любом порядке.
border-bottom: [{border-bottom-color}] [{border-bottom-style}] [{border-bottom-width}];
Значение по умолчанию none medium none.

Пример:

border-bottom: red; medium; 3;    <!--цвет, тип и толщина нижней рамки-->
 

border-left: - задает все свойства левой границы элемента страницы за один прием. Заменяет атрибуты border-left-color, border-left-style и border-left-width. Значения этих атрибутов могут располагаться в любом порядке.
border-left: [{border-left-color}] [{border-left-style}] [{border-left-width}];
Значение по умолчанию none medium none.

Пример:

border-left: red; medium; 3;    <!--цвет, тип и толщина левой рамки-->
 

border-right: - задает все свойства правой границы элемента страницы за один прием. Заменяет атрибуты border-right-color, border-right-style и border-right-width. Значения этих атрибутов могут располагаться в любом порядке.
border-right: [{border-right-color}] [{border-right-style}] [{border-right-width}];
Значение по умолчанию none medium none.

Пример:

border-right: red; medium; 3;    <!--цвет, тип и толщина правой рамки-->
 

border-collapse: - задает, будут ли границы ячеек и общая граница таблицы сливаться в одну или нет. Применяется только для тега <TABLE>.
border-collapse: separate; - разделяет границу таблицы и границы ее ячеек (значение по умолчанию);
border-collapse: collapse; - объединяет их.

Пример:

border-collapse: separate;    <!--разделяет границу таблицы и границы ее ячеек-->

 

 

 

Классификации

 

 

 

В этой главе мы рассмотрим стили классификации, на примере которых показаны способы вывода элементов текста на экран пользователя и их значения.



display: - определяет, как будет отображаться элемент.
display: inline; - (значение по умолчанию) заставляет элемент страницы вести себя как встроенный. При этом он располагается внутри текста, его позиция и размеры рассчитываются согласно позиции и размерам текста. Пример встроенного элемента - <I>;
display: block; - делает элемент страницы блочным. При этом его можно свободно позиционировать. Пример блочного элемента - <DIV>;
display: none; - делает элемент страницы невидимым. При этом страница отображается так, будто этого элемента вообще не существует;
display: inline-block; - аналогично inline, но содержимое страницы ведет себя как блочный элемент;
display: list-item; - аналогично block, но при этом элемент страницы считается позицией списка (ставится маркер);
display: table-header-group; - заставляет элемент страницы отображаться после верхнего заголовка таблицы и перед всеми строками данных (аналогично тегу <THEAD>);
display: table-footer-group; - заставляет элемент страницы отображаться перед основанием таблицы и после всех строк данных (аналогично тегу <TFOOT>);

Пример:

display: none;    <!--делает элемент страницы невидимым-->
 

position: - устанавливает, каким образом вычисляется положение элемента в плоскости экрана.
position: static; - (значение по умолчанию) задает статическое позиционирование, при котором элемент страницы отображается внутри общего "потока" текста, т.е. не свободно. Значения атрибутов bottom, left, right и top при этом не принимаются Web-обозревателем во внимание;
position: absolute; - задает абсолютное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают абсолютные координаты элемента страницы относительно родителя;
position: relative; - задает относительное свободное позиционирование. Значения атрибутов bottom, left, right и top при этом задают смещение координат элемента страницы от точки, в которой он был отображен, будь атрибут position установлен в static.

Пример:

position: static;    <!--статическое позиционирование-->
 

z-index: - задает порядок перекрытия свободно позиционированными объектами друг друга.
Порядок перекрытия задается положительными или отрицательным целым числом X. При этом элементы с большим значением этого атрибута будут перекрывать элементы с меньшим значением.
Предопределенное значение auto задает порядок перекрытия по умолчанию, когда элементы, определенные в HTML-коде раньше, перекрываются заданными позже.
Значение по умолчанию auto.

Пример:

z-index: 2;    <!--элемент с этим значением перекрывает элемент с меньшим значением-->
 

visibility: - позволяет элементу быть видимым или невидимым на странице.
visibility: inherit - (значение по умолчанию) элемент виден, если его родительский элемент является видимым (наследует видимость);
visibility: visible - делает элемент страницы видимым;
visibility: hidden - невидимым.

Пример:

visibility: hidden;    <!--элемент невидим-->
 

clip: - задает прямоугольный фрагмент элемента страницы, который будет видим.
Предопределенное значение auto задает видимость всего элемента страницы. Оно же является значением по умолчанию. Для того чтобы ограничить видимую часть элемента страницы прямоугольным фрагментом, задаются четыре координаты границ этого прямоугольника, разделенные пробелами.

Пример:

clip: auto;    <!--весь элемент видим-->
 

white-space: - задает, будут ли строки текста, содержащегося в элементе страницы, автоматически переноситься, если они не помещаются в нем по ширине.
white-space: normal; - (значение по умолчанию) включает автоматический перенос длинных строк;
white-space: nowrap; - отключает автоматический перенос строк. Чтобы "разорвать" строку вручную, вставьте в нужном месте тег <br>
white-spice: pre; - не поддерживается;

Пример:

white-space: normal;    <!--автоматический перенос длинных строк-->
 

cursor: - определяет форму курсора мыши, которую он принимает при наведении на элемент страницы.
cursor: auto - (значение по умолчанию) заставляет Web-обозреватель самому определять нужную форму курсора мыши;
cursor: crosshair - крестообразный курсор;
cursor: default - курсор по умолчанию, обычно стрелка;
cursor: hand - "указывающий перст";
cursor: move - стрелка, указывающая "на все четыре стороны";
cursor: e-resize - стрелка, указывающая в обе стороны по горизонтали;
cursor: ne-resize - стрелка, указывающая в обе стороны по диагонали слева направо;
cursor: nw-resize - стрелка, указывающая в обе стороны по диагонали справо налево;
cursor: n-resize - стрелка, указывающая в обе стороны по вертикали;
cursor: se-resize - стрелка, указывающая в обе стороны по диагонали слева направо;
cursor: sw-resize - стрелка, указывающая в обе стороны по диагонали справо налево;
cursor: s-resize - стрелка, указывающая в обе стороны по вертикали;
cursor: w-resize - стрелка, указывающая в обе стороны по горизонтали;
cursor: text - текстовой курсор;
cursor: wait - "песочные часы", курсор ожидания;
cursor: help - стрелка с вопросительным знаком.

Пример:

cursor: default;    <!--курсор по умолчанию-->
 

list-style-type: - задает тип маркера или номер позиции списка.
list-style-type: disc; - (значение по умолчанию) отображает сплошной кружок;
list-style-type: circle; - окружность;
list-style-type: square; - сплошной квадрат;
list-style-type: decimal; - нумерует позиции арабскими цифрами;
list-style-type: lower-roman; - малыми римскими;
list-style-type: upper-roman; - большими римскими;
list-style-type: lower-alpha; - помечает позиции малыми латинскими буквами;
list-style-type: upper-alpha; - большими латинскими;
list-style-type: none; - вообще убирает маркер или нумерацию.

Пример:

list-style-type: circle;    <!--окружность-->
 

list-style-image: - задает графическое изображение, отображаемое в качестве маркера позиции списка. Имеет приоритет над атрибутом list-style-type.
Если задано предопределенное значение none, то стиль маркера берется из установок атрибута list-style-type, если он задан, или отображается маркер по умолчанию. Если задан интернет-адрес URL файла изображения, то оно отображается в качестве маркера, перекрывая установки атрибута list-style-type.
Значение по умолчанию none.

Пример:

list-style-image: URL;    <!--интернет-адрес файла изображения-->
 

list-style-position: - задает местонахождение маркера позиции списка: в тексте позиции или вне его.
Доступны два значения. Значение outside (по умолчанию) задает отображение маркера позиции списка вне текста позиции.
Значение же inside заставляет Web-обозреватель отобразить маркер позиции в ее тексте в качестве первого символа.

Пример:

list-style-position: inside;    <!--отображает маркер позиции в качестве первого символа-->
 

list-style: - задает параметры маркера или номера позиции списка. Заменяет атрибуты list-style-image, list-style-position и list-style-type.
Значения этих атрибутов могут располагаться в любом порядке.
Значение по умолчанию none outside disk.

Пример:

list-style: none outside disk;    <!--отображает маркер без изображений, вне текста позиции, сплошной кружок-->


 

Псевдостили текста

 

 

 

Псевдостили применяются к некоторым элементам текстовых абзацев, например, к первой строке абзаца или первой букве первой строки.



first-letter: - применяется к первой букве первой строки абзаца. Может использоваться для создания буквиц.

Пример:

st:first-letter {font-size: 16pt;}    <!--st: - задание стиля текста, атрибут, размер первой буквы 16 пунктов-->
 

first-line: - применяется к первой строке абзаца.

Пример:

str:first-line {text-decoration: underline;}    <!--str: - задание стиля текста, атрибут, подчеркивание первой строки-->


 

Печать

 

 

 

В этой главе мы рассмотрим особенности вывода информации на принтер, на примере которых показаны способы печати текста на принтере и их значения.



page-break-before: - устанавливает, будет ли перед текущим элементом при печати Web-страницы производиться прогон листа.
page-break-before: auto; - передает управление размещением информации на листе операционной системе (значение по умолчанию);
page-break-before: always; - заставляет принтер прогнать лист перед печатью текущего элемента страницы;
page-break-before: empty string; - запрещает принтеру делать это в любом случае.

Пример:

page-break-before: auto;    <!--прогон листа определяет система-->
 

page-break-after: - устанавливает, будет ли после текущего элемента при печати Web-страницы производиться прогон листа.
page-break-after: auto; - передает управление размещением информации на листе операционной системе (значение по умолчанию);
page-break-after: always; - заставляет принтер прогнать лист после печати текущего элемента страницы;
page-break-after: empty string; - запрещает принтеру делать это в любом случае.

Пример:

page-break-after: auto;    <!--прогон листа определяет система-->

 

Правила в CSS

 

 

 

Правила используются в таблицах стилей для особых нужд. Для установления правила используется символ @ "собака".



@charset - задает текстовую кодировку для внешней таблицы стилей.
Может использоваться только во внешних таблицах стилей и должна быть первой строкой в файле.

Пример:

@charset {"Windows-1251;"}    <!--атрибут, кодировка для кириллицы-->
 

@font-face - задает файл загружаемого шрифта для использования на Web-странице.
Определение загружаемого шрифта имеет следующий формат:
font-family: - имя шрифта
src: url( - интернет-адрес файла шрифта)

Пример:

@font-face {font-family:Имя вашего шрифта; src: url Адрес файла шрифта;}    <!--атрибут, кодировка для кириллицы-->
 

@import - импортирует внешнюю таблицу стилей.

Пример:

@import url"http://www.ваш домен.ru/имя файла.css;"}    <!--атрибут, адрес, имя нужного файла-->
 

@page - используется при задании размеров, ориентаций и полей печатной страницы в таблице стилей.
Селектор страницы может принимать одно из трех значений:
first: - первая печатная страница;
left: - четная страница;
right: - нечетная страница.

Пример:

@page:first {margin-top: 2см; margin-bottom: 2см}    <!--здесь мы задали для первой печатной страницы поля по два сантиметра сверху и снизу-->
 

@important - используется для задания неперекрываемых установок стиля.

Пример:

<STYLE>
P { color: red !important}
</STYLE>
...
<P style="color: green">
Этот текст останется красным.</P>    <!--здесь установки, сделанные для текстового абзаца <P>, не будут перекрыты в дальнейшем-->

 

 

 

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