Làm cách nào để áp dụng CSS cho phần tử HTML?

Question

Các quy tắc CSS bắt đầu hoạt động sau khi chúng được thêm vào HTML. Có một số cách để thêm CSS vào HTML và trong bài viết này, bạn sẽ học cách thực hiện theo 3 cách khác nhau

Nội dung chính Show

Làm cách nào để áp dụng CSS cho tất cả các phần tử?
Làm cách nào để sử dụng CSS trong thẻ div?

Nếu thích, bạn cũng có thể xem phiên bản video của bài đăng này từ kênh của tôi

1. Kiểu nội tuyến

Cách đầu tiên để thêm CSS vào HTML là sử dụng một phương pháp gọi là inline-styling. Kiểu nội tuyến có nghĩa là thêm các quy tắc CSS trực tiếp vào các phần tử HTML (thẻ) với thuộc tính kiểu

Ví dụ: nếu tôi muốn thay đổi màu văn bản của một thành phần

style="color: red">Test Headline

Trước tiên, tôi cần thêm thuộc tính kiểu cho phần tử cụ thể đó
Sau đó, bên trong dấu ngoặc kép, tôi có thể xác định một hoặc nhiều quy tắc CSS như trên

Sau đó, quy tắc mới (màu văn bản ở đây) cho phần tử h1 sẽ được áp dụng

cách kiểu nội tuyến

Tuy nhiên, trong lập trình hàng ngày, chúng tôi không muốn sử dụng kiểu nội tuyến, vì nó chỉ nhắm mục tiêu một phần tử HTML duy nhất, thay vì nhắm mục tiêu nhiều phần tử, không dễ dàng tìm kiếm và tìm thấy trong các dự án lớn hơn và lý do quan trọng nhất là chúng tôi có thể'

Chúng tôi không thích sử dụng các kiểu nội tuyến trong lập trình hàng ngày

2. CSS nội bộ

The second way for adding CSS to HTML is by using the internal CSS way. In order to use this way, we need to use an HTML tag called

Test Headline

Cách CSS nội bộ

Vì vậy, đây là cách tiếp cận thứ hai để thêm CSS vào tệp HTML của chúng tôi, nhưng nó vẫn chưa hoàn hảo vì những gì chúng tôi muốn làm là giữ HTML và CSS trong các tệp riêng biệt, điều này dẫn chúng tôi đến cách thứ ba

3. CSS bên ngoài

Giữ CSS & HTML tách biệt là cách tốt nhất. Trong lập trình thực tế, chúng ta cần giữ HTML, CSS và JavaScript trong các tệp riêng biệt và sau đó nhập chúng khi cần thiết. Cách này cải thiện khả năng đọc và giúp bảo trì mã dễ dàng hơn

Để sử dụng cách này chúng ta cần tạo các file CSS riêng biệt có phần mở rộng là

  
  Test Headline

7 sau đó liên kết chúng với HTML

Ví dụ: chúng ta có thể tạo một tệp CSS như thế này.

  
  Test Headline

8. Bên trong

  
  Test Headline

8, chúng tôi viết các quy tắc CSS của mình

h1 {  
  color: red;
}

Then we can import

  
  Test Headline

8 to HTML with a tag like below:


   

  Test Headline

Và các quy tắc một lần nữa được áp dụng thành công

cách CSS bên ngoài

Sử dụng các tệp CSS bên ngoài và liên kết/nhập chúng vào HTML là cách thường được ưa thích

Vì vậy, đây là 3 cách để thêm CSS vào HTML của chúng tôi. Trong bài viết tiếp theo, tôi sẽ đề cập đến các bộ chọn CSS, đây là một phần thực sự quan trọng để hiểu những điều cơ bản về CSS

Phần tử HTML

h1 {  
  color: red;
}

1 chứa thông tin kiểu cho tài liệu hoặc một phần của tài liệu. Nó chứa CSS, được áp dụng cho nội dung của tài liệu chứa phần tử

h1 {  
  color: red;
}

1

Phần tử

h1 {  
  color: red;
}

1 phải được đưa vào bên trong

h1 {  
  color: red;
}

4 của tài liệu. Nói chung, tốt hơn là đặt các kiểu của bạn trong các biểu định kiểu bên ngoài và áp dụng chúng bằng cách sử dụng các phần tử

h1 {  
  color: red;
}

5

Nếu bạn bao gồm nhiều phần tử

h1 {  
  color: red;
}

1 và

h1 {  
  color: red;
}

5 trong tài liệu của mình, thì chúng sẽ được áp dụng cho DOM theo thứ tự được đưa vào tài liệu — đảm bảo bạn đưa chúng theo đúng thứ tự, để tránh các sự cố xếp tầng không mong muốn

Theo cách tương tự như các phần tử

h1 {  
  color: red;
}

5, các phần tử

h1 {  
  color: red;
}

1 có thể bao gồm các thuộc tính

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test pagetitle>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    style>
  head>
  <body>
    <p>This is my paragraph.p>
  body>
html>

2 chứa các truy vấn phương tiện, cho phép bạn áp dụng có chọn lọc các biểu định kiểu nội bộ cho tài liệu của mình tùy thuộc vào các tính năng phương tiện như chiều rộng khung nhìn

