Tin học 12 · Định hướng Tin học ứng dụng

Bài 16. Định dạng khung

Trên một trang web thường có rất nhiều phần tử cùng loại (cùng tên thẻ). Ví dụ thẻ p sẽ tương ứng với rất nhiều phần tử của trang web. Một định dạng với bộ chọn p sẽ áp dụng cho tất cả các thẻ p. Nếu muốn phân biệt các thẻ p với nhau và muốn tạo ra các CSS để phân biệt các thẻ p thì có thể thực hiện được không?

Hoạt động 1

Quan sát cách tô màu nền của hai phần tử trên trang web trong Hình 16.1, em có nhận xét gì?

Thư Bác Hồ gửi học sinh

Non sông Việt Nam có trở nên tươi đẹp hay không, dân tộc Việt Nam có bước tới đài vinh quang để sánh vai với các cường quốc năm châu được hay không, chính là nhờ một phần lớn ở công học tập của các cháu.

Hình 16.1. Nội dung trang web

Các thẻ (hay phần tử) HTML được chia làm hai loại: khối (block level) và nội tuyến (inline).

Các phần tử khối thường bắt đầu từ đầu hàng và kéo dài suốt chiều rộng của trang web. Trong ví dụ ở Hình 16.1, dòng chữ Thư Bác Hồ gửi học sinh được thể hiện ở dạng khối.

Các phần tử nội tuyến là các phần tử nhúng bên trong một phần tử khác. Trong ví dụ ở Hình 16.1, cụm từ Việt Nam là một phần tử nội tuyến, được nhúng trong phần tử p. Mặc định các phần tử HTML sẽ thuộc một trong hai loại khối hoặc nội tuyến (Bảng 16.1).

Phần tử loại khối	Phần tử loại nội tuyến
h1–h6, p, div, address, nav, article, table, hr, ol, ul, li, canvas	b, span, a, em, strong, sub, sup, var, samp, cite, dfn, kbd, pre, code, q, i, u, del, mark, label, textarea, input, script, img, ins

Chúng ta có thể thay đổi loại phần tử HTML bằng thuộc tính display. Các giá trị của thuộc tính này bao gồm block, inline, none. Giá trị none sẽ làm ẩn (không hiển thị) phần tử này trên trang web. Ví dụ CSS sau sẽ đổi loại phần tử span từ dạng mặc định là inline sang block.

<style> span {display: block;

text-indent: 2em; color: red;} p {color: blue;}

Kết quả áp dụng mẫu CSS trên được minh hoạ trong Hình 16.2.

<p> Đây là phần đầu <spanvdòng tiếp theo</ span> <spanvdòng tiếp theo nữa </span> là phần cuỗi của đoạn </p> </body> đây

Hình 16.2. Minh hoạ chuyển đổi phần tử nội tuyến sang khối

Các phần tử HTML đều thuộc một trong hai loại khối (block) hoặc nội tuyến (inline). Có thể dùng thuộc tính display để thay đổi loại phần tử.

Trong hoạt động tiếp theo các em sẽ được làm quen với cách định dạng khung, viền cho các phần tử HTML của trang web. Cần phân biệt hai loại phần tử HTML: phần tử khối và phần tử nội tuyến. Với phần tử dạng khối, các khung được xác định với đầy đủ tính chất; còn với các phần tử nội tuyến thì khung chỉ có thể thiết lập mà không có các thông số chiều cao, chiều rộng.

Các thuộc tính liên quan đến khung của một phần tử HTML được mô tả trong Bảng 16.2. Lưu ý các thuộc tính này đều không có tính kế thừa.

Cho một đoạn mã HTML như sau:

Thuộc tính	Ý nghĩa
width	Chiều rộng của khung. Thuộc tính này chỉ áp dụng cho phần tử dạng khối.
height	Chiều cao khung. Thuộc tính này chỉ áp dụng cho phần tử dạng khối.
padding	Vùng đệm, khoảng cách từ vùng text đến đường viền ngoài của khung.
margin	Lề khung, khoảng cách từ đường viền ngoài của khung đến văn bản xung quanh (nếu có).
border-color	Màu của viền khung.
border-width	Độ dày của đường viền khung.
border-style	Kiểu đường viền khung. Các giá trị có thể là: none, solid, dotted, dashed, double, inset, outset, ridge, groove.
border	Thuộc tính này có thể gán giá trị đồng thời cho các thuộc tính border-width, border-style và border-color; ví dụ: {border: 2px solid red;}

<body> <hl> Lịch sử CSS tưởng của CSS do kĩ sư <em>Hakon Wium người Na Uy , thiẽt lập nam 1994 trong khi lam việc Tim Berners-Lee tai viên hạt nhân CERN </p> </body>

Nếu thiết lập mẫu định dạng như sau thì sẽ nhận được kết quả tương tự như Hình 16.4b.

<style> { border: Spx ridge blue; margin: 20px; width: 200px padding: 1@px; margin: 20px; } em {border: 2px double red; } </style>

Lịch sử CSS

Ý tưởng của CSS do kĩ sư Håkon Wium Lie người Na Uy, thiết lập năm 1994 khi làm việc với Tim Berners-Lee tại viện hạt nhân CERN.

