Cách tạo kiểu cho image bằng CSS

Hướng dẫn này là một phần của loạt bài về cách tạo và tùy chỉnh trang web này bằng CSS, một ngôn ngữ biểu định kiểu được sử dụng để kiểm soát việc trình bày các trang web. Bạn có thể theo dõi toàn bộ loạt bài này để tạo lại trang web trình diễn và làm quen với CSS hoặc sử dụng các phương pháp được mô tả ở đây cho các dự án trang web CSS khác.

---

Trong hướng dẫn này, bạn sẽ học cách tạo kiểu cho hình ảnh bằng CSS để thêm đường viền, thay đổi hình dạng và kích thước của hình ảnh. Sử dụng CSS để tạo kiểu cho hình ảnh cho phép bạn chỉ định thống nhất cách hình ảnh sẽ xuất hiện trên trang web chỉ với một số bộ luật .

Yêu cầu

Để làm theo hướng dẫn này, hãy đảm bảo bạn đã cài đặt các file và folder cần thiết như được hướng dẫn trong hướng dẫn trước trong loạt bài Cách cài đặt Dự án thực hành CSS và HTML cho bạn .

Thêm hình ảnh vào index.html

Đầu tiên, bạn cần thêm hình ảnh vào folder images . Bạn có thể download hình ảnh từ trang web trình diễn hoặc sử dụng bất kỳ hình ảnh nào ở định dạng JPEG / JPG hoặc PNG. Bài tập này cũng sẽ hoạt động tốt hơn nếu kích thước hình ảnh của bạn vào khoảng 150-200 pixel x 150-200 pixel.

Lưu ý : Để download hình ảnh của Sammy the Shark, hãy truy cập liên kết này và CTRL + Left Click (trên máy Mac) hoặc Right Click (trên Windows) vào hình ảnh và chọn “Save Image As” và lưu nó dưới dạng small-profile.jpeg to folder images của bạn.

Khi bạn đã chọn một hình ảnh, hãy lưu nó vào folder images của bạn dưới dạng small-profile.jpeg . Nếu bạn lưu nó dưới dạng một tên file khác, bạn cần sửa đổi đường dẫn file hình ảnh trong bước dưới đây.

Tiếp theo, xóa tất cả nội dung trong index.html của bạn (ngoại trừ dòng mã đầu tiên: <link rel="stylesheet" href="css/styles.css"> ) và thêm đoạn mã sau:

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">  

Đoạn mã này sử dụng <img> để chèn hình ảnh và cung cấp cho trình duyệt vị trí của file images/small-profile.jpeg ( images/small-profile.jpeg ). Đảm bảo rằng đường dẫn file được đánh dấu là chính xác nếu bạn đã thay đổi tên file của hình ảnh của bạn .

Ghi chú :
Để sao chép đường dẫn file của hình ảnh của bạn bằng Visual Studio Code, hãy di chuột qua biểu tượng của file hình ảnh trong console bên trái, nhấp CTRL + Left Click (trên máy Mac) hoặc Right Click (trên Windows) và chọn “Sao chép đường dẫn . ” Để có minh họa về quy trình, vui lòng xem gif bên dưới:

Đảm bảo sao chép đường dẫn file tương đối hoặc file dự án của hình ảnh chứ không phải đường dẫn file tuyệt đối hoặc đầy đủ của hình ảnh. Đường dẫn tương đối đề cập đến vị trí file liên quan đến folder làm việc hiện tại (trái ngược với đường dẫn tuyệt đối , đề cập đến vị trí file liên quan đến folder root .) Trong khi cả hai đường dẫn sẽ hoạt động trong trường hợp này, chỉ đường dẫn tương đối mới hoạt động nếu bạn quyết định xuất bản trang web trực tuyến. Vì mục tiêu cuối cùng là tạo một trang web có thể xuất bản, bạn sẽ bắt đầu sử dụng các đường dẫn tương đối ngay bây giờ khi thêm các phần tử <img> vào tài liệu.

Bạn cũng đã thêm văn bản thay thế Sammy the Shark, DigitalOcean's mascot bằng cách sử dụng thuộc tính alt . Khi tạo trang web, văn bản thay thế nên được thêm vào tất cả các hình ảnh để hỗ trợ khả năng truy cập trang web cho các cá nhân sử dụng trình đọc màn hình. Để đọc thêm về cách sử dụng văn bản thay thế bằng HTML, vui lòng truy cập phần về văn bản thay thế trong hướng dẫn của ta Cách Thêm Hình ảnh Vào Trang web của Bạn Bằng HTML .

Lưu index.html của bạn và reload trong trình duyệt của bạn. (Để biết hướng dẫn về cách tải file HTML, vui lòng truy cập bước hướng dẫn của ta Cách Xem Tệp HTML Offline Trong Trình duyệt của Bạn ). Bạn sẽ nhận được một trang trống với hình ảnh của bạn được hiển thị:

Nếu hình ảnh của bạn không hiển thị, hãy kiểm tra mã của bạn để tìm lỗi và xác nhận bạn có đường dẫn file chính xác cho hình ảnh.

