Css đường ngang trong div

Đường kẻ ngang trong HTML không phải là một khái niệm khó giải mã. Tuy nhiên, trước khi chúng ta hiểu điều đó, hãy xem xét các đường ngang nói chung. Bạn có thể thêm các đường ngang với sự trợ giúp của CSS hoặc HTML. Làm thế nào nó hoạt động?

Như chúng ta đã biết, để phân tách nội dung chúng ta có thể dùng các đường kẻ ngang. Khi nói đến CSS, bạn sử dụng các quy tắc đường viền;

Với sự trợ giúp của phần tử HTML, bạn sẽ có thể thêm ý nghĩa ngữ nghĩa vào phần gạch chân mà bạn đã sử dụng. Hơn nữa, CSS sẽ hỗ trợ bạn tô điểm cho các gạch chân của mình. Bạn sẽ tìm hiểu về cả hai trong bài viết này. Hơn nữa, chúng tôi dự định nói về việc chỉ sử dụng CSS để thêm gạch chân vào nội dung và văn bản

Để chèn ngắt theo chủ đề cho nội dung, bạn có thể sử dụng thẻ HTML HR. Theo như các thông số kỹ thuật HTML cũ hơn có liên quan, thẻ HR trong HTML chỉ là một quy tắc ngang không có ý nghĩa ngữ nghĩa nào được đính kèm với nó. Cho đến hôm nay, không có sự phá vỡ rõ ràng nào trong trường hợp thẻ nhân sự. Để hiển thị, bạn phải thực hiện các điều chỉnh trong CSS. Đây là một khía cạnh quan trọng vì nó cung cấp khả năng kiểm soát tốt hơn cho nhà thiết kế để đảm bảo rằng chủ đề của trang web và thẻ nhân sự HTML phù hợp. Bằng cách này, bạn có thể dễ dàng thêm dấu tách dòng HTML

  • Đường kẻ ngang trong HTML bằng thẻ nhân sự
  • Quản lý kích thước phần tử nhân sự HTML, màu sắc và các kiểu khác bằng CSS
  • Các cách tốt hơn để tạo kiểu cho thẻ nhân sự trong HTML bằng CSS
  • Chuyển đổi các dòng HTML bằng Thẻ nhân sự

Đường kẻ ngang trong HTML bằng thẻ nhân sự

Thẻ nhân sự trong HTML không có gì mới; . Chúng tôi luôn dựa vào thẻ nhân sự bất cứ khi nào chúng tôi cần thêm đường ngang trong HTML hoặc thước kẻ ngang. Thẻ nhân sự trong HTML vẫn phổ biến vì chúng tôi có thể sử dụng thuộc tính này trong các trường hợp sau

  • Trực quan dễ hiểu
  • Nghỉ theo chủ đề
  • Không có thẻ đóng
  • ngữ nghĩa

Tất cả những gì bạn phải làm là thêm thẻ để tạo một đường ngang. Điều này sẽ vẽ một đường trên toàn bộ chiều rộng. Tuy nhiên, nó sẽ bị hạn chế đối với vùng chứa. Cũng dễ dàng loại bỏ CSS gạch dưới

<hr />

Chúng tôi đã sử dụng các thuộc tính để tạo kiểu cho phần tử nhân sự. Tuy nhiên, nhờ HTML5, thẻ nhân sự đã chuyển sang ngữ nghĩa. Ngoài ra, nói cách khác, nó cho trình duyệt biết rằng có một ngắt theo chủ đề ở cấp độ đoạn văn. Thông tin tương tự có thể được gửi đến một hệ thống tự động hoặc công nghệ đọc hỗ trợ

Ở đây, chúng tôi có một đoạn ngắt dòng nội dung thay vì một trang mới. Ngoài ra, nói cách khác, nó cho bạn biết về sự thay đổi trong chủ đề. Chẳng hạn, bạn có thể giới thiệu nó ở cuối phần. Bạn có thể giới thiệu nó ngay trước tiêu đề phụ mới

Quản lý kích thước phần tử nhân sự HTML, màu sắc và các kiểu khác bằng CSS

