How do I ( or can I) add CSS style to an img in HTML.
Question
The book I am using tells me to do the following:
img[title.jpeg] {border: 3px solid;}
This does not work, I have tried without the [title.jpeg] and it still does not work. How do identify an img element in a CSS style sheet? Does it matter that it is embedded in a H1 element?
3 answers
solution1
2 2017-01-08 04:54:36
Just use the parent element before the img in your css to identify the correct image.
It does not matter if your image is in a h1 tag as you can see in the example below.
You can also give the image a particular id to select only that image instead of trying with the image name.
h1 img{ width:50px; } #thisOne{ width:100px; }
<h1><img src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/></h1> <img id="thisOne" src="http://www.chinabuddhismencyclopedia.com/en/images/thumb/b/b8/Nature.jpg/240px-Nature.jpg"/>
solution2
0 2017-01-08 05:02:18
You can add inline CSS within HTML with a style tag like this:
<img title="#" style="border: 3px solid" src="example.jpg"/>
Or, you can use CSS ... for example, you can add style to the img tag:
img {
border: 3px solid;
}
If you want to use CSS you can include a separate .css file or add the css code to your html file with <style> tags inside the <head> part of the page.
solution3
0 2017-01-08 05:06:49
The example from the book would only work if your file was named "title.jpeg" - and if they added:
img[src*="title.jpeg"]{ border: 3px; }
You could add a class, id or other identifier to your image and modify the class. Or you could use the above syntax and just make it match your file name.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.