Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.05.2012, 10:38
Аспирант
Отправить личное сообщение для mister_maxim Посмотреть профиль Найти все сообщения от mister_maxim
 
Регистрация: 09.02.2009
Сообщений: 57

установка css свойств по умолчанию за 1 шаг.
Собственно сабж, как это сделать?

Задача такая - пишу пользовательский скрипт. Он выводит на любых сайтах панельку с различными инструментами, т.е. меняет DOM структуру документа - панельку вставляет как первый элемент div в body.
На чистой странице - без таблиц стилей, панелька отображается нормально, для неё и элементов внутри неё я использую свои стили (по селекторам div.myPanel, div.myPanel div, div.myPanel input) или внутренние стили элементов, через их свойство style.

Но хотелось бы чтобы панелька точно также отображалась и на любых сайтах. Но некоторые сайты нарушают вид, как я догадываюсь на панельку действуют предустановленные на сайте стили. Значит мне надо отключить их воздействие на элементы в своей панельки, выход я вижу в явной установке всех свойств css элементам своей панели какие установлены по умолчанию. Но. т.к. всех свойств css - весьма много, то может есть другой способ отключить воздействия предустановленных стилей на элементы? Или может приведёте сам *.css файл со всеми установленными по умолчанию свойствами на всех html тегах?
Ответить с цитированием
  #2 (permalink)  
Старый 15.05.2012, 08:18
Аватар для tropiko
Аспирант
Отправить личное сообщение для tropiko Посмотреть профиль Найти все сообщения от tropiko
 
Регистрация: 23.06.2011
Сообщений: 44

Вам необходим CSS Reset. Но только не для всего документа, как это обычно делается для html, body и прочего, а только для панели.

Можно сделать корневой элемент панели (типа #myPanel__root), и писать стили каскадом от него.

Примерно так:
#myPanel__root *{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	font-size: 100%;
}
#myPanel__root a{
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

Ну и так далее.

Не знаю, как здесь на форуме относятся к ссылка не внешние ресурсы, поэтому гуглите запрос "reset.css"

UPDATE:
Вот стандартный reset.css, модифицируете для себя
html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, sub, sup, b, u, i,  dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	vertical-align: baseline;
	background: transparent;
	font-size: 100%;
}
a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
table {
	border-collapse: collapse; 
	border-spacing: 0;
}
td, td img {
	vertical-align: top;
} 
input, select, button, textarea {
	margin: 0;
	font-size: 100%;
}
input[type="text"], input[type="password"], textarea {
	padding: 0;
}
input[type="checkbox"] {
	vertical-align: bottom;
}
input[type="radio"] {
	vertical-align: text-bottom;
}
sub {
	vertical-align: sub;
	font-size: smaller;
}
sup {
	vertical-align: super;
	font-size: smaller;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display:block;
}
nav ul {
	 list-style:none;
}

Последний раз редактировалось tropiko, 15.05.2012 в 08:20. Причина: reset.css
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Задание Css свойств по средствам Jquery IONEX jQuery 5 09.01.2012 14:00
Установка свойств на странице amperykl Элементы интерфейса 6 21.02.2011 22:08
JQuery CSS анализатор javascript jQuery 2 15.08.2010 20:27
Подскажите по CSS меню Александр_1988 Элементы интерфейса 1 17.05.2010 10:58
Определение свойств стиля в javascript, если в CSS он задан особым образом SunnyDay Общие вопросы Javascript 13 13.03.2010 18:09