CSS bên ngoài không hoạt động trong nguyên tử

Question

Cách thích hợp để liên kết tệp CSS với tệp HTML là thêm vào giữa các thẻ HTML ở đầu trang HTML. Tuy nhiên, có nhiều lỗi nhỏ mà bạn có thể mắc phải có thể dẫn đến việc HTML và CSS của bạn không liên kết đúng cách. đó là

Nội dung chính Show

6 sai lầm bạn đang mắc phải khi liên kết CSS với HTML và cách sửa chúng
1. Sử dụng sai thẻ HTML để liên kết HTML với CSS
2. Đặt liên kết CSS vào phần sai của trang web
3. Tên tệp không khớp và tên giá trị liên kết href
4. Khoảng cách trong tên tệp CSS
5. Vị trí tệp HTML và CSS trên cùng một thư mục hoặc các thư mục khác nhau
6. Lỗi cú pháp trong tệp CSS của bạn
Tóm tắt lịch sử
Cách sử dụng tệp CSS
Cú pháp CSS
Ví dụ sử dụng CSS
Tài liệu HTML
Biểu định kiểu CSS
So sánh đầu ra
Tại sao CSS bên ngoài của tôi không được áp dụng?
Tại sao CSS bên ngoài của tôi không liên kết với HTML?
Chúng tôi có thể sử dụng CSS trong Atom không?
Atom có sử dụng HTML 5 không?

6 sai lầm bạn đang mắc phải khi liên kết CSS với HTML và cách sửa chúng

Hãy xem xét từng lỗi bạn có thể mắc phải và cách bạn có thể liên kết HTML với CSS đúng cách

1. Sử dụng sai thẻ HTML để liên kết HTML với CSS

Đôi khi bạn thấy mọi người cố gắng sử dụng các thẻ HTML để liên kết CSS của bạn với HTML. Điều này không thể làm việc

Bạn chỉ có thể sử dụng các thẻ HTML khi bạn đang viết CSS của mình trong phần đầu của chính tài liệu HTML không liên kết tệp CSS

Thẻ HTML chính xác để liên kết tệp CSS với tệp HTML đang sử dụng . "main.css" là tên của tệp CSS. Xin lưu ý rằng thẻ HTML là thẻ tự đóng và không đi theo cặp như thẻ HTML

h1{
    font-weight: 700;
    color: forestgreen;
}

0

2. Đặt liên kết CSS vào phần sai của trang web

Bạn sẽ không thể liên kết HTML và CSS, nếu bạn đặt thẻ HTML trên bất kỳ phần nào khác của trang web ngoài phần bên trong thẻ đầu

Vì vậy, hãy nhìn vào nơi bạn đã đặt thẻ HTML liên kết của mình và điều chỉnh nó cho phù hợp

3. Tên tệp không khớp và tên giá trị liên kết href

Kiểm tra để đảm bảo rằng tên tệp CSS của bạn giống với tên được chỉ định trong giá trị href trên thẻ HTML . Nếu bạn sử dụng một tên khác, trình duyệt sẽ xem liên kết bạn đã gán cho tệp HTML của mình. Nếu nó không tìm thấy gì ở đó, nó sẽ không làm gì cả. Nếu cả hai không khớp, thì bạn đã tìm ra thủ phạm của mình

Tất cả những gì bạn phải làm là thay đổi giá trị href thành tên chính xác của tệp CSS

4. Khoảng cách trong tên tệp CSS

Khi bạn có khoảng trắng trong tệp CSS nameme

h1{
    font-weight: 700;
    color: forestgreen;
}

3, trình duyệt sẽ không thể hiểu chính xác khoảng trắng trong giá trị href

Để thực hiện công việc này, bạn có thể

thay thế khoảng trắng trong giá trị href bằng 1. tôi. e. hoặc
thay thế khoảng trắng trong tên tệp CSS bằng 3 trên cả tên tệp và giá trị liên kết href như một cách để phân tách các từ

5. Vị trí tệp HTML và CSS trên cùng một thư mục hoặc các thư mục khác nhau

