Cách vẽ đường ngang trong html
|
Nếu chúng tôi muốn thêm Đường ngang trong tài liệu Html bằng thẻ Html, thì chúng tôi phải làm theo các bước được đưa ra bên dưới. Sử dụng các bước này, chúng ta có thể dễ dàng thêm dòng Show Bước 1. Đầu tiên, chúng ta phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng ta muốn thêm đường ngang Bước 2. Bây giờ, đặt con trỏ tại điểm mà chúng tôi muốn thêm dòng trong tài liệu Html. Và, sau đó chúng ta phải sử dụng thẻ của Html tại thời điểm đó Bước 3. Bây giờ, chúng ta phải thêm các thuộc tính của thẻ, xác định kích thước, màu sắc và chiều rộng của một dòng. Vì vậy, chúng ta phải nhập thuộc tính kích thước, chiều rộng và màu sắc trong nhãn Bước 4. Và, sau đó chúng ta phải chỉ định giá trị của các thuộc tính này Bước 5. Và cuối cùng, chúng ta phải lưu mã Html và sau đó chạy tệp trong trình duyệt Kiểm tra nó ngay bây giờĐầu ra của mã Html ở trên được hiển thị trong ảnh chụp màn hình sau Sử dụng CSS nội bộNếu chúng tôi muốn thêm Đường ngang trong tài liệu Html bằng Biểu định kiểu bên trong thì chúng tôi phải làm theo các bước được đưa ra bên dưới. Sử dụng các bước này, chúng ta có thể dễ dàng thêm dòng Bước 1. Đầu tiên, chúng ta phải nhập mã Html trong bất kỳ trình soạn thảo văn bản nào hoặc mở tệp Html hiện có trong trình soạn thảo văn bản mà chúng ta muốn thêm đường ngang Bước 2. Bây giờ, chúng ta phải đặt con trỏ ngay sau khi đóng thẻ tiêu đề trong thẻ đầu của tài liệu Html và sau đó xác định kiểu bên trong Các đường kẻ ngang là một cách để phân tách nội dung và có thể được thực hiện bằng cách sử dụng phần tử nhân sự HTML hoặc quy tắc đường viền CSS Hôm nay tôi sẽ chỉ cho bạn cách sử dụng phần tử HTML U để thêm ý nghĩa ngữ nghĩa cho phần gạch chân của bạn và CSS để tô điểm cho chúng. Bạn cũng sẽ học cách chỉ sử dụng CSS để thêm gạch chân vào văn bản và nội dung HTML có thẻ hr để tuyên bố ngắt theo chủ đề cho nội dung. Trong các đặc tả HTML cũ hơn, thẻ HR chỉ là một quy tắc ngang và không cung cấp ý nghĩa ngữ nghĩa như bây giờ. Ngày nay, nó không cung cấp dấu ngắt có thể nhìn thấy, nhưng nên được tạo kiểu bằng CSS. Điều này mang lại nhiều quyền kiểm soát hơn cho nhà thiết kế để làm cho thẻ nhân sự phù hợp với chủ đề của trang web Gạch dưới HTML bằng cách sử dụng phần tử nhân sựKể từ khi bắt đầu HTML, hoặc ít nhất là theo như tôi có thể nhớ, phần tử U là một cách nhanh chóng và bẩn thỉu để chèn một đường ngang hoặc thước kẻ ngang vào một trang web. Phần tử U rất tuyệt vì nó có thể được sử dụng cho các tình huống sau
Its simple to add a horizontal line in your markup, just add: . Browsers draw a line across the entire width of the container, which can be the entire body or a child element. Ban đầu, phần tử nhân sự được tạo kiểu bằng các thuộc tính. Ngày nay, với HTML5, thẻ nhân sự đã trở thành ngữ nghĩa, có nghĩa là nó cho trình duyệt, công nghệ đọc hỗ trợ và hệ thống tự động khác biết rằng có một ngắt theo chủ đề ở cấp độ đoạn văn. Đây là một sự gián đoạn trong luồng nội dung, nhưng không phải là một trang mới. Nó tốt hơn phục vụ như một hàng đợi trực quan của một sự thay đổi trong chủ đề. Ví dụ: bạn có thể đặt chúng ở cuối phần, trước tiêu đề phụ mới Màu, kích thước và kiểu đường kẻ ngang HTML với CSSNgày nay, phần tử nhân sự HTML được tạo kiểu bằng CSS thay vì thuộc tính. Điều này không chỉ sử dụng đúng hệ thống (CSS) để xác định quy tắc hiển thị mà còn cho phép bạn sử dụng lại cùng một quy tắc nhiều lần. Điều này làm cho mã của bạn dễ bảo trì hơn và bố cục của bạn nhất quán hơn Các trình duyệt hiển thị đường bằng cách áp dụng các kiểu cho sự kết hợp của kiểu nền và đường viền. Đường viền là kiểu chính cho dòng mặc định. Xóa đường viền cũng xóa dòng Tại sao bạn muốn làm điều này? Một dòng vô hình vẫn có thể hữu ích để cung cấp thông tin ngữ nghĩa cho tác nhân người dùng mà không có sự lộn xộn trực quan có thể ảnh hưởng đến trải nghiệm người dùng mong muốn Các kiểu mặc định HR của trình duyệt phổ biến là Bạn có thể kiểm soát độ rộng của dòng bằng cách đặt thuộc tính chiều rộng và sau đó căn giữa nó bằng quy tắc CSS sau Bạn cũng có thể điều chỉnh độ dày của đường bằng cách đặt giá trị chiều cao. Màu được đặt bằng thuộc tính màu nền. Như một phần thưởng, bạn cũng có thể sử dụng thuộc tính độ mờ để làm cho đường bán trong suốt Trình duyệt thông thường đặt lề thành khoảng một nửa chiều rộng của ký tự. Nhưng bạn có thể thay đổi giá trị này thành bất kỳ giá trị nào bạn muốn. Điều này có thể thêm khoảng trắng chất lượng vào bố cục của bạn và nhấn mạnh sự ngắt quãng nội dung Bạn có thể áp dụng nhiều biến thể phong cách khác nhau cho các đường kẻ ngang của mình. Bạn không bị giới hạn chỉ về màu sắc và chiều rộng. Ở đây tôi đặt kiểu nền của đường kẻ ngang thành hình 5 ngôi sao màu vàng. Sau đó, tôi làm cho chúng lặp lại trên trục x trong khi căn giữa đường tiền boa. đặt màu nền thành trong suốt để bạn không vô tình hiển thị màu phía sau hình ảnh Điều chỉnh kích thước, màu sắc và kiểu đường viền sẽ làm cho đường trông khác đi và có tác dụng giống nhau trong tất cả các trình duyệt hiện đại. Ví dụ: trong phần minh họa này, đường viền có màu đỏ, nét đứt và rộng 1px Vui vẻ khi áp dụng các kiểu cho các đường ngangMột vài tuần trước, tôi đã xuất bản một bài báo về cách tạo sọc nền bằng CSS. Bởi vì bạn có thể áp dụng các quy tắc nền tương tự cho một đường nằm ngang, bạn có thể thực hiện một số điều khá thú vị với phần tử nhân sự Nhưng trước tiên, hãy xem một vài thủ thuật CSS đơn giản. Ví dụ đầu tiên này thay đổi kiểu của đường thành đường đứt nét Bây giờ, áp dụng một trong các kỹ thuật kẻ sọc cho đường ngang. Ở đây tôi sử dụng linear-gradients để tạo hiệu ứng. Đường viền của đường ngang bị xóa và kích thước được đặt thành 40px. 40px là tùy ý, điều quan trọng là tạo hai gradient tuyến tính đầu tiên bằng một nửa chiều cao của HR. Bạn cũng sẽ cần đặt kích thước nền phù hợp với chiều cao Chuyển đổi các yếu tố nhân sựVới CSS3, bạn cũng có thể làm cho các dòng của mình thú vị hơn. Phần tử nhân sự theo truyền thống là một đường nằm ngang, nhưng với thuộc tính biến đổi CSS, bạn có thể thay đổi giao diện của chúng. Một phép biến đổi yêu thích trên phần tử nhân sự là thay đổi vòng quay Bạn có thể xoay phần tử nhân sự của mình để nó hơi chéo Hoặc bạn có thể xoay nó để nó hoàn toàn thẳng đứng Bạn nên áp dụng điều này một cách thận trọng vì điều này có thể gây ra sự gián đoạn không mong muốn cho bố cục của bạn. Nhưng thật tốt khi biết rằng bạn có thể áp dụng các phép biến đổi cho phần tử nhân sự Tóm lượcCác đường ngang là một cách tuyệt vời để thêm giá trị trực quan vào bố cục của bạn. Phần tử nhân sự HTML cung cấp ý nghĩa ngữ nghĩa cho bố cục của trang. Nó chỉ có thể được tùy chỉnh bằng CSS. Nhưng bạn có thể áp dụng tất cả các loại phong cách điên rồ cho một đường ngang để tạo ảnh hưởng bố cục rất thú vị Chia sẻ bài viết này với bạn bè của bạn  Cách sử dụng phần tử Datalist cho mục nhập có hướng dẫn Cách đăng ký bản quyền hợp lệ⚖ một trang web - Yêu cầu về pháp lý & HTML👨🏼💻 Không gian HTML và CSS 🌌 Tạo bố cục để tăng người dùng 🙌 Tương tác bằng cách sử dụng chiều cao dòng, khoảng trắng và lề 📦 Làm cách nào để vẽ một đường thẳng trong HTML?Giải thích . Đầu tiên, chúng ta tạo đường dẫn với beginPath Ta đặt bút/con trỏ vẽ tại vị trí x , y x,y x,y = (50,50) Sau đó, chúng ta sử dụng phương thức lineTo để vẽ một đường thẳng. Chúng tôi yêu cầu nó đánh dấu một dòng bắt đầu từ x , y x,y x,y = (50,50), được đặt bởi moveTo , thành x , y x,y x,y = (100,100). định nghĩa bài văn Thẻ để vẽ một đường ngang trong HTML là gì?HTML Thẻ . |
