Как мне использовать мой CSS файл, чтобы изменить только часть моего HTML файла? - PullRequest
Новая
       1

Как мне использовать мой CSS файл, чтобы изменить только часть моего HTML файла?

1 голос
/ 05 февраля 2020

Это моя первая попытка сделать сайт. Я создал файл с именем style. css, в котором написал 

img {
   width: 100%;
   height: 100%;
}

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

Ответы [ 4 ]

1 голос
/ 05 февраля 2020

Способ работы CSS заключается в том, что он будет применять правило ко всем вхождениям выбранного вами селектора. Поскольку все изображения используют селектор img, это влияет на все изображения.

Если вы хотите нацелить отдельное изображение или группу изображений, вы задаете им класс, например: -

<img class="red-border" src="...">

А в вашем CSS: -

.red-border { border: 1px solid red; }

1 голос
/ 05 февраля 2020

Распространенным решением этой проблемы является использование css классов или идентификаторов.

Например 

img {
  width: 50px;
}
img.some_image_class {
   width: 100%;
   height: 100%;
}

<img src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">
<img class="some_image_class" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg">

Теперь звучит так, что вы можете использовать селекторы здесь .

Например 

<html>
  <head></head>
    <body>
      <section id="sec1">
      </section>
      <section id="sec2">
         <img src="something" />
      </section>
     </body>
   </html>


#sec2 img {
  width: 50%
}
1 голос
/ 05 февраля 2020

Вы можете использовать class для изменения нескольких изображений, например:

Это правило css Влияет на любое изображение, значение атрибута которого class равно x

.x { width:100%}

<img class="x" src="..."> <-------affect on this
<img class="x" src="..."> <-------affect on this
 <img class="y" src="...">
<img class="x" src="..."> <-------affect on this

Вы можете использовать id для изменения одного изображения (идентификатор уникален в html файле):

Влияет на любое изображение, значение атрибута которого id быть y1: 

#y1 { width:100%;}

 <img id="y1" src="..."> <-------affect on this
 <img id="y2" src="...">
 <img id="y3" src="...">
0 голосов
/ 05 февраля 2020

Обычно вы используете классы для лучшего охвата ваших стилей. 

<img class="full-width" src="..." alt="..."> 

img.full-width  {
   width: 100%;
   height: 100%;
}

(Кроме того, вы можете иметь только один идентификатор на элемент и у вас может быть много классов <img class="full-width other-class another-class" src="..." alt="..."> I Лично я решил зарезервировать использование идентификаторов для JavaScript и сохранить все стили внутри классов. Таким образом, в дальнейшем проблем не будет, и ваши javascript и CSS не зависят от тех же имен.

Идентификаторы также полезны для описания раздела на странице для ссылки www.example.com/#id_to_scroll_to. Поэтому я бы хотел, чтобы они описывали содержание, а не стили.)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...