Tôi đặt liên kết biểu định kiểu trong html ở đâu?

Có nhiều cách để liên kết các biểu định kiểu với HTML, mỗi cách đều có những ưu và nhược điểm riêng. Các phần tử và thuộc tính HTML mới đã được giới thiệu để cho phép dễ dàng kết hợp các biểu định kiểu vào tài liệu HTML

Một biểu định kiểu bên ngoài có thể được liên kết với một tài liệu HTML thông qua phần tử HTML LINK

Thẻ được đặt trong tài liệu HEAD. Thuộc tính TYPE tùy chọn được sử dụng để chỉ định loại phương tiện--văn bản/css cho Cascading Style Sheet--cho phép trình duyệt bỏ qua các loại biểu định kiểu mà chúng không hỗ trợ. Định cấu hình máy chủ để gửi văn bản/css làm Loại nội dung cho các tệp CSS cũng là một ý tưởng hay

Biểu định kiểu bên ngoài không được chứa bất kỳ thẻ HTML nào như hoặc

Phần tử STYLE được đặt trong tài liệu HEAD. Thuộc tính TYPE bắt buộc được sử dụng để chỉ định loại phương tiện, cũng như chức năng của nó với phần tử. Tương tự, các thuộc tính TITLE và MEDIA cũng có thể được chỉ định với STYLE

Các trình duyệt rất cũ như Netscape 2. 0, không biết về phần tử STYLE, thông thường sẽ hiển thị nội dung của nó như thể chúng là một phần của CƠ THỂ, do đó làm cho biểu định kiểu hiển thị với người dùng. Để ngăn chặn điều này, nội dung của phần tử STYLE có thể được chứa trong một nhận xét SGML (), như trong ví dụ trước. Việc sử dụng mã thông báo nhận xét này để ẩn biểu định kiểu khỏi các trình duyệt cũ chỉ nên được sử dụng trong HTML, nơi mã thông báo nhận xét thực sự là một phần của biểu định kiểu. Trong XHTML, các mã nhận xét sẽ là một nhận xét XML thực và biểu định kiểu sẽ bị ẩn khỏi các trình duyệt coi tài liệu là XML

Một biểu định kiểu nhúng nên được sử dụng khi một tài liệu có một kiểu duy nhất. Nếu cùng một biểu định kiểu được sử dụng trong nhiều tài liệu, thì an sẽ phù hợp hơn

Một biểu định kiểu có thể được nhập bằng câu lệnh @import của CSS. Câu lệnh này có thể được sử dụng trong tệp CSS hoặc bên trong phần tử STYLE

Lưu ý rằng các quy tắc CSS khác vẫn có thể được bao gồm trong phần tử STYLE, nhưng tất cả các câu lệnh @import phải xuất hiện ở đầu biểu định kiểu. Bất kỳ quy tắc nào được chỉ định trong biểu định kiểu sẽ ghi đè các quy tắc xung đột trong biểu định kiểu đã nhập. Ví dụ: ngay cả khi một trong các biểu định kiểu đã nhập có chứa DT {nền. aqua}, thuật ngữ định nghĩa sẽ vẫn có nền màu vàng

Thứ tự nhập các biểu định kiểu rất quan trọng trong việc xác định cách chúng xếp tầng. Trong ví dụ trên, nếu phong cách. biểu định kiểu css đã nhập đã chỉ định rằng các phần tử MẠNH được hiển thị bằng màu đỏ và chữ punk. biểu định kiểu css đã chỉ định rằng các phần tử MẠNH được hiển thị bằng màu vàng, thì quy tắc sau sẽ thắng và các phần tử MẠNH sẽ có màu vàng

Các biểu định kiểu đã nhập rất hữu ích cho các mục đích mô đun hóa. Ví dụ: một trang web có thể phân tách các biểu định kiểu khác nhau bằng các bộ chọn được sử dụng. Có thể có một đơn giản. biểu định kiểu css đưa ra các quy tắc cho các thành phần phổ biến như BODY, P, H1 và H2. Ngoài ra, có thể có thêm. biểu định kiểu css cung cấp các quy tắc cho các phần tử ít phổ biến hơn như CODE, BLOCKQUOTE và DFN. một cái bàn. biểu định kiểu css có thể được sử dụng để xác định quy tắc cho các phần tử bảng. Ba biểu định kiểu này có thể được đưa vào tài liệu HTML, nếu cần, với câu lệnh @import. Ba biểu định kiểu cũng có thể thông qua phần tử

Kiểu có thể được nội tuyến bằng thuộc tính STYLE. Thuộc tính STYLE có thể được áp dụng cho bất kỳ phần tử BODY nào (bao gồm cả chính BODY) ngoại trừ BASEFONT, PARAM và SCRIPT. Thuộc tính nhận giá trị của bất kỳ số lượng khai báo CSS nào, trong đó mỗi khai báo được phân tách bằng dấu chấm phẩy. Một ví dụ sau

This paragraph is styled in red with the New Century Schoolbook font, if available.

Lưu ý rằng New Century Schoolbook được chứa trong các dấu nháy đơn trong thuộc tính STYLE vì dấu ngoặc kép được sử dụng để chứa các khai báo kiểu

Kiểu nội tuyến không linh hoạt hơn nhiều so với các phương pháp khác. Để sử dụng kiểu nội tuyến, người ta phải khai báo một ngôn ngữ biểu định kiểu duy nhất cho toàn bộ tài liệu bằng cách sử dụng phần mở rộng tiêu đề Content-Style-Type HTTP. Với CSS được nội tuyến, tác giả phải gửi văn bản/css dưới dạng tiêu đề HTTP Kiểu nội dung-Kiểu hoặc bao gồm thẻ sau trong ĐẦU