Thời gian đã thay đổi; . Chúng tôi không còn sử dụng các thuộc tính cho cùng một. Ưu điểm đầu tiên là bạn sử dụng đúng hệ thống để thiết lập quy tắc kết xuất. Hơn nữa, nó cho phép bạn sử dụng lại các quy tắc bao nhiêu lần tùy thích. Kết quả là bố cục của bạn trở nên nhất quán hơn. Cuối cùng nhưng không kém phần quan trọng, mã của bạn trở nên dễ bảo trì hơn

Đối với việc hiển thị đường của trình duyệt, nó có thể thực hiện được bằng cách áp dụng các kiểu cho cả kiểu viền và kiểu nền. Đối với dòng mặc định, kiểu đường viền là kiểu chính. Bạn không thể xóa đường viền vì nó cũng sẽ xóa đường kẻ

<hr style="border: none;">

Tại sao nó quan trọng?

Chà, bạn vẫn có thể gửi thông tin ngữ nghĩa đến tác nhân trực quan với sự trợ giúp của một dòng vô hình. Quan trọng nhất, bạn có thể loại bỏ sự lộn xộn hình ảnh có thể ảnh hưởng đến trải nghiệm người dùng

Hãy xem các kiểu mặc định của thẻ nhân sự phổ biến bên dưới

hr { 
    display: block;
    margin-end: auto;
    margin-start: auto;
    border: 1px inset;
    overflow: hidden;
    margin-before: 0.5em;
    margin-after: 0.5em;
}

Đối với chiều rộng của dòng có liên quan, bạn có thể sử dụng thuộc tính chiều rộng để đặt nó. Sau đó, bạn có thể sử dụng quy tắc CSS sau để định vị nó ở trung tâm

hr {
   width: 60%;
   margin-right: auto;
   margin-left: auto;
}

Bây giờ, đến độ dày của đường kẻ, bạn có thể điều chỉnh nó bằng cách đặt giá trị chiều cao. Bạn có thể đặt màu với sự trợ giúp của thuộc tính có tên background-color. Ngoài ra, nếu bạn muốn làm cho đường này bán trong suốt, thì bạn có thể sử dụng thuộc tính có tên là opacity

hr {
   opcaity: 0.6;
   width: 350px;
   height: 150px;
   margin-right: auto;
   margin-left: auto;
   background-color:#666;
}

Khi nói đến một trình duyệt thông thường, nó sẽ có một lề bằng một nửa chiều rộng của một ký tự. Tuy nhiên, bạn có thể thay đổi giá trị này theo sở thích của mình. Do đó, bố cục của bạn sẽ được làm giàu với khoảng trắng chất lượng. Bằng cách này bạn có thể dễ dàng phân biệt nội dung ngắt

hr {
   width: 80%;
   height: 10px;
   border: 0 none;
   margin-right: auto;
   margin-left: auto;
   margin-top: 80px;
   margin-bottom:90px;
   background-color:#555;
}

Đây mới chỉ là sự bắt đầu. Bạn có thể chơi với nhiều lựa chọn kiểu cho đường ngang của mình trong HTML bên cạnh chiều rộng và màu sắc. Như bạn có thể thấy, chúng tôi đã chọn hình ảnh năm ngôi sao màu vàng làm kiểu nền cho đường kẻ ngang. Chúng tôi cũng đảm bảo rằng nó lặp lại trên trục x

tiền boa. Chúng tôi khuyên bạn nên đặt màu nền thành trong suốt. Điều này sẽ ngăn bạn vô tình để lộ màu

.star-line {
      width: 50%;
      height: 20px;
      border: none;
      margin: auto;
      margin-top: 5%;
      margin-bottom: 5%;
      background-repeat: repeat-x;
      background-position: center;
      background-color: transparent;
      background-image: url(images/star.svg);
}

Css đường ngang trong div

Khi bạn thay đổi kiểu dáng, màu sắc và kích thước đường viền, bạn sẽ làm cho đường kẻ trông khác đi. Bạn sẽ thấy một hiệu ứng nhất quán trong tất cả các trình duyệt hiện đại. Như bạn có thể thấy trong ví dụ này, bạn sẽ thấy đường viền có dạng nét đứt, màu đỏ và rộng 1px

Các cách tốt hơn để tạo kiểu cho thẻ nhân sự trong HTML bằng CSS

