ĐỊNH DẠNG KHUNG

Khung (box): Các phần tử HTML thường được biểu diễn như các hộp chữ nhật trên trang web

ĐỊNH DẠNG KHUNG

• Các phần tử HTML thường được biểu diễn như các hộp chữ nhật trên trang web, mỗi phần tử được xem như một hộp, bao gồm: nội dung (content), vùng đệm (padding), đường viền (border), và lề (margin).
• Định dạng khung liên quan đến việc thiết lập các thuộc tính để kiểm soát kích thước, khoảng cách, đường viền và màu sắc của các hộp này.

Thuộc tính CSS liên quan đến định dạng khung

Thuộc tính?

• border: Thuộc tính này có thể gán giá trị là đồng thời các thuộc tính border-width, border-style và border-color. Ví dụ: border: 2px solid red;
• padding: Vùng đệm, khoảng cách từ nội dung bên trong đến đường viền của khung.
• margin: Lề, khoảng cách từ đường viền của khung đến các khung văn bản xung quanh.
• border-color: Màu của đường 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.

​

VÍ DỤ:

<style>

h1 { border: 5px ridge blue;

padding: 20px;

margin: 20px;

}

em { border: 2px double red;

}

</style>

MÔ HÌNH KHUNG (BOX)

• Một hộp, bao gồm: nội dung (content), vùng đệm (padding), đường viền (border), và lề (margin).

​

ỨNG DỤNG

•Định dạng khung giúp người phát triển web có thể kiểm soát giao diện trang web một cách chính xác.

•Nó giúp tạo ra các bố cục phức tạp và hấp dẫn, đồng thời đảm bảo tính nhất quán trên toàn trang web.

•Giúp sắp xếp và căn chỉnh các thành phần trang web theo ý muốn.

Các bộ chọn đặc biệt của CSS.

Thuộc tính lớp (class)?

• Được sử dụng để chỉ định đến lớp của các phần tử. nhiều phần tử có thể cùng thuộc một lớp.
• Cú pháp CSS cho lớp:
• .tên lớp { thuộc tính CSS}

VÍ DỤ:

-HTML:

<div class="city">

<h1>London</h1>

<p>London is the capital of England.</p>

</div>

<div class="city">

<h1>Paris</h1>

<p>Paris is the capital of France.</p>

</div>

-CSS:

.city { border: 5px ridge blue; padding: 20px;

margin: 20px;

}

​

Các bộ chọn đặc biệt của CSS.

Thuộc tính mã định danh (id)?

• Được sử dụng để chỉ định id duy nhất cho một phần tử HTML.
• Cú pháp CSS cho id:
• #tên id { thuộc tính CSS}

VÍ DỤ:

-HTML:

<div id="city">

<h1>London</h1>

<p>London is the capital of England.</p>

</div>

​

-CSS:

#city { border: 5px ridge blue; padding: 20px;

margin: 20px;

}

​

THỰC HÀNH

XIN CẢM ƠN!

Định dạng khung là một trong những kiến thức cơ bản và quan trọng trong thiết kế web. Nắm vững các thuộc tính và cách sử dụng sẽ giúp bạn tạo ra các trang web đẹp và chuyên nghiệp

CÁC MỨC ƯU TIÊN CỦA BỘ CHỌN

Khi có nhiều mẫu CSS được áp dụng cho cùng một phần tử HTML, trình duyệt sẽ tuân theo thứ tự ưu tiên để xác định kiểu dáng cuối cùng

Lớp giả (PSEUDO-CLASS)

Để làm gì?

-Được sử dụng để xác định xác định trạng thái đặc biệt của một phần tử. -Ví dụ: Khi người dùng di chuyển hay nháy chuột lên phần tử đó.

​

Cách sử dụng?

-Trong CSS, lớp giả viết sau dấu hai chấm (:)

-Cú pháp: <thẻ>:lớp giả {thuộc tính;}

-Minh hoạ:

HTML: <h1>Hello</h1>

CSS: h1:hover {color:red}

-Trạng thái: Khi người dùng di chuyển chuột đến từ Hello sẽ chuyển sang màu đỏ.

Phần tử giả (PSEUDO-ELEMENT)

