CSS Шаблон

Post Reply
  • Author
  • Message
Offline
User avatar
Admin
Posts: 57
Joined: 31 Oct 2013, 13:36
Contact:

CSS Шаблон

Post by faridmmv » 15 Mar 2016, 23:34

Code: Select all

*
{
	color:black|#00FF00;
	background-color: brown|#00FF00;
	background-image: url("image.gif");
	background-repeat: repeat-x|repeat-y|repeat|no-repeat;
	background-attachment: scroll|fixed;										/*Определяет будет ли фоновое изображение прокручиваться вместе с элементом*/
	background-position: left|right|center|top|bottom|5cm 4cm;					/*определение координат позиционирования фонового изображения*/
	font-family: Arial serif|sans-serif|cursive|fantasy|monospace;				/*serif – шрифты с засечками; sans-serif – рубленые шрифты; cursive – курсивные шрифты; fantasy – декоративные шрифты; monospace – моноширинные шрифты.*/
	font-style: normal|italic|oblique;											/*normal – обычный шрифт; italic – курсивный шрифт; oblique – наклонный шрифт.*/
	font-variant: normal|small-caps;											/*small-caps – строчные буквы модифицируются в заглавные, но меньшего размера.*/
	font-weight: normal|bold;													/*normal – стандартная насыщенность шрифта; bold – полужирное начертание; Ряд браузеров поддерживает числовые значения насыщенности шрифта в пределах от 100 до 900, где 100 – сверхсветлое насыщение шрифта, 700 – стандартное, 900 – полужирное.*/
	font-size: 12px|12pt|12em|12ex|12in|12cm|12mm|12%;							/*Пиксели - px; Пункты - pt; Размер литеры 'm' текущего шрифта - em; Размер литеры 'x' текущего шрифта - ex; Дюймы - in; Сантиметры - cm; Миллиметры - mm; Проценты - %*/
	text-align: center|left|right|justify|auto|start|end;						/*justify– выравнивание по ширине; auto – тип выравнивания не изменяется; start – в случае, если направление текста слева - направо, то выравнивает по левому краю; если направление текста справа - налево – по правому краю; end – в случае, если направление текста слева - направо, то выравнивает по правому краю; если направление текста справа - налево – по левому краю;*/
	text-decoration: blink|line-through|overline|underline|none;				/*blink – мигающий текст; line-through – зачеркнутый текст; overline – линия над текстом; underline – линия под текстом (подчеркивание); none – эффектов нет.*/
	text-indent: 10%;															/*Задает величину отступа для первой строки текста (text-indent: 10%). Могут быть указаны конкретные значения и процентные.*/
	text-overflow: clip|ellipsis;												/*clip – текст обрезается, если выходит за границы элемента; ellipsis – при выходе текста за границы добавляется многоточие;*/
	text-shadow: red 5 5;														/*сдвиг по горизонтали – положительное значение сдвигает тень вправо, отрицательное – влево; сдвиг по вертикали – положительное значение опускает тень относительно текста, отрицательное – поднимает; радиус размытия – большее значение сглаживает тень, по - умолчанию параметр равен 0.*/
	text-transform: capitalize|lowercase|uppercase;								/*capitalize – первая литера каждого слова становится заглавной; lowercase – символы текста преобразовываются в нижний регистр; uppercase – символы текста преобразовываются в верхний регистр.*/
	vertical-align: baseline|bottom|middle|sub|super|text-bottom|text-top|top;	/*baseline – выравнивание базовой линии по соответствующей линии родительского элемента, в случае с ячейкой таблицы происходит выравнивание по базовой линии первой текстовой строки; bottom – выравнивание элемента по нижней части родительского элемента, в случае с ячейкой таблицы происходит выравнивание по нижнему краю; middle – выравнивание по центру родительского элемента, в случае с ячейкой таблицы происходит выравнивание по середине; sub – выравнивание базовой линии элемента по базовой линии нижнего индекса родительского элемента; super – выравнивание базовой линии по базовой линии верхнего индекса родительского элемента; text-bottom – выравнивание нижнего края фрагмента по нижнему краю текста родителя; text-top – выравнивание верхнего края фрагмента текста по верхнему краю текста родителя; top – выравнивание верхнего края фрагмента по верхнему краю текста родителя, в случае с ячейкой таблицы происходит выравнивание по верхнему краю.*/
	white-space: normal|nowrap|pre|pre-line|pre-wrap;							/*normal – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер самостоятельно разрывает текст и переводит его на новые строки; nowrap – несколько пробелов преобразуются в один, символы перевода строк также преобразуются в пробелы, браузер не осуществляет разрыв и перевод строк; pre – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно не выполняет разрыв и перенос строк. Фактически, текст выглядит образом, определенным разработчиком, без каких - либо изменений; pre-line – несколько пробелов преобразуются в один, символы перевода строк сохраняются, браузер самостоятельно разрывает текст и переводит его на новые строки; pre-wrap – последовательность пробелов сохраняется, символы перевода строк также сохраняются, браузер самостоятельно выполняет разрыв и перенос строк;*/
	word-wrap:normal|break-word;												/*normal – строки разрываются только по пробелам; break-word – браузер может выполнять разрыв строк внутри слов.*/
	float: left|right|none;														/*left – элемент выравнивается по левому краю родителя, остальные элементы "обтекают" указанный по правой стороне; right – элемент выравнивается по правому краю родителя, остальные элементы "обтекают" указанный по левой стороне; none – обтекание элемента не указано; inherit – значение наследуется от родителя.*/
	clear: left|right|both|none;												/*left – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно left; right – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно right; both – элемент будет расположен ниже всех элементов, значение атрибута float у которых равно left или right; none – отмена свойств атрибута clear; inherit –значение наследуется от родителя.*/
	overflow: visible|hidden|scroll|auto;										/*visible – отображается весь контент даже за пределами контейнера; hidden – отображается только область внутри контейнера, оставшаяся часть контента скрывается; scroll – добавление полос прокрутки контейнеру, полосы будут отображаться даже если в них нет необходимости; auto – полосы прокрутки появятся только в случае необходимости. Существует возможность управления отображением содержания контейнера отдельно по горизонтали и вертикали, соответственно при помощи атрибутов overflow-x и overflow-y, значения которых аналогичны значениям overflow.*/
	content: строка|attr(параметр)|open-quote|close-quote|url|counter|normal;	/*Строка - Текст, который добавляется на веб-страницу, строка при этом должна браться в двойные или одинарные кавычки. Допускается использовать юникод для вставки спецсимволов. Спецсимволы HTML которые начинаются с амперсанда (§ например), будут отображаться как есть, т.е. простым текстом (§, а не §).; attr(параметр) - Возвращает строку, которая является значением параметра тега указанного в скобках. Например, a:after {content:attr(href)} добавит после ссылки её адрес, т.е. значение атрибута href. Если указанного атрибута нет, вернется пустая строка.; open-quote - Вставляет открывающую кавычку, тип которой устанавливается с помощью стилевого свойства quotes.; close-quote - Вставляет закрывающую кавычку.; no-open-quotes - Отменяет добавление открывающей кавычки.; no-close-quote - Отменяет добавление закрывающей кавычки.; url - Абсолютный или относительный адрес вставляемого объекта. Если указанный файл браузер не может отобразить, то значение игнорируется.; counter - Выводит значение счетчика, заданного свойством counter-reset.; none - Не добавляет никакое содержание.; normal - Задается как none для псевдоэлементов :before и :after.*/
	/*Большинство атрибутов стилей, помимо прочих, также может принимать значение inherit, это означает, что значение атрибута будет унаследовано от значения аналогичного атрибута родительского элемента.*/
}

strong + p {color: red}															/*При помощи данных селекторов задаются стили для элементов, располагающихся сразу же за другим элементом. <strong>some text</strong> <p>some text</p> more text <p> and more text</p>*/
a[href="doc.htm"]{}																/*Следующий стиль будет применен только к содержимому тега <a>, значение атрибута href которого соответствует doc.htm.*/
img[alt~="word"] {border: 1px double black}										/*В этом случае стиль будет применен к любому тегу <img>, атрибут alt которого содержит слово word.*/
img[title|="word"] {border: 1px double black}									/*Стиль будет применен к любому тегу <img>, значение title которого содержит "word-".*/
a:active|link|focus|hover|visited|first-child{color: red}						/*active – стиль применяется к элементу, активированному пользователем; link – стиль применяется к непосещенным ссылкам; focus – стиль применяется к элементу при получении им фокуса; hover – стиль активизируется, когда курсор находится в пределах элемента; visited – стиль применяется к посещенным гиперссылкам; first-child – стиль применяется к первому дочернему элементу селектора.*/
Post Reply

Who is online

Users browsing this forum: No registered users and 1 guest