Kiểu nội tuyến làm mất nhiều ưu điểm của biểu định kiểu bằng cách trộn nội dung với bản trình bày. Đồng thời, các kiểu nội tuyến áp dụng hoàn toàn cho tất cả các phương tiện, vì không có cơ chế chỉ định phương tiện dự định cho một kiểu nội tuyến. Phương pháp này nên được sử dụng một cách tiết kiệm, chẳng hạn như khi một kiểu được áp dụng trên tất cả các phương tiện cho một lần xuất hiện của một phần tử. Nếu kiểu nên được áp dụng cho một phiên bản thành phần nhưng chỉ với một số phương tiện nhất định, hãy sử dụng thuộc tính thay vì thuộc tính STYLE

Thuộc tính LỚP được sử dụng để chỉ định lớp kiểu mà phần tử thuộc về. Ví dụ: biểu định kiểu có thể đã tạo các lớp punk và cảnh báo

.punk     { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }

Các lớp này có thể được tham chiếu trong HTML với thuộc tính LỚP

.punk     { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }

Trong ví dụ này, lớp punk có thể được áp dụng cho bất kỳ phần tử BODY nào vì nó không có phần tử HTML nào được liên kết với nó trong biểu định kiểu. Sử dụng biểu định kiểu của ví dụ, lớp cảnh báo chỉ có thể được áp dụng cho phần tử P

Một thực hành tốt là đặt tên các lớp theo chức năng của chúng hơn là theo hình thức của chúng. Lớp cảnh báo trong ví dụ trước có thể được đặt tên là màu đỏ, nhưng tên này sẽ trở nên vô nghĩa nếu tác giả quyết định thay đổi kiểu của lớp thành một màu khác hoặc nếu tác giả muốn xác định kiểu âm thanh cho những người sử dụng bộ tổng hợp giọng nói

Các lớp có thể là một phương pháp rất hiệu quả để áp dụng các kiểu khác nhau cho các phần giống hệt nhau về mặt cấu trúc của tài liệu HTML. Ví dụ: trang này sử dụng các lớp để tạo kiểu khác cho mã CSS và mã HTML

Thuộc tính ID được sử dụng để xác định một phong cách duy nhất cho một phần tử. Một quy tắc CSS chẳng hạn như

.punk     { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }

có thể được áp dụng trong HTML thông qua thuộc tính ID

.punk     { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }

Mỗi thuộc tính ID phải có một giá trị duy nhất trên tài liệu. Giá trị phải là chữ cái đầu tiên, theo sau là chữ cái, chữ số hoặc dấu gạch ngang. Các chữ cái được giới hạn ở A-Z và a-z

Lưu ý rằng dấu chấm trong giá trị thuộc tính ID, nhưng dấu chấm trong bộ chọn ID. Cũng lưu ý rằng CSS1 cho phép các ký tự Unicode 161-255 cũng như các ký tự Unicode thoát dưới dạng mã số, nhưng HTML 4 không cho phép các ký tự này trong giá trị thuộc tính ID

Việc sử dụng ID phù hợp khi một kiểu chỉ cần được áp dụng một lần trong bất kỳ tài liệu nào. ID trái ngược với thuộc tính ở chỗ cái trước cho phép các kiểu dành riêng cho phương tiện và cũng có thể được áp dụng cho nhiều tài liệu (mặc dù chỉ một lần trong mỗi tài liệu)

Phần tử SPAN được đưa vào HTML để cho phép các tác giả đưa ra kiểu dáng không thể gắn vào phần tử HTML cấu trúc. SPAN có thể được sử dụng làm bộ chọn trong biểu định kiểu và nó cũng chấp nhận các thuộc tính , và

SPAN là một phần tử nội tuyến, vì vậy nó có thể được sử dụng giống như các phần tử như EM và MẠNH trong HTML. Sự khác biệt quan trọng là trong khi EM và MẠNH MẼ mang ý nghĩa cấu trúc, thì SPAN không có ý nghĩa như vậy. Nó tồn tại hoàn toàn để áp dụng kiểu và do đó không có tác dụng khi biểu định kiểu bị tắt

Một số ví dụ về SPAN sau

Example of SPAN




The first few words of a
paragraph could be in small-caps. Style may also be inlined, such as
to change the style of a word like 
Arial.

Phần tử DIV tương tự như phần tử trong chức năng, với điểm khác biệt chính là DIV (viết tắt của "division") là phần tử cấp khối. DIV có thể chứa các đoạn văn, tiêu đề, bảng và thậm chí các bộ phận khác. Điều này làm cho DIV trở nên lý tưởng để đánh dấu các lớp chứa khác nhau, chẳng hạn như chương, tóm tắt hoặc ghi chú. Ví dụ

.punk     { color: lime; background: #ff80c0 }
P.warning { font-weight: bolder; color: red; background: white }

Rất ít tài liệu kiểu CSS sẽ xác thực ở HTML�3. cấp độ 2 (Wilbur). HTML�3. 2 không xác định phần tử, cũng như các thuộc tính , , và cũng không hỗ trợ các thuộc tính TYPE và MEDIA trên các phần tử và

Các phần tử và thuộc tính liên quan đến kiểu này không gây hại cho các trình duyệt không hỗ trợ vì chúng được bỏ qua một cách an toàn. Các tài liệu sử dụng các thành phần và thuộc tính này có thể được xác thực theo HTML 4