Để làm gì?

-Phần tử giả CSS được sử dụng để định kiểu cho các phần cụ thể của một phần tử.

-Ví dụ:

• Định dạng chữ cái hoặc dòng đầu tiên của một phần tử
• Chèn nội dung trước hoặc sau một phần tử
• Định dạng các điểm đánh dấu của các mục danh sách

​

Cách sử dụng?

-Trong CSS, lớp giả viết sau dấu hai chấm (::)

-Cú pháp: <thẻ>:: Phần tử giả {thuộc tính;}

-Minh hoạ:

HTML: <p>Hello, The ::first-line pseudo-element is used to add a special style to the first line of a text.</p>

CSS: p::first-line {color:red}

-Trạng thái: Dòng đầu tiên của thẻ <p> sẽ chuyển sang màu đỏ.

MỨC ĐỘ ƯU TIÊN KHI ÁP DỤNG CSS

1. !important: Các thuộc tính CSS có từ khóa !important sẽ có mức ưu tiên cao nhất.
2. Inline CSS: Các định dạng CSS được viết trực tiếp trong phần tử HTML (style="...") có độ ưu tiên cao hơn.
3. CSS Liên kết qua Media type: CSS được liên kết bằng media type.
4. CSS trong CSS: CSS được viết trong thẻ style.
5. Nguyên tắc thứ tự cuối cùng (Rule order): Nếu có nhiều định dạng CSS cùng độ ưu tiên, định dạng nào được khai báo sau sẽ được áp dụng.
6. Kế thừa từ CSS cha: Các thuộc tính CSS được kế thừa từ phần tử cha.
7. Mặc định theo trình duyệt: Nếu không có CSS nào được chỉ định, trình duyệt sẽ sử dụng các kiểu mặc định của nó.

VÍ DỤ:

HTML:

<BODY>

<p style="color:blue">This is a paragraph 1.</p>

<p >This is a paragraph 2.</p>

</BODY>

/* Kiểu dáng nội dòng trong HTML */

<p style="color:blue">

CSS:

/* Kiểu dáng mặc định cho tất cả các đoạn văn bản */

p{ color:red;}

/* Ghi đè kiểu dáng mặc định */

{ color: green !important; }

​

Xin cảm ơn!

Nếu không có CSS nào được chỉ định, trình duyệt sẽ sử dụng các kiểu mặc định của nó.

BỐ CỤC TRANG WEB

Việc tạo trang web thường sử dụng ngôn ngữ HTML để xây dựng cấu trúc và CSS để định dạng giao diện.

Bố cục trang web

Một trang web thường có các thành phần cơ bản sau:

•Phần tiêu đề trang (header): Thường được đặt ở đầu trang, bao gồm các thông tin chung như tên trang web, logo, hoặc các liên kết điều hướng chính.

•Phần nội dung chính (content): Đây là phần chứa các thông tin quan trọng của trang web, bao gồm:

◦Bài giới thiệu ◦Các bài viết ◦Các ảnh ◦Góc nhạc, video clip

◦Góc bình luận ◦Góc bình chọn: tạo các biểu mẫu hỗ trợ nhập dữ liệu.

•Phần chân trang (footer): Thường nằm ở cuối trang, chứa các thông tin bổ sung như thông tin về nhóm tác giả, địa chỉ liên hệ, thông tin về nguồn gốc tài liệu.

Bối cảnh

Điều đó xảy ra ở đâu?

Chèn văn bản vào đây Chèn văn bản vào đây Chèn văn bản vào đây Chèn văn bản vào đây Chèn văn bản vào đây Chèn văn bản vào đây.

Xảy ra khi nào?

Chèn văn bản vào đây Chèn văn bản vào đây Chèn văn bản vào đây Chèn văn bản vào đây Chèn văn bản vào đây Chèn văn bản vào đây.

Chèn văn bản vào đây.

Chèn văn bản vào đây Chèn văn bản vào đây Chèn văn bản vào đây Chèn văn bản vào đây Chèn văn bản vào đây.

Đánh giá

Bạn sẽ giới thiệu cuốn sách này chứ?�Viết đánh giá của bạn tại đây.