Khi các tệp HTML và CSS của bạn không nằm trong cùng một thư mục, bạn có thể gặp một số khó khăn khi liên kết chúng. Bạn có thể giải quyết vấn đề này bằng cách

Sử dụng đường dẫn tệp chính xác đến tệp CSS. Vì vậy, nếu tệp CSS nằm trong một thư mục khác với đường dẫn HTML, bạn cần xác định tên đường dẫn và thêm nó vào giá trị link href. ví dụ. Nếu tệp css nằm trong thư mục có tên là 4 nằm trong cùng thư mục với tệp HTML, thì đường dẫn chính xác sẽ là
Di chuyển CSS và HTML vào cùng một thư mục. Khi bạn di chuyển chúng vào cùng một thư mục, giá trị link href sẽ chỉ là tên tệp css.

6. Lỗi cú pháp trong tệp CSS của bạn

Nếu bạn gặp lỗi trong tệp CSS, điều đó có thể dẫn đến kiểu CSS của bạn không được áp dụng cho mã HTML. Cách dễ nhất để sửa lỗi này là

Sử dụng trình soạn thảo văn bản có tô sáng cú pháp. Đánh dấu cú pháp sẽ giúp bạn xác định nơi mã của bạn không chính xác
Sử dụng công cụ xác thực CSS trực tuyến. Công cụ xác thực CSS trực tuyến sẽ cho bạn biết bạn đã mắc lỗi ở đâu trong mã CSS của mình

Nếu bạn làm theo hướng dẫn này, bạn sẽ luôn có thể kết nối các tệp HTML và CSS của mình với nhau

Chào bạn. Tôi là Avic Ndugu

Tôi đã xuất bản hơn 100 bài đăng trên blog về HTML, CSS, Javascript, React và các chủ đề liên quan khác. Khi tôi không viết, tôi thích đọc sách, đi bộ đường dài và nghe podcast

CSS (Cascading Style Sheets) are files that describe how HTML elements are displayed on the screen, paper, etc. With HTML, you can have either embedded styles or styles can be defined in an external stylesheet. For embedding the styles, the tags are used. The external stylesheets are stored in files with the .css extension. With the external CSS, you can include it on multiple HTML pages to update the style of those pages. Even a single CSS file can be used to style a complete website.

Tóm tắt lịch sử

CSS1 được phát hành vào năm 1996 với Bert Bos là đồng tác giả. Nhóm làm việc CSS bắt đầu giải quyết các vấn đề chưa được giải quyết trong CSS1. Điều này dẫn đến việc tạo ra CSS2 vào tháng 11 năm 1997, được xuất bản dưới dạng khuyến nghị của W3C vào ngày 12 tháng 5 năm 1998. Phiên bản này đã thêm hỗ trợ cho các thiết bị dành riêng cho phương tiện như máy in, phông chữ có thể tải xuống, bảng và định vị phần tử. Tháng 6 năm 1999, CSS3 trở thành đề xuất của W3C. Điều này đã chia tài liệu thành các mô-đun trong đó mỗi mô-đun có các tính năng mở rộng được xác định trong CSS2

Cách sử dụng tệp CSS

Để sử dụng tệp CSS, bạn đưa nó vào phần đầu của tài liệu HTML. Bạn sử dụng thẻ link để gộp file như hình bên dưới

<link rel="stylesheet" type="text/css" href="main.css"/>

thuộc tính href của thẻ liên kết chứa đường dẫn đến tệp CSS. Bằng cách này, các kiểu áp dụng có trong tệp CSS đi kèm sẽ được áp dụng cho tài liệu HTML

Cú pháp CSS

Quy tắc CSS bao gồm hai thành phần, bộ chọn và khai báo. Bộ chọn trỏ đến một phần tử trong tài liệu HTML. Nó có thể là thẻ phần tử, tên lớp, tên id, nhiều thẻ hiển thị phân cấp, v.v. Một khai báo chứa định nghĩa kiểu bao gồm thuộc tính và giá trị. Thuộc tính xác định thuộc tính của phần tử mà bạn muốn thay đổi và giá trị xác định giá trị mới của nó. Mỗi quy tắc CSS có thể có nhiều khai báo. Sau đây là một ví dụ về quy tắc CSS

