Cách làm viền bảng không màu trong html. Màu viền: màu viền. Sử dụng thuộc tính cellspaces
Biên giới bên trong. tài sản biên giới
Mỗi phần tử có một đường viền. Theo mặc định, nó là vô hình. Thiết kế đường viền được chỉ định bằng cách sử dụng thuộc tính biên giới.
Thuộc tính border là một thuộc tính chung cho phép bạn chỉ định đồng thời các giá trị của tất cả các thuộc tính liên quan đến thiết kế đường viền của một phần tử: border-width, border-style và border-color.
Giá trị của các thuộc tính trên được biểu thị cách nhau bằng dấu cách, theo thứ tự bất kỳ. Và trình duyệt sẽ tự động xác định xem giá trị có thuộc về thuộc tính hay không.
Không cần thiết phải chỉ định giá trị của tất cả các thuộc tính. Các thuộc tính không được sử dụng sẽ được gán giá trị mặc định. Chỉ thuộc tính kiểu đường viền cần được đặt thành thuộc tính khác không phải thuộc tính có độ rộng đường viền để có hiệu lực.
Các thuộc tính border-top, border-right, border-bottom và border-left tương tự như thuộc tính border, nhưng cho phép bạn chỉ áp dụng kiểu dáng cho các đường viền trên, phải, dưới và trái của một phần tử tương ứng.
Độ dày viền
Thuộc tính border-width chỉ định độ rộng đường viền của một phần tử cho tất cả các cạnh của nó hoặc riêng lẻ cho từng cạnh.
Độ dày đường viền được chỉ định bằng pixel ( biểu thị số nguyên dương) hoặc trong các đơn vị khác được chấp nhận trong CSS. Bạn cũng có thể chỉ định độ rộng đường viền bằng cách sử dụng từ khóa mỏng, trung bình và dày, đặt độ dày tương ứng là 2, 4 và 6 pixel.
Các thuộc tính border-top-width , border-right-width , border-bottom-width và border-left-width đặt độ dày đường viền cho từng cạnh tương ứng của phần tử riêng lẻ.
Và hãy để chúng tôi nhắc bạn một lần nữa: để thuộc tính border-width có hiệu lực, bạn phải gán cho thuộc tính border-style bất kỳ giá trị nào ngoài none .
Thuộc tính áp dụng cho tất cả các phần tử.
Kiểu viền
Thuộc tính border-style đặt kiểu đường viền của một phần tử cho tất cả các cạnh của nó hoặc riêng lẻ cho từng phần.
Kiểu được chỉ định bằng cách sử dụng các từ khóa none , Solid , double , dashed , dotted ,grove , Ridge , inset và outset , để đặt loại đường.
Chiều rộng tối thiểu cho đường viền liền nét đôi ( giá trị gấp đôi) là 3 pixel. Nếu không nó sẽ có vẻ rắn chắc.
Các thuộc tính border-top-style , border-right-style , border-bottom-style và border-left-style thiết lập kiểu đường viền cho từng cạnh tương ứng của phần tử riêng lẻ.
Thuộc tính áp dụng cho tất cả các phần tử.
Màu viền
Thuộc tính border-color đặt màu đường viền của một phần tử cho tất cả các cạnh của nó hoặc riêng lẻ cho từng phần.
Màu được đặt bằng một trong các phương thức CSS
Các thuộc tính border-top-color , border-right-color , border-bottom-color và border-left-color thiết lập màu đường viền cho từng cạnh tương ứng của phần tử riêng lẻ.
Thuộc tính áp dụng cho tất cả các phần tử.
Từ 1 đến 4 giá trị
Khi đặt kiểu đường viền cho các thuộc tính border-width , border-style và border-color , bạn có thể chỉ định từ 1 đến 4 giá trị, cách nhau bằng dấu cách. Kết quả phụ thuộc vào số lượng và được thể hiện trong bảng:
Biên giới bên ngoài. thuộc tính phác thảo
Đường viền bên ngoài, không giống như đường viền được chỉ định bởi thuộc tính border, không ảnh hưởng đến vị trí của phần tử.
tạo kiểuđối với đường viền bên ngoài được đặt bằng thuộc tính phác thảo.
Thuộc tính phác thảo, tương tự như thuộc tính đường viền, là thuộc tính phổ quát cho phép bạn chỉ định đồng thời các giá trị của tất cả các thuộc tính được liên kết với thiết kế đường viền ngoài của một phần tử: phác thảo-chiều rộng, phác thảo kiểu và phác thảo màu .
Các giá trị thuộc tính được biểu thị cách nhau bằng dấu cách, theo thứ tự bất kỳ. Và trình duyệt sẽ tự động xác định xem giá trị có thuộc về thuộc tính hay không.
Không cần thiết phải chỉ định giá trị của tất cả các thuộc tính. Các thuộc tính không được sử dụng sẽ được gán giá trị mặc định. Chỉ thuộc tính kiểu phác thảo cần được đặt thành thuộc tính nào đó không phải là thuộc tính có chiều rộng phác thảo có hiệu lực.
Thuộc tính áp dụng cho tất cả các phần tử.
Các thuộc tính Outline-width , Outline-style và Outline-color có ý nghĩa tương tự như các thuộc tính border-width , border-style và border-color tương ứng.
Đoạn mã:
Kết quả:
Chúng tôi đã tạo cả hai đường viền đoạn văn. Kiểu cho đường viền bên trong phía dưới được đặt riêng.
Để kiểm soát đường viền của một phần tử, hãy sử dụng thuộc tính đường viền chung. Thuộc tính này cho phép bạn đặt độ dày, kiểu dáng và màu sắc của đường viền của một phần tử trong một khai báo.
Ba thuộc tính này (độ dày đường viền, kiểu đường viền và màu sắc) có thể được đặt trong một khai báo. Đây là một ví dụ:
Bạn có thể chỉ định kiểu đường viền trên một cạnh của phần tử. Để thực hiện việc này, hãy sử dụng các thuộc tính border-top (viền trên), border-right (viền phải), border-bottom (viền dưới), border-left (viền trái).
Trong ví dụ này, mỗi cạnh của khối có độ dày, kiểu dáng và màu sắc đường viền khác nhau.
Hãy suy nghĩ về cách Trợ giúp CSS bạn có thể tạo một hình dạng như thế này:
Các giá trị đường viền - độ dày, kiểu dáng và màu sắc - có thể được đặt riêng bằng các thuộc tính đặc biệt.
- phong cách biên giới - phong cách biên giới.
- chiều rộng đường viền - chiều rộng đường viền.
- màu viền - màu viền.
Chúng ta hãy xem xét từng giá trị riêng biệt.
thuộc tính kiểu đường viền Kiểu viền.
Thuộc tính border-style thiết lập kiểu của đường viền. Trong CSS, trong Sự khác biệt về HTML, đường viền của một phần tử không chỉ có thể chắc chắn. Các giá trị sau được chấp nhận cho kiểu đường viền:
- không có - không có đường viền (mặc định).
- đường viền chắc chắn - chắc chắn.
- double - đường viền kép.
- đường viền nét đứt - chấm.
- chấm - một đường viền được tạo thành từ một loạt các dấu chấm.
- sườn núi - đường viền "sườn núi".
- rãnh - đường viền "rãnh".
- inset - đường viền chán nản.
- ngay từ đầu - đường viền ép đùn.
Ví dụ về những gì họ trông như thế nào.
không có biên giới (không có)
đường viền chắc chắn
đường viền đôi
đường viền của một loạt các dấu chấm (chấm)
đường viền nét đứt
đường viền rãnh
biên giới sườn núi
đường viền thụt vào (hình nhỏ)
đường viền ép đùn (bắt đầu)
Nhân tiện, nếu bạn đặt màu đường viền thành màu đen cho khung sườn núi, bạn sẽ nhận được kết quả này.
Một khối div có đường viền và kiểu đường gờ màu đen.
Khung trông chắc chắn, nhưng đó là do kiểu đường gờ được tạo bằng cách thêm hiệu ứng bóng đen và hiệu ứng đen không hiển thị trên khung đen.
Sử dụng thuộc tính border-style, kiểu đường viền có thể được đặt không chỉ cho tất cả các cạnh của khối. Có thể thiết lập nhiều giá trị cho một thuộc tính kiểu đường viền, tùy theo số lượng giá trị mà kiểu đường viền sẽ được gán số khác nhau các cạnh của khối. Bạn có thể đặt một, hai, ba hoặc bốn giá trị. Hãy xem xét các ví dụ cho từng trường hợp.
Một giá trị (rắn) - kiểu đường viền được đặt cho tất cả các cạnh của khối.
Hai giá trị (solid double) - giá trị đầu tiên đặt kiểu cho cạnh trên và dưới, giá trị thứ hai cho cạnh.
Ba giá trị (chấm kép liền nét) - giá trị đầu tiên cho mặt trên, giá trị thứ hai cho các cạnh, giá trị thứ ba cho mặt dưới.
Bốn giá trị (nét đứt đôi nét liền) - mỗi giá trị cho một bên theo chiều kim đồng hồ bắt đầu từ trên cùng.
Thuộc tính chiều rộng đường viền. Độ dày đường viền.
Để đặt độ rộng đường viền của một phần tử, hãy sử dụng thuộc tính border-width. Độ dày đường viền có thể được chỉ định theo bất kỳ đơn vị đo lường tuyệt đối nào, ví dụ như bằng pixel.
Giống như thuộc tính kiểu đường viền, thuộc tính này cũng có thể được đặt thành một đến bốn giá trị. Hãy xem xét các ví dụ cho từng trường hợp.
Mã ví dụ:
Ngoài ra còn có các giá trị từ khóa cho thuộc tính border-width. Tổng cộng có ba:
- viền mỏng - mỏng;
- độ dày trung bình - trung bình;
- dày - viền dày;
Độ dày viền: mỏng.
Độ dày viền: trung bình.
Độ dày viền: dày.
Thuộc tính màu đường viền. Màu viền.
Để kiểm soát màu đường viền, hãy sử dụng công cụ màu đường viền. Màu sắc cho thuộc tính này có thể được đặt bằng bất kỳ phương pháp nào được mô tả trong bài viết "Màu sắc trong CSS", cụ thể là:
- Ký hiệu thập lục phân (#ff00aa) của màu.
- định dạng RGB- rgb(255,12,110) . Định dạng RGBA cho CSS3.
- Định dạng HSL và HSLA cho CSS3.
- Tên màu, ví dụ màu đen. Danh sách đầy đủ Tên màu được đưa ra trong bảng tên màu CSS.
Thuộc tính border-color cũng có thể có từ một đến bốn giá trị và xử lý chúng tương tự như các thuộc tính trước đó.
Một giá trị (màu đỏ).
Hai giá trị (đỏ đen).
Ba giá trị (đỏ đen vàng).
Bốn giá trị (đỏ đen vàng xanh).
Bây giờ chúng ta hãy quay lại bài toán đã nêu ở trên và vẽ hình:
Đây là đoạn mã vẽ một hình như vậy, chỉ có kích thước lớn hơn:
Đặt giá trị cho các bên riêng biệt
Ở trên đã đề cập rằng bạn có thể chỉ định các giá trị thuộc tính đường viền cho chỉ một cạnh của khối. Có những tài sản cho những mục đích này:
- border-top (đường viền trên cùng)
- biên giới bên phải
- viền dưới
- viền trái (viền trái)
Hãy để tôi nhắc bạn rằng đối với tất cả các thuộc tính, ba giá trị được chỉ định (độ dày, kiểu dáng và màu sắc) theo bất kỳ thứ tự nào. Nhưng có những thuộc tính cho phép bạn đặt độ dày, màu sắc và kiểu dáng cho từng mặt riêng biệt. Việc viết các thuộc tính này bắt nguồn từ những điều trên.
Tùy chọn đường viền trên cùng (border-top).
- border-top-color - đặt màu của đường viền trên cùng của phần tử.
- border-top-width - đặt độ dày của đường viền trên cùng của phần tử.
- border-top-style - đặt kiểu đường viền trên cùng của phần tử.
Tùy chọn viền phải (viền-phải).
- border-right-color - đặt màu cho đường viền bên phải của phần tử.
- border-right-width - đặt độ dày của đường viền bên phải của phần tử.
- border-right-style - thiết lập kiểu đường viền bên phải của phần tử.
Tùy chọn Giơi hạn dươi(viền-dưới).
- border-bottom-color - đặt màu cho đường viền dưới cùng của phần tử.
- border-bottom-width - đặt độ dày của đường viền dưới cùng của phần tử.
- border-bottom-style - đặt kiểu đường viền dưới cùng của phần tử.
Tùy chọn viền trái (viền trái).
- border-left-color - đặt màu cho đường viền bên trái của phần tử.
- border-left-width - đặt độ dày của đường viền trái của phần tử.
- border-left-style - thiết lập kiểu đường viền trái của phần tử.
Một ví dụ về việc sử dụng các thuộc tính này:
- màu của đường viền trên cùng được xác định lại thành màu đỏ bằng cách sử dụng thuộc tính border-top-color,
- sử dụng thuộc tính border-right-width, độ dày của đường viền bên phải được đặt thành 10px,
- sử dụng thuộc tính border-bottom-style, kiểu của đường viền dưới được xác định lại là double,
- sử dụng thuộc tính border-left-color, đường viền bên trái được đặt Màu xanh.
Thuộc tính bán kính đường viền. Làm tròn các góc viền.
Thuộc tính bán kính đường viền nhằm mục đích làm tròn các góc của đường viền của một phần tử. Thuộc tính này xuất hiện trong CSS3 và hoạt động chính xác trong tất cả trình duyệt hiện đại, ngoại trừ trình duyệt web IE 8 (và các phiên bản cũ hơn).
Các giá trị có thể là bất kỳ số nào được sử dụng trong CSS.
Thuộc tính bán kính đường viền: 15px.
Nếu khung khối không được chỉ định thì phần phi lê sẽ xuất hiện cùng với nền. Dưới đây là ví dụ về khối tròn không có đường viền nhưng có màu nền:
Thuộc tính bán kính đường viền: 15px.
Có các thuộc tính để làm tròn từng góc riêng lẻ của một phần tử. Ví dụ này sử dụng tất cả chúng:
Bán kính đường viền trên cùng bên trái: 15px; bán kính đường viền trên cùng bên phải: 0; bán kính viền dưới bên phải: 15px; bán kính viền dưới bên trái: 0;
Thuộc tính bán kính đường viền: 15px.
Mặc dù mã này có thể được viết trong một khai báo: border-radius : 15px 0 15px 0 . Thực tế là thuộc tính bán kính đường viền có thể được đặt từ một đến bốn giá trị. Bảng dưới đây phác thảo các quy tắc chi phối các thông báo như vậy.
Sau khi nghiên cứu kỹ bảng này, bạn có thể hiểu rằng điều quan trọng nhất ghi chú ngắn kiểu mong muốn sẽ như thế này: border-radius : 15px 0 . Chỉ có hai ý nghĩa.
Một chút luyện tập
Vẽ một quả chanh bằng CSS.
Đây là mã cho một khối như vậy:
Ký quỹ: 0 tự động; /* Căn giữa khối */ width: 200px; chiều cao: 200px; nền: #F5F240; đường viền: 1px liền khối #F0D900; bán kính đường viền: 10px 150px 30px 150px;
Chúng tôi đã vẽ hình:
Bây giờ hãy để lại một hình tam giác từ nó:
Mã tam giác là:
Ký quỹ: 0 tự động; /* Căn giữa khối */ đệm: 0px; chiều rộng: 0px; chiều cao: 0; đường viền: 30px màu trắng; viền-đáy-màu: đỏ;
Bản thân các bảng trông khá kém và trình duyệt hiển thị một số đặc điểm của bảng, đặc biệt là các khung, theo cách riêng của chúng. Đồng thời, những thiếu sót này có thể dễ dàng được sửa chữa bằng cách sử dụng sức mạnh của phong cách. Đồng thời, các phương tiện thiết kế bảng được mở rộng đáng kể, điều này cho phép bạn khớp thành công các bảng vào thiết kế trang web và trình bày dữ liệu dạng bảng rõ ràng hơn.
Màu nền ô
Tất cả các màu nền cùng một lúc ô bảngđược đặt thông qua thuộc tính nền, được áp dụng cho bộ chọn TABLE. Trong trường hợp này, bạn nên nhớ các quy tắc sử dụng kiểu, đặc biệt là kế thừa các thuộc tính của phần tử. Mặc dù thuộc tính nền không được kế thừa nhưng giá trị nền mặc định cho các ô là trong suốt, tức là. trong suốt, do đó hiệu ứng tô nền cũng thu được cho các ô. Nếu đồng thời với TABLE, bạn đặt màu cho bộ chọn TD hoặc TH thì màu này sẽ được đặt làm nền của ô (ví dụ 2.3).
Ví dụ 2.3. Màu nền
| Tiêu đề 1 | Tiêu đề 2 |
|---|---|
| Ô 3 | Ô 4 |
TRONG trong ví dụ này chúng ta có được màu nền xanh lam cho các ô (thẻ
Kết quả của ví dụ này được hiển thị trong Hình. 2.4.
Cơm. 2.4. Thay đổi màu nền
Lề bên trong ô
Lề là khoảng cách giữa cạnh của nội dung ô và đường viền của ô đó. Thông thường, thuộc tính cellpadding của thẻ được sử dụng cho mục đích này.
| Tiêu đề 1 | Tiêu đề 2 |
|---|---|
| Ô 3 | Ô 4 |
Trong ví dụ này, bằng cách nhóm các bộ chọn, các trường được đặt đồng thời cho bộ chọn TD và TH. Kết quả của ví dụ được hiển thị trong Hình. 2.5.
Cơm. 2.5. Các trường trong ô
Nếu thuộc tính kiểu đệm được áp dụng cho các ô của bảng thì tác dụng của thuộc tính đệm ô của thẻ
| Leonardo | 5 | 8 |
| Raphael | 4 | 11 |
| Michelangelo | 24 | 9 |
| Donatello | 2 | 13 |
Kết quả của ví dụ này được hiển thị trong Hình. 2.6.
Cơm. 2.6. Chế độ xem bảng khi sử dụng khoảng cách đường viền
Trình duyệt Internet Explorer phiên bản 7 trở lên không hỗ trợ thuộc tính border-spacing nên trong trình duyệt này giá trị cellspace mặc định (thường là 2px) sẽ được sử dụng cho các bảng.
Khi thêm thuộc tính thu gọn đường viền có giá trị thu gọn vào bộ chọn TABLE, thuộc tính khoảng cách ô sẽ bị bỏ qua và giá trị khoảng cách đường viền được đặt lại về 0.
Đường viền và khung
Theo mặc định, ban đầu không có đường viền trong bảng và việc bổ sung nó xảy ra bằng thuộc tính đường viền của thẻ
| Tiêu đề 1 | Tiêu đề 2 |
|---|---|
| Ô 3 | Ô 4 |
Ví dụ này sử dụng đường viền đôi màu đen xung quanh bảng và đường viền màu trắng đồng nhất xung quanh mỗi ô. Kết quả của ví dụ được hiển thị trong Hình. 2.7.
Cơm. 2.7. Viền xung quanh bảng và ô
Xin lưu ý rằng các đường đôi được hình thành ở nơi các ô tham gia. Chúng được lấy lại do hoạt động của thuộc tính khoảng cách ô của thẻ
| Tiêu đề 1 | Tiêu đề 2 |
|---|---|
| Ô 3 | Ô 4 |
Ví dụ này tạo ra một đường liền nét màu xanh lục giữa các ô và một đường màu đen xung quanh bảng. Tất cả các đường viền trong bảng có cùng độ dày. Kết quả của ví dụ được hiển thị trong Hình. 2.8.
Cơm. 2.8. Viền xung quanh bàn
Căn chỉnh nội dung ô
Theo mặc định, văn bản trong ô bảng được căn trái. Ngoại lệ cho quy tắc này là thẻ
Ví dụ 2.8. Căn chỉnh nội dung ô theo chiều ngang
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Tiêu đề 1 | Ô 1 | Ô 2 |
|---|---|---|
| Tiêu đề 2 | Ô 3 | Ô 4 |
Trong ví dụ này, nội dung của thẻ
Cơm. 2.9. Căn chỉnh văn bản trong ô
Căn chỉnh theo chiều dọc trong một ô luôn được căn giữa trừ khi có ghi chú khác. Điều này không phải lúc nào cũng thuận tiện, đặc biệt đối với các bảng có nội dung ô có chiều cao khác nhau. Trong trường hợp này, căn chỉnh được đặt ở cạnh trên cùng của ô bằng thuộc tính căn chỉnh dọc, như trong Ví dụ 2.9.
Ví dụ 2.9. Căn chỉnh nội dung ô theo chiều dọc
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Tiêu đề 1 | Tiêu đề 2 |
|---|---|
| Ô 1 | Ô 2 |
Ví dụ này đặt chiều cao của tiêu đề
Cơm. 2.10. Căn chỉnh văn bản trong ô
Ô trống
Trình duyệt hiển thị một ô không có gì bên trong nó theo cách khác. “Không có gì” trong trường hợp này có nghĩa là cả hình ảnh và văn bản đều không được thêm vào bên trong ô và khoảng trắng không được tính đến. Đương nhiên, hình thức của các ô chỉ khác nhau nếu có đường viền xung quanh chúng. Khi sử dụng đường viền vô hình, hình thức của các ô, bất kể có gì trong đó hay không, đều giống nhau.
Các trình duyệt cũ hơn không hiển thị màu nền của các ô xem trống
May mắn thay, thời đại của các bản vẽ một pixel và tất cả các loại miếng đệm dựa trên chúng đã qua. Trình duyệt hoạt động khá chính xác với các bảng ngay cả khi không có nội dung ô.
Để kiểm soát sự xuất hiện của các ô trống, hãy sử dụng thuộc tính ô trống; khi được đặt thành ẩn, đường viền và nền sẽ không được hiển thị trong các ô trống. Nếu tất cả các ô trong một hàng đều trống thì toàn bộ hàng đó sẽ bị ẩn. Ô được coi là trống trong các trường hợp sau:
- không có biểu tượng nào cả;
- ô chỉ chứa một dòng mới, tab hoặc dấu cách;
- khả năng hiển thị được đặt thành ẩn .
Phép cộng không gian không phá vỡđược coi là nội dung hiển thị, tức là ô sẽ không còn trống nữa (ví dụ 2.10).
Ví dụ 2.10. Ô trống
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
| Leonardo | 5 | 8 |
| Raphael | 11 | |
| Michelangelo | 24 | |
| Donatello | 13 |
Xem bảng trong Trình duyệt Safari thể hiện trong hình. 2.11a. Bảng tương tự trong trình duyệt IE7 được hiển thị trong Hình. 2.11b.
MỘT. Trong trình duyệt Safari, Firefox, Opera, IE8, IE9
b. Trong trình duyệt IE7
Cơm. 2.11. Xem bảng có ô trống
Thuộc tính đường viền CSS cho phép bạn chỉ định kiểu và màu sắc đường viền của một phần tử.
Kiểu viền
Thuộc tính border-style chỉ định loại đường viền sẽ hiển thị.
Không có thuộc tính đường viền nào sẽ có BẤT KỲ hiệu ứng nào cho đến khi thuộc tính kiểu viền chưa cài đặt!
Ý nghĩa kiểu viền
không có: Không có đường viền
chấm: Đường viền chấm
nét đứt: Đường viền nét đứt
Solid: Đường viền liền khối
double: Đường viền đôi. Độ rộng của đường viền kép bằng giá trị border-width
rãnh: Xác định đường viền nổi 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
sườn núi: Xác định ranh giới giống như sườn núi 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
inset: Xác định đường viền thụt vào 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
đầu: Xác định đường viền lồi 3D. Hiệu ứng phụ thuộc vào giá trị màu viền
Chiều rộng biên giới
Thuộc tính border-width được sử dụng để thiết lập độ rộng của đường viền.
Chiều rộng được đặt bằng pixel hoặc sử dụng một trong ba giá trị được xác định trước: mỏng, trung bình hoặc dày.
Thuộc tính "độ rộng đường viền" không hoạt động khi được sử dụng một mình. Trước tiên hãy sử dụng thuộc tính "border-style" để đặt đường viền.
Màu viền
Thuộc tính border-color dùng để thiết lập màu đường viền. Màu sắc có thể được thiết lập bằng cách sử dụng:
- tên - chỉ định tên của màu, ví dụ "đỏ"
- RGB - chỉ định giá trị RGB, ví dụ "rgb(255,0,0)"
- Hex - vui lòng chỉ định giá trị thập lục phân, ví dụ "#ff0000"
Bạn cũng có thể đặt màu đường viền thành "trong suốt".
Thuộc tính "màu viền" không hoạt động nếu được sử dụng một mình. Trước tiên hãy chỉ định thuộc tính "border-style" để đặt đường viền.
Viền - Thiết kế riêng các cạnh
Trong CSS, bạn có thể chỉ định các đường viền khác nhau cho các mặt khác nhau:
Ví dụ trên có thể được làm lại bằng cách sử dụng một thuộc tính:
Thuộc tính kiểu đường viền có thể có từ một đến bốn giá trị.
- kiểu đường viền: nét đứt đôi đậm nét chấm;
- đường viền trên - từ các điểm
- viền phải - liền nét
- viền dưới - đôi
- viền trái - chấm
- kiểu đường viền:chấm đôi liền khối;
- đường viền trên - từ các điểm
- viền dưới - đôi
- kiểu đường viền:chấm liền;
- ranh giới trên và dưới - từ điểm
- đường viền phải và trái chắc chắn
- kiểu đường viền:chấm;
- tất cả bốn ranh giới đều được tạo thành từ các dấu chấm
Thuộc tính kiểu đường viền được sử dụng trong ví dụ trên. Tuy nhiên, điều này cũng hoạt động với các thuộc tính chiều rộng đường viền và màu đường viền.
Thuộc tính Border - viết tắt (viết tắt)
Như bạn có thể thấy trong các ví dụ trên, có khá nhiều thuộc tính cho đường viền.
Để rút ngắn mã, bạn có thể chỉ định tất cả các thuộc tính của đường viền trong một thuộc tính. Đây được gọi là thuộc tính tốc ký (hoặc tốc ký).
Thuộc tính viết tắt của thuộc tính đường viền là "đường viền":
Khi sử dụng thuộc tính border, thứ tự các giá trị là:
- chiều rộng biên giới
- kiểu viền
- màu viền
Bạn có thể bỏ qua một số giá trị (mặc dù thuộc tính kiểu đường viền vẫn cần thiết), điều chính là giữ nguyên thứ tự đã chỉ định.
Thêm ví dụ |
Tất cả các thuộc tính viền trên trong một khai báo
Ví dụ này minh họa một thuộc tính tốc ký để đặt tất cả các thuộc tính giới hạn trên trong một khai báo.
Đặt kiểu viền dưới
Ví dụ này minh họa cách thiết lập kiểu đường viền phía dưới.
Đặt độ rộng của đường viền bên trái
Ví dụ này minh họa cách thiết lập độ rộng của đường viền bên trái.
Đặt màu cho bốn đường viền
Ví dụ này minh họa cách thiết lập màu của bốn đường viền. Chúng có thể có từ một đến bốn màu.
Đặt màu đường viền phù hợp
Ví dụ này minh họa cách thiết lập màu của đường viền bên phải.
Tất cả thuộc tính viền CSS
| Tài sản | Sự miêu tả |
|---|---|
| ranh giới | Đặt tất cả các thuộc tính đường viền trong một khai báo |
| viền dưới | Đặt tất cả các thuộc tính viền dưới trong một khai báo |
| màu viền dưới | Đặt màu của đường viền dưới cùng |
| kiểu viền dưới | Đặt kiểu đường viền dưới cùng |
Đường viền CSS phần tử là một hoặc nhiều dòng bao quanh nội dung của phần tử và phần đệm. Khung được thiết lập bằng cách sử dụng tài sản ngắn ranh giới . Kiểu khung được đặt bằng ba thuộc tính: phong cách, màu sắc Và chiều rộng.
Trang trí khung và đường viền của phần tử HTML bằng thuộc tính CSS
1. Kiểu viền
Theo mặc định, đường viền luôn được vẽ phía trên nền của phần tử, với nền kéo dài đến cạnh ngoài của phần tử. Kiểu khung xác định cách hiển thị của nó; nếu không có thuộc tính này, các khung sẽ không hiển thị chút nào. Đối với một phần tử, bạn có thể đặt đồng thời đường viền cho tất cả các cạnh bằng cách sử dụng thuộc tính border-style hoặc cho từng bên riêng biệt bằng cách sử dụng thuộc tính định tính border-top-style, v.v. Không được thừa kế.
| kiểu viền (kiểu viền trên, kiểu viền phải, kiểu viền dưới, kiểu viền trái) |
|
|---|---|
| Giá trị: | |
| không có | Giá trị mặc định có nghĩa là không có khung. Đồng thời xóa khung của một phần tử khỏi nhóm phần tử có giá trị của tập thuộc tính này. |
| ẩn giấu | Tương đương với không có. |
| say mê |
say mê |
| nét đứt |
nét đứt |
| chất rắn |
chất rắn |
| gấp đôi |
gấp đôi |
| rãnh |
rãnh |
| cây rơm |
cây rơm |
| chèn vào |
chèn vào |
| sự khởi đầu |
sự khởi đầu |
| {1,4} |
Liệt kê bốn kiểu khác nhau cho đường viền của một phần tử cùng một lúc, chỉ dành cho thuộc tính border-style:
|
| ban đầu | |
| thừa kế | |
Cú pháp
P (kiểu viền: liền khối;) p (kiểu viền trên cùng: liền khối;)
2. Màu khung viền-màu sắc
Thuộc tính đặt màu của khung ở tất cả các cạnh cùng một lúc. Sử dụng các thuộc tính làm rõ, bạn có thể đặt màu khác nhau cho đường viền của mỗi bên của phần tử. Nếu không có màu nào được chỉ định cho khung, nó sẽ giống với màu của văn bản của phần tử. Nếu không có văn bản trong phần tử thì màu đường viền sẽ giống với màu văn bản phần tử cha. Không được thừa kế.
| màu viền (màu viền trên, màu viền phải, màu viền dưới, màu viền trái) |
|
|---|---|
| Giá trị: | |
| trong suốt | Số lượt cài đặt màu trong suốt cho khung. Đồng thời, chiều rộng của khung vẫn được giữ nguyên. Có thể dùng để thay đổi màu đường viền khi di chuột qua một phần tử để tránh phần tử đó bị dịch chuyển. |
| màu sắc | Màu của khung được đặt bằng cách sử dụng các giá trị của thuộc tính. (màu viền: #cacd58;) |
| {1,4} |
Liệt kê bốn màu khác nhau cho đường viền của một phần tử cùng một lúc, chỉ dành cho thuộc tính border-color:
|
| ban đầu | Đặt giá trị thuộc tính thành giá trị mặc định. |
| thừa kế | Kế thừa giá trị thuộc tính từ phần tử cha. |
Cú pháp
P (màu viền: #cacd58;)
3. Độ rộng đường viền
Chiều rộng khung được chỉ định bằng đơn vị chiều dài hoặc từ khóa. Nếu thuộc tính kiểu đường viền được đặt thành không và đường viền của phần tử được đặt thành chiều rộng nào đó thì trong trường hợp này độ rộng đường viền được đặt thành 0. Không được thừa kế.
Cú pháp
P (độ rộng đường viền: 2px;)
4. Đặt khung với một thuộc tính
Thuộc tính border cho phép bạn kết hợp các thuộc tính sau: border-width, border-style, border-color chẳng hạn:
Div ( chiều rộng: 100px; chiều cao: 100px; đường viền: 2px màu xám đậm; )
Trong trường hợp này, các thuộc tính được chỉ định sẽ được áp dụng đồng thời cho tất cả các đường viền của phần tử. Nếu bất kỳ giá trị nào không được chỉ định, giá trị mặc định sẽ thay thế.
5. Đặt khung cho một đường viền của phần tử
Trong trường hợp cần thiết lập phong cách khác nhau ranh giới của một phần tử, bạn có thể sử dụng ký hiệu viết tắt cho ranh giới tương ứng.
Các thuộc tính được liệt kê bên dưới kết hợp các thuộc tính sau thành một khai báo duy nhất: border-width , border-style và border-color . Danh sách các thuộc tính được chỉ định theo một thứ tự nhất định, trong khi một hoặc hai giá trị có thể được bỏ qua, trong trường hợp đó, giá trị của chúng sẽ lấy giá trị mặc định.
Kiểu của đường viền trên được đặt bằng cách sử dụng thuộc tính border-top, đáy - border-bottom, left - border-left và right - border-right.
Cú pháp
P (đường viền trên cùng: màu xám đậm 2px;)
6. Phác thảo đường viền bên ngoài
Thuộc tính chỉ định đường viền bên ngoài xung quanh các phần tử (tức là bên ngoài đường viền thông thường). Mục đích chính của thuộc tính này là làm nổi bật một phần tử. Không giống như thuộc tính border, việc áp dụng thuộc tính này không ảnh hưởng đến kích thước hoặc vị trí của phần tử, bởi vì đường viền được hiển thị trên đầu khối phần tử, do đó có thể dẫn đến sự chồng chéo lề phần tử và các khu vực lân cận.
Ngoài ra, đường viền bên ngoài, không giống như khung của phần tử, bao quanh phần tử ở tất cả các phía, tạo khung hoàn toàn cho phần tử đó.
Đường viền bên ngoài luôn là hình chữ nhật và không đi theo đường viền của khối được chỉ định bán kính đường viền.
Thuộc tính phác thảo cho phép bạn kết hợp các thuộc tính sau: màu phác thảo, kiểu phác thảo, chiều rộng phác thảo. Nếu bất kỳ giá trị nào không được chỉ định, giá trị mặc định sẽ thay thế.
Div ( chiều rộng: 100px; chiều cao: 100px; đường viền: #cacd58 Solid 2px; )
6.1. phong cách phác thảo
Hình thức của đường viền bên ngoài được thiết lập tương tự như kiểu khung của phần tử. Không được thừa kế.
Cú pháp
P (kiểu phác thảo: sườn núi;)
6.2. Màu đường viền bên ngoài màu đường viền bên ngoài
Màu sắc của đường viền bên ngoài chỉ có thể được xác định khi đặt giá trị phong cách phác thảo. Không được thừa kế.
Cú pháp
P (kiểu phác thảo: sườn núi; màu phác thảo: bạc; )
6.3. Độ dày đường viền bên ngoài chiều rộng đường viền bên ngoài
Độ dày của đường viền bên ngoài được đặt tương tự như độ dày của khung của phần tử. Không được thừa kế.
Cú pháp
P ( kiểu phác thảo: chấm; chiều rộng phác thảo: 5px; )