Phần tử này bao gồm các thuộc tính toàn cục

Thuộc tính này xác định kiểu phương tiện nào sẽ được áp dụng cho. Giá trị của nó là một truy vấn phương tiện, mặc định là

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test pagetitle>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    style>
  head>
  <body>
    <p>This is my paragraph.p>
  body>
html>

4 nếu thiếu thuộc tính

Một nonce mật mã (số được sử dụng một lần) được sử dụng để cho phép các kiểu nội tuyến trong style-src Content-Security-Policy. Máy chủ phải tạo một giá trị nonce duy nhất mỗi khi nó truyền một chính sách. Điều quan trọng là cung cấp một nonce không thể đoán được vì việc bỏ qua chính sách của tài nguyên là chuyện nhỏ

Thuộc tính này chỉ định các bộ biểu định kiểu thay thế

Thuộc tính này chỉ rõ ràng rằng các hoạt động nhất định sẽ bị chặn khi tìm nạp các nguồn phụ quan trọng. Bảng định kiểu phiên bản

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test pagetitle>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    style>
  head>
  <body>
    <p>This is my paragraph.p>
  body>
html>

8 thường được coi là nguồn phụ quan trọng, trong khi phông chữ và phông chữ

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test pagetitle>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    style>
  head>
  <body>
    <p>This is my paragraph.p>
  body>
html>

9 thì không

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test pagetitle>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    style>
  head>
  <body>
    <p>This is my paragraph.p>
  body>
html>

0. Hiển thị nội dung trên màn hình bị chặn

không dùng nữa

Thuộc tính này không nên được cung cấp. nếu đúng như vậy, các giá trị được phép duy nhất là chuỗi trống hoặc kết quả khớp không phân biệt chữ hoa chữ thường cho

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test pagetitle>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    style>
  head>
  <body>
    <p>This is my paragraph.p>
  body>
html>

2

Trong ví dụ sau, chúng tôi áp dụng biểu định kiểu rất đơn giản cho tài liệu

  
  Test Headline

0

Trong ví dụ này, chúng tôi đã bao gồm hai phần tử

h1 {  
  color: red;
}

1 — lưu ý cách các khai báo xung đột trong phần tử

h1 {  
  color: red;
}

1 sau sẽ ghi đè các phần tử trong phần tử trước đó, nếu chúng có tính đặc hiệu như nhau

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test pagetitle>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    style>
  head>
  <body>
    <p>This is my paragraph.p>
  body>
html>

Trong ví dụ này, chúng tôi xây dựng dựa trên ví dụ trước, bao gồm thuộc tính

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test pagetitle>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    style>
    <style>
      p {
        color: blue;
        background-color: yellow;
      }
    style>
  head>
  <body>
    <p>This is my paragraph.p>
  body>
html>

2 trên phần tử

h1 {  
  color: red;
}

1 thứ hai để nó chỉ được áp dụng khi chế độ xem có chiều rộng nhỏ hơn 500px

________số 8

Danh mục nội dung và nếu có thuộc tính

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test pagetitle>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    style>
  head>
  <body>
    <p>This is my paragraph.p>
  body>
html>

7. . Nội dung được phépNội dung văn bản phù hợp với thuộc tính

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test pagetitle>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    style>
  head>
  <body>
    <p>This is my paragraph.p>
  body>
html>

1, đó là

DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Test pagetitle>
    <style>
      p {
        color: white;
        background-color: blue;
        padding: 5px;
        border: 1px solid black;
      }
    style>
    <style media="all and (max-width: 500px)">
      p {
        color: blue;
        background-color: yellow;
      }
    style>
  head>
  <body>
    <p>This is my paragraph.p>
  body>
html>

2. Bỏ sót thẻKhông bỏ sót thẻ nào. Cha mẹ được phép Bất kỳ phần tử nào chấp nhận. Vai trò ARIA ngầm định Vai trò ARIA được phép Không có

h1 {  
  color: red;
}

10 được phép Giao diện DOM

h1 {  
  color: red;
}

11

Làm cách nào để áp dụng CSS cho tất cả các phần tử?

Bộ chọn * chọn tất cả các phần tử . Bộ chọn * cũng có thể chọn tất cả các phần tử bên trong một phần tử khác (Xem "Ví dụ khác").

Làm cách nào để sử dụng CSS trong thẻ div?

Sử dụng div trong CSS Art . Bạn có thể tạo một vòng tròn bằng thẻ div bằng cách mã hóa một div trống trong HTML, đặt chiều cao và chiều rộng bằng nhau cho nó trong CSS, sau đó bán kính đường viền là 50%. select the div with the class attribute, then set an equal height and width for it. You can make a circle with the div tag by coding an empty div in the HTML, setting an equal height and width for it in the CSS, then a border-radius of 50%.

programming html

Làm cách nào để áp dụng CSS cho phần tử HTML?

style="color: red">Test Headline

Test Headline

Test Headline

Test Headline

Test Headline

Test Headline

Test Headline

Test Headline

Làm cách nào để áp dụng CSS cho tất cả các phần tử?

Làm cách nào để sử dụng CSS trong thẻ div?

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