Cách tạo đường gạch ngang trong css

Tải về bản PDF

Bài viết này hướng dẫn bạn cách tạo đường kẻ ngang trong HTML và CSS. Bạn có thể dùng đường kẻ ngang để ngăn cách các đoạn văn bản hoặc nội dung khác trên website. Cách thêm đường kẻ ngang mới nhất là sử dụng CSS và HTML5, nhưng hiện tại bạn vẫn có thể dùng thẻ HTML được gọi là
“HR”.[1]

1

Mở hoặc tạo văn bản HTML mới. Bạn có thể chỉnh sửa văn bản HTML bằng chương trình soạn thảo văn bản như Notepad hoặc chương trình lập trình như Adobe Dreamweaver. Hãy thực hiện các bước sau để mở văn bản HTML trong chương trình mà bạn thích:
- Mở Notepad hoặc chương trình soạn thảo văn bản/lập trình mà bạn thích.
- Nhấp vào trình đơn File (Tệp).
- Nhấp vào Open (Mở).
- Chọn tập tin HTML.
- Nhấp vào Open.
2

Thêm đề mục vào văn bản HTML. Nếu văn bản HTML chưa có đề mục, bạn cần thực hiện các bước sau để thêm đề mục. Đề mục được nhập giữa thẻ “<html>” và “<body>”.
- Nhập <head> ở phía trên văn bản.
- Ấn Enter hai lần để thêm hai dòng mới.
- Nhập </head> để đóng đề mục.
3

Nhập <style type=”text/css”> trong đề
mục. Thẻ tạo kiểu cần được đặt giữa hai thẻ đề mục. Đây là thao tác cho phép bạn nhập mã CSS để tạo kiểu cho HTML.
- Hoặc, bạn có thể sử dụng trang tạo kiểu bên ngoài cho HTML.
4

