THIRD EYE: frpg search system

Объявление

ПОДДЕРЖКА И ОБНОВЛЕНИЕ КАТАЛОГА ПРЕКРАЩЕНЫ. ФОРУМ ЗАКРЫТ. СПАСИБО ВСЕМ, КТО БЫЛ.

правила новости байты жанры фэндомы партнерство

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » THIRD EYE: frpg search system » Поиск, помощь и поддержка » вёрстка, и с чем её едят?

вёрстка, и с чем её едят?

Страница: 1

Сообщений 1 страница 16 из 16

1

  • Автор: Watcher
  • frpg search system
  • Watcher
  • Сообщений: 349
  • Уважение: +4

Здесь находятся общие статьи о верстке, стилях и скриптах с которыми вам стоит ознакомиться, если вы решили разобраться в данном вопросе.

АБВГ
Баннеры внизу форума без предварительной загрузки
Выделить код
Возвращение кнопки "новые сообщения"
Градиент
ДЕЁЖ

ЗИКЛ
Запрет переброса на первую страницу при удалении тем и сообщений
Коды для отключения дополнений
МНОП
Основы CSS и разбор стандартной стуктуры
Онлайн сервисы генерации и проверки CSS кода при верстке
Пиар-вход
Приоритет (!important)
РСТУ
Рамка
Сворачивание категорий
Счётчик символов в форме ответа
Универсальный скрипт замены
ФХЦЧ
Фон
ШЩЬЪ

ЫЭЮЯ

0

2

  • Автор: Watcher
  • frpg search system
  • Watcher
  • Сообщений: 349
  • Уважение: +4

Внимание! данная статья взята с http://futura.rusff.me/ с личного разрешения Чиби и принадлежит своему автору. Мы лишь надеемся сохранить и передать эти полезные знания.

ОСНОВЫ CSS И РАЗБОР СТАНДАРТНОЙ СТУКТУРЫ

Пункт первый. Основы
Принцип построение кода:

element {
parameter: argument;
parameter: argument;
parameter: argument;
}

element - номер и название элемента. Это может быть столбец, логотип, иконка и т.д.
parameter: - свойство этого элемента. Например, фон, высота, ширина, цвет, поля и т.д.
argument; - значение свойства. Например, у свойства "фон" может быть значение голубой, оранжевый, прозрачный и т.д.

Основные параметры

Height - высота элемента

Width - ширина элемента

Background (фон)
background-color – цвет заливки (веб-значение)
  transparent - прозрачный
  #123456 - номер цвета
background-attachment – прокрутка фона
   scroll - фон поддается прокрутке
   fixed - не поддается прокрутке.
background-image – фоновая картинка
   url ("...") – в скобках указываете адрес изображения
   none – отсутствие картинки
background-repeat – автоматическое размножение фона
   no-repeat - не размножается
   repeat-x - размножается по горизонтали
   repeat-y - размножается по вертикали
   repeat - размножается в обоих направлениях.
background-position – расположение фона. Примечание: сначала указывается расположение по вертикальной оси: top, center или bottom, затем - по горизонтальной: left, center или right.

Border (рамка)
border-color – цвет рамки (веб-значение)
border-width – толщина рамки (px)
border-style – стиль начертания
   none – отсутствие рамки
   dotted – пунктир (точки)
   dashed – штрих-пунктир
   solid - одинарная
   double - двойная
   groove – трехмерный эффект
   ridge - трехмерный эффект возвышения
   inset - трехмерный эффект углубления
   outset - трехмерный эффект выпуклости фона
border-top – параметр верхней кромки
border-bottom – параметр нижней кромки
border-left – параметр левой кромки
border-right – параметр правой кромки

Color (цвет) – цвет шрифта элемента (веб-значение)

Font (шрифт)
font-size – размер шрифта. Лучше задавать в размерности (px, em и т.д.).
font-style - начертание
   normal - стандарт
   italic - курсив
   oblique - чуть менее наклонный, чем курсив
font-weight – толщина
   normal - стандарт
   bold – полужирный
letter-spacing – расстояние между буквами, задается в пикселях.
font-family – название шрифта, задается полное название в кавычках (например "Calibri")

Text (текст)
text-align - выравнивание текста внутри элемента.
   left - по левому краю
   right - по правому краю
   center - по центру
   justify - по ширине
