VietTuts

Tự Học Lập Trình Online

  • Home
  • Java
  • Servlet
  • JSP
  • Struts2
  • Hibernate
  • Spring
  • MyBatis
  • Java WS
  • C
  • C++
  • C#
  • Python
  • PHP
  • Excel
  • VBA
  • Web
    • JavaScript
    • JQUERY
    • JSON
    • AJAX
    • CSS
    • HTML
    • HTML5
    • Node.js
    • Angular 7
  • SQL
    • MySQL
    • SQL Server
  • Misc
    • Eclipse
    • Phần mềm tiện ích
    • Cấu trúc DL&GT
    • Selenium Test

CSS Tuts

CSS là gì? Cú pháp CSS Bộ chọn CSS Liên kết css với html Đơn vị đo trong CSS Mã màu trong CSS Comment trong CSS

CSS Các thuộc tính

CSS Background CSS Border Font trong CSS Định dạng văn bản (Text) trong CSS Image trong CSS Link trong CSS Bảng trong CSS Căn lề trong CSS List trong CSS Thuộc tính padding trong CSS Con trỏ trong CSS Thuộc tính outline trong CSS Kích cỡ trong CSS Scrollbar trong CSS Thuộc tính visibility trong CSS Căn chỉnh vị trí trong CSS Thuộc tính z-index trong CSS Pseudo Class trong CSS Pseudo Element trong CSS Các quy tắc trong CSS Kiểu Media trong CSS Layout trong CSS Validation trong CSS

CSS nâng cao

Giới thiệu CSS3 Bo tròn góc trong CSS Border Image trong CSS
1 / 3
❮ ❯

Image trong CSS


Định dạng văn bản (Text) trong CSS
Link trong CSS

Hình ảnh đóng vai trò quan trọng trong bất kỳ Webpage nào. Hiện này, khó có thể tìm thấy một Webpage hiện đại nào mà không có hình ảnh. Tuy nhiên, không phải cứ thêm quá nhiều hình ảnh (trừ các Webpage cho thời trang hay mẫu quần áo) là tốt. Việc trang trí hình ảnh đẹp và hợp lý sẽ làm trang của bạn tạo ấn tượng với người dùng.

Để làm cho hình ảnh đẹp hơn, bạn có thể sử dụng các thuộc tính trong CSS. CSS có các thuộc tính:

  • Thuộc tính border: Thiết lập độ rộng của đường viền bao quanh hình ảnh.

  • Thuộc tính height: Thiết lập chiều cao của hình ảnh.

  • Thuộc tính width: Thiết lập độ rộng của hình ảnh.

  • Thuộc tính –moz-opacity: thiết lập độ trong suốt của hình ảnh.


Nội dung chính

  • Thuộc tính border trong CSS
  • Thuộc tính height trong CSS
  • Thuộc tính width trong CSS
  • Thuộc tính - moz-opacity trong CSS

Thuộc tính border trong CSS

Để thiết lập độ rộng của đường viền bao quanh hình ảnh, bạn sử dụng thuộc tính border trong CSS. Thuộc tính này có thể nhận giá trị: độ dài đo bằng px hoặc %..

Nếu thiết lập giá trị là 0px, nghĩa là hình ảnh của bạn không có đường viền bao quanh.

Ví dụ


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <img style="border:0px;" src="/images/css/logo-viettuts-css.png" />
      <br />
      <img style="border:3px dashed red;" src="/images/css/logo-viettuts-css.png" />
   </body>
</html> 

kết quả:



Thuộc tính height trong CSS

Để điều khiển chiều cao của hình ảnh hiển thị trong Webpage, bạn có thể sử dụng thuộc tính height trong CSS. Thuộc tính này có thể nhận giá trị: chiều cao đo bằng px hoặc %. Nếu được xác định bằng đơn vị %, chiều cao của hình ảnh sẽ được tính tỷ lệ với khối chứa hình ảnh đó.

Ví dụ−


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <img style="border:1px solid red; height:100px;" src="/images/css/logo-viettuts-css.png" />
      <br />
      <img style="border:1px solid red; height:50%;" src="/images/css/logo-viettuts-css.png" />
   </body>
</html> 

Kết quả:


Thuộc tính width trong CSS

Để xác định độ rộng của hình ảnh, bạn có thể sử dụng thuộc tính width trong CSS. Thuộc tính này có thể nhận giá trị: độ rộng đo bằng px hoặc %. Nếu được xác định bằng đơn vị %, độ rộng của hình ảnh sẽ được tính tỷ lệ với khối chứa hình ảnh đó.

Ví dụ−


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <img style="border:1px solid red; width:150px;" src="/images/css/logo-viettuts-css.png" />
      <br />
      <img style="border:1px solid red; width:100%;" src="/images/css/logo-viettuts-css.png" />
   </body>
</html> 

Kết quả:



Thuộc tính - moz-opacity trong CSS

Thuộc tính -moz-opacity trong CSS được sử dụng để thiết lập độ trong suốt của hình ảnh. Trong Mozilla, thuộc tính này sẽ tạo một hình ảnh trong suốt. IE sử dụng filter:alpha(opacity=x) để tạo các hình ảnh trong suốt.

Trong Mozilla: với cú pháp -moz-opacity=x thì x có thể là một giá trị từ 0.0 – 1.0. Giá trị càng nhỏ thì càng làm tăng độ trong suốt. (tương tự như cú pháp trong CSS3 là: opacity:x).

Trong IE: với cú pháp filter:alpha(opacity=x) thì x có thể là một giá trị từ 0 – 100. Giá trị càng nhỏ thì càng làm tăng độ trong suốt.

Ví dụ


<html>
<head>
<meta charset="UTF-8">
   </head>
   <body>
      <img style="border:1px solid red;-moz-opacity:0.4;filter:alpha(opacity=40);" src="/images/css/logo-viettuts-css.png" />
   </body>
</html> 

Kết quả:


Định dạng văn bản (Text) trong CSS
Link trong CSS

Recent Updates

Sắp Tết 2024 Rồi! - Còn bao nhiêu ngày nữa là đến tết 2024?Border Image trong CSSBo tròn góc trong CSSGiới thiệu CSS3Layout trong CSSCác quy tắc trong CSSPseudo Element trong CSSPseudo Class trong CSSThuộc tính z-index trong CSSCăn chỉnh vị trí trong CSSThuộc tính visibility trong CSSScrollbar trong CSSKích cỡ trong CSS

VietTuts on facebook

Học Lập Trình Online Miễn Phí - VietTuts.Vn
Danh Sách Bài Học

Học Java | Hibernate | Spring
Học Excel | Excel VBA
Học Servlet | JSP | Struts2
Học C | C++ | C#
Học Python
Học SQL

Bài Tập Có Lời Giải

Bài tập Java
Bài tập C
Bài tập C++
Bài tập C#
Bài tập Python
Ví dụ Excel VBA

Câu Hỏi Phỏng Vấn

201 câu hỏi phỏng vấn java
25 câu hỏi phỏng vấn servlet
75 câu hỏi phỏng vấn jsp
52 câu hỏi phỏng vấn Hibernate
70 câu hỏi phỏng vấn Spring
57 câu hỏi phỏng vấn SQL

Scroll back to top

Copyright © 2016 VietTuts.Vn all rights reserved. | Liên hệ | Chính sách - riêng tư | sitemap.html | sitemap_index.xml