[CSS] Bài 7. Định Dạng Text

Trong thiết kế web, việc trình bày và định dạng nội dung rất quan trọng, Bên cạnh nội dung tốt thì nội dung còn phải được được trình bày rõ ràng, mạch lạc. Bài viết này chúng ta sẽ cùng tìm hiểu một số thuộc tính định dạng văn bản trong CSS.

1. Tổng Quát:

7 Thuộc tính chúng ta sẽ tìm hiểu:

- Text color: định dạng màu cho đoạn văn.

- Text-align: Canh chỉnh đoạn văn.

- Text -decoration: thêm hiệu ứng vào text

- Text-Transform: chế độ in hoa in thường

- Text-indent: thục đầu dòng văn bản.

- Letter-spacing: khoãng cách giữa các kí tự trong đoạn văn

- Word-spacing: khoãng cách giữa các từ trong đoạn văn.

2. Định Dạng Màu Chữ (Color)

Để  định  màu  chữ  cho  một  thành  phần nào đó trên trang web chúng ta sử dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ.
Mặc định, khi không được khai báo thì CSS trình duyệt sẽ quy định màu chữ của toàn bộ trang là màu đen.

Cách Dùng:

1	color: #006600;

2	color: green;

3	color: rgb(0, 102, 0);

4	color:  transparent;

Các giá trị của background-color có thể là:

• Tên màu (tiếng anh), ví dụ: black, green…
• Hệ màu RGB, ví dụ: rgb(255,0,0)
• Hệ hex, ví dụ: #000000

Giả sử bây giờ chúng ta muốn màu chữ toàn bộ trang là màu đen, các liên kết có màu vàng cam, các thành phần h1 có màu xanh, thì ta sẽ viết CSS như sau:

