Не можете переместить встроенный стиль в таблицу стилей? - PullRequest
Новая
       1

Не можете переместить встроенный стиль в таблицу стилей?

0 голосов
/ 16 декабря 2011

Я уверен, что это глупый вопрос, но я не могу переместить этот внутренний (кнопка) встроенный стиль в таблицу стилей: 

<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type  = 'button'
       id    = 'sButton2'
       style = 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
The quick brown fox
</label>

Я пробовал это: 

<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<label style='white-space:nowrap; line-height:14px; height:14px; vertical-align:bottom; '>
<input type  = 'button'
       id    = 'sButton2' >
The quick brown fox
</label>

и это: 

<style type="text/css">
.sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>
...
<input type  = 'button'
       id    = 'sButton1'
       class = 'sButton' >

но ни одна из этих работ; стиль не применяется. Есть идеи, что я делаю не так?

Спасибо.

EDIT

Извините, ребята, сейчас полночь, я (была!) Только что легла спать, и я облажалась, вырезая и вставляя. Синтаксис таблицы стилей на самом деле правильный - я исправил это выше. Другая информация:

1 - таблица стилей находится в разделе заголовка одного HTML-файла. Над ним уже есть пара jQueryUI, и я скопировал синтаксис из них;

2 - Я думаю, что к кнопкам применяется другой стиль, но я надеялся, что # sButton2 переопределит это;

3 - Я не могу получить даже самый простой стиль из таблицы стилей для применения на кнопки. Если я просто установлю ширину кнопки, например, ничего не произойдет, хотя встроенная ширина работает;

4 - это не зависит от браузера - в F / F, Opera, Chrome;

Еще раз спасибо.

EDIT2

Только что попытался добавить! Важное к концу таблицы стилей, без изменений в F / F & Chrome: 

...margin-right:12px; !important }

Ответы [ 7 ]

4 голосов
/ 16 декабря 2011 
<style type="text/css">
#sButton2 { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >
</style>

должно быть 

<style type="text/css">
#sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }
</style>

Первый { должен заканчиваться }, а не >.И стили не в кавычках, они просто заключены в фигурные скобки.Вы также должны посмотреть, что является стандартным для вашего HTML-кода.Обычно элементы располагаются так: 

<input type="button" id="sButton2" />

Хорошая идея - следовать таким стандартам.

2 голосов
/ 16 декабря 2011

ваш внутренний стиль заканчивается на > вместо }

, кроме того, он должен быть в вашем head теге

и наконец, почему вы заключаете свой стиль в одинарные кавычки?

2 голосов
/ 16 декабря 2011

Измените 

#sButton { 'cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px' >

на 

#sButton { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px }

Это должно сделать.

(удалите 'в начале и в конце и замените> наа})

1 голос
/ 16 декабря 2011 
<style type="text/css">
    .sButton {
    cursor:pointer; 
    width:30px; 
    height:13px; 
    float:left; 
    margin-bottom:2px; 
    margin-right:12px
</style>

<input type="button" id="sButton1" class="sButton">

http://jsfiddle.net/charlescarver/aQHyK/

1 голос
/ 16 декабря 2011

Глупый вопрос, но вы уверены, что таблица стилей загружается?Я видел, где у людей есть несколько таблиц стилей, и они загружают неправильную или они редактировали неправильную.

Возможно, позже в вашей таблице стилей также будет иметься переопределенный стиль.У вас есть какие-нибудь стили ввода?Идентификатор должен переопределять менее специфичные стили, но в некоторых браузерах есть ошибки, с которыми вам, возможно, придется работать.

Попробуйте использовать! Важное

DOH!Да, как уже говорили другие, ваша проблема заключается в одинарных кавычках вокруг ваших атрибутов CSS.

0 голосов
/ 16 декабря 2011

Исправлено, с большой помощью Firebug (что отличное программное обеспечение).Тег ввода находится в диалоговом окне jQueryUI и наследовал «width: 95%» от «#dialog input».«Ширина: 30 пикселей» в моей таблице стилей игнорировалась, пока я не изменил ее на «Ширина: 30 пикселей! Важно» во всех F / F, Chromium и Opera.Он был проигнорирован как в стилях div (# sButton2), так и в классе (.sButton).

Я не понимаю этого.Какой смысл наследования, если вы не можете переопределить его, не добавляя произвольные! Важные?Наследование css нарушено?Разве не важно просто признать, что она сломана?

Я изначально думал, что вся таблица стилей игнорируется, потому что кнопка ввода расширилась до 95% и выглядела так, как будто все остальное игнорируется какЧто ж.Однако в конце концов я понял, что часть стиля действительно работает - курсор: указатель действительно показывает курсор.

Спасибо всем.

0 голосов
/ 16 декабря 2011

# - правильный префикс для идентификаторов (как вы на самом деле используете во втором примере кода), но вы не должны заключать в кавычки код CSS. Попробуйте это так: 

<style type="text/css">
    #sButton2 { cursor:pointer; width:30px; height:13px; float:left; margin-bottom:2px; margin-right:12px; }
</style>

Выполнение проверки в коде (что всегда является хорошей идеей) также скажет вам все это!

...