Thêm kiểu vào hình ảnh

Bây giờ index.html hiển thị hình ảnh Sammy the Shark (hoặc hình ảnh bạn chọn), bạn sẽ thêm luật CSS để tạo kiểu cho hình ảnh. Trong file styles.css của bạn, hãy xóa mọi thứ (nếu bạn đã theo dõi loạt bài hướng dẫn) và thêm bộ luật sau vào cuối tài liệu:

. . . img {   border: 2px solid red;   border-radius: 8px;   width: 200px; } 

Lưu file styles.css của bạn và reload index.html trong trình duyệt của bạn. Đến đây bạn sẽ nhận được một hình ảnh với các thuộc tính kiểu mới:

Trong luật CSS này, bạn đã chỉ định các giá trị cho ba thuộc tính khác nhau của phần tử HTML <img> . Hãy tạm dừng để kiểm tra từng thuộc tính và giá trị khác nhau:

• Thuộc tính border cho phép bạn thêm đường viền vào hình ảnh của bạn và chỉ định kích thước, kiểu và màu sắc của đường viền. Lưu ý bạn có thể thêm nhiều giá trị cho thuộc tính CSS này. Trong luật này, bạn đã chỉ định một đường viền liền solid red với chiều rộng là 2px .

• Thuộc tính border-radius xác định bán kính của các góc của phần tử, cho phép bạn làm tròn các cạnh của phần tử. Trong luật này, bạn đã chỉ định 8 pixel làm kích thước của bán kính. Hãy thử thay đổi con số này để xem nó ảnh hưởng như thế nào đến việc hiển thị hình ảnh.

• Thuộc tính width xác định chiều rộng của hình ảnh. Trong luật này, bạn đã chỉ định chiều rộng là 200 pixel. Lưu ý nếu bạn không xác định chiều cao, chiều cao của hình ảnh sẽ tự động điều chỉnh để duy trì tỷ lệ ban đầu của hình ảnh. Hãy thử thay đổi cả chiều cao và chiều rộng cùng một lúc để kiểm tra điều gì sẽ xảy ra.

Khám phá cách áp dụng phong cách cho tất cả hình ảnh

Lưu ý nếu bạn thêm bất kỳ hình ảnh bổ sung nào vào trang HTML của bạn , chúng cũng sẽ có cùng kiểu dáng. Để nghiên cứu cách hoạt động của tính năng này, hãy thêm hình ảnh thứ hai vào index.html của bạn bằng cách sử dụng phần tử HTML <img> . (Bạn có thể copy paste phần tử <img> đầu tiên nếu bạn không có sẵn hình ảnh thứ hai):

<img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">  <img src="images/small-profile.jpeg" alt="Sammy the Shark, DigitalOcean’s mascot">  

Đảm bảo thay đổi phần được đánh dấu bằng đường dẫn file hình ảnh của bạn. Lưu index.html của bạn và tải nó trong trình duyệt. Trang web sẽ hiển thị hai hình ảnh được tạo kiểu với cùng một bộ luật CSS cho <img> :

Để tiếp tục khám phá các khả năng về kiểu cho hình ảnh, hãy thử thay đổi các giá trị trong luật CSS mà bạn vừa tạo trong file styles.css , lưu file và reload index.html để kiểm tra kết quả.

Kết luận

Trong hướng dẫn này, bạn đã khám phá cách tạo kiểu cho kích thước đường viền, màu sắc, diện mạo, chiều cao, chiều rộng và bán kính đường viền của một hình ảnh. Bạn sẽ trở lại tạo kiểu hình ảnh khi bắt đầu xây dựng trang web trình diễn trong nửa sau của loạt bài hướng dẫn này.

Đến đây bạn đã quen với cách áp dụng một tập hợp các luật kiểu cho tất cả các phần tử <img> , bạn có thể tò mò về cách áp dụng các luật kiểu khác nhau cho từng phần tử hoặc group của <img> . Trong hướng dẫn tiếp theo, bạn sẽ tạo các lớp CSS, cho phép các nhà phát triển sắp xếp các phần tử HTML thành các lớp khác nhau để tạo kiểu CSS khác nhau.

---

---

Các tin liên quan

Cách tạo phần tiêu đề của trang web bằng CSS (Phần 1)
2020-10-13
Cách tạo kiểu cho phần thân của trang web bằng CSS
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13
Cách khai báo giá trị cho nhiều thuộc tính trong quy tắc CSS
2020-10-13
Cách thiết lập dự án thực hành CSS và HTML của bạn với trình chỉnh sửa mã
2020-10-13
Cách thiết lập dự án trang web CSS và HTML của bạn
2020-10-12
Cách thêm lịch sử và kỹ năng giáo dục của bạn vào trang web của bạn bằng CSS (Phần 5)
2020-10-12
Cách tạo ID bằng CSS
2020-10-12
Giới thiệu ngắn gọn về CSS
2020-10-12
Cách tạo lớp học bằng CSS
2020-10-12