Kiểu chữ (font), cỡ chữ
Thuộc tính font-family được dùng để định dạng kiểu chữ cho thành phần.
Cú pháp
Bộ chọn {
font-family: kiểu chữ;
}
Ví dụ
<!DOCTYPE html>
<html>
<head>
<style>
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph, shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
Thuộc tính font-size được dùng để định dạng cỡ chữ cho thành phần.
Cú pháp:
Bộ chọn {
font-size: giá trị;
}
Giá trị có thể được tính theo các loại đơn vị khác nhau (thường dùng nhất là dạng pixel (px), phần trăm (%) và em (16px = 1em) ) .
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>
</body>
</html>
Một số thuộc tính khác liên quan tới kiểu chữ
| Thuộc tính | Mô tả |
| font-weight | Định dạng độ in đậm của chữ |
| font-style | Định dạng độ in nghiêng của chữ |
| letter-spacing | Định dạng khoảng cách giữa các kí tự |
| line-height | Định dạng khoảng cách giữa dòng |
| text-decoration | Xác định chữ có gạch dưới hay không |
| word-spacing | Định dạng khoảng cách giữa các từ |
(Có thể tham khảo chi tiết tại http://www.w3schools.com/css/css_font.asp)
Màu sắc
Màu nền
Sử dụng thuộc tính background-color (hoặc chỉ cần background).
Cú pháp:
Bộ chọn {
Background-color: giá trị màu;
}
Giá trị màu có thể là tên màu (tiếng Anh) như red, yellow,…; có thể là các giá trị theo cách kết hợp màu RGB như rgb(255,0,0); có thể là giá trị thập lục phân (có dấu # đi kèm) như #ff0000.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: yellow;
}
h1 {
background-color: #00ff00;
}
p {
background-color: rgb(255,0,255);
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph.</p>
</body>
</html>
Màu chữ
Sử dụng thuộc tính color.
Cú pháp:
Bộ chọn {
color: giá trị màu;
}
Giá trị màu có thể là tên màu (tiếng Anh) như red, yellow,…; có thể là các giá trị theo cách kết hợp màu RGB như rgb(255,0,0); có thể là giá trị thập lục phân (có dấu # đi kèm) như #ff0000.
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: #00ff00;
}
p {
color: rgb(255,0,255);
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<p>This is a paragraph.</p>
</body>
</html>
Bảng mã và tên màu
Như đã đề cập trên, giá trị màu có thể là tên màu (tiếng Anh) như red, yellow,…; có thể là các giá trị theo cách kết hợp màu RGB như rgb(255,0,0); có thể là giá trị thập lục phân (có dấu # đi kèm) như #ff0000.
Chi tiết tên màu và mã màu tại http://www.w3schools.com/colors/default.asp.
Định dạng trình bày cơ bản
Chữ (text)
| Thuộc tính | Mô tả |
| font-weight | Định dạng độ in đậm của chữ |
| font-style | Định dạng độ in nghiêng của chữ |
| letter-spacing | Định dạng khoảng cách giữa các kí tự |
| line-height | Định dạng khoảng cách giữa dòng |
| text-decoration | Xác định chữ có gạch dưới hay không |
| word-spacing | Định dạng khoảng cách giữa các từ |
| font-family | Xác định tên font chữ |
| font-size | Định dạng kích thước chữ |
Siêu liên kết (hyperlink)
Liên kết có thể được định dạng bởi các thuộc tính như color, background,…
Liên kết có 4 trạng thái như sau:
| Trạng thái | Mô tả |
| a:link | Trạng thái khi liên kết chưa được nhấp chuột (unvisited link) |
| a:visited | Trạng thái khi iên kết đã được nhấp chuột (visited link) |
| a:hover | Trạng thái khi di chuyển chuột qua liên kết (mouse over link) |
| a:active | Trạng thái khi liên kết được nhấp chuột (selected link) |
Ví dụ khai báo css cho liên kết:
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
a:link {
color: red;
}
/* visited link */
a:visited {
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style>
</head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link </a> </b> </p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to be effective.</p>
</body>
</html>
Danh sách (list)
Sử dụng các thuộc tính CSS có thể đánh dấu các kiểu khác nhau cho danh sách thứ tự và không thứ tự. Ví dụ:
<head>
<style>
ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}
</style>
</head>
Sử dụng các thuộc tính CSS có thể dùng hình ảnh để đánh dấu cho các mục của danh sách, ví dụ:
<head>
<style>
ul {
list-style-image: url('sqpurple.gif');
}
</style>
</head>
Bảng (table)
Sử dụng các thuộc tính CSS có thể định dạng viền (border) cho bảng, ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Add a border to a table:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body>
</html>
Trong ví dụ trên, viền của bảng là viền kép (double border), sử dụng thuộc tính CSS border-collapse có thể định dạng viền cho bảng từ viền kép sang viền đơn, ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
table {
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Let the borders collapse:</h2>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
</tr>
</table>
</body> </html>
Sử dụng các thuộc tính CSS có thể định dạng chiều rộng (width) và chiều cao (height) cho bảng, ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
table, td, th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}
th {
height: 50px;
}
</style>
</head>
<body>
<h2>The width and height Properties</h2>
<p>Set the width of the table, and the height of the table header row:</p>
<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Savings</th>
</tr>
<tr>
<td>Peter</td>
<td>Griffin</td>
<td>$100</td>
</tr>
<tr>
<td>Lois</td>
<td>Griffin</td>
<td>$150</td>
</tr>
<tr>
<td>Joe</td>
<td>Swanson</td>
<td>$300</td>
</tr>
<tr>
<td>Cleveland</td>
<td>Brown</td>
<td>$250</td>
</tr>
</table>
</body>
</html>
Box Model
Mỗi phần tử HTML được xem như một chiếc hộp (box). Cách nhìn về thiết kế (design) và bố cục (layout) trong CSS, xem mỗi phần tử HTML như một chiếc hộp, gọi là Box Model.
CSS Box Model là một chiếc hộp bao quanh mọi phần tử HTML. Chiếc hộp này gồm: margins, paddings, boders và nội dung của phần tử HTML. Xem hình sau:
Chi tiết hơn:
Kích thước
Để có thể thiết lập kích thước (width, height) của một phần tử chính xác cho mọi trình duyệt, chúng ta cần hiểu về Box Model.
Khi chúng ta thiết lập kích thước của một phần tử, chúng ta chỉ thiết lập cho phần nội dung (content) của phần tử đó. Để tính kích thước đầy đủ của phần tử, chúng ta cần tính thêm border, margin và padding. Công thức cụ thể:
Chiều rộng (width) = Chiều rộng nội dung+ left padding + right padding + left border + right border + left margin + right margin
Chiều cao (height) = Chiều cao nội dung + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Ví dụ khai báo CSS phần tử div như sau:
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
Chiều rộng phần tử div = Chiều rộng nội dung (320px) + left padding (10px) + right padding (10px) + left border (5px)+right border (5px) + left margin (0) + right margin (0) = 350px.
Khung viền
Bao quanh phần padding và nội dung của phần tử HTML. Khung viền của phần tử HTML gồm có các thuộc tính CSS và giá trị như sau:
| Thuộc tính | Mô tả |
| border-style | Xác định kiểu khung viền. Gồm các giá trị: dotted, dashed, solid, double, groove, ridge, inset, outset, none, hidden |
| border-width | Xác định độ dày của khung viền |
| border-color | Xác định màu sắc khung viền |
Ví dụ khai báo khung viền cho phần tử p với 4 cạnh là kiểu solid, màu đỏ và độ dày 5px như sau:
p {
border: 5px solid red;
}
Cũng với phần tử p trên nhưng mỗi cạnh của border sẽ có một kiểu khác nhau (có thể màu sắc khác nhau hay độ dày khác nhau), xét các khai báo sau (tương tự với màu sắc và độ dày):
p {
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: groove;
}
Tương đương khai báo:
p {
border-style: solid dotted dashed groove;
}
Khai báo:
p {
border-top-style: solid;
border-right-style: dotted;
border-bottom-style: dashed;
border-left-style: dashed;
}
Tương đương
p {
border-style: solid dotted dashed;
}
Margin
Là vùng không gian bao quanh border. Ví dụ khai báo độ dày của 4 cạnh margin của phần tử p như sau:
p {
margin-top: 100px;
margin-right: 150px;
margin-bottom: 100px;
margin-left: 80px;
}
Tương đương
p {
margin: 100px 150px 100px 80px;}
Khai báo
p {
margin: 25px 50px 75px;}
Tương đương
p {
margin-top: 25px;
margin-right: 50px;
margin-bottom: 75px;
margin-left: 50px;
}
Khai báo
p {
margin: 25px 50px;}
Tương đương
p {
margin-top: 25px;
margin-right: 50px;
margin-bottom: 25px;
margin-left: 50px;
}
Khai báo
p {
margin: 25px;
}
Tương đương
p {
margin-top: 25px;
margin-right: 25px;
margin-bottom: 25px;
margin-left: 25px;
}
Padding
Là không gian giữa nội dung phần tử HTML và border của nó. Các hình thức khai báo và khai báo tương đương độ rộng 4 cạnh của padding giống với khai báo margin.
Gom nhóm, lồng ghép, lựa chọn riêng
Gom nhóm (Grouping)
Chúng ta có thể gọp các selectors bằng dấu “,” nếu các selectors này có cùng khai báo CSS . Ta có thể nghĩ dấu “,” giống như toán tử OR.
Cú pháp:
Selector1, selector2,… {
// Khai báo css
}
Ví dụ: hai khai báo sau là tương đương
p {
color:red;
background: blue;
}
h3 {
color:red;
background: blue;
}
Tương đương:
p, h3 {
color:red;
background: blue;
}
Lồng ghép (Nesting)
Các selectors có thể được khai báo lồng nhau thông qua các mối quan hệ giữa các selectors. Có 4 kiểu quan hệ phổ biến:
- Con cháu (descendant selector): các selectors cách nhau khoảng trắng
- Con trực tiếp (child selector): selector cha và selector con cách nhau dấu >
- Anh em kề nhau (Adjacent sibling selector): các selectors cách nhau dấu +
- Anh em chung (general sibling selector): các selectors cách nhau dấu ~
Ví dụ về descendant selector: p là con cháu (hai p đầu là con trực tiếp và p nằm trong span là cháu) của div (hay nằm trong div):
<!DOCTYPE html>
<html>
<head>
<style>
div p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Ví dụ về child selector: hai p đầu tiên trong div là con trực tiếp của div:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p> <!-- child selector -->
<p>Paragraph 2 in the div.</p> <!-- child selector -->
<span><p>Paragraph 3 in the div.</p></span>
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
Ví dụ về adjacent sibling selector: phần tử p thứ 3 là anh em liền kề với div:
<!DOCTYPE html>
<html>
<head>
<style>
div + p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p> <!-- child selector -->
<p>Paragraph 2 in the div.</p> <!-- child selector -->
</div>
<p>Paragraph 3. Not in a div.</p> <!—anh em liền kề với div-->
<p>Paragraph 4. Not in a div.</p>
</body>
</html>
Ví dụ về general sibling selector: phần tử p thứ 3 và 4 là anh em với div:
<!DOCTYPE html>
<html>
<head>
<style>
div ~ p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p> <!-- child selector -->
<p>Paragraph 2 in the div.</p> <!-- child selector -->
</div>
<p>Paragraph 3. Not in a div.</p> <!—anh em liền kề với div-->
<p>Paragraph 4. Not in a div.</p>
</body>
</html>
Pseudo
Pseudo-elements (các phần tử ảo)
Được thêm vào các selectors nhằm định dạng cho các thành phần cụ thể nào đó.
Cú pháp:
Selector::pseudo-element {
Property: value;
}
Các Pseudo-elements:
::after
::before
::first-letter
::first-line
::selection
::backdrop
Pseudo-classes (các lớp ảo)
Được thêm vào các selectors để xác định một trạng thái đặc biệt nào đó của selector được chọn.
Cú pháp:
selector::pseudo-class {
property: value;
}
Các pseudo-classes chuẩn:
:active :any :checked :default :dir() :disabled :empty :enabled :first :first-child :first-of-type :fullscreen :focus :hover :indeterminate :in-range :invalid :lang() :last-child :last-of-type :left :link :not() :nth-child() :nth-last-child() :nth-last-of-type() :nth-of-type() :only-child :only-of-type :optional :out-of-range :read-only :read-write :required :right :root :scope :target :valid :visit
Kích thước
Các thuộc tính css dùng để định dạng kích thước cho phần tử HTML được thể hiện qua bảng sau:
| Thuộc tính | Mô tả |
| height | Xác định chiều cao của một phần tử |
| max-height | Xác định chiều cao lớn nhất của một phần tử |
| min-height | Xác định chiều cao nhỏ nhất của một phần tử |
| width | Xác định chiều rộng của một phần tử |
| max-width | Xác định chiều rộng lớn nhất của một phần tử |
| min-width | Xác định chiều rộng nhỏ nhất của một phần tử |
Vị trí (position)
Toạ độ tuyệt đối, tương đối
Thuộc tính position xác định kiểu của phương thức định vị cho một phần tử.
Cú pháp:
selector {
position: value;
}
Với các value (giá trị) như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
| position | static | position: static; | Thành phần sẽ nằm theo thứ tự trong văn bản, đây là dạng mặc định. |
| relative | position: relative; | Định vị trí tuyệt đối cho thành phần. | |
| absolute | position: absolute; | Định vị trí tuyệt đối cho thành phần theo thành phần bao ngoài (thành phần định vị trí tương đối position: relative;) hoặc theo cửa sổ trình duyệt. | |
| fixed | position: fixed; | Định vị trí tương đối cho thành phần theo cửa sổ trình duyệt. | |
| inherit | position: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Ví dụ định vị tương đối (relative)
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
left: 30px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: relative;</h2>
<p>An element with position: relative; is positioned relative to its normal position:</p>
<div class="relative">
This div element has position: relative;
</div>
</body>
</html>
Kết quả khi chưa định vị tương đối:
Kết quả khi định vị tương đối:
Ví dụ định vị tương đối (relative) và tuyệt đối (absolute)
<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
position: relative;
width: 400px;
height: 200px;
border: 3px solid #73AD21;
}
div.absolute {
position: absolute;
top: 80px;
right: 0;
width: 200px;
height: 100px;
border: 3px solid #73AD21;
}
</style>
</head>
<body>
<h2>position: absolute;</h2>
<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>
<div class="relative">This div element has position: relative;
<div class="absolute">This div element has position: absolute;</div>
</div>
</body>
</html>
Chiều sâu
Khi các phần tử được định vị, có thể xảy ra hiện tượng chồng lắp giữa các phần tử.
Có thể dùng thuộc tính z-index để xác định phần tử nào nằm trên, phần tử nào nằm dưới.
Cú pháp:
z-index: auto|number|initial|inherit;
Các giá trị của z-index:
| Thuộc tính | Mô tả |
| Auto | Tự động sắp xếp thứ tự chồng nhau cho thành phần, đây là dạng mặc định. |
| Number | Sắp xếp thứ tự chồng nhau cho thành phần theo giá trị. |
| Initial | Thiết lập giá trị mặc định cho thuộc tính |
| inherit | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Ví dụ z-index > 0
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: 1; //z-index > 0
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>
Kết quả: img nằm trên h1 và p
Ví dụ z-index < 0
<!DOCTYPE html>
<html>
<head>
<style>
img {
position: absolute;
left: 0px;
top: 0px;
z-index: -1; //z-index < 0
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<img src="w3css.gif" width="100" height="140">
<p>Because the image has a z-index of -1, it will be placed behind the text.</p>
</body>
</html>
Kết quả: img nằm dưới h1 và p
Floating
Thuộc tính float xác định có hay không một thành phần được float (thả nổi).
Cú pháp:
selector {
float: giá trị;
}
Với giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
| float | left | float: left; | Thành phần được thả nổi (float) qua bên trái. |
| right | float: right; | Thành phần được thả nổi (float) qua bên phải. | |
| none | float: none; | Thành phần không được thả nổi (float) qua bên phải hay trái, đây là dạng mặc định. | |
| inherit | float: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài). |
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
img {
float: right;
margin: 0 0 10px 10px;
}
</style>
</head>
<body>
<p>In this example, the image will float to the right in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="w3css.gif" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>
</html>
Kết quả:
Xoá ảnh hưởng của thuộc tính float có thể dùng thuộc tính clear. Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
.div1 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div2 {
border: 1px solid red;
}
.div3 {
float: left;
width: 100px;
height: 50px;
margin: 10px;
border: 3px solid #73AD21;
}
.div4 {
border: 1px solid red;
clear: left;
}
</style>
</head>
<body>
<h2>Without clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - Notice that the div2 element is after div1, in the HTML code. However, since div1 is floated to the left, this happens: the text in div2 is floated around div1, and div2 surrounds the whole thing.</div>
<h2>Using clear</h2>
<div class="div3">div3</div>
<div class="div4">div4 - Using clear moves div4 down below the floated div3. The value "left" clears elements floated to the left. You can also clear "right" and "both".</div>
</body>
</html>
Thuộc tính display
Thuộc tính display xác định cách một phần tử được hiển thị. Mỗi phần tử HTML thường có một giá trị mặc định của thuộc tính display, phổ biến là hai giá trị block và inline.
Với thuộc tính display có giá trị là block, phần tử luôn bắt đầu hàng mới và có chiều rộng lớn nhất có thể (cả cửa sổ hiển thị). Ví dụ:
Một số phần tử có giá trị block mặc định là:
- <div>
- <h1> – <h6>
- <p>
- <form>
- <header>
- <footer>
- <section>
Với thuộc tính display có giá trị là inline, phần tử không bắt đầu với hàng mới và có chiều rộng vừa đủ cho phần tử. Ví dụ:
Một số phần tử có giá trị inline mặc định:
- <span>
- <a>
- <img>
Chúng ta có thể định nghĩa lại giá trị mặc định của thuộc tính display cho các phần tử, ví dụ:
span {
display: block;
}
Bên cạnh hai giá trị là block và inline, thuộc tính display còn có giá trị none được dùng khi chúng ta muốn ẩn một phần tử.
(Tham khảo thêm thuộc tính display tại https://www.w3schools.com/css/css_display_visibility.asp )
Thay thế chữ bằng hình ảnh
– Thuộc tính background-image : xác định hình ảnh nền cho thành phần.
– Với url là đường dẫn tới hình được sử dụng làm hình nền.
<html>
<head>
<style type="text/css">
div {
background-image: url(bg_webstd.gif);
}
</style>
</head>
<body>
<div>
<p>background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br />
background-image<br /></p>
</div>
</body>
</html>
Kết quả:
Xử lý hình ảnh
Có thể tận dụng các thuộc tính CSS để xử lí hình ảnh như border, padding, margin, opacity,…
Ví dụ tạo ảnh transparent (trong suốt):
<!DOCTYPE html>
<html>
<head>
<style>
img {
opacity: 0.4;
}
</style>
</head>
<body>
<h1>Image Transparency</h1>
<img src="klematis.jpg" width="150" height="113" alt="klematis">
</body>
</html>
Ảnh bình thường:
Ảnh transparent:
Trần Ngọc Minh Notes 
5 Pingback