Cascading Style Sheets, hay CSS [như nó thường được gọi], là một ngôn ngữ thiết kế đơn giản nhằm đơn giản hóa quá trình làm cho các trang web có thể hiển thị được. Nó là một công cụ mạnh mẽ để các nhà thiết kế web thay đổi thiết kế và kiểm soát các trang web. Điều này ảnh hưởng và thay đổi cách chúng được hiển thị.
Nó được hỗ trợ bởi tất cả các trình duyệt và được thiết kế chủ yếu để tách nội dung tài liệu khỏi cách trình bày tài liệu. Trong bài viết này, trọng tâm chính của chúng tôi sẽ là cách liên kết tệp CSS với tệp HTML
CSS là gì?
CSS là viết tắt của Cascading Style Sheet. Nó là ngôn ngữ đánh dấu biểu định kiểu được sử dụng để trình bày hoặc thêm các tiện ích bổ sung trực quan bằng ngôn ngữ đánh dấu như HTML. Chúng thường được sử dụng để thay đổi bố cục hoặc phông chữ, thêm ảnh hoặc thay đổi màu nền
Làm cách nào để tạo một tệp CSS?
Một biểu định kiểu bên ngoài có thể được tạo trong bất kỳ trình soạn thảo văn bản nào. Nó phải được lưu với một. css và tệp CSS không được chứa bất kỳ thẻ HTML nào. Các tệp HTML và CSS phải ở trong cùng một thư mục
Hãy tiếp tục và bắt đầu tạo tệp CSS đầu tiên của bạn. Bạn có thể đặt tên cho nó là 'phong cách. css'
Khóa học Full Stack Web Developer
Để trở thành chuyên gia về MEAN Stack Xem khóa họcLàm cách nào để liên kết tệp CSS với tệp HTML?
To link the CSS to an HTML file, we use the tag inside the HTML section.
Tệp CSS của bạn sẽ trông giống như hình ảnh hiển thị bên dưới
Điều này sẽ tạo ra kết quả sau.
Hãy xem một ví dụ khác mà bạn thêm hình ảnh bằng CSS.
Lưu ý. Đảm bảo rằng tệp hình ảnh nằm trong cùng thư mục với tệp CSS và HTML.
Điều này sẽ tạo ra kết quả sau
Bạn có muốn trở thành Nhà phát triển Full-Stack không?
Bài viết về liên kết tệp CSS với tệp HTML này cung cấp cho bạn kiến thức về cách bạn có thể liên kết cả hai tệp một cách dễ dàng. Một cách tuyệt vời để tìm hiểu thêm về phát triển web là đăng ký một chương trình học trực tuyến và lấy chứng chỉ. Với khóa học phù hợp từ nhà cung cấp đào tạo phù hợp, đây có thể là một trong những cách tốt nhất để nhanh chóng theo dõi sự nghiệp viết mã của bạn.
Khóa học Full Stack Java Developer của Simplilearn cung cấp mọi thứ bạn cần để làm chủ thế giới phát triển web. Khóa học bao gồm một loạt các công nghệ dành cho nhà phát triển web Java, từ các nguyên tắc nền tảng cơ bản đến các kỹ thuật nâng cao. Khi kết thúc khóa học, bạn sẽ đạt được các kỹ năng sẵn sàng cho công việc cần thiết để xây dựng ứng dụng đầu cuối, kiểm tra và triển khai mã nhanh và chính xác, lưu trữ dữ liệu bằng MongoDB, v.v. thông qua các dự án và bài tập thực hành
Nếu bạn là một nhà phát triển web và di động đầy tham vọng, khóa đào tạo HTML sẽ mở rộng các kỹ năng và cơ hội nghề nghiệp của bạn. Bạn có câu hỏi nào cho chúng tôi không?
Tìm Chương trình đào tạo trực tuyến dành cho nhà phát triển Java Full Stack của chúng tôi tại các thành phố hàng đầu
NameDatePlaceNhóm nhà phát triển Java Full Stack bắt đầu vào ngày 15 tháng 12 năm 2022,Đợt cuối tuần Chi tiết CityView của bạnKhóa học dành cho nhà phát triển Java Full Stack ở SydneyNhóm bắt đầu vào ngày 5 tháng 1 năm 2023,
Cuối tuần
Thông tin về các Tác giả
Simplilearn là một trong những nhà cung cấp dịch vụ đào tạo trực tuyến hàng đầu thế giới về Tiếp thị kỹ thuật số, Điện toán đám mây, Quản lý dự án, Khoa học dữ liệu, CNTT, Phát triển phần mềm và nhiều công nghệ mới nổi khác
Phần tử HTML
1 chỉ định mối quan hệ giữa tài liệu hiện tại và tài nguyên bên ngoài. Phần tử này được sử dụng phổ biến nhất để liên kết đến biểu định kiểu, nhưng cũng được sử dụng để thiết lập biểu tượng trang web [cả biểu tượng kiểu "favicon" và biểu tượng cho màn hình chính và ứng dụng trên thiết bị di động] trong số những thứ khácThử nó
Để liên kết một biểu định kiểu bên ngoài, bạn nên bao gồm một phần tử
1 bên trong
3 của mình như thế này
Ví dụ đơn giản này cung cấp đường dẫn đến biểu định kiểu bên trong thuộc tính
4 và thuộc tính
5 có giá trị là
6.
5 là viết tắt của "mối quan hệ" và có lẽ là một trong những tính năng chính của phần tử
1 — giá trị biểu thị cách mục được liên kết có liên quan đến tài liệu chứa. Như bạn sẽ thấy từ tài liệu tham khảo về các loại Liên kết của chúng tôi, có nhiều loại mối quan hệCó một số loại phổ biến khác mà bạn sẽ gặp. Ví dụ: một liên kết đến favicon của trang web
Có một số giá trị khác của biểu tượng
5, chủ yếu được sử dụng để biểu thị các loại biểu tượng đặc biệt để sử dụng trên các nền tảng di động khác nhau, e. g
1Thuộc tính
10 cho biết kích thước biểu tượng, trong khi
11 chứa loại MIME của tài nguyên được liên kết. Chúng cung cấp các gợi ý hữu ích để cho phép trình duyệt chọn biểu tượng phù hợp nhất hiện cóBạn cũng có thể cung cấp loại phương tiện hoặc truy vấn bên trong thuộc tính
12; . Ví dụ
5Một số tính năng bảo mật và hiệu suất mới thú vị cũng đã được thêm vào phần tử
1. Lấy ví dụ này
7Giá trị
5 của
15 cho biết rằng trình duyệt nên tải trước tài nguyên này [xem Tải trước nội dung với rel="preload" để biết thêm chi tiết], với thuộc tính
16 cho biết loại nội dung cụ thể được tìm nạp. Thuộc tính
17 cho biết liệu tài nguyên có nên được tìm nạp bằng yêu cầu CORS hay khôngGhi chú sử dụng khác
- Phần tử
1 có thể xuất hiện trong phần tử
3 hoặc
50, tùy thuộc vào việc nó có loại liên kết body-ok hay không. Ví dụ: loại liên kết
6 là body-ok, và do đó,
52 được cho phép trong phần thân. Tuy nhiên, đây không phải là một thực hành tốt để làm theo; - Khi sử dụng
1 để thiết lập biểu tượng yêu thích cho một trang web và trang web của bạn sử dụng Chính sách bảo mật nội dung [CSP] để tăng cường bảo mật, chính sách này sẽ áp dụng cho biểu tượng yêu thích đó. Nếu bạn gặp sự cố với biểu tượng yêu thích không tải, hãy xác minh rằng chỉ thị
57 của tiêu đề
56 không ngăn chặn quyền truy cập vào nó - Thông số kỹ thuật HTML và XHTML xác định trình xử lý sự kiện cho phần tử
1, nhưng không rõ chúng sẽ được sử dụng như thế nào - Theo XHTML 1. 0, các phần tử trống như
1 yêu cầu dấu gạch chéo ở cuối.
70 - WebTV hỗ trợ sử dụng giá trị
71 cho
5 để tải trước trang tiếp theo trong chuỗi tài liệu
Thuộc tính
Phần tử này bao gồm các thuộc tính toàn cục
16Thuộc tính này chỉ được sử dụng khi
74 hoặc
75 đã được đặt trên phần tử
1. Nó chỉ định loại nội dung được tải bởi
1, cần thiết để khớp yêu cầu, áp dụng chính sách bảo mật nội dung chính xác và đặt tiêu đề yêu cầu
78 chính xác. Hơn nữa,
74 sử dụng điều này như một tín hiệu để ưu tiên yêu cầu. Bảng bên dưới liệt kê các giá trị hợp lệ cho thuộc tính này và các thành phần hoặc tài nguyên mà chúng áp dụng choGiá trị Áp dụng cho phần tử âm thanh ____440 tài liệu________ Phần tử 441 và
42embed________ Tìm nạp phần tử 443tìm nạp, XHR
Ghi chú. Giá trị này cũng yêu cầu
1 chứa thuộc tính crossorigincác phần tử fontCSS @font-faceimage
45 và
46 với các thuộc tính srcset hoặc imageset, các phần tử SVG
47, CSS
48 rulesobject
49 phần tửscript
40 phần tử, Worker
41style
42 phần tử, CSS
43track
44 phần tửvideo
45 phần tửworkerWorker, SharedWorker
17Thuộc tính liệt kê này cho biết liệu CORS có phải được sử dụng khi tìm nạp tài nguyên hay không. Hình ảnh hỗ trợ CORS có thể được sử dụng lại trong phần tử
47 mà không bị nhiễm độc. Các giá trị được phép là
48Một yêu cầu gốc chéo [i. e. với tiêu đề HTTP
49] được thực hiện, nhưng không có thông tin xác thực nào được gửi [i. e. không có bánh quy, X. 509 hoặc xác thực HTTP Basic]. Nếu máy chủ không cung cấp thông tin xác thực cho trang gốc [bằng cách không đặt tiêu đề HTTP
40], tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chế
41Một yêu cầu gốc chéo [i. e. với tiêu đề HTTP
49] được thực hiện cùng với thông tin đăng nhập được gửi [i. e. xác thực cookie, chứng chỉ và/hoặc HTTP Basic được thực hiện]. Nếu máy chủ không cung cấp thông tin xác thực cho trang gốc [thông qua tiêu đề HTTP
43], tài nguyên sẽ bị nhiễm độc và việc sử dụng nó bị hạn chếNếu không có thuộc tính, tài nguyên được tìm nạp mà không có yêu cầu CORS [i. e. mà không gửi tiêu đề HTTP
49], ngăn việc sử dụng không bị nhiễm độc của nó. Nếu không hợp lệ, nó sẽ được xử lý như thể từ khóa ẩn danh đã được sử dụng. Xem thuộc tính cài đặt CORS để biết thêm thông tin
45 Không dùng nữa Không chuẩnChỉ đối với
46, thuộc tính Boolean
45 cho biết liệu biểu định kiểu được mô tả có nên được tải và áp dụng cho tài liệu hay không. Nếu
45 được chỉ định trong HTML khi nó được tải, biểu định kiểu sẽ không được tải trong khi tải trang. Thay vào đó, biểu định kiểu sẽ được tải theo yêu cầu, nếu và khi thuộc tính
45 được thay đổi thành
40 hoặc bị xóaĐặt thuộc tính
45 trong DOM khiến biểu định kiểu bị xóa khỏi danh sách
42 của tài liệu
43 Thử nghiệmCung cấp gợi ý về mức độ ưu tiên tương đối để sử dụng khi tìm nạp tài nguyên đã tải trước. Giá trị được phép
44Báo hiệu tìm nạp có mức độ ưu tiên cao so với các tài nguyên khác cùng loại
45Báo hiệu tìm nạp có mức độ ưu tiên thấp so với các tài nguyên khác cùng loại
46Mặc định. Tín hiệu tự động xác định mức độ ưu tiên tìm nạp so với các tài nguyên khác cùng loại
4Thuộc tính này chỉ định URL của tài nguyên được liên kết. Một URL có thể là tuyệt đối hoặc tương đối
48Thuộc tính này cho biết ngôn ngữ của tài nguyên được liên kết. Đó hoàn toàn là tư vấn. Các giá trị được phép được chỉ định bởi RFC 5646. Thẻ để xác định ngôn ngữ [còn được gọi là BCP 47]. Chỉ sử dụng thuộc tính này nếu có thuộc tính
4
40Chỉ dành cho
74 và
42, thuộc tính
40 là thuộc tính kích thước cho biết tải trước tài nguyên thích hợp được sử dụng bởi một phần tử
44 với các giá trị tương ứng cho các thuộc tính
45 và
10 của nó
47Chỉ dành cho
74 và
42, thuộc tính
47 là thuộc tính bộ nguồn cho biết tải trước tài nguyên thích hợp được sử dụng bởi một phần tử
44 với các giá trị tương ứng cho các thuộc tính
45 và
10 của nó
04Chứa siêu dữ liệu nội tuyến — hàm băm mật mã được mã hóa base64 của tài nguyên [tệp] mà bạn yêu cầu trình duyệt tìm nạp. Trình duyệt có thể sử dụng điều này để xác minh rằng tài nguyên được tìm nạp đã được phân phối mà không bị thao tác bất ngờ. Xem tính toàn vẹn của tài nguyên con
12Thuộc tính này chỉ định phương tiện mà tài nguyên được liên kết áp dụng cho. Giá trị của nó phải là loại phương tiện/truy vấn phương tiện. Thuộc tính này chủ yếu hữu ích khi liên kết với các biểu định kiểu bên ngoài — nó cho phép tác nhân người dùng chọn biểu định kiểu phù hợp nhất cho thiết bị mà nó chạy trên đó
Ghi chú
- Trong HTML 4, đây chỉ có thể là một danh sách mô tả phương tiện được phân tách bằng khoảng trắng đơn giản. e. , loại và nhóm phương tiện, khi được xác định và cho phép làm giá trị cho thuộc tính này, chẳng hạn như
06,
07,
08,
09. HTML5 đã mở rộng điều này cho bất kỳ loại truy vấn phương tiện nào, vốn là tập hợp lớn nhất của các giá trị được phép của HTML 4 - Các trình duyệt không hỗ trợ Truy vấn phương tiện CSS sẽ không nhất thiết phải nhận ra liên kết đầy đủ;
10 Ngữ cảnh an toàn Thử nghiệmXác định tài nguyên có thể được yêu cầu bởi điều hướng tiếp theo và tác nhân người dùng sẽ truy xuất tài nguyên đó. Điều này cho phép tác nhân người dùng phản hồi nhanh hơn khi tài nguyên được yêu cầu trong tương lai
11Một chuỗi cho biết người giới thiệu nào sẽ sử dụng khi tìm nạp tài nguyên
12 có nghĩa là tiêu đề
13 sẽ không được gửi
14 có nghĩa là sẽ không có tiêu đề
13 nào được gửi khi điều hướng đến nguồn gốc không có TLS [HTTPS]. Đây là hành vi mặc định của tác nhân người dùng, nếu không có chính sách nào được chỉ định khác
16 có nghĩa là liên kết giới thiệu sẽ là nguồn gốc của trang, đại khái là sơ đồ, máy chủ và cổng
17 có nghĩa là điều hướng đến các nguồn gốc khác sẽ bị giới hạn trong sơ đồ, máy chủ và cổng, trong khi điều hướng trên cùng một nguồn gốc sẽ bao gồm đường dẫn của người giới thiệu
18 có nghĩa là liên kết giới thiệu sẽ bao gồm nguồn gốc và đường dẫn [chứ không phải đoạn, mật khẩu hoặc tên người dùng]. Trường hợp này không an toàn vì nó có thể rò rỉ nguồn gốc và đường dẫn từ tài nguyên được bảo vệ bằng TLS sang nguồn gốc không an toàn
5Thuộc tính này đặt tên cho mối quan hệ của tài liệu được liên kết với tài liệu hiện tại. Thuộc tính phải là một danh sách các giá trị loại liên kết được phân tách bằng dấu cách
10 Thử nghiệmThuộc tính này xác định kích thước của các biểu tượng cho phương tiện trực quan có trong tài nguyên. Nó phải có mặt chỉ khi
5 chứa giá trị
22 hoặc loại không chuẩn như
23 của Apple. Nó có thể có các giá trị sau
24, nghĩa là biểu tượng có thể được thu nhỏ theo bất kỳ kích thước nào vì nó ở định dạng véc-tơ, chẳng hạn như
25- danh sách kích thước được phân tách bằng khoảng trắng, mỗi kích thước ở định dạng
26 hoặc
27. Mỗi kích thước này phải được chứa trong tài nguyên
Ghi chú. Hầu hết các định dạng biểu tượng chỉ có thể lưu trữ một biểu tượng duy nhất; . Định dạng ICO của MS cũng như ICNS của Apple. ICO phổ biến hơn, vì vậy bạn nên sử dụng định dạng này nếu cần hỗ trợ nhiều trình duyệt [đặc biệt đối với các phiên bản IE cũ]
29Thuộc tính
29 có ngữ nghĩa đặc biệt trên phần tử
1. Khi được sử dụng trên
52, nó xác định một biểu định kiểu mặc định hoặc thay thế
11Thuộc tính này được sử dụng để xác định loại nội dung được liên kết với. Giá trị của thuộc tính phải là loại MIME, chẳng hạn như văn bản/html, văn bản/css, v.v. Việc sử dụng phổ biến thuộc tính này là để xác định loại biểu định kiểu được tham chiếu [chẳng hạn như văn bản/css], nhưng do CSS là ngôn ngữ biểu định kiểu duy nhất được sử dụng trên web, không những có thể bỏ qua thuộc tính
11 mà còn có thể bỏ qua thuộc tính này. . Nó cũng được sử dụng trên các loại liên kết
74, để đảm bảo trình duyệt chỉ tải xuống các loại tệp mà nó hỗ trợ
36Thuộc tính này chỉ rõ ràng rằng một số hoạt động nhất định sẽ bị chặn khi tìm nạp tài nguyên bên ngoài. Các hoạt động bị chặn phải là một danh sách các thuộc tính chặn được phân tách bằng dấu cách được liệt kê bên dưới
37. Hiển thị nội dung trên màn hình bị chặn
Thuộc tính không chuẩn
38 Không chuẩn Không dùng nữaGiá trị của thuộc tính này cung cấp thông tin về các chức năng có thể được thực hiện trên một đối tượng. Các giá trị thường được cung cấp bởi giao thức HTTP khi nó được sử dụng, nhưng nó có thể hữu ích [vì những lý do tương tự như đối với thuộc tính tiêu đề] để bao gồm trước thông tin tư vấn trong liên kết. Ví dụ: trình duyệt có thể chọn cách hiển thị khác của liên kết dưới dạng chức năng của các phương thức được chỉ định; . Thuộc tính này không được hiểu rõ cũng như không được hỗ trợ, ngay cả bởi trình duyệt xác định, Internet Explorer 4
39 Không dùng nữaXác định tên khung hoặc cửa sổ có mối quan hệ liên kết đã xác định hoặc sẽ hiển thị kết xuất của bất kỳ tài nguyên được liên kết nào
Thuộc tính lỗi thời
40 Không dùng nữaThuộc tính này xác định mã hóa ký tự của tài nguyên được liên kết. Giá trị là danh sách các bộ ký tự được phân tách bằng dấu cách và/hoặc dấu phẩy như được định nghĩa trong RFC 2045. Giá trị mặc định là
41Ghi chú. Để tạo hiệu ứng tương tự như thuộc tính lỗi thời này, hãy sử dụng tiêu đề HTTP
42 trên tài nguyên được liên kết
43 Không dùng nữaGiá trị của thuộc tính này cho biết mối quan hệ của tài liệu hiện tại với tài liệu được liên kết, như được xác định bởi thuộc tính
4. Do đó, thuộc tính xác định mối quan hệ ngược lại so với giá trị của thuộc tính
5. Các giá trị loại liên kết cho thuộc tính tương tự như các giá trị có thể có cho
5Ghi chú. Thay vì
43, bạn nên sử dụng thuộc tính
5 với giá trị loại liên kết ngược lại. Ví dụ: để thiết lập liên kết ngược cho
49, hãy chỉ định
50. Ngoài ra, thuộc tính này không có nghĩa là "sửa đổi" và không được sử dụng với số phiên bản, mặc dù nhiều trang web sử dụng sai thuộc tính này theo cách nàyví dụ
Bao gồm một biểu định kiểu
Để bao gồm biểu định kiểu trong một trang, hãy sử dụng cú pháp sau
4Cung cấp các biểu định kiểu thay thế
Bạn cũng có thể chỉ định các biểu định kiểu thay thế
Người dùng có thể chọn biểu định kiểu nào sẽ sử dụng bằng cách chọn nó từ menu Xem > Kiểu trang. Điều này cung cấp một cách để người dùng xem nhiều phiên bản của một trang
4Cung cấp các biểu tượng cho các bối cảnh sử dụng khác nhau
Bạn có thể bao gồm các liên kết đến một số biểu tượng trên cùng một trang và trình duyệt sẽ chọn biểu tượng nào hoạt động tốt nhất cho ngữ cảnh cụ thể của nó bằng cách sử dụng các giá trị
5 và
10 làm gợi ý
4Tải tài nguyên có điều kiện bằng truy vấn phương tiện
Bạn có thể cung cấp loại phương tiện hoặc truy vấn bên trong thuộc tính
12; . Ví dụ
4Sự kiện tải biểu định kiểu
Bạn có thể xác định khi nào một biểu định kiểu đã được tải bằng cách theo dõi sự kiện
54 kích hoạt nó;
4Ghi chú. Sự kiện
54 kích hoạt khi biểu định kiểu và tất cả nội dung đã nhập của nó đã được tải và phân tích cú pháp, đồng thời ngay trước khi các kiểu bắt đầu được áp dụng cho nội dungTải trước các ví dụ
Bạn có thể tìm thấy một số ví dụ về
57 trong phần Tải trước nội dung với
74Chặn kết xuất cho đến khi tài nguyên được tìm nạp
Bạn có thể bao gồm mã thông báo
37 bên trong thuộc tính
36; . Ví dụ
0Tóm tắt kỹ thuật
Danh mục nội dung Nội dung siêu dữ liệu. Nếu có mặt
61. Nội dung luồng và nội dung cụm từ. Nội dung được phép Không có; . Bỏ qua thẻ Vì nó là một phần tử void, nên phải có thẻ bắt đầu và không được có thẻ kết thúc. Nếu itemprop có mặt. bất kỳ yếu tố nào chấp nhận nội dung cụm từ. Vai trò ARIA tiềm ẩn
62 với thuộc tính
4 Vai trò ARIA được phépKhông có
64 giao diện DOM được phép_______065