h1{
    font-weight: 700;
    color: forestgreen;
}

Trong ví dụ trên, chúng ta có h1 làm bộ chọn để chọn tất cả các thẻ h1 trong tài liệu HTML. Quy tắc có hai khai báo, một cho trọng lượng phông chữ và một cho màu sắc. trọng lượng phông chữ và màu sắc là các thuộc tính và 700 và màu xanh lá cây là các giá trị của chúng tương ứng

Ví dụ sử dụng CSS

Phần sau đây hiển thị tài liệu HTML mẫu và biểu định kiểu được sử dụng để tạo kiểu cho nó. Hình ảnh so sánh cũng được thêm vào để so sánh các tài liệu HTML được tạo kiểu và thuần túy

Tài liệu HTML

html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="main.css" type="text/css"> <title>CSS Testtitle> head> <body> <div class="content-wrapper"> <h1>Test document to test <span class="highlight">CSSspan>h1> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium officia similique illum magni explicabo, tempore neque nulla laborum voluptas sint molestias libero et corporis omnis asperiores incidunt, perferendis sed aut!p> <h2>List of itemsh2> <ul> <li>Item 1li> <li>Item 2li> <li>Item 3li> <li>Item 4li> <li>Item 5li> ul> div> body> html>

Biểu định kiểu CSS

body{
    background-color: lightblue;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.content-wrapper{
    padding: 10px 30px;
}
p{
    text-align: justify;
}
h1{
    text-align: center;
}
.highlight{
    font-weight: 700;
    color: forestgreen;
}
h1, h2{
    font-weight: 400;
}

ul li{
    list-style-type: square;
    margin-bottom: 10px;
    margin-left: 50px;
}

So sánh đầu ra

Phía bên trái của hình ảnh hiển thị tài liệu HTML mà không áp dụng các kiểu và phía bên phải hiển thị tài liệu HTML với các kiểu được áp dụng

Tại sao CSS bên ngoài của tôi không được áp dụng?

Đả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ẻ

Tại sao CSS bên ngoài của tôi không liên kết với HTML?

Tình huống phổ biến là tệp CSS và tệp HTML nằm trong cùng một thư mục . Trong trường hợp này, bạn có thể viết href="style. css". Nếu tệp CSS và tệp HTML nằm trong các thư mục khác nhau, bạn cần ghi đúng đường dẫn cần đi từ tệp HTML đến tệp CSS.

Chúng tôi có thể sử dụng CSS trong Atom không?

Đó là trình soạn thảo văn bản có thể tùy chỉnh hoàn toàn. Vì Atom được viết bằng HTML, CSS và JavaScript nên bạn có thể tự mình tùy chỉnh sau khi đã học các ngôn ngữ đó.

Atom có sử dụng HTML 5 không?

gói mẫu nguyên tử-html . This is simple package that let you to generate in few seconds a html5 template with dependencies that you need.

programming css

CSS bên ngoài không hoạt động trong nguyên tử

6 sai lầm bạn đang mắc phải khi liên kết CSS với HTML và cách sửa chúng

1. Sử dụng sai thẻ HTML để liên kết HTML với CSS

2. Đặt liên kết CSS vào phần sai của trang web

3. Tên tệp không khớp và tên giá trị liên kết href

4. Khoảng cách trong tên tệp CSS

5. Vị trí tệp HTML và CSS trên cùng một thư mục hoặc các thư mục khác nhau

6. Lỗi cú pháp trong tệp CSS của bạn

Tóm tắt lịch sử

Cách sử dụng tệp CSS

Cú pháp CSS

Ví dụ sử dụng CSS

Tài liệu HTML

Biểu định kiểu CSS

So sánh đầu ra

Tại sao CSS bên ngoài của tôi không được áp dụng?

Tại sao CSS bên ngoài của tôi không liên kết với HTML?

Chúng tôi có thể sử dụng CSS trong Atom không?

Atom có ​​sử dụng HTML 5 không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Atom có sử dụng HTML 5 không?