Khung được đặt xung quanh hình ảnh hoặc văn bản trang trí trang web và thêm sự đa dạng cho thiết kế của nó. Nếu bạn sử dụng bảng để tạo đường viền, thì mã cho mỗi đường viền sẽ chiếm quá nhiều dung lượng. Ngoài ra, trong trường hợp này, bạn sẽ phải viết lại mã HTML cho mỗi khung. Với CSS, bạn có thể dễ dàng tạo đường viền có độ dày và màu sắc bất kỳ mà bạn muốn bằng cách viết một đoạn mã đơn giản cho tất cả các phần tử sẽ được bao quanh bởi đường viền này. Công nghệ này sẽ cho phép, nếu cần, thay đổi loại khung trên trang web trong vài phút.
Nó là cần thiết
- - có trang web của riêng bạn;
- - biết CSS là gì và các kiểu này được viết ở đâu trên trang web.
Hướng dẫn
Bước 1
Để tạo đường viền, trước tiên hãy viết mã sau trong CSS:
ramka {}
Bước 2
Để làm cho đường viền có kích thước bạn muốn, hãy sử dụng tham số chiều rộng đường viền, đặt chiều rộng đường tính bằng pixel. Ví dụ: nếu dòng khung phải rộng 3 pixel, thì mục nhập sẽ trông như thế này:
ramka {border-width: 3px;}
Bước 3
Bây giờ xác định kiểu của đường viền bằng cách sử dụng tham số kiểu đường viền. Nếu bạn muốn tạo một đường viền có các cạnh là các đường liền nét đều nhau, thì hãy đặt mục nhập sau vào đoạn mã giữa các dấu ngoặc nhọn - border-style: solid.
Bước 4
Có thể lấy đường viền chấm bằng cách viết nó như sau: border-style: dotted. Kiểm tra kiểu đường viền: dashed sẽ cung cấp cho bạn một đường viền đứt nét.
Bước 5
Bạn có thể làm cho đường viền thành một đường liền nét kép như sau: border-style: double. Sử dụng kiểu đường viền: rãnh hoặc kiểu đường viền: đường viền để đóng khung văn bản hoặc hình ảnh vào khung với các hiệu ứng phụ 3D. Sự khác biệt giữa hai tùy chọn này là trong trường hợp đầu tiên, khung bao gồm các đường thụt vào và trong trường hợp thứ hai là các đường lồi.
Bước 6
Sử dụng mã này: border-style: inset để tạo hiệu ứng của một tấm lót với đường viền của phần tử trang web. Để làm cho nội dung của đường viền, cùng với đường viền, ngược lại, lồi lên, hãy viết theo kiểu đường viền: outset.
Bước 7
Bạn có thể thêm màu mong muốn vào khung bằng tham số màu đường viền, cũng được đặt giữa các dấu ngoặc nhọn. Nếu bạn muốn làm cho đường viền có màu đỏ, thì hãy viết màu viền: đỏ, xanh lam - màu viền: xanh lam, cam - viền-màu: cam.
Bước 8
Mã đường viền CSS, bao gồm tất cả các tùy chọn, trông giống như sau:
ramka {border-width: 3px; border-style: chắc chắn; border-color: blue;}
Bước 9
Bây giờ, trong HTML, hãy viết thế này:
Nội dung khung Thay vì cụm từ "Nội dung khung", hãy chèn văn bản hoặc mã của hình ảnh mong muốn.
Bước 10
Vì vậy, bạn có thể thiết kế không giới hạn số lượng phần tử trên trang web. Để thay đổi giao diện của khung, bạn chỉ cần thay đổi mã CSS.
