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: span style 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 lại với nhau. bạn có thể tạo kiểu hoặc chỉnh sửa 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 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  Hình nền toàn trang hoàn hảo - toàn chiều rộng hình nền

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 quấn 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  Xử lý lỗi, "thử ... bắt" - thử bắt khối javascript

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ủ đề span style trong css

HTML & CSS for Beginners Part 10: Divs & Spans

alt

  • Tác giả: Kevin Powell
  • Ngày đăng: 2016-11-01
  • Đánh giá: 4 ⭐ ( 8642 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: A look at divs and spans, what they are and a little bit of how they work.

    This video is part of a large series introducing HTML & CSS to people who have never used it before. The goal of this series is to give you a good enough understanding of HTML and CSS to let you build your first website on your own!

    —-

    Half Bit by Kevin MacLeod is licensed under a Creative Commons Attribution licence (https://creativecommons.org/licenses/by/4.0/)
    Source: http://incompetech.com/music/royalty-free/?keywords=%22half+bit%22
    Artist: http://incompetech.com/

Hướng dẫn và ví dụ CSS Fonts

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

nhiều thú vị bất ngờ

  • Tác giả: freehost.page
  • Đánh giá: 3 ⭐ ( 5714 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tìm hiểu thẻ SPAN trong HTML

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

Cú pháp CSS

  • Tác giả: vietjack.com
  • Đánh giá: 5 ⭐ ( 6483 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cú pháp CSS | Selector trong CSS – Học CSS cơ bản và nâng cao theo từng bước bắt đầu từ CSS là gì, Thuộc tính trong CSS, Cú pháp CSS, Căn lề trong CSS, Border trong CSS, Căn chỉnh vị trí trong CSS, Định dạng Text trong CSS, Pseudo Class, Pseudo Element, Phần tử giả trong CSS, Hiệu ứng trong CSS, Đơn vị trong CSS, Color trong CSS, Chia cột trong CSS, Qui tắc trong CSS.

Học web chuẩn

  • Tác giả: hocwebchuan.com
  • Đánh giá: 3 ⭐ ( 6228 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tag span được sử dụng để nhóm các inline trong văn bản HTML, ta có thể dùng span kèm với css để định dạng một phần nội dung trong văn bản HTML – Học web chuẩn

HTML Tag

  • Tác giả: www.w3schools.com
  • Đánh giá: 4 ⭐ ( 5416 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