Các đường viền được sử dụng trong các trang HTML để phân ranh giới và làm nổi bật nội dung. Khi có nhiều thông tin trên một trang và bạn muốn thu hút sự chú ý của người dùng vào các phần cụ thể, thì hãy sử dụng đường viền xung quanh nội dung đó. Trong bài viết này về Đường viền trong CSS, tôi sẽ thảo luận về các chủ đề sau:
- Khi nào sử dụng Viền
- Đường viền trong CSS
- Các thuộc tính của CSS Border
- Giá trị mặc định cho Thuộc tính đường viền
- Xác định đường viền bằng tốc ký
- Những điểm cần lưu ý khi thiết kế đường viền trong CSS
Khi nào sử dụng Viền
Thực tiễn tiêu chuẩn là sử dụng thẻ đường viền CSS để xác định đường viền trong các trang HTML cho:
- Xung quanh các tiêu đề quan trọng
- Để đánh dấu phần tái bút hoặc ghi chú quan trọng
- Để gửi kèm hình ảnh, minh họa, trích dẫn từ người, video
- Để thu hút sự chú ý đến giá cả, lịch trình hoặc thông tin quan trọng như vậy
Bạn có thể muốn đọc trên trước khi bắt đầu tìm hiểu về đường viền CSS.
Để có hướng dẫn CSS toàn diện, hãy truy cập Hướng dẫn về CSS Edureka cho người mới bắt đầu . Bạn sẽ nhận được thông báo tuyệt vời về cách CSS được sử dụng để tăng cường thiết kế web HTML.
Đường viền trong CSS
Các đường viền CSS có thể được gán cho các phần khác nhau của trang HTML, cho dù đó là để bao gồm các tiêu đề hay đoạn văn. Hãy bắt đầu với một ví dụ. Ở đây chúng tôi xác định một đường viền xung quanh tiêu đề và một đường viền khác xung quanh văn bản đoạn văn.
body {background-color: lightblue} h1 {text-align: center border-style: solid} p {font-family: verdana font-size: 20px border-style: dotted}Đường viền xung quanh đoạn văn cũng vậy!
Các thuộc tính của CSS Border
Đường viền CSS có 3 thuộc tính chính đối với
- Phong cách:CácPhong cáchthuộc tính xác định mẫu của đường viền.
- màu sắc: Màu có thể là bất kỳ màu nào từ tập hợp được xác định bởi màu CSS.
- chiều rộng: Chiều rộng được sử dụng để thay đổi độ dày của đường viền, để làm cho nó nổi bật hơn.
Trong ví dụ trên, chúng ta thấy rằng chỉ có một thuộc tính đường viền được xác định, đó là kiểu của nó. Các thuộc tính khác khi không được xác định sẽ mang giá trị mặc định. Có một thuộc tính khác được gọi là bán kính, ít được sử dụng hơn. Nó được sử dụng để làm cho các cạnh của đường viền được làm tròn.
- kiểu viền thuộc tính
| Phong cách | Sự miêu tả |
| Border-style: solid | |
| Border-style: double | |
| kiểu đường viền: rãnh | |
| border-style: ridge | |
| border-style: inet | |
| border-style: outset | |
| border-style: none | |
| border-style: hidden | |
| border-style: dotted | |
| border-style: gạch ngang |
Bạn sẽ nhận thấy rằng có tùy chọn 'không có đường viền' và 'đường viền ẩn'. Một nhà phát triển có thể đơn giản tránh xác định đường viền, tại sao phải xác định rõ ràng nó là 'đường viền ẩn'? Điều này được thực hiện cho mục đích sử dụng không gian và căn chỉnh với các phần tử khác trong trang.
Các kiểu đường viền cũng có thể được trộn lẫn trong một phần tử. Với mục đích này, 4 cạnh biên giới riêng lẻ có thể được xác định riêng biệt với các kiểu khác nhau. Điều này có thể được thực hiện theo 2 cách. Xác định tất cả 4 cạnh trong một thẻ. Trong trường hợp này, số đếm bắt đầu từ dòng trên cùng và sau đó di chuyển theo chiều kim đồng hồ. Ngoài ra, mỗi trong số 4 đường viền cũng có thể được xác định trong các thẻ riêng lẻ. Cả hai trường hợp được hiển thị trong Ví dụ tiếp theo.
| Phong cách | Sự miêu tả |
| border-style: dấu chấm đứt đôi nét liền border-top-style: dotted có thể thay đổi trong java border-right-style: nét đứt border-bottom-style: solid border-left-style: double |
- màu viền thuộc tính
Thuộc tính màu cho đường viền có thể được đặt theo nhiều cách. Điều này tương tự như thiết lập màu sắc cho các phần tử khác. Màu sắc có thể được đặt bằng một trong các phương pháp sau:
- Tên - chỉ định tên màu, chẳng hạn như “xanh lam”. Bạn cũng có thể thử một số tùy chọn màu sắc ưa thích như “BlanchedAlmond”!
- Hex - chỉ định một giá trị hex, như “# ff0000”
- RGB - đặt mã RGB. Ví dụ: rgb (255,255,0) có nghĩa là Màu vàng.
- cài đặt - chẳng hạn như 'trong suốt' hoặc 'mờ đục'
- chiều rộng biên giới thuộc tính:
Thuộc tính width, như tên gọi, xác định độ dày của 4 cạnh viền. Nếu một giá trị được xác định, giá trị đó dành cho tất cả các bên, nếu không giá trị độ rộng riêng lẻ cũng có thể được đặt.
Chiều rộng có thể được chỉ định theo bất kỳ đơn vị chuẩn nào như pixel (‘px’), điểm (‘pt’) hoặc tính bằng cm (‘cm’). Bạn cũng có thể chỉ định chiều rộng bằng cách sử dụng các giá trị được xác định trước là ‘dày’, ‘mỏng’ và ‘trung bình’.
| Phong cách | Sự miêu tả |
| border-width: 10px | |
| chiều rộng đường viền: 0,1cm | |
| chiều rộng đường viền: trung bình |
- bán kính biên giới thuộc tính
Mục đích của việc xác định bán kính là để có được các góc tròn cho đường viền. Hệ số bán kính xác định mức độ làm tròn. Giá trị càng lớn, các góc càng cong. Theo thông lệ tiêu chuẩn, các giá trị bán kính được giữ trong khoảng 1-3 lần chiều rộng đường viền.
Đoạn mã sau sẽ tạo:
border-width: 10px
bán kính đường viền: 30px
Giá trị mặc định cho thuộc tính đường viền
Thuộc tính bắt buộc duy nhất là Phong cách . Nếu kiểu bị thiếu, đường viền sẽ không xuất hiện.
Nếu màu không được chỉ định, màu từ phần tử bên dưới được lấy làm giá trị mặc định. Ví dụ: nếu màu văn bản của đoạn văn được xác định là 'xanh lam', thì màu đường viền mặc định cũng sẽ là màu xanh lam. Trong trường hợp không có định nghĩa màu ngay cả cho phần tử, thì màu mặc định là 'đen'.
Giá trị mặc định cho chiều rộng là 'trung bình'.
Xác định đường viền bằng tốc ký
Một số nhà phát triển thích xác định các thuộc tính đường viền trong thẻ một dòng ngắn gọn. Định dạng viết tắt này giúp giảm thiểu các dòng mã và các nhà phát triển chuyên nghiệp thích định dạng này hơn. Nên sử dụng định dạng viết tắt khi định nghĩa đường viền đơn giản và khá chuẩn. Tuy nhiên, nếu bạn cần đánh dấu mỗi bên của đường viền theo một phong cách khác nhau, thì bạn cần phải tuân theo định dạng xác định các thẻ riêng lẻ.
Mã sau được sử dụng:
border-style: gạch ngang
màu viền: xanh lục
border-width: 5px
border: gạch ngang màu xanh lá cây 5px
Những điểm cần lưu ý khi thiết kế đường viền trong CSS
Không sử dụng quá nhiều đường viền trong một trang, nó có thể gây mất tập trung và khiến người dùng khó tập trung.
.trim () java
Điều quan trọng là phải duy trì sự nhất quán về kiểu dáng và màu sắc đường viền. Các phần tử trong cùng một cấp độ phân cấp trong một trang phải có kiểu đường viền và chiều rộng tương tự để có sự đồng nhất. Ví dụ, nếu đoạn văn được xác định với đường viền chắc chắn và chiều rộng 5px, duy trì định dạng này trong suốt đoạn văn các yếu tố trong quá trình thiết kế trang web.
Bám sát vào một kiểu định nghĩa thẻ. Một số nhà phát triển cảm thấy thoải mái với các định nghĩa phím tắt với tất cả các giá trị được gán cho một biên giới nhãn. Một số người khác thích liệt kê rõ ràng tất cả các thẻ về chiều rộng, màu sắc và kiểu dáng. Quy ước là khi trang trí đường viền phức tạp được yêu cầu, các thẻ riêng lẻ được liệt kê riêng biệt. Điều này giúp ích trong quá trình gỡ lỗi các định nghĩa đường viền tùy chỉnh như vậy. Đối với các trường hợp bình thường, chỉ cần một định nghĩa phím tắt sẽ làm được.
Hy vọng bạn đã tìm thấy thông tin mà bạn đang tìm kiếm về đường viền CSS và with này, chúng ta sẽ kết thúc bài viết Borders in CSS này.
Kiểm tra của chúng tôi đi kèm với đào tạo trực tiếp do người hướng dẫn và trải nghiệm dự án thực tế. Khóa đào tạo này giúp bạn thành thạo các kỹ năng làm việc với công nghệ web back-end và front-end. Nó bao gồm đào tạo về Phát triển Web, jQuery, Angular, NodeJS, ExpressJS và MongoDB.
Có một câu hỏi cho chúng tôi? Vui lòng đề cập đến nó trong phần nhận xét của blog “Viền trong CSS” và chúng tôi sẽ liên hệ lại với bạn.