Tôi làm cách nào để sử dụng CSS để tạo kiểu cho nhiều hình ảnh khác nhau?

Question

Tôi về cơ bản tạo kiểu một bài luận dài với các hình ảnh khác nhau nằm rải rác trong suốt. Tôi muốn hình ảnh đầu tiên "trôi nổi: trái" và hình thứ hai là "phao: phải". Tôi biết rằng tôi có thể tạo kiểu cho những hình ảnh như thế này:

img { 
float: left; 
} 

Điều này làm cho mỗi hình ảnh có cùng phong cách. Làm cách nào để tạo kiểu cho từng hình ảnh khác nhau? Tôi đã cố gắng đặt từng hình ảnh trong một lớp div khác nhau, để tôi có thể tạo kiểu cho chúng khác nhau, nhưng nó không hoạt động.

Tôi cũng hiểu, rằng tôi có thể phong cách mỗi hình ảnh trong thẻ html, như thế này:

<img src="ABCD.png" alt="Raoul Hausmann's ABCD" align="left" height="300px"> 

tôi tiếp tục nghe rằng nó là tốt nhất để giữ phong cách trong style sheet bên ngoài (CSS), tách biệt khỏi html. Đây có phải là trường hợp cần thiết tạo kiểu nội tuyến không?

Answer 1

Hãy thử điều này

img{width: 200px;height:200px;background-color: antiquewhite} 
.left{float:left} 
.right{float:right} 


    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="left"> 
    <img src="ABCD.png" alt="Raoul Hausmann's ABCD" class="right"> 

này sẽ nổi hai hình ảnh một trái và một ở bên phải

Answer 2

Đưa hình ảnh của bạn một lớp và sau đó bạn có thể tạo kiểu tất cả hình ảnh với lớp như thế này :

.left { 
 
    border: solid 5px red; 
 
    float: left; 
 
} 
 

 
.right { 
 
    border: solid 5px blue; 
 
    float: right; 
 
}

<img src="ABCD.png" class="left"> 
 
<img src="ABCD.png" class="right">

Answer 3

Tất cả những điều trên đều tốt, tôi chỉ đề nghị nhóm các cài đặt chung của ảnh trong trường hợp này sao cho các lớp bên trái/phải chỉ chứa những gì khác nhau.

/* Group the common attributesso that you only need to set it once */ 
.picture, .leftPicture, .rightPicture { 
    border: 2px dotted gray; 
    width: 200px; 
} 

.leftPicture { 
    float:left; 
} 

.rightPicture { 
    float:right; 
} 

Answer 4

Bạn có thể cung cấp cho mỗi hình ảnh một lớp hoặc id đó sẽ giúp bạn xác định css khác nhau cho mỗi hình ảnh như

<img src="" class="image1"> 
<img src="" class="image2"> 

trong file css bạn có thể xác định

.image1 
{ 
width:200px; 
height:200px; 
} 
.image2 
{ 
width:300px; 
height:300px; 
}