CSS mang đến cho bạn nhiều sự linh hoạt, khả năng là vô cùng lớn. Tất cả các quy tắc nền đó có thể được áp dụng trên một đường ngang trong HTML. Đó là một đề xuất thú vị để chơi với phong cách

Tuy nhiên, trước khi khám phá tất cả những điều đó, hãy thử một vài thủ thuật đơn giản trong CSS. Ở đây trong ví dụ này, chúng ta sẽ biến đường kẻ thành đường nét đứt

Tạo đường ngang đứt nét trong HTML với CSS.dashed-border { width: 50%; margin: auto; margin-top: 5%; margin-bottom: 5%; border: 3px dashed #1A85FD; }

Tạo đường Zig-Zag với thẻ nhân sự HTML bằng CSSTiếp theo, chúng ta sẽ áp dụng kỹ thuật kẻ sọc cho đường Zig-Zag bằng thẻ HR. Chúng ta sẽ sử dụng linear-gradients ở đây. Đầu tiên, chúng tôi đã xóa đường viền của HTML dòng ngang; Bạn có thể đi cho bất kỳ giá trị theo yêu cầu của bạn. Tuy nhiên, bạn cần lưu ý rằng 2 linear gradient đầu tiên phải có chiều cao bằng một nửa so với đường ngang CSS. Cuối cùng nhưng không kém phần quan trọng, bạn cần đặt kích thước của nềnXem bút Tạo đường ngoằn ngoèo bằng thẻ nhân sự HTML bằng Digamber (@singhdigamber)trên CodePen.

Chuyển đổi các dòng HTML bằng phần tử nhân sự

Nếu bạn muốn chơi với các dòng của mình trong HTML, thì bạn có thể chuyển sang CSS3. Nhờ thuộc tính biến đổi CSS 3, bạn có thể thay đổi giao diện một cách đáng kể. Đối với việc chuyển đổi thành phần dòng HTML được xem xét, lựa chọn của chúng tôi là xoay vòng

Bằng cách chọn chuyển đổi này, bạn có thể làm cho dòng thẻ HTML hơi chéo

Tạo đường nghiêng trong HTML bằng CSS3

Xem Bút
Đường nghiêng trong HTML sử dụng CSS3 của Digamber (@singhdigamber)
trên CodePen.

Bạn cũng có thể biến đường vẽ nghiêng hoàn toàn theo phương thẳng đứng bằng cách sử dụng phép biến đổi tương tự

Tạo đường vuông góc hoặc hướng lên trong HTML bằng CSS3

Xem Bút
Đường vuông góc trong HTML sử dụng CSS3 của Digamber (@singhdigamber)
trên CodePen.

Tuy nhiên, nó không được khuyến khích vì nó có thể dẫn đến sự gián đoạn không cần thiết cho bố cục. Nhưng vâng, thật thú vị khi biết rằng những biến đổi như vậy là có thể

suy nghĩ cuối cùng

Chà, nếu bạn muốn thêm giá trị cho bố cục web của mình, thì các dòng có thể được sử dụng cho cùng một. Bố cục trang thích ý nghĩa ngữ nghĩa được cung cấp bởi Thẻ nhân sự

Bạn có thể thực hiện tất cả các tùy chỉnh trong CSS. Hơn nữa, bạn sẽ khá ấn tượng bởi sự đa dạng của các phong cách điên rồ có thể dẫn đến một bố cục hấp dẫn

Css đường ngang trong div

máy đào

Tôi là Digamber, một nhà phát triển full-stack và là người đam mê thể dục. Tôi đã tạo trang web này để truyền kinh nghiệm mã hóa của mình cho các lập trình viên mới. Tôi thích viết trên JavaScript, ECMAScript, React, Angular, Vue, Laravel

Twitter GitHub

Bài viết đề xuất

Chèn thêm khoảng trống vào trang web HTMLCách tạo thanh điều hướng HTML bằng cách sử dụng thẻ điều hướngLàm cách nào để tạo hộp cuộn HTML?Tạo hiệu ứng văn bản cuộn CSS với MarqueeLàm cách nào để thêm hiệu ứng lớp phủ trong suốt vào hình ảnh bằng CSS?Làm cách nào để tạo hình ảnh tròn bằng CSS?Kiểu xếp tầng được nhúng