Bài 30: HTML và CSS từ Zero đến Hero(Bài 07 CSS)

  

2.2.8       Tạo bóng chữ

Để tạo bóng cho chữ, sử dụng thuộc tính text-shadow.

Dưới đây là một số đặc tính của text-shadow,

– Giá trị: ‘horizontal offset’‘vertical offset’‘blur radius’‘color’ | none

– Mặc định: none

– Áp dụng: cho tất cả phần tử

– Kế thừa: có

Giá trị của thuộc tính text-shadow gồm ba độ đo (horizontal offset, vertical offset, blur radius) và màu, trong đó blur radius là tùy chọn.

Hai ví dụ, sử dụng thuộc tính text-shadow dạng đơn giản nhất,

h1 {

color: darkgreen;

text-shadow: -.3em -.3em silver;

}

h1 {

color: darkgreen;

text-shadow: .2em .2em silver;

}

Kết quả được thể hiện ở hình sau,

Trong đó,

– horizontal offset: là khoảng dịch của bóng sang phía phải so với văn bản, nếu giá trị này là âm, bóng sẽ được dịch sang phía trái

– vertical offset: là khoảng dịch của bóng xuống phía dưới so với văn bản, nếu giá trị này là âm, bóng sẽ được dịch lên phía trên

– color: màu của bóng, nếu bỏ qua giá trị này, bóng sẽ cùng màu với văn bản

Để bóng có tính mềm mại, cần sử dụng thêm giá trị blur-radius, đây là độ mờ của bóng, giá trị bằng 0 là không làm mờ, giá trị càng cao bóng sẽ càng mờ.

Ví dụ,

h1 {

      color: darkgreen;

      text-shadow: -.3em -.3em .03em silver;

    }

Có thể sử dụng nhiều bóng trên một phần tử văn bản để tạo ra các hiệu ứng khác nhau. Bóng nào khai báo trước sẽ được thực hiện trước, bóng khai báo sau sẽ được thực hiện sau.

Ví dụ, tạo nhiều bóng,

h1 {

      color: darkgreen;

      text-shadow: -.7em -.5em .2em silver,

                  .2em .2em .1em gray;

    }

Ví dụ, tạo chữ nổi,

    body {background-color: thistle;}

    h1 {

      color: #ba9eba;

      text-shadow:

        -.05em -.05em .05em white,

        .03em .03em .05em purple;

    }

Ví dụ, tạo chữ khắc nổi,

    body {background-color: thistle;}

   h1 {

     color: #ba9eba;

    text-shadow:

      -.05em -.05em .05em purple,

     .03em .03em .05em white;

}

Ví dụ, làm chữ phát sáng,

h1 {

      text-shadow: 0 0 .7em purple;

    }

Không nên quá lạm dụng việc tạo bóng cho văn bản vì một số lý do sau: người dùng khó đọc nội dung, trang web bị chậm (đặc biệt trên các thiết bị di động có khả năng xử lý hạn chế), khả năng hỗ trợ của các trình duyệt là không giống nhau.

Lab2.2.e (exercise 12-7, p.257 [3])

2.2.9       Đánh số và đánh dấu đầu dòng

Như đã biết, trình duyệt sẽ tự động đánh số cho danh sách có thứ tự (ordered list), và đánh dấu đầu dòng (bullets) cho danh sách không có thứ tự (unordered list). Tuy nhiên, lập trình viên có thể sử dụng CSS để thay đổi: loại, vị trí, thậm chí không cho xuất hiện các số hoặc các dấu này.

Chọn kiểu

Để chọn kiểu số hoặc dấu cho các mục của danh sách, sử dụng thuộc tính list-style-type.

Dưới đây là một số đặc tính của list-style-type,

– Giá trị: none | disc | circle | square | decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-latin | upper-latin | lower-roman | upper-roman | lower-greek | inherit

– Mặc định: disc

– Áp dụng: ul, ol, li (hoặc các phần tử có hiển thị là list-item)

– Kế thừa: có

Sử dụng giá trị none của thuộc tính list-style-type để gỡ bỏ số hoặc dấu khi dùng danh sách tạo menu hoặc tạo các thành phần của một web form.

Các kiểu dấu đầu dòng được trình duyệt hỗ trợ mặc định gồm: dấu tròn đặc (disc), dấu tròn rỗng (circle), dấu vuông đặc (square).

Các kiểu số và kí tự dùng cho danh sách có thứ tự được thể hiện ở bảng sau,

Giá trị	Hiển thị
decimal	1, 2, 3, 4…
decimal-leading-zero	01, 02, 03, 04…
lower-alpha	a, b, c, d…
upper-alpha	A, B, C, D…
lower-latin	a, b, c, d… (giống lower-alpha)
upper-latin	A, B, C, D…(giống upper-alpha)
lower-roman	i, ii, iii, iv…
upper-roman	I, II, III, IV…
lower-greek	α, β, γ, δ…

Để đánh số hoặc dấu đầu dòng cho một phần tử bất kì, sử dụng thuộc tính display với giá trị là list-item, sau đó chọn một kiểu đánh số hoặc đánh dấu bằng thuộc tính list-style-type. Ví dụ,

p.bulleted {

display: list-item;

list-style-type: upper-alpha;

}

Xác định vị trí của số/dấu

Mặc định, số/dấu sẽ nằm ngoài (outside) vùng nội dung của các mục (list-item), có thể sử dụng thuộc tính list-style-position để kéo số/dấu vào (inside) vùng nội dung của các mục.

Dưới đây là một số đặc tính của list-style-position,

– Giá trị: inside | outside |inherit

– Mặc định: outside

– Áp dụng: ul, ol, li (hoặc các phần tử có kiểu hiển thị là list-item)

– Kế thừa: có

Xem hình minh họa,

Ngoài các kiểu dấu đầu dòng có sẵn, lập trình viên có thể sử dụng thuộc tính list-style-image để dùng các hình ảnh tùy ý làm dấu đầu dòng.

Dưới đây là một số đặc tính của list-style-image,

– Giá trị: url | none |inherit

– Mặc định: none

– Áp dụng: ul, ol, li (hoặc các phần tử có kiểu hiển thị là list-item)

– Kế thừa: có

Khi sử dụng thuộc tính list-style-image, nên sử dụng thêm thuộc tính list-style-type để dự phòng trong trường hợp không thể tải được hình ảnh của thuộc tính list-style-image. Ví dụ,

ul {

list-style-image: url(/images/happy.gif);

list-style-type: circle;

list-style-position: outside;

}