Hình 16.4. Định dạng khung cho loại phần tử khối và phần tử nội tuyến với các thông số khác nhau

3. MỘT SỐ BỘ CHỌN ĐẶC BIỆT CỦA CSS

Hoạt động 3

Thảo luận, tìm hiểu thêm cách thiết lập bộ chọn đặc biệt của CSS và trả lời các câu hỏi sau:

a) Thiết lập bộ chọn là một lớp các phần tử có ý nghĩa gần giống nhau

Trong thực tế, có nhu cầu định dạng cho một nhóm phần tử có cùng ý nghĩa, ví dụ các đoạn văn bản có liên quan đến một sự kiện nào đó hoặc một số đoạn văn bản quan trọng cần nhấn mạnh. Trong các trường hợp này, thiết lập bộ chọn class cho các phần tử có cùng ý nghĩa. Cấu trúc chung của định dạng CSS liên quan đến lớp như sau:

class {thuộc tính trị;} giá

Ví dụ một số bộ chọn CSS như sau:

<style> waring {color: red;} /*chữ màu đỏ cho test {/*chữ màu Xanh in đậm cho test*/ color: blue; font-weight: bold;} </style> lớp

Ví dụ đoạn mã HTML sau được áp dụng mẫu CSS ở ví dụ trên thì đoạn văn bản thứ nhất có chữ màu xanh và in đậm, đoạn văn bản thứ hai có chữ màu đỏ.

<p class test Thông tin đang test <p class 'warning' Thông tin cần warning.

Bảng 16.3. Một số định dạng thường gặp với bộ chọn lớp

Bộ chọn	Ý nghĩa
.test	Áp dụng cho tất cả các phần tử có lớp (class) tên là test.
.test.warning	Áp dụng cho tất cả các phần tử có tên lớp đồng thời là test và warning. Ví dụ: <p class="test warning"></p>
p.test	Áp dụng cho tất cả các phần tử p có gắn lớp tên test.

<body> </body>

b) Thiết lập bộ chọn riêng cho từng phần tử riêng biệt

Chúng ta đã biết cách thiết lập và gắn mã định danh id cho từng phần tử trong tệp HTML. Mỗi phần tử chỉ có một mã định danh id duy nhất trong một trang web.

CSS cho phép thiết lập các mẫu định dạng với các phần tử có id tương ứng như sau:

#idname thuộc tính trị ;} Ví dụ một số mẫu định dạng ID như sau: #home {color red;} /*chữ màu đỏ cho phần tử với id "* / p#home {font-size: /*cỡ chữ 150% cho phần tử p có id "home"* / giá "home

c) Thiết lập bộ chọn thuộc tính

Các định dạng này sẽ được thiết lập và áp dụng cho các phần tử nếu được gắn với thuộc tính cụ thể nào đó.

[href] {border: 1px solid blue;} /*áp dụng cho tãt cả các phần tử có thuộc tính href, vi dụ các phần tử a[target blank" ] {color red; font-weight: bold;} /*áp dụng chữ màu đó và in đậm cho tất cả Các thẻ a thuộc tính target blank

Lưu ý: Khi đặt tên cho id và class:

<p class "test more once Đoạn chương trinh cần kiểm tra.

test test more {background-color: red;}

Có thể thiết lập các mẫu định dạng với bộ chọn là class, ID hoặc thuộc tính.

4. THỰC HÀNH

Nhiệm vụ: Tạo trang web

Yêu cầu: Tạo trang web mô tả bảng 16 tên màu cơ bản CSS như Hình 16.5.

Gợi ý: Bài thực hành có thể thực hiện theo hai bước:

Hình 16.5. Bảng 16 tên màu cơ bản của CSS

Hướng dẫn:

Bước 1. Thiết lập trang web theo nội dung như Hình 16.5. Sử dụng các thẻ <table> để thiết lập bảng. Các hàng của bảng được thiết lập bằng thẻ <tr> </tr> và ô của bảng được thiết lập bằng thẻ <tr> <tr>. Riêng các ô tiêu đề (hàng thứ nhất) sẽ sử dụng thẻ <th>. Lưu ý: các ô cuối của mỗi hàng cần được thiết lập màu nền theo đúng thông số màu đã ghi tại cột 1 hoặc cột 2. Ví dụ mã nguồn của bảng với 2 hàng đầu tiên như sau, các hàng khác sẽ được thiết lập tương tự:

<table> <caption> Bảng tên màu CSS </caption> <tr> <th> Tên màu <th> #hex </th> <th> #rgb(r,g,b) <lth> <th> Thể hiện <lth> <tr> <tdyblack<ltd> <td style (background-color: rgb(0,0,0)\"></td> <ltr> </table>

Ví dụ các mẫu định dạng sau:

<style> rgb(255,255,0); }

table {border 4px solid magenta; padding: 5px; td,th,tr {border 1px solid blue;} td {border: 1px solid blue; width: 25%; } th { border: lpx solid blue; background-color: tr {border: 1px solid black; } caption {color: red; font-size: 200%; font-weight: bold; border: 4px solid green; padding: 2px; margin: 10px;