Nhập hr {. Đây là thẻ CSS được dùng để tạo kiểu
cho đường kẻ ngang. Hãy thêm thẻ này sau thẻ tạo kiểu trong đề mục, hoặc trong tập tin CSS ngoài.
5

Thêm kiểu CSS cho thẻ “<hr>”. Phần tạo kiểu cần
được nhập sau thẻ “hr {“. Bạn có thể tạo kiểu cho đường thẳng theo nhiều cách. Hãy tham khảo các ví dụ sau đây.
- Nhập width: ##px; để thiết lập độ dài của đường thẳng. Thay ## bằng số pixel độ dài của đường thẳng. Bạn cũng có thể dùng tỉ lệ phần trăm (%) thay cho pixel (px).
- Nhập height: ##px; để thiết lập độ dày của đường thẳng. Thay ## bằng số pixel độ dày của đường thẳng.
- Nhập background-color: ##; để tạo màu sắc cho đường thẳng.
  Thay ## bằng tên của màu, hoặc một dấu thăng (#) theo sau đó là mã màu thập lục phân.
- Nhập margin-right: ##px; để thiết lập số pixel từ mép phải. Thay ## bằng số pixel hoặc “auto” (tự động). Việc sử dụng “auto” căn giữa cho đường thẳng trong độ rộng đã thiết lập. Khoảng trống còn lại được chia đều giữa lề trái và lề phải.
- Nhập margin-left: ##px; để thiết lập số pixel từ mép trái. Thay ## bằng số pixel hoặc “auto”. Việc sử dụng “auto” căn giữa cho đường thẳng
  trong độ rộng đã thiết lập. Khoảng trống còn lại được chia đều giữa lề trái và lề phải.[2]
- Nhập margin-top: ##px; để thiết lập lề trên cho đường thẳng. Thay ## bằng số pixel độ dày của lề.
- Nhập margin-bottom: ##px; để thiết lập lề dưới của cho đường thẳng. Thay ## bằng số pixel độ dày
  của lề.
- Nhập border-width: ##px; để tạo đường viền quanh đường thẳng (tùy chọn). Thay ## bằng số pixel đồ dày của đường viền.
- Nhập border-color: ##; để tạo màu đường viền (tùy chọn). Thay ## bằng tên của màu, hoặc dấu thăng (#) theo sau đó là mã màu thập lục phân.
6

Nhập } sau thiết lập kiểu. Thao tác này đóng
thiết lập kiểu cho thẻ <hr>.
7

Ấn ↵ Enter và nhập </style>. Đây là thao tác tạo dòng mới và thêm thẻ đóng phần tạo kiểu của HTML. Thẻ “</style>” được nhập sau khi bạn đã thêm các yếu tố HTML cần được tạo kiểu với CSS.
8

Nhập <hr> vào bất kỳ đâu trong phần thân của văn bản
HTML. Phần thân của thẻ HTML là khu vực ở giữa thẻ “<body>” và “</body>”. Đây là thao tác thêm đường kẻ ngang vào văn bản HTML. Thiết lập kiểu CSS sẽ được áp dụng bất kỳ khi nào bạn sử dụng thẻ <hr> trong HTML.
9

Lưu tập tin HTML. Để lưu tập tin văn bản thành định dạng HTML,
bạn cần thay phần mở rộng của tập tin (.txt, .docx) thành “.html”. Hãy thực hiện các bước sau để lưu tập tin văn bản HTML:
- Nhấp vào trình đơn File.
- Nhấp vào Save As (Lưu dưới dạng) nếu bạn tạo tập tin HTML mới. Nhấp vào Save (Lưu) để lưu tập tin HTML có sẵn.
- Nhập tên tập tin vào trường “File name” (Tên tập tin).
- Nhập “.html” ngay sau tên tập tin.
- Nhấp vào Save.

Kiểm tra tập tin HTML. Để thực hiện việc này, bạn cần
nhấp phải vào tập tin và chọn Open with (Mở bằng), rồi chọn trình duyệt web. Bạn sẽ thấy một đường thẳng hiển thị tại nơi bạn đặt thẻ “hr”. Mã lệnh HTML của bạn trông giống như sau:


<!DOCTYPE html>
<
html
>
<
head
>
<
style
 type
=
"text/css"
>

hr
 {
width
:
 50
%
;
height
:
 20
px
;
background-color
:
 red
;
margin-right
:
 auto
;
margin-left
:
 auto
;
margin-top
:
 5
px
;
margin-bottom
:
 5
px
;
border-width
:
 2
px
;
border-color
:
 green
;
}

</
style
>

</
head
>
<
body
>

<
h2
>
Đây là đề mục</
h2
>

<
hr
>

<
p1
>
Đây là đoạn văn bản được chia cách bởi đường thẳng</
p1
>

</
body
>
</
html
>

1

Mở hoặc tạo văn bản HTML mới. Bạn có thể chỉnh sửa văn bản
HTML bằng chương trình soạn thảo văn bản như Notepad hoặc chương trình lập trình như Adobe Dreamweaver. Hãy thực hiện các bước sau để mở văn bản HTML trong chương trình mà bạn thích:
- Mở Notepad, hoặc chương trình soạn thảo văn bản/lập trình yêu thích của bạn.
- Nhấp vào trình đơn File (Tệp).
- Nhấp vào Open (Mở).
- Chọn tập tin HTML.
- Nhấp vào Open.
2

Chọn vị trí mà bạn muốn chèn đường thẳng. Kéo thanh cuộn xuống đến
khi bạn tìm thấy khoảng trống phía trên phần cần chèn đường thẳng, rồi nhấp vào phần ngoài cùng bên trái của dòng để đặt con trỏ ngay phía trước điểm bắt đầu dòng.
3

Ấn ↵ Enter hai lần để tạo
một dòng trống. Thao tác này làm đoạn văn bản di chuyển xuống dưới.
4

Di chuyển con trỏ trở về vị trí mà bạn muốn chèn đường thẳng. Chỉ cần nhấp, hoặc sử dụng các phím mũi tên trên bàn phím để di chuyển con trỏ về vị trí mà bạn muốn đặt đường thẳng.
5

Nhập <hr> vào khoảng trống phía trước nơi bắt đầu
dòng. Thẻ “<hr>” có chức năng tạo đường kẻ ngang trên trang.
6

Ấn ↵ Enter để đặt “<hr>”
trên dòng riêng. Lúc này, thẻ <hr> cần được đặt trên dòng riêng và không có mã lệnh khác ở bên trái hoặc bên phải.
7

Thêm thuộc tính cho đường kẻ ngang (tùy chọn). Bạn có thể thêm
thuộc tính cho đường kẻ ngang, chẳng hạn như độ dài, độ rộng, màu sắc và căn lề. Hãy thêm các mã sau đây ngay sau “hr” trong ngoặc mã. Bạn có thể thêm nhiều thuộc tính vào ngoặc bằng cách dùng khoảng trắng để phân cách chúng.[3]
- Nhập <hr size=”#”> để thay đổi độ dày của đường thẳng. Thay # bằng
  số độ dày (chẳng hạn như size=”10″).
- Nhập <hr width=”#”> để thay đổi độ dài của đường thẳng. Thay # bằng số pixel hoặc tỉ lệ phần trăm của độ rộng trang (chẳng hạn như width=”200″ hoặc width=”75%”).
- Nhập <hr color=”#”> để thay đổi màu sắc của đường thẳng. Thay # bằng tên màu sắc hoặc mã thập lục phân (chẳng hạn như color=”red” hoặc color=”#FF0000″).
- Nhập <hr align=”#”> để căn lề cho đường thẳng. Thay # bằng “right”
  (phải), “left” (trái), hoặc “center” (giữa) (chẳng hạn như align=”center”>)
8

Lưu tập tin HTML. Để lưu tập tin văn bản thành định dạng
HTML, bạn cần thay phần mở rộng của tập tin (.txt, .docx) thành “.html”. Hãy thực hiện các bước sau để lưu tập tin văn bản HTML:
- Nhấp vào trình đơn File.
- Nhấp vào Save As (Lưu dưới dạng) nếu bạn tạo tập tin HTML mới. Nhấp vào Save (Lưu) để lưu tập tin HTML có sẵn.
- Nhập tên tập tin vào trường “File name” (Tên tập tin).
- Nhập “.html” ngay sau tên tập tin.
- Nhấp vào Save.
9

Kiểm tra tập tin HTML. Để thực hiện việc này, bạn cần nhấp
phải vào tập tin và chọn Open with (Mở bằng), rồi chọn trình duyệt web. Bạn sẽ thấy một đường thẳng hiển thị tại nơi bạn đặt thẻ “hr”. Mã lệnh HTML của bạn trông giống như sau:[4]
```
<!DOCTYPE html>
<
html
>
<
body
>

<
h2
>
Đây là đề mục</
h2
>

<
hr
 size
=
"6"
 width
=
"50%"
 align
=
"left"
 color
=
"green"
>

<
p1
>
Đây là đoạn văn bản được ngăn cách với đề mục bằng một đường thẳng.</
p1
>

</
body
>
</
html
>
```

Về bài wikiHow
này

Trang này đã được đọc 18.865 lần.

Bài viết này đã giúp ích cho bạn?

mtoplist