Nếu bạn muốn tạo các trang web tuyệt vời thu hút khách truy cập và giữ họ trên trang web của bạn hơn mười lăm giây, bạn sẽ cần sử dụng HTML và CSS. Trong hướng dẫn dành cho người mới bắt đầu này, chúng tôi sẽ hướng dẫn bạn mọi thứ bạn cần biết
Monsterhost có rất nhiều hướng dẫn hữu ích cho người mới bắt đầu và chúng tôi muốn bắt đầu với những điều cơ bản. Vì vậy, hãy bắt đầu với điều quan trọng nhất bạn cần biết trước khi học cách liên kết CSS với HTML
Mục lục
- HTML là gì?
- CSS là gì?
- Tại sao mọi người tách HTML khỏi CSS?
- Tại sao liên kết CSS với HTML
- Ưu và nhược điểm của việc biết cách liên kết CSS với HTML
- 1. Tiết kiệm thời gian
- 2. Các trang web của bạn sẽ tải nhanh hơn
- 3. Bạn sẽ nhận được nhiều khách truy cập hơn
- Đối với khuyết điểm
- Hướng dẫn 2 bước về cách liên kết CSS với HTML
- 1. Use the tag that you put in the HTML’s section.
- 2. Lưu các thay đổi vào tệp HTML của bạn
- kết thúc
- Bài viết liên quan
HTML là gì?
HTML [Ngôn ngữ đánh dấu siêu văn bản] là ngôn ngữ cung cấp cấu trúc trang web của bạn. Bạn sử dụng HTML cho những thứ như thế này
- Thiết kế biểu mẫu, chẳng hạn như biểu mẫu mà khách truy cập của bạn sẽ sử dụng để đặt hàng sản phẩm hoặc đặt dịch vụ của bạn
- Thêm bảng tính và video vào trang web của bạn
- Sắp xếp thông tin của bạn bằng cách sử dụng bảng, dấu đầu dòng, hình ảnh, tiêu đề, v.v.
CSS là gì?
HTML cung cấp cấu trúc trang web của bạn, nhưng CSS [Cascading Style Sheets] cung cấp kiểu trang web của bạn. Đây là ngôn ngữ cho phép bạn làm những việc như thế này
- Thay đổi màu sắc và phông chữ trên trang web của bạn
- Thay đổi bố cục của bạn
- Điều chỉnh trang web của bạn với các kích thước màn hình khác nhau
Tại sao mọi người lại tách HTML khỏi CSS?
Phong cách và cấu trúc kết hợp với nhau để tạo ra các trang web đẹp mắt, nhưng sẽ dễ dàng hơn khi chỉ tập trung vào một trong những yếu tố này tại một thời điểm. Điều này giúp quản lý nhiều trang web dễ dàng hơn vì bạn có thể tạo các trang web có cấu trúc tương tự, chia sẻ chúng trên các trang web và sau đó điều chỉnh kiểu trang web cho phù hợp với bất kỳ trang web nào bạn đang xuất bản trên đó. Nhưng ngay cả khi bạn đang sử dụng HTML riêng biệt với CSS, thì đến một lúc nào đó, bạn sẽ cần biết cách liên kết CSS với HTML
Tại sao liên kết CSS với HTML
Thông thường, hầu hết mọi người thêm CSS vào HTML bằng cách nhúng các quy tắc CSS vào từng tệp HTML. Nhưng điều này tốn rất nhiều thời gian và năng lượng. Ngoài ra, nó làm tăng mã của bạn khi bạn phải liên tục thêm cùng một quy tắc CSS và những thay đổi bạn thực hiện đối với một tệp sẽ không chuyển sang các tệp khác của bạn
Khi bạn đặt các kiểu CSS vào một đơn. css và liên kết tệp đó với tệp HTML của bạn, bạn có thể sử dụng một tệp CSS để tạo kiểu cho nhiều trang HTML
Dưới đây là những ưu và nhược điểm của việc liên kết CSS thay vì nhúng nó
Ưu và nhược điểm của việc biết cách liên kết CSS với HTML
Hãy bắt đầu với những ưu điểm
1. Tiết kiệm thời gian
Vì bạn chỉ cần tạo một tệp CSS, nên biết cách liên kết CSS với HTML giúp bạn tạo trang web hiệu quả hơn nhiều
2. Các trang web của bạn sẽ tải nhanh hơn
Nguồn. Giphy
Nếu bạn đã từng nhận thấy rằng trang web của mình chạy hơi chậm, bạn có thể thử liên kết CSS với các tệp HTML của mình thay vì nhúng các quy tắc kiểu. Khi bạn làm điều này, trang web của bạn sẽ lưu tệp CSS vào bộ nhớ đệm, vì vậy tệp sẽ tải nhanh hơn vào lần tiếp theo khi khách truy cập vào trang web của bạn. Nếu trang web của bạn vẫn chạy chậm sau đó, bạn có thể thử chuyển sang lưu trữ VPS. Điều này không chỉ làm cho trang web của bạn tải nhanh hơn mà còn an toàn hơn
3. Bạn sẽ nhận được nhiều khách truy cập hơn
Khi bạn lưu trữ các kiểu CSS của mình trong một tệp riêng biệt với tệp HTML của mình, các công cụ tìm kiếm sẽ đọc tệp HTML của bạn dễ dàng hơn. Điều này sẽ khiến họ xếp hạng trang web của bạn cao hơn trong kết quả tìm kiếm, giúp tăng lưu lượng truy cập web của bạn
Đối với khuyết điểm
Thành thật mà nói, có rất ít nhược điểm khi liên kết CSS với HTML. Nhưng nếu trang web của bạn không có đủ điều kiện về kiểu dáng để biện minh cho việc có CSS bên ngoài, bạn thực sự có thể dành nhiều thời gian hơn để làm việc này so với việc bạn chỉ nhúng các quy tắc kiểu dáng vào HTML của mình
Bây giờ bạn đã biết những ưu và nhược điểm của việc liên kết CSS với HTML, đây là cách bạn thực hiện
Hướng dẫn 2 bước về cách liên kết CSS với HTML
1. Use the tag that you put in the HTML’s section.
Liên kết trông như thế này
Đây là một khóa học về tất cả các thuộc tính trong liên kết
- quan hệ. Điều này xác định mối quan hệ giữa tệp lưu trữ lệnh này và tệp bạn sẽ xác định khi truy cập thuộc tính “href”. “Biểu định kiểu” chỉ có nghĩa là giá trị tiêu chuẩn cho thuộc tính “rel” là biểu định kiểu
- loại hình. Điều này xác định nội dung của tệp bạn đang liên kết. Trong mã này, giá trị của thuộc tính được đặt thành “text/css”
- href. Điều này xác định vị trí của tệp CSS mà bạn đang cố liên kết với tệp HTML. Nếu tệp CSS nằm trong cùng thư mục với tệp HTML, bạn chỉ cần nhập tên tệp. Nhưng nếu tệp CSS của bạn ở một nơi riêng biệt với tệp HTML của bạn, thì bạn cũng sẽ phải bao gồm tên thư mục. Ví dụ. CSSFile/biểu định kiểu. css
- phương tiện truyền thông. Điều này xác định loại phương tiện mà các quy tắc CSS được tối ưu hóa cho. “Màn hình” trong mã này có nghĩa là các quy tắc được tối ưu hóa cho màn hình máy tính. Nếu bạn muốn tối ưu hóa các quy tắc cho trang được in, bạn sẽ sử dụng giá trị “print” để thay thế
2. Lưu các thay đổi vào tệp HTML của bạn
Khi bạn đã sửa đổi các giá trị trong mã, tất cả những gì bạn phải làm là lưu các thay đổi và nhập URL trang web của bạn vào trình duyệt. Các trang web của bạn bây giờ sẽ thích ứng để phù hợp với phong cách được viết trong tệp CSS
Và đó là nó. Thực hiện theo hai bước đơn giản này và bạn sẽ không cần phải viết các quy tắc CSS lặp đi lặp lại trong mỗi tệp HTML đơn lẻ mà bạn tạo
kết thúc
Có rất nhiều cách để liên kết CSS với HTML, nhưng cách tốt nhất là tạo một tệp CSS riêng và sử dụng thẻ của HTML bất cứ khi nào bạn muốn đưa vào biểu định kiểu. Điều này giúp tiết kiệm thời gian, làm cho trang web của bạn tải nhanh hơn và cải thiện SEO của bạn
HTML CSS đi đâu?
An internal stylesheet resides within an HTML document. To create an internal stylesheet, you place CSS inside a element contained inside the HTML .Liên kết ở đâu trong HTML?
Liên kết HTML - Cú pháp . Văn bản liên kết là phần sẽ hiển thị cho người đọc. element is the href attribute, which indicates the link's destination. The link text is the part that will be visible to the reader.Tại sao CSS của tôi không liên kết với HTML?
Đảm bảo rằng bạn thêm thuộc tính rel vào thẻ liên kết . Nếu bạn bỏ qua thuộc tính rel từ thẻ