CSS thẻ

Bạn có thể sử dụng thẻ HTML

.crimson-text {
      color: crimson;
   }

Trong bài viết này, tôi sẽ chỉ cho bạn cách sử dụng thẻ span để làm cho một phần nội dung nhất định của bạn khác biệt với phần còn lại. Sau đó, bạn sẽ có thể bắt đầu sử dụng nó trong các dự án viết mã của mình

Thẻ .crimson-text { color: crimson; } 6 dùng để làm gì?

Thẻ

.crimson-text {
      color: crimson;
   }

Nhưng

.crimson-text {
      color: crimson;
   }

.crimson-text {
      color: crimson;
   }

Ngoài ra, hãy nhớ rằng bản thân

.crimson-text {
      color: crimson;
   }

Có hai cách sử dụng chính của thẻ

.crimson-text {
      color: crimson;
   }

Cách định kiểu văn bản bằng thẻ .crimson-text { color: crimson; } 6

Nếu bạn muốn làm cho một số văn bản cụ thể hoặc bất kỳ nội dung nào khác với phần còn lại, bạn có thể bọc nó trong thẻ

.crimson-text {
      color: crimson;
   }

Trong các ví dụ bên dưới, tôi thay đổi

.crimson-text {
      color: crimson;
   }

.crimson-text {
      color: crimson;
   }

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

.crimson-text {
      color: crimson;
   }

Cách thay đổi màu văn bản

<p>This a <span class="crimson-text">crimson text</span> within others.</p>

.crimson-text {
      color: crimson;
   }

Tôi đã thêm một số CSS cơ bản để căn giữa mọi thứ trên trang

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

Cách thay đổi màu nền

<p>
      A <span class="green-background">green background color</span> perfectly
      implies the beauty of nature.
</p>

 .green-background {
        background-color: #2ecc71;
      }

Cách thay đổi kiểu chữ

<p>
   An <span class="font-style">italic</span> font style could be instrumental
   in laying emphasis on a text.
</p>

.crimson-text {
      color: crimson;
   }

Cách thao tác JavaScript với thẻ .crimson-text { color: crimson; } 6

Giống như việc có thể tạo kiểu cho nội dung bằng cách bọc thẻ

.crimson-text {
      color: crimson;
   }

.crimson-text {
      color: crimson;
   }

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

Trong ví dụ bên dưới, tôi đã thay đổi một số văn bản trong văn bản khác thành chữ hoa bằng JavaScript

.crimson-text {
      color: crimson;
   }

Phần kết luận

Trong hướng dẫn này, bạn đã học cách thao tác với một đoạn văn bản cụ thể bằng CSS và JavaScript bằng cách gói nó trong thẻ

.crimson-text {
      color: crimson;
   }

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

body {
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        height: 100vh;
      }

Xin lưu ý rằng trong những trường hợp như thế này, bạn nên sử dụng các lớp để tạo kiểu và id để thao tác với JavaScript để tránh nhầm lẫn

Cảm ơn bạn đã đọc và tiếp tục mã hóa

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

Kolade Chris

Nhà phát triển web và nhà văn kỹ thuật tập trung vào các công nghệ giao diện người dùng

Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

Thẻ trong CSS là gì?

Thẻ trong JavaScript là gì?