body{ color: #000}
a{ color: #f98000 }
h1{ color: blue }

3.Thuộc tính Text-Align:

Thuộc tính text-align giúp bạn thêm các canh chỉnh văn bản cho các thành phần trong trang web.
Cũng tương tự như các lựa chọn canh chỉnh văn bản trong các trình soạn thảo văn bản thông dụng như MS Word, thuộc tính này có tất cả 4 giá trị :

• left (canh trái – mặc định) 
• right (canh phải) 
• center (canh giữa) 
• justify (canh đều). 

Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành phần h1, h2 và canh đều đối với thành phần <p>

h1, h2 { text-align:right }
p { text-align:justify }

4. Thuộc tính Text-decoration:

Thuộc tính text-decoration được sử dụng để thêm vào các hiệu ứng:

• gạch chân (underline) 
• gạch xiên (line-through) 
• gạch đầu (overline) 
• hiệu ứng nhấp nháy (blink). 
• không có hiệu ứng (none) 

Ví Dụ:

<p class='und'>gạch chân (underline)</p>
<p class='line'>gạch xiên (line-through)</p>
<p class='over'>gạch đầu (overline)</p> 
  <p class='blin'>hiệu ứng nhấp nháy (blink)</p>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

5.Thuộc tính text-transform

Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML.
Thuộc tính này có tất cả 4 giá trị: 

• uppercase (in hoa)
• lowercase (in thường)
• capitalize (in hoa ở ký tự đầu tiên trong mỗi từ)
• none (không áp dụng hiệu ứng – mặc định).

6. Thuộc Tính Text-indent:

Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho dòng đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS.

Đoạn mã sau sẽ quy định dòng đầu tiên của tất cả các thành phần p sẽ được thụt đầu dòng một khoảng 30px

1	p{ text-indent: 30px }

* Khi gán cho thuộc tính text-indent một giá trị âm thật lớn cho một thành phần nào đó, thì văn bản của thành phần đó sẽ không được hiện thị. Trường hợp này thường được áp dụng để quy định thuộc tính hiển thị của đoạn văn bản so với ảnh nền (chỉ có nền được hiển thị).
Ví dụ:

p.logo{ text-indent: -999999px } 

Text được hiển thị so với ảnh nền


Không hiển thị khi text-indent:-999999px

7. Thuộc Tính letter-spacing

Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản.
Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành phần <p> là 5px chúng ta sẽ viết CSS sau:

h1, h2 {  letter-spacing:7px
}
p { letter-spacing:5px }

8. Thuộc Tính Word-Spacing:

Thuộc tính word-spacing được dùng để định khoảng cách giữa các tự trong một đoạn văn bản.
Muốn định khoảng cách giữa các từ trong thành phần h1, h2 là 7px và thành phần <p> là 5px chúng ta sẽ viết CSS sau:

h1, h2 {
word-spacing:7px
}
p { word-spacing:5px }

9. Bài Tập:

Thiết kết một trang HTML như hình dưới:
Yếu Cầu:
- Sử dụng CSS để định dạng tất cả các thành phần của website.
- Đối với text toàn bộ phải viết bằng chữ thường và định dạng với text.

để định dạng.

Read More...

[CSS] Bài 6: Font chữ for Website

Trong bài trước chúng ta đã học về cách tạo màu nền ảnh nền bằng cách sử dụng thuộc tính Background hôm nay chúng ta sẽ học về các thuộc tính CSS liên quan đến font chữ của các thành phần trong trang web.

1 Tổng Quát:

5 thuộc tính của Font mà bạn cần biết đó là:

• font-family: định nghĩa danh sách font sẽ hiển thị cho trang web.
• font-style: xác định loại chữ.
• font-size: định dạng cỡ chữ.
• font-variant: định dạng một số kiểu chử.
• font-weight: định dạng kiểu in

2. Thuộc tính Font-Family:

Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên…cho đến khi có một font phù hợp.

Cú Pháp: 

tag {font-family: name font 1, name font 2....name font n}

Có hai loại tên font được dùng để chỉ định trong font-family: family-names (họ theo tên) và generic families (họ chung).
Family-names: Tên cụ thể của một font. Ví dụ: Arial, Verdana, Tohama,…
Generic families: Tên của một họ gồm nhiều font. Ví dụ: sans-serif (không chân), serif (có chân),…

CSS cung cấp 5 loại font chữ như hình bên dưới:

Generic Font Family	Family-names
serif	Georgia, Times, "Times New Roman", Garamond, "Century Schoolbook"
sans-serif	Verdana, Arial, Helvetica, Trebuchet, Tahoma
monospace	Courier, "MS Courier New", Prestige
cursive	"Lucida Handwriting", "Zapf-Chancery"
fantasy	Comic Sans, Whimsy, Critter, Cottonwood

Tất cả các trình duyệt đều có 1 danh sách các font chữ nằm trong 5 loại font family bên trên. Nếu 1 font chữ không được chọn bởi CSS hoặc không có sẵn trên máy tính của bạn thì trình duyệt sẽ tự động chọn 1 font chữ từ những font family bên trên.

Bạn muốn chỉ định những font chữ mà được cài đặt hầu hết trên các máy tính, vì thế mà website của bạn sẽ được hiển thị tốt, không bị mất font chữ. Như thế, bạn phải sử dụng những font chữ mà được hỗ trợ nhiều nhất, những font chữ đó được biết đến như là web-safe font, đây là những font chữ thường được cài đặt trên Windows lẫn Macintosh.
Bên dưới là danh sách font sans serif:

• font-family: Verdana, Geneva, sans-serif;
• font-family: Arial, Helvetica, sans-serif;
• font-family: Tahoma, Geneva, sans-serif;
• font-family: "Trebuchet MS", Area, Helvetica, sans-serif;
• font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

Danh sách font serif:

• font-family: Georgia, "Times New Roman", Times, serif;
• font-family: "Palatino Linotype", "Book Antigua", Palatino, serif;
• font-family: "MS Serif", New York, serif;

Danh sách font monospace

• font-family: "Courier New", Courier, monospace;
• font-family: "Lucida Console", Monaco, monospace;
• Danh sách font cursive font-family: "Comic Sans MS", cursive; 

Ví dụ sau chúng ta sẽ viết CSS để quy định font chữ dùng cho cả trang web là Times New Roman, Tohama, sans-serif, và font chữ dùng để hiển thị các tiêu đề h1, h2, h3 sẽ là Arial, Verdana và các font họ serif.

body { font-family:”Times New Roman”,Tohama,sans-serif }
h1, h2, h3 { font-family:arial,verdana,serif }

Chú ý: Nếu font chữ của bạn có chứa khoảng trắng thì bạn nên dùng dấu nháy đơn hoặc nháy đôi để đóng font chữ đó lại làm 1 cụm từ. Vào cuối danh sách những font chữ bạn đã chọn, nên thêm vào font chữ chung chung để trong trường hợp trình duyệt không thể tìm được những font chữ bạn đã chọn trước đó thì font chữ chung chung đó sẽ được hiển thị lên.

2. Thuộc Tính Font-Style:

Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web.

Ví Dụ bên dưới chúng ta sẽ thử thực hiện áp dụng kiểu in nghiêng cho thành phần h1 và
kiểu xiên cho h2.

h1{font-style:italic;} h2 {font-style:oblique;}

3.Thuộc Tính Font-Size:

Thuộc tính font-size dùng để khai báo kích cỡ của chữ của văn bản.
Khả năng quản lý kích thước của chữ là một khâu quan trọng trong thiết kế web. Tuy nhiên bạn không nên điều chỉnh kích thước font chữ để biến đoạn văn bản trông giống như phần headings, hoặc phần headings giống như paragraphs.
Luôn sử dụng thẻ HTML chính xác, ví dụ <h1> - <h6> cho phần headings và thẻ <p> cho phần paragraphs.
Giá trị font-size có thể là giá trị tuyệt đối hoặc giá trị tương đối
Giá trị tuyệt đối :
- Thiết lập văn bản theo một kích cỡ quy định
- Không cho phép người dùng thay đổi kích cỡ text trên mọi trình duyệt
Giá trị tương đối:
- Thiết lập giá trị tương đối cho các phần tử xung quanh.
- Cho phép người dùng thay đổi kích cỡ văn bản trên trình duyệt.
Đơn vị tính font-size được chia thành 2 loại: absolute và relative.
Absolute bao gồm các đơn vị tính sau:

Inches (in)

Centimeters (cm)

Millimeters (mm)

Relative bao gồm các giá trị sau:
Em: giá trị mặc định của font-size trên các trình duyệt.
X-height (ex)
Pixels (px)
Font-size có thể có bất kỳ giá trị nào mà bạn muốn và font-size có nhiều đơn vị tính khác nhau. Việc thiết lập kích thước của font chữ theo tỉ lệ phần trăm làm cho trình duyệt có thể tính toán được kích thước của font chữ phụ thuộc vào kích thước của phần tử cha. Ví dụ, nếu font-size của body là 12 pixel và font-size của thẻ p nằm trong thẻ body được set là 125%, thì font-size của thẻ p đó là 15pixel. Bạn có thể sử dụng phần trăm, inches, centimeters, millimeters … để chỉ định font-size.
Chú ý: Nếu bạn không quy định một kích cỡ font chữ, kích cỡ mặc định cho text thông thường, ví dụ cho paragraphs, là 16px (16px=1em) và font-size không chấp nhận giả trị âm, ví dụ: font-size = -5cm thì không được chấp nhập.
Thiết lập font size chữ bằng Pixels
Sử dụng pixel để quy định kích cỡ chữ của văn bản sẽ cho phép bạn có thể kiểm soát đầy đủ về kích cỡ text:

Ví Dụ:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
<h1>Chào mừng bạn</h1>
<h2>Chào mừng bạn</h2>
<p>Chào mừng bạn.</p>
<p>Quy định font-size theo px cho phép các trình duyệt Internet Explorer 9, Firefox, Chrome, Opera, và Safari định lại text.</p>
<p><b>Chú ý:</b> Ví dụ này không hoạt động trên Internet Explorer các phiên bản trước IE9.</p>
 
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Thiết lập Font Size bằng Em
Để tránh gặp các vấn đề về điều chỉnh kích cỡ text trên các phiên bản cũ của Internet Explorer, nhiều lập trình viên sử dụng "em" thay vì dùng pixels. 1em bằng kích cỡ font hiện tại. Kích cỡ text mặc định trên trình duyệt là 16px. Do đó kích cỡ mặc định của 1em là 16px.
Kích cỡ có thể được chuyển đổi từ pixels sang em sử dụng công thức: pixels/16=em

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
<h1>Đây là ví dụ</h1>
<h2>Đây là ví dụ</h2>
<p>Đây là ví dụ.</p>
<p>Trong một kỷ nguyên mà hacker có thể cuỗm file tuyệt mật của chính phủ và tập đoàn đa quốc gia dễ như trở bàn tay, một câu hỏi không thể không đặt ra trước thềm Bầu cử Mỹ là: Liệu những lá phiếu điện tử có bị đe dọa hay không?.
</p>
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Sử dụng kết hợp Percent và Em
Để có thể làm việc trên tất cả các trình duyệt, thiết lập kích font-size mặc định theo percent (%) đối vơi phần tử <body>

<!DOCTYPE html>
<html>
<head>
</head>
<body>
 
<h1>Sử dụng kết hợp phần trăm và em</h1>
<h2>Sử dụng kết hợp phần trăm và em</h2>
<p>Sử dụng kết hợp phần trăm và em.</p>
<p>Trong một kỷ nguyên mà hacker có thể cuỗm file tuyệt mật của chính phủ và tập đoàn đa quốc gia dễ như trở bàn tay, một câu hỏi không thể không đặt ra trước thềm Bầu cử Mỹ là: Liệu những lá phiếu điện tử có bị đe dọa hay không?!</p>
 
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

Khi thiết kế web, bạn muốn font-size phải được nhất quán trên các trình duyệt và các hệ điều hành khác nhau, thì bạn nên sử dụng đơn vị tính là em, và thiết lập các giá trị font-size cho các thẻ lớn như body, input, select, th, td giá trị ban đầu.

Ví Dụ:

body{font-size: 62.5%;}
input, select, th, td{font-size: 1em;}

Bây giời font-size của bạn trên tất cả web page tương đương với 10 pixel cho mỗi 1 em. Ví dụ, bạn muốn thiết lập giá trị cho p là 19px thì bạn viết như sau:

p{font-size: 1.9em /* hiển thị text với 19 pixels */;} 

Font-size keyword: 
Một giải pháp khác cho việc gán giá trị cho font-size là sử dụng keyword như: xx-small, x-small, small, large, x-large, và xx-large.

h2{font-size: x-large;}

Sử dụngFont-size keyword có 2 lợi ích: nó sẽ dễ dàng tăng hoặc giảm kích thước trong hầu hết các trình duyệt, và font-size trong các trình duyệt sẽ không bao giờ nhỏ hơn 9 pixel, điều đó chắc chắn rằng các chữ trên website thì hoàn toàn đọc được. Nếu bạn gán giá trị cho font-size = small, thì bạn nên sử dụng font chữ sans serif như Verdana để tăng tính dễ đọc trên website.
Các trình duyệt thiết lập giá trị mặc định là 16 pixel, tương đương với medium keyword. Bằng cách thiết lập font-size trong thẻ body là 62.5%, thì giá trị mặc định giảm xuống là 10 pixel:
(16 pixel)*62.5% = 10 pixel

Xem Ví Dụ để hiểu rỏ hơn:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <title>Sử dụng font-size keyword</title>
 </head>
<body>
 
    <p class="size-xx-large">
 
        Đây là font-size xx-large</p>
 
    <hr />
 
    <p class="size-x-large">
 
        Đây là font-size x-large</p>
 
    <hr />
 
    <p class="size-large">
 
        Đây là font-size large</p>
 
    <hr />
 
    <p class="size-medium">
 
        Đây là font-size medium</p>
 
    <hr />
 
    <p class="size-small">
 
        Đây là font-size small</p>
 
    <hr />
 
    <p class="size-x-small">
 
        Đây là font-size x-small</p>
 
    <hr />
 
    <p class="size-xx-small">
 
        Đây là font-size xx-small</p>
 
    <hr />
</body>
</html>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

4.Thuộc tính font-variant:

Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ.
Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế.
Trong ví dụ sau chúng ta sẽ sử dụng kiểu small-caps cho phần h1

<h1> Ví dụ font variant</h1>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

5. Thuộc Tính Font-weight:

Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold). Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ 100 – 900.
Thử in đậm phần p:

p {font-weight:bold}

6. Thuộc tính font rút gọn:

Cấu trúc rút gọn cho các thuộc tính nhóm font:
Font :<font-style> | < font-variant> | <font-weight> | <font-size> |< font-family>

Cách sử dụng tương tự như thuộc tính background rút gọn nên mình sẽ không nói lại.

Read More...

[CSS] Bài 5 : Thuộc Tính Background

Trong bài các bài trước chúng ta đã tìm hiểu Css là gì? Cú pháp viết CSS và CSS selector hôm nay chúng ta sẽ bắt đầu các bài viết nói về các thuộc tính của CSS. Bài viết hôm nay sẽ là bài viết đầu tiên giới thiệu về thuộc tính Background - thuộc tính này sẽ giúp bạn có thể tạo màu nền và ảnh nền cho các thành phần trên trang web.

1.Tổng Quát:

5 tính chất chính của background mà bạn cần biết đó là:

• background-color : Đặt thuộc tính màu nền
• background-image : Dùng ảnh làm màu nền cho một element
• background-position : Ví trí của ảnh
• background-repeat : Tùy chỉnh ảnh nền có lặp hay không, lặp kiểu nào...
• background-attachment : Đặt chế đố ảnh nền scroll theo trang hoặc là ở vị trí cố định

Chúng ta sẽ đi tìm hiểu từng thuộc tính 1.

2. Cách Tạo Màu nền (Background-color):

Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng giống như color nhưng có thêm giá trị transparent để tạo nền trong suốt.

Cách Dùng:

1	background-color: #006600;

2	background-color: green;

3	background-color: rgb(0, 102, 0);

4	background-color:  transparent;

Các giá trị của background-color có thể là:

• Tên màu (tiếng anh), ví dụ: black, green…
• Hệ màu RGB, ví dụ: rgb(255,0,0)
• Hệ hex, ví dụ: #000000
• transparent: trong suốt (đây là một giá trị đặc biệt của background-color)

Ví dụ sau đây sẽ chỉ cho chúng ta biết cách sử dụng thuộc tính background-color để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đen và xanh da trời.

<h1> I LOVE DESIGN WEB </h1>
<h2>  Sáng Tạo - Học Hỏi </h2>

See the Pen %= penName %> by Nguyễn Hữu Trọng (@Rain) on CodePen

3.Tạo Ảnh nền (Background-image):

Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn. Để chèn ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính background-image. 

Cú Pháp:

tag { background-image: url(Link hình ảnh) }

Bây giờ chúng ta sẽ cùng làm một ví dụ minh họa để xem thuộc tính background-image sẽ hoạt động ra sao. Đầu tiên hãy tìm một tấm ảnh mà bạn thích, ở đây chúng ta sẽ lấy tấm ảnh logo.png. Sau đó, chúng ta sẽ viết CSS để đặt logo này làm ảnh nền trang web như sau:

1	body { background-image: url(logo.png) }

Với logo.png là file hình được đặt chung với thư mục chứa file CSS. Như các bạn đã thấy chúng ta sẽ phải chỉ định đường dẫn của ảnh trong cặp ngoặc đơn sau url. Do ảnh đặt trong cùng thư mục với file css nên chúng ta chỉ cần ghi logo.png . Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục gốc và đưa ảnh logo.png vào thư mục img đó  thì chúng ta sẽ phải ghi là background-image:url(img/logo.png). Đôi khi nếu không chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh. (xem lại bài HTML link)

4.Lặp Lại ảnh nền (Background-repeat)

Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn
thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị:
+ repeat-x: Chỉ lặp lại ảnh theo phương ngang.
+ repeat-y: Chỉ lặp lại ảnh theo phương dọc.
+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
+ no-repeat: Không lặp lại ảnh.

Ví Dụ:

body { background-image:url(logo.png);background-repeat:no-repeat;}

Ở ví dụ dưới đây mình có một tấm hình có kích thước 65x35px để làm nền cho một thành phần <div class="box"> có độ rộng 170px và độ cao 150px. Khi khai báo thuộc tính background-repeat sẽ có các kết quả tương ứng sau đây:

5. Khóa Ảnh Nền ( Background-attachment)

Background-attachment là một thuộc tính cho phép bạn xác định tính cố định của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị:
+ scroll: Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định.
+ fixed: Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web.

6. Định Vị ảnh nền (Background-position)

Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình (hay góc tọa độ 0, 0 theo tọa độ màn hình). Tuy nhiên với thuộc tính background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị trí nào (trong không gian của thành phần mà nó làm nền). Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị chính xác như centimeters, pixels, inches,… hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right.

Ví Dụ:

1	background-position: left top; /* Đặt ảnh ở vị trí trên cùng bên trái */

2	background-position: 50px -10px; /* Đặt ảnh cách mép trái 50px và mép trên 10px */

3	background-position: 0% 50%; /* Căn ảnh theo % */

4	background-position: center center; /* Đặt ảnh ở chính giữa thẻ HTML */

Ví dụ

1

.mybox{

2	width: 150px;

3	height: 100px;

4	border: 1px solid blue;

5	background-color: blue;

6	background-image: url(background.gif);

7	background-repeat: no-repeat;

8	background-position: top right;

9

}

Và đây là kết quả

6. Thuộc Tính Background thu gọn:

Khi sử dụng quá nhiều thuộc tính CSS sẽ gây khó khăn cho người đọc, công tác chỉnh sửa cũng như tốn nhiều dung lượng ổ cứng cho nên CSS đưa ra một cấu trúc rút gọn cho các thuộc tính cùng nhóm.
Ví dụ: Chúng ta có thể nhóm lại đoạn CSS sau

background-color:transparent;background-image: url(logo.png);background-repeat: no-repeat;background-attachment: fixed;background-position: right bottom;

thành một dòng ngắn gọn:

background:transparent url(logo.png) no-repeat fixed right bottom;

Từ ví dụ trên chúng ta có thể khái quát cấu trúc rút gọn cho nhóm background:
background:<background-color> | <background-image> | <background-repeat> | <background-attachment> | <background-position>
Theo mặc định thì các thuộc tính không được đề cập sẽ nhận các giá trị mặc định.
Ví dụ: Chúng ta sẽ bỏ qua hai thuộc tính background-attachment và backgroundposition ở dòng mã trên đi:

background:transparent url(logo.png) no-repeat;

Hai thuộc tính không được chỉ định sẽ đơn thuần được thiết lập tới giá trị mặc định mà chúng ta điều biết là scroll và top left.

Read More...