2017-01-08 2 views
1

Я хотел id изображение в HTML, чтобы изменить его в CSS, но он не работает, вот код:Могу ли я добавить идентификатор к изображению в HTML

#1{ 
 
    border-width: 0px; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    position: absolute; 
 
    width: 25%; 
 
    height: 25%; 
 
}
<img src="https://static1.squarespace.com/static/5492f3e3e4b0c40c56916924/t/586590b3d1758e4aacbf4aa4/1483051196842/?format=1500w" id="1"/> 
 

 

, но изображение не отформатировано так, как я хотел быть. Так что мне нужно добавить код в сам HTML или что мне нужно делать.

+0

Где вы его стиль с помощью CSS? –

+1

Идентификатор должен начинаться с алфавитного символа, например, как 'id = 'img1'' для тега img и ссылаться на него в css:' # img1' –

ответ

0

Это потому, что вы использовали номер, вместо этого переключитесь на нечто вроде «одного».

Искушение использовать что-то вроде «1800number_box» для удостоверения личности? Не. Потому что это не сработает. Идентификаторы классов могут начинаться с числа, но идентификаторы идентификаторов - нет.

https://css-tricks.com/ids-cannot-start-with-a-number/

0

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

<img src="https://static1.squarespace.com/static/5492f3e3e4b0c40c56916924/t/586590b3d1758e4aacbf4aa4/1483051196842/?format=1500w" class="some-style"/> 

Тогда:

.some-style{ 
border-width: 0px; 
margin: 0px; 
padding: 0px; 
position: absolute; 
width: 25%; 
height: 25%; 
} 

Теперь вы можете использовать этот же стиль снова и снова, без необходимости добавить больше в файл CSS, так как там может быть только один id элемент на странице, но вы можете имеют столько же элементов, сколько вы хотите, с тем же классом.

1

Вы уже определили идентификатор атрибута ID = «1», но это значение идентификатор не отвечает следующим критериям

должен содержать по крайней мере один символ

Читать HTML5 спецификации: https://www.w3.org/TR/html5/dom.html#the-id-attribute

Но также, если вы находитесь на HTML 4, спецификация https://www.w3.org/TR/html401/types.html#type-name говорит

ID должен начинаться с буквы al etter ([A-Za-z]), за которым может следовать любое количество букв, цифр ([0-9]), дефис («-»), подчеркивание («_»), двоеточия («:») и периоды (".").

Попробуйте с

#myimage 
 
{ 
 
border-width: 0px; 
 
margin: 0px; 
 
padding: 0px; 
 
position: absolute; 
 
width: 25%; 
 
height: 25%; 
 
}
<img src="https://static1.squarespace.com/static/5492f3e3e4b0c40c56916924/t/586590b3d1758e4aacbf4aa4/1483051196842/?format=1500w" id="myimage"/>

+0

@downvoter: не забывайте также причину? – Deep

+0

Я предполагаю, что вы были заблокированы, потому что «1» является символом в определении, используемом для слова «символ». – Anne

0

Предполагая, что вы изучаете CSS, вы, скорее всего, будет искать эти 2 ошибки:

ваш идентификатор не может начинаться с цифр: изменение id = 1 до id="one"

вторая возможная ошибка в том, что вы не положить CSS в нужной области, поместите CSS в <style></style> теги в <head></head>

для внешних таблиц стилей, не забудьте поставить это: <link rel="stylesheet" type="text/css" href="mystyle.css">

0

MDN говорит:

Примечание: Использование символов, кроме букв и цифр ASCII, '_', '-' и '.' могут возникнуть проблемы совместимости, поскольку они не разрешены в HTML-формате 4. Хотя это ограничение было снято в HTML 5, идентификатор должен начинаться с буквы для совместимости.

Источник: https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id

HTML 4.01 spec:

ID и ИМЯ маркеры должны начинаться с буквы ([A-Za-Z]) и может сопровождаться любым числом букв, цифр ([0-9]), дефис («-»), подчеркивания («_»), двоеточия («:») и периоды («.»).

Однако HTML5 spec и WHATWG HTML Living Standard позволяет идентификаторы начинаться с цифр:

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

Так что я бы посоветовал придерживаться рекомендации MDN: Для совместимости причины, не начинайте свой идентификатор или имя с цифры. Вместо id="1" используйте что-то вроде id="img1".

+0

Могу ли я спросить, почему мой ответ был приостановлен всего через несколько секунд после того, как я разместил его? Это даже не возможно прочитать, что быстро ... – StanE

+0

Я видел много downvotes других людей, отправляющих ответы. Это не должно быть правдоподобным - почему вам разрешено публиковать ответ и быть способным понизить чей-либо ответ на тот же вопрос? –

+0

Хм? Единственное голосование, которое я сделал здесь, было для ответа Бенио (потому что это неплохо, и я этого не знал) - и это была передо мной. – StanE

2

Хотя 1 является правильное значением id, CSS синтаксис #1 не соответствует идентификатору 1, из-за плохой дизайн CSS.

Однако обе формы:

  • [id=1]
  • #\31

будут работать и относятся к идентификатору 1.

-1

Попробуйте это:

#myimage, img.myimage { 
 
     border-width: 0px; 
 
     margin: 0px; 
 
     padding: 0px; 
 
     position: absolute; 
 
     width: 25%; 
 
     height: 25%; 
 
     }
<img id="myimage" class="myimage" src="https://pp.vk.me/c837520/v837520867/16752/q1EHBfmdpgQ.jpg">

Также вы можете попробовать этот способ:

<img id="myimage" class="myimage" src="https://pp.vk.me/c837520/v837520867/16752/q1EHBfmdpgQ.jpg" style="border-width: 0px; margin: 0px; padding: 0px; position: absolute; width: 25%; height: 25%;">

-1
<img src="https://static1.squarespace.com/static/5492f3e3e4b0c40c56916924/t/586590b3d1758e4aacbf4aa4/1483051196842/?format=1500w" id="1"/> 

Я думаю, что это .1 и не # 1. Я не уверен.

Смежные вопросы