Sử dụng span và div với CSS để kiểm soát bố cục và bố cục tốt hơn.
Nhiều người mới sử dụng thiết kế web và HTML / CSS sử dụng các phần tử và Phần tử div định nghĩa các phân chia hợp lý trên trang web của bạn. Về cơ bản, nó là một hộp mà bạn có thể đặt các phần tử HTML khác hợp lý đi lại với nhau. Một bộ phận có thể có nhiều thành phần khác trong đó, như đoạn văn, tiêu đề, danh sách, liên kết, hình ảnh, v.v. Nó thậm chí có thể có các bộ phận khác bên trong nó để cung cấp cấu trúc và tổ chức bổ sung cho tài liệu HTML của bạn. Để sử dụng phần tử div, hãy đặt thẻ nội dung của div Nếu khu vực trang của bạn cần một số thông tin bổ sung mà bạn sẽ sử dụng để tạo kiểu với CSS sau này, bạn có thể thêm bộ chọn id (ví dụ: id = "myDiv">) hoặc bộ chọn lớp (ví dụ: class = "bigDiv">). Cả hai thuộc tính này sau đó có thể được chọn bằng cách sử dụng CSS hoặc được sửa đổi bằng cách sử dụng JavaScript. Các phương pháp hay nhất hiện hành dựa vào việc sử dụng bộ chọn lớp thay vì ID, một phần do cách trình chọn ID cụ thể. Trong sự thật, tuy nhiên, bạn có thể sử dụng một trong hai và thậm chí có thể cung cấp cho một bộ phận cả một ID và một bộ chọn lớp. Thời điểm sử dụng Phần tử div khác với phần tử phần HTML5 vì nó không đưa ra nội dung kèm theo bất kỳ ý nghĩa ngữ nghĩa nào. Nếu bạn không chắc chắn liệu khối nội dung có phải là div hay một phần hay không, hãy nghĩ về mục đích của phần tử và nội dung là gì để giúp bạn quyết định nên sử dụng nội dung nào: Cuối cùng, cả hai div và phần hoạt động khá giống nhau và bạn có thể cung cấp cho một trong hai giá trị thuộc tính và tạo kiểu cho chúng bằng CSS để có giao diện trang web mà bạn cần. Cả hai đều là các phần tử mức khối. Phần tử span là phần tử nội tuyến theo mặc định. Điều này đặt nó ngoài các phần tử div và phần. Phần tử span thường được sử dụng để bọc một phần nội dung cụ thể, thường là văn bản, để cung cấp cho nó một "móc" bổ sung có thể được tạo kiểu sau này. Được sử dụng với CSS, nó có thể thay đổi phong cách của văn bản nó bao quanh; tuy nhiên, không có bất kỳ thuộc tính kiểu nào, chỉ riêng phần tử span không ảnh hưởng đến văn bản. Đây là sự khác biệt chính giữa khoảng thời gian và các phần tử div. Như đã đề cập ở trên, phần tử div bao gồm một ngắt đoạn, trong khi phần tử span chỉ cho trình duyệt áp dụng các quy tắc kiểu CSS được liên kết với những gì được bao quanh bởi các thẻ : Văn bản được đánh dấu và văn bản không được đánh dấu. Thêm class = "highlight" hoặc lớp khác vào phần tử span để tạo kiểu cho văn bản bằng CSS (ví dụ: class = "highlight">). Phần tử span không có thuộc tính bắt buộc, nhưng ba thuộc tính hữu ích nhất giống với thuộc tính div: Sử dụng khoảng thời gian khi bạn muốn thay đổi kiểu nội dung mà không xác định nội dung đó là phần tử cấp khối mới trong tài liệu. Ví dụ: nếu bạn muốn từ thứ hai của tiêu đề h3 có màu đỏ, bạn có thể bao quanh từ đó với phần tử span sẽ tạo kiểu từ đó làm văn bản màu đỏ. Từ vẫn còn là một phần của phần tử h3, nhưng bây giờ cũng hiển thị bằng màu đỏ: Biên tập bởi Jeremy Girard vào ngày 2/2/17 Sử dụng phần tử
Sử dụng phần tử
Đây là tiêu đề tuyệt vời của tôi