Bạn có thể sử dụng thẻ HTML span làm vùng chứa để nhóm các phần tử nội tuyến lại với nhau để bạn có thể tạo kiểu hoặc thao tác với chúng bằng JavaScript. 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 đang xem: cách tạo kiểu span trong css

Bạn có thể sử dụng thẻ HTML span làm vùng chứa để nhóm các phần tử nội tuyến cùng nhau để bạn có thể tạo kiểu hoặc thao tác chúng với JavaScript.

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 mã hóa của mình.

Thẻ span được sử dụng để làm gì?

Thẻ span giống như một div, được sử dụng để nhóm các nội dung tương tự để tất cả có thể được tạo kiểu lại với nhau.

Nhưng span khác ở chỗ nó là một phần tử nội dòng, trái ngược với div , là một phần tử khối.

Ngoài ra, hãy nhớ rằng bản thân span không có bất kỳ ảnh hưởng nào đến nội dung của nó trừ khi bạn tạo kiểu cho nó.

Có hai cách sử dụng chính của thẻ span – tạo kiểu và thao tác một văn bản cụ thể với JavaScript.

Cách tạo kiểu văn bản bằng thẻ span

Nếu bạn muốn tạo 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ẻ span , đặt cho nó một thuộc tính class, sau đó chọn nó với giá trị thuộc tính cho kiểu dáng.

Xem Thêm  BẢNG TRUNCATE (Transact-SQL) - Máy chủ SQL - số trunc trong máy chủ sql

Trong các ví dụ bên dưới, tôi thay đổi color , background-color font-style của một số văn bản bằng cách gói nó trong một Thẻ span .

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

  & lt; p & gt; Đây là & lt; span class = "crimson-text" & gt; văn bản màu đỏ thẫm & lt; / span & gt; trong những người khác. & lt; / p & gt;
 
 . crimson-text {
      màu sắc: đỏ thẫm;
   }
 

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

  body {
        hiển thị: flex;
        align-các mục: trung tâm;
        justify-content: trung tâm;
        margin: 0 auto;
        chiều cao: 100vh;
      }
 

text-color-span

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

  & lt; p & gt;
      A & lt; span class = "green-background" & gt; màu nền xanh lục & lt; / span & gt; hoàn hảo
      ngụ ý vẻ đẹp của thiên nhiên.
& lt; / p & gt;
 
  .green-background {
        màu nền: # 2ecc71;
      }
 

background-color-span

Cách thay đổi kiểu phông chữ

  & lt; p & gt;
   & Lt; span class = "font-style" & gt; italic & lt; / span & gt; kiểu phông chữ có thể là công cụ
   trong việc nhấn mạnh vào một văn bản.
& lt; / p & gt;
 
  .font-style {
     font-style: nghiêng;
   }
 

font-style-span

Cách điều khiển JavaScript với thẻ span

Cũng như có thể tạo kiểu cho nội dung bằng cách bọc thẻ span xung quanh nó, bạn cũng có thể thao tác nội dung của mình bằng cách gói nó trong thẻ span . Bạn cung cấp cho nó thuộc tính id và sau đó chọn nó theo id của nó bằng JavaScript để bạn có thể thao tác với nó.

Trong ví dụ dưới đây, 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:

  & lt; p & gt;
   Văn bản, & lt; span id = "chữ hoa" & gt; freecodecamp & lt; / span & gt ;, đã được chuyển sang
   upperase bằng JavaScript
& lt; / p & gt;
 
  const uppercase = document.querySelector ("# hoa");

uppercase.style.textTransform = "chữ hoa";
 

javascript-span

Kết luận

Trong hướng dẫn này, bạn đã học cách thao tác một đoạn văn bản cụ thể với CSS và JavaScript bằng cách gói nó trong thẻ span và tạo cho nó một lớp duy nhất hoặc thuộc tính id .

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.

Xem Thêm  Cách thêm và thay đổi màu nền trong HTML - html thay đổi màu nền

Cảm ơn bạn đã đọc và tiếp tục viết mã.


Xem thêm những thông tin liên quan đến chủ đề cách tạo kiểu span trong css

CSS Tutorial for Beginners – 27 – The SPAN element

alt

  • Tác giả: EJ Media
  • Ngày đăng: 2014-09-04
  • Đánh giá: 4 ⭐ ( 2679 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video we take a look at the SPAN element.

Hướng dẫn tạo khoảng cách trong HTML mới nhất 2022

  • Tác giả: atpweb.vn
  • Đánh giá: 3 ⭐ ( 4795 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo khoảng cách là một việc làm khó hiểu và có rất nhiều cách để làm Việc này trong HTML, nếu như bạn làm không đúng cách có khả năng sẽ làm hỏng bố cục và giao diện so với thiết kế ban đầu. Mời bạn cùng nhâm nhi tách trà và đọc bài viết của ATP Web để thấu hiểu Hướng dẫn cách tạo khoảng cách trong HTML đơn giản 2022

Tạo kiểu cho các thành phần Next.js bằng CSS

  • Tác giả: tech-wiki.online
  • Đánh giá: 5 ⭐ ( 4932 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

HTML là gì? Div là gì? Span là gì? Những điều cơ bản mà 1 nhà lập trình wed đều phải học qua

  • Tác giả: final-blade.com
  • Đánh giá: 3 ⭐ ( 5260 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Cách sử dụng CSS Shape trong Thiết kế Web của bạn

  • Tác giả: webdesign.tutsplus.com
  • Đánh giá: 3 ⭐ ( 3703 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các yếu tố của layout là các cột và các dòng, các góc và các đường thẳng mà chúng ta dùng để xây dụng các trang web ngày nay bị ảnh hưởng lớn bởi di sản từ kiểu in ấn của chúng. Và cho dù việc cài…
Xem Thêm  4 cách đếm hàng trong bảng SQL Server với ưu và nhược điểm - bản ghi số lượng máy chủ sql

Làm cách nào để tạo kiểu đầu vào và gửi nút bằng CSS?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 6233 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] http://jsfiddle.net/vfUvZ/ Đây là điểm khởi đầu CSS: input[type=text] { padding:5px; border:2px solid #ccc; -webkit-border-radius: 5px; border-radius:…

Thuộc tính column-span

  • Tác giả: hiepsiit.com
  • Đánh giá: 4 ⭐ ( 8177 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php