博文中的图片

Question

I'd like to define the appearance of my images inside the section (I'm trying to add a border to the image - but I can't reference the image directly because the images are added dynamically - as content of blog posts.) Can you advise me on how to do that? Do I have to create a new section/id/div? How can I than say to the machine: In the section/id/div I created I would like you to apply these styls to the images." ? thanks, D.

Answer 1

If content is added dynamically, styles are applied automatically as new content is added to the DOM, you don't need to worry about that. Inject the content you want, and as long as there is CSS-rules that match that content, the browser will handle the rest.

Update

I realize that I might have misunderstood your question at first. If the user is completely in control of the markup of the blog post, I guess the best way would be to use a selector, that select every image within a container that wrap each blog post.

Lets say each blog post is rendered within an element with class post . Then you could do something like this:

.post img {
   border: 1px solid #000;
} 

Answer 2

Yes you need to get a reference to the image or the block in which the images is going to be displayed. Then apply the css rules to the image or block you will then get the styles on the image. I would prefer class="" if there are many and id="" if there is only one.

If you have img inside any elements like below,

<div class="someclass">
     <img src="" />
</div>

then at CSS,

.someclass{
    your rules go here.    
}

or if you want to directly have styles on image then you HTMl will be like below and CSS same as above.

<img class="someclass" src="" />