text-decoration - украшение текста
   underline - подчеркивание
   overline - верхнее подчеркивание
   none - никакого
   line-through - перечеркивание
text-shadow - тень текста
text-transform - преобразование текста
  capitalize - первый символ каждого слова в предложении будет заглавным, остальные символы свой вид не меняют.
  lowercase - все символы текста становятся строчными (нижний регистр).
  uppercase - все символы текста становятся прописными (верхний регистр).

Display – отображение элемента. Значения:
   none - отсутствует
   block –
   list-item – элемент как часть списка, присваивается маркер
   inline – вывод элемента в одну строку

Padding - отступы вокруг основного объекта
  padding-top - верхняя отбивка
  padding-bottom - нижняя отбивка
  padding-left - левая отбивка
  padding-right - правая отбивка.

Margin - отступы дочерних объектов
  margin-top - верхний отступ
  margin-bottom - нижний отступ
  margin-left - левый отступ
  margin-right - правый отступ

Vertical-align - выравнивание элемента по вертикали
   top - по верхнему краю
   bottom - по нижнему
   middle - посередине

Размерности

em – высота шрифта
ex – высота буквы
px - пикселы
in - дюймы
cm - сантиметры
mm - миллиметры
pt - пункты
% - проценты

0

3

  • Автор: Watcher
  • frpg search system
  • Watcher
  • Сообщений: 349
  • Уважение: +4

Внимание! данная статья взята с http://futura.rusff.me/ с личного разрешения Чиби и принадлежит своему автору. Мы лишь надеемся сохранить и передать эти полезные знания.

ПИАР-ВХОД
в html-низ

Код:
<!-- Пиар-вход v.2 -->
<script src="http://forumstatic.ru/files/0015/c4/3f/26781.js"></script>
<script type="text/javascript">
PR.nick = 'Реклама'; //Ник PR-аккаунта
PR.pass = '1111'; //Пароль PR-аккаунта
PR.btn_text = 'PR-вход'; //Надпись на кнопке PR-входа(или ссылка на картинку);
PR.set();</script>

1. PR.btn_text   - текст ссылки в меню навигации или ссылка на картинку (Тег картинки установится автоматом, если вставлена ссылка)
2. Для подключения нескольких аккаунтов с быстрым входом (например, один аккаунт для рекламы, другой для чтения постов форума) - размножаем(в дополнение к первому) эту часть скрипта (с нужными данными):

<script type="text/javascript">
PR.nick = 'Реклама'; //Ник PR-аккаунта
PR.pass = '1111'; //Пароль PR-аккаунта
PR.btn_text = 'PR-вход'; //Надпись на кнопке PR-входа(или ссылка на картинку);
PR.set();</script>

Если нужно установить переадресацию после залогинивания на определенный URL, - ставим в HTML низ:

Код:
<script>
if(GroupID==3)$('#PRlogin').on('submit',function(){
  $(this).find('input[name="redirect_url"]').val('Ccылка');
});
</script>

*Пункты меню Пиар-входа имеют селектор  #navpr_N, где N - номер кнопки Пиар-входа по счету слева
(Для первой кнопки - #navpr_1, для второй - #navpr_2 и т.д)

Перекрыть доступ к профилю

Код:
<style>
#pun-main #profile1[action$="id=1"]{
display:none;
}
</style>

"id=1" меняем на ID Пиар ника.

0

4

  • Автор: Watcher
  • frpg search system
  • Watcher
  • Сообщений: 349
  • Уважение: +4

Внимание! данная статья взята с http://futura.rusff.me/ с личного разрешения Чиби и принадлежит своему автору. Мы лишь надеемся сохранить и передать эти полезные знания.

ВЫДЕЛИТЬ КОД
в html-низ

Код:
<script>
function select_text(elem) {
        var rng, sel;
        if ( document.createRange ) {
            rng = document.createRange();
            rng.selectNode( elem )
            sel = window.getSelection();
            var strSel = ''+sel; 
            if (!strSel.length) {
                sel.removeAllRanges(); 
                sel.addRange( rng ); 
            }
        } else {
            var rng = document.body.createTextRange();
            rng.moveToElementText( elem );
            rng.select();
        }
    };

var div = document.getElementById('pun-main').getElementsByTagName('div');
for(x in div){
	if(div[x].className=='code-box'){
div[x].getElementsByTagName('strong')[0].innerHTML = '<a href="#" onclick="select_text(this.parentNode.parentNode.childNodes[1].getElementsByTagName(\'pre\')[0]); return false;">Выделить код</a>';
}
}
</script>

0

5

  • Автор: Watcher
  • frpg search system
  • Watcher
  • Сообщений: 349
  • Уважение: +4

Внимание! данная статья взята с http://futura.rusff.me/ с личного разрешения Чиби и принадлежит своему автору. Мы лишь надеемся сохранить и передать эти полезные знания.

СВОРАЧИВАНИЕ КАТЕГОРИЙ
by mkusher
в html-верх

Код:
<script type="text/javascript">
//cookies
function setcookie(a,b,c) {if(c){var d = new Date();d.setTime(d.getTime()+c);}if(a && b) document.cookie = a+'='+b+(c ? '; expires='+d.toUTCString() : '');else return false;}
function getcookie(a) {var b = new RegExp(a+'=([^;]){1,}');var c = b.exec(document.cookie);if(c) c = c[0].split('=');else return false;return c[1] ? c[1] : false;}
var aimg = {
open: '-',
close: '+'
}
function categorytoggle(el){
var cat = $(el).parents('div.category');
cat.children('div.container').toggle('slow');
el.innerHTML = el.innerHTML == aimg.open ? aimg.close : aimg.open;
var catc = getcookie(cat.attr('id'));
catc = catc == 'close' ? 'open' : 'close';
setcookie(cat.attr('id'),catc,3600*24*30*1000);
}
</script>

вместо + и - можно вставить любой другой символ или картинку

Код:
<img src="адрес" border="0" />

+ соответствует закрытому блоку, - открытому

в html-низ

Код:
<script type="text/javascript">
$('#pun-main div.category > h2 div.catleft').after('<a href="#" onclick="categorytoggle(this); return false;" style="float: right;">'+aimg.open+'</a>');
for(var i=1;i<=$('#pun-main div.category').length;i++)
    if(getcookie('pun-category'+i)=='close'){
	$('#pun-category'+i+' > div.container').css({display: 'none'});
	$('#pun-category'+i+' > h2 > a').html(aimg.close)
}
</script>

0

6

  • Автор: Watcher
  • frpg search system
  • Watcher
  • Сообщений: 349
  • Уважение: +4

Внимание! данная статья взята с http://futura.rusff.me/ с личного разрешения Чиби и принадлежит своему автору. Мы лишь надеемся сохранить и передать эти полезные знания.

БАННЕРЫ ВНИЗУ ФОРУМА БЕЗ ПРЕДВАРИТЕЛЬНОЙ ЗАГРУЗКИ
by Deff

Код:
<div class=banners align=center><span onclick="BANNERS_TOGGLE($(this).parent('.banners'))"><center><font size="3">БАННЕРЫ</font></center></span></b></a>
<div class=ba_0 style="display: none">
<style class=BanersHide>/*
<center>

...

</center>
*/</style>
</div></div>
<script>
function BANNERS_TOGGLE(Sel){Z=Sel.find(".ba_0")
if(Z.css("display")=="none"){var V=Sel.find(".ba_0 .BanersHide");if(V.html()!=null){var V1=V.html().replace(/^\/\*([\s\S]*)\*\//img,"$1");Z.html(V1);}Z.fadeIn("slow"); 
scrollTo(0, document.body.scrollHeight); 
}else Z.hide();}</script>

<font size="3">БАННЕРЫ</font> - если изменить цифру, поменяется размер шрифта.
либо заменяем это на <img src="картинка"> и вставляем картинку.

0

7

  • Автор: Watcher
  • frpg search system
  • Watcher
  • Сообщений: 349
  • Уважение: +4

Внимание! данная статья взята с http://futura.rusff.me/ с личного разрешения Чиби и принадлежит своему автору. Мы лишь надеемся сохранить и передать эти полезные знания.

СЧЕТЧИК СИМВОЛОВ В ФОРМЕ ОТВЕТА

в html-низ

Код:
<script>var a,L,epl=$("#main-reply"),str='<small id="plng" style="border:1px solid;padding:2px 3px;margin:0 20px 0 10px;">Написано символов: <b>00</b> </small>';epl.parents("fieldset").find("legend").prepend(str);function epl3(){a=epl.val().length;if(a>9){L=''}else{L='0'};$("#plng b").text(L+a)};epl3();$(".pl-quote").click(function (){setTimeout('epl3()',100)});epl.bind('mouseout mousemove keydown keypress keyup',function(e){epl3()});</script>

0

8

  • Автор: Watcher
  • frpg search system
  • Watcher
  • Сообщений: 349
  • Уважение: +4

Внимание! данная статья взята с http://futura.rusff.me/ с личного разрешения Чиби и принадлежит своему автору. Мы лишь надеемся сохранить и передать эти полезные знания.

КОДЫ ДЛЯ ОТКЛЮЧЕНИЯ ДОПОЛНЕНИЙ

в HTML-верх все коды.

Отключение кнопки Жалоба в сообщениях

Код:
<script type="text/javascript">
RusffCore.sets.show_reportBtn = 0;
</script>

Отключение сервисных смайлов

Код:
<script type="text/javascript">
RusffCore.sets.rusff_smilepack = 0;
</script>

Отключить функцию "Поделиться"

Код:
<script type="text/javascript">
RusffCore.sets.share = false;
</script>

Отключить функцию "Теги"

Код:
<script type="text/javascript">
RusffCore.sets.tags = false;
</script>

Отключить функцию "Граффити"

Код:
<script type="text/javascript">
RusffCore.sets.graffiti = false;
</script>

Отключить "сервис рекомендаций"
http://uploads.ru/i/F/n/0/Fn01L.png

Код:
<script type="text/javascript">
rusffLive.enable = false;
</script>

0

9

  • Автор: Watcher
  • frpg search system
  • Watcher
  • Сообщений: 349
  • Уважение: +4

Внимание! данная статья взята с http://futura.rusff.me/ с личного разрешения Чиби и принадлежит своему автору. Мы лишь надеемся сохранить и передать эти полезные знания.

ЗАПРЕТ ПЕРЕБРОСА НА ПЕРВУЮ СТРАНИЦУ ПРИ УДАЛЕНИИ ТЕМ И СООБЩЕНИЙ
by Deff

в начало HTML-верх

Код:
<!--Запрет перехода на первую страницу при удалении тем и сообщений -->
<script type="text/javascript" src="http://forumstatic.ru/files/0010/b4/f8/33839.js"></script>

0

10

  • Автор: Watcher
  • frpg search system
  • Watcher
  • Сообщений: 349
  • Уважение: +4

Внимание! данная статья взята с http://futura.rusff.me/ с личного разрешения Чиби и принадлежит своему автору. Мы лишь надеемся сохранить и передать эти полезные знания.

ВОЗВРАЩЕНИЕ КНОПКИ "НОВЫЕ СООБЩЕНИЯ"

в HTML-низ

Код:
<!-- НОВЫЕ СООБЩЕНИЯ -->
<script type="text/javascript">
$('#pun-ulinks ul').prepend('<li class="item1"><a href="/search.php?action=show_new">Новые сообщения</a></li>');
</script>
<!-- НОВЫЕ СООБЩЕНИЯ -->

0

11

  • Автор: Watcher
  • frpg search system
  • Watcher
  • Сообщений: 349
  • Уважение: +4

Внимание! данная статья взята с http://futura.rusff.me/ с личного разрешения Чиби и принадлежит своему автору. Мы лишь надеемся сохранить и передать эти полезные знания.

УНИВЕРСАЛЬНЫЙ СКРИПТ ЗАМЕНЫ
by Deff

Код:
<script><!--Универсальный скрипт замены. -->
function UniverСhange(selektor,changed,substitute){
$(selektor).each(function(){if ($(this).parent().html()!=null){if($(this).parent().html().indexOf(changed)!=-1){
$(this).parent().html($(this).parent().html().replace(changed,substitute));};};});}

UniverСhange("Селектор","Что меняем","На что меняем");
UniverСhange("Селектор","Что меняем","На что меняем");
</script>

строку можно размножать сколько угодно, но сильно злоупотреблять не стоит, ибо скрипт медленный и тормозит работу форумов.

Как работает

Допустим, вы хотите сменить "активны" и "посетили за сутки" в статистике. Селектор этих контейнеров - #pun-stats .item5
Тогда скрипт примет следующий вид:
UniverСhange("#pun-stats .item5","Посетили за сутки","ВАШ ТЕКСТ");
UniverСhange("#pun-stats .item5","Активны","ВАШ ТЕКСТ");

0

12

  • Автор: THIRD EYE vol.2
  • Гость

Внимание! Статья взята с  http://www.designonstop.com и принадлежит своим авторам. За что им огромное спасибо. Мы лишь надеемся сохранить и передать эти полезные знания.

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

CSS Lint (http://csslint.net/) — сервис для проверки кода вашего сайта на предмет ошибок.

Primer CSS (http://primercss.com/index.php) — вставив в диалоговое окошко HTML код, можно получить список всех упомянутых классов и ID, которые упомянуты в CSS.

Layer Styles (http://layerstyles.org/) — очень полезный сервис. На основании настроек диалогового окошка стилей слоя программы фотошоп генерирует код CSS.

Ultimate CSS Gradient Generator by ColorZilla (http://www.colorzilla.com/gradient-editor/) — представлено на выбор большое количество градиентов и их CSS коды, адаптированные под разные браузеры.

Typetester (https://www.typetester.org/) — позволяет сравнивать написание различных шрифтов и получить CSS код выбранного стиля написания.

The Web Font Combinator (http://font-combinator.com/) — сервис позволяет наглядно посмотреть как будут выглядеть различные сочетания шрифтов в заголовках, подзаголовках и в основном тексте.

CSS Compressor by CSS Drive (http://www.cssdrive.com/index.php/main/csscompressor/) — сто сервис для сжатия CSS и увеличения скорости загрузки сайта.

Px to em (http://pxtoem.com/) — таблица преобразования размеров шрифта в различные единицы измерения.

Вёрстка — это искусство.

0

13

  • Автор: THIRD EYE vol.2
  • Гость

Внимание! Статья взята с  http://htmlbook.ru и принадлежит своим авторам. За что им огромное спасибо. Мы лишь надеемся сохранить и передать эти полезные знания.

!important

Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.

!important добавлен в авторский стиль — будет применяться стиль автора.
!important добавлен в пользовательский стиль — будет применяться стиль пользователя.
!important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
!important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.

Итог от применения !important в общем случае показан в табл. 1.
http://s8.uploads.ru/aRUYG.png

Синтаксис:

Свойство: значение !important

Пример
http://sg.uploads.ru/VnQC4.png
В данном примере для одного селектора задается одно и то же свойство с разными значениями. Но поскольку к первому селектору добавляется !important, то его стиль и будет применяться на странице.

Браузеры
При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important, оно будет игнорироваться браузерами. Но только не в Intenet Explorer версии 6 и ниже.

0

14

  • Автор: THIRD EYE vol.2
  • Гость

Внимание! Статья взята с  http://htmlbook.ru и принадлежит своим авторам. За что им огромное спасибо. Мы лишь надеемся сохранить и передать эти полезные знания.

Градиент

-webkit-linear-gradient

Создаёт линейный градиент в браузерах Safari и Chrome (но вроде как отображается уже везде).

Синтаксис

background-image: -webkit-linear-gradient([<угол> | <позиция> ,] <цвет> [, <цвет>]*);

Значения
<угол> Задаёт угол наклона. Положительное значение отмеряется по часовой стрелке, отрицательное против часовой стрелки.

Угол может задаваться в следующих единицах.

В градусах. После значения пишется deg. Полный круг равен 360deg.
В градах. Обозначается как grad. Полный круг равен 400grad,
В радианах. Обозначается как rad. Полный круг равен 2π или примерно 6.2832rad.
В поворотах. Обозначается как turn. Один круг равен одному повороту и пишется как 1turn.
http://s9.uploads.ru/9ge0E.png

<цвет> Представляет собой значение цвета, за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<позиция> Для записи позиции применяются ключевые слова top, bottom и left, right, а также их сочетания. Порядок слов не важен, можно написать left top или top left. В табл. 1 приведены разные позиции и тип получаемого градиента для цветов #000 и #fff (от чёрного к белому).
http://s9.uploads.ru/yIFMC.png
http://s4.uploads.ru/B4wtp.png

-webkit-radial-gradient
Описание
Создаёт радиальный градиент в браузерах Safari и Chrome.

Синтаксис

background-image: -webkit-radial-gradient([<угол> || <позиция>,] [<форма> || <размер>,] <цвет> [, <цвет>]*);

Значения
<угол> Влияет только при эллиптическом градиенте.
<позиция> Позиция точки пишется аналогично значениям свойства background-position с помощью ключевых слов или доступных единиц измерения вроде пикселов или процентов; ниже приведены возможные сочетания.

top left = left top = 0% 0% (в левом верхнем углу);
top = top center = center top = 50% 0% (по центру вверху);
right top = top right = 100% 0% (в правом верхнем углу);
left = left center = center left = 0% 50% (по левому краю и по центру);
center = center center = 50% 50% (по центру) — это значение по умолчанию;
right = right center = center right = 100% 50% (по правому краю и по центру);
bottom left = left bottom = 0% 100% (в левом нижнем углу);
bottom = bottom center = center bottom = 50% 100% (по центру внизу);
bottom right = right bottom = 100% 100% (в правом нижнем углу).

<форма> Задаёт форму радиального градиента — круг (circle) или эллипс (ellipse), которые различаются своим видом. По умолчанию устанавливается эллиптический градиент.
<цвет> Представляет собой значение цвета (см. цвет), за которым идёт необязательная позиция цвета относительно оси градиента, она задаётся в процентах от 0% до 100% или в любых других подходящих для CSS единицах.
<размер> Устанавливает размер градиента. В табл. 1 перечислены возможные значения размера с их описанием и результатом для белого и чёрного цвета. Код и вид дан для кругового и эллиптического градиента.
http://sg.uploads.ru/Sf1vy.png
http://sa.uploads.ru/ubJXv.png

0

15

  • Автор: THIRD EYE vol.2
  • Гость

Внимание! Статья взята с  http://htmlbook.ru и принадлежит своим авторам. За что им огромное спасибо. Мы лишь надеемся сохранить и передать эти полезные знания.

background

Описание
Универсальное свойство background позволяет установить одновременно до пяти характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. В CSS3 допустимо указывать параметры сразу нескольких фонов, перечисляя их через запятую.

Синтаксис
background: [background-attachment || background-color || background-image || background-position || background-repeat] | inherit
---
background: [<фон>, ]* <последний_фон>

Здесь:

<фон> = [background-attachment || background-image || background-position || background-repeat] | inherit

<последний_фон> = [background-attachment || background-color || background-image || background-position || background-repeat] | inherit

Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.

Значения
Любые комбинации пяти значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить. inherit наследует значение у родительского элемента.

background-color

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

Синтаксис
background-color: <цвет> | transparent | inherit

Значения
transparent Устанавливает прозрачный фон.
inherit Наследует значение родителя.

background-image

Описание
Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. В CSS3 допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.

Синтаксис
background-image: url(путь к файлу) | none | inherit
background-image: url(путь к файлу) | none[, url(путь к файлу) | none]*

Значения
url В качестве значения используется путь к графическому файлу, который указывается внутри конструкции url(). Путь к файлу при этом можно писать как в кавычках (двойных или одинарных), так и без них.
none Отменяет фоновое изображение для элемента.
inherit Наследует значение родителя.

background-position

Описание
Задает начальное положение фонового изображения, установленного с помощью свойства background-image. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Синтаксис
background-position: [left | center | right | <проценты> | <значение>] || [top | center | bottom | <проценты> | <значение>] | inherit
background-position: <позиция>[, <позиция>]*

Здесь:
<позиция> = [left | center | right | <проценты> | <значение>] || [top | center | bottom | <проценты> | <значение>] | inherit.

Значения
У свойства background-position два значения, положение по горизонтали (может быть — left, center, right) и вертикали (может быть — top, center, bottom). Кроме использования ключевых слов положение также можно задавать в процентах, пикселах или других единицах. Если применяются ключевые слова, то порядок их следования не имеет значения, при процентной записи вначале задается положение рисунка по горизонтали, а затем, через пробел, положение по вертикали. Отношение между используемыми ключевыми словами и процентной записью следующее.

top left = left top = 0% 0% (в левом верхнем углу)
top = top center = center top = 50% 0% (по центру вверху)
right top = top right = 100% 0% (в правом верхнем углу)
left = left center = center left = 0% 50% (по левому краю и по центру)
center = center center = 50% 50% (по центру)
right = right center = center right = 100% 50% (по правому краю и по центру)
bottom left = left bottom = 0% 100% (в левом нижнем углу)
bottom = bottom center = center bottom = 50% 100% (по центру внизу)
bottom right = right bottom = 100% 100% (в правом нижнем углу)
В скобках указано, где располагается фоновый рисунок относительно контейнера.

При inherit значение наследуется у родителя элемента.

background-repeat
Описание
Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. В CSS3 допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

Синтаксис
background-repeat: no-repeat | repeat | repeat-x | repeat-y | inherit
background-repeat: <повторение> [ , <повторение> ]*

Здесь:
<повторение> = repeat-x | repeat-y | [repeat | space | round | no-repeat]{1,2}

Допустимо указывать два значения, первое ключевое слово задаёт повторение по горизонтали, второе по вертикали.

Значения
no-repeat Устанавливает одно фоновое изображение в элементе без его повторений, положение которого определяется свойством background-position (по умолчанию в левом верхнем углу). Аналогично no-repeat no-repeat.
repeat Фоновое изображение повторяется по горизонтали и вертикали. Аналогично repeat repeat.
repeat-x Фоновый рисунок повторяется только по горизонтали. Аналогично repeat no-repeat.
repeat-y Фоновый рисунок повторяется только по вертикали. Аналогично no-repeat repeat.
inherit Наследует значение родителя.
space Изображение повторяется столько раз, чтобы полностью заполнить область; если это не удаётся, между картинками добавляется пустое пространство.
round Изображение повторяется так, чтобы в области поместилось целое число рисунков; если это не удаётся сделать, то фоновые рисунки масштабируются.

background-size
Описание
Масштабирует фоновое изображение согласно заданным размерам.

Синтаксис
background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain

Значения
<значение> Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры (cm), em и др.
<проценты> Задает размер фоновой картинки в процентах от ширины или высоты элемента.
auto Если задано одновременно для ширины и высоты (auto auto), размеры фона остаются исходными; если только для одной стороны картинки (100px auto), то размер вычисляется автоматически исходя из пропорций картинки.
cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или высота равнялась ширине или высоте блока.
contain Масштабирует изображение с сохранением пропорций таким образом, чтобы картинка целиком поместилась внутрь блока.
Если установлено одно значение, оно задает ширину фона, второе значение принимается за auto. Пропорции картинки при этом сохраняются. Использование двух значений через пробел задает ширину и высоту фоновой картинки.

0

16

  • Автор: THIRD EYE vol.2
  • Гость

Внимание! Статья взята с  http://htmlbook.ru и принадлежит своим авторам. За что им огромное спасибо. Мы лишь надеемся сохранить и передать эти полезные знания.

border

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

border: [border-width || border-style || border-color] | inherit
Значение border-width определяет толщину границы. Для управления ее видом предоставляется несколько значений border-style. Их названия и результат действия представлен на рис. 1.
http://htmlbook.ru/files/images/css/border_style.png

border-color устанавливает цвет границы, значение может быть в любом допустимом для CSS формате.

inherit наследует значение родителя.

border-style

Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.
border-style: [none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset] {1,4} | inherit

Для управления видом границы предоставляется несколько значений свойства border-style. Вид зависит от используемого браузера и заданной толщины границы. В табл. 1 приведены названия стилей и получаемая рамка при разных значениях толщины — 1, 3, 5 и 7 пикселов.

Кроме перечисленных в таблице значений используются следующие ключевые слова.
http://s5.uploads.ru/HykNs.png

none Не отображает границу и ее толщина (border-width) задается нулевой.
hidden Имеет тот же эффект, что и none за исключением применения border-style к ячейкам таблицы, у которой значение свойства border-collapse установлено как collapse. В этом случае вокруг ячейки граница не будет отображаться вообще.
inherit Наследует значение родителя.

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества и указан в табл. 2.

http://s8.uploads.ru/UBbMH.png

0

Страница: 1

Вы здесь » THIRD EYE: frpg search system » Поиск, помощь и поддержка » вёрстка, и с чем её едят?

Рейтинг форумов | Создать форум бесплатно