Bảng khóa học

Hướng dẫn cao cấp CSS

• Sách ngoại khóa CSS
• Giới thiệu CSS
• Ngữ pháp cơ bản CSS
• Ngữ pháp cao cấp CSS
• Chọn chọn sinh CSS
• Chọn chọn id CSS
• Chọn chọn lớp CSS
• Tạo CSS
• Nền CSS
• Văn bản CSS
• Phông chữ CSS
• Danh sách CSS

Khung CSS

• Giới thiệu mô hình khung CSS
• Khoảng cách trong CSS
• Biên CSS
• Khoảng cách ngoài CSS
• Kết hợp khoảng cách ngoài CSS

Định vị CSS

• Giới thiệu vị trí CSS
• Vị trí tương đối CSS
• Vị trí tuyệt đối CSS
• Cuộn CSS

Chọn lọc CSS

• Chọn chọn yếu tố CSS
• Nhóm chọn chọn CSS
• Giải thích chọn chọn lớp CSS
• Giải thích chọn chọn id CSS
• Giải thích chọn chọn thuộc tính CSS
• Chọn chọn后代 CSS
• Chọn chọn yếu tố con CSS
• Chọn chọn anh em kế CSS

Khóa học chọn lọc

Khuyến nghị khóa học:

• Bảo tàng CodeW3C.com

Viền của phần tử (border) là một hoặc nhiều đường bao quanh nội dung và viền trong của phần tử.

Thuộc tính border của CSS cho phép bạn quy định樣式, độ rộng và màu sắc của viền của phần tử.

Biên CSS

Trong HTML, chúng ta sử dụng bảng để tạo viền xung quanh văn bản, nhưng bằng cách sử dụng thuộc tính viền của CSS, chúng ta có thể tạo ra viền có hiệu ứng xuất sắc và có thể áp dụng cho bất kỳ phần tử nào.

Phần bên trong viền của phần tử là viền của phần tử (border). Viền của phần tử là một hoặc nhiều đường bao quanh nội dung và viền trong của phần tử.

Mỗi viền có ba khía cạnh: độ rộng,樣式 và màu sắc. Trong phần tiếp theo, chúng ta sẽ giải thích ba khía cạnh này chi tiết.

Viền và nền

Định nghĩa của CSS cho biết viền được vẽ trên nền của phần tử. Điều này rất quan trọng vì một số viền là 'ngắt quãng' (ví dụ, viền chấm hoặc viền trắc), nền của phần tử nên xuất hiện giữa các phần nhìn thấy của viền.

CSS2 cho biết nền chỉ mở rộng đến viền trong,而不是 viền. Sau đó CSS2.1 đã sửa lại: nền của phần tử là nền của nội dung, viền trong và khu vực viền. Hầu hết các trình duyệt đều tuân thủ định nghĩa của CSS2.1, nhưng một số trình duyệt cũ hơn có thể có biểu hiện khác.

S樣式 viền

S樣式 là một trong những khía cạnh quan trọng nhất của viền, điều này không phải vì樣式 kiểm soát việc hiển thị viền (tất nhiên,样品 thực sự kiểm soát việc hiển thị viền), mà vì如果没有样式，边框将根本不存在。

CSS Thuộc tính border-styleĐã định nghĩa 10樣式 khác nhau không phải là inherit, bao gồm none.

Ví dụ, bạn có thể thiết lập viền cho một hình ảnh là outset, làm cho nó trông như một nút bấm nổi:

a:link img {border-style: outset;}

Định nghĩa nhiều樣式

Bạn có thể định nghĩa nhiều樣式 cho một viền, ví dụ:

p.aside {border-style: solid dotted dashed double;}

Quy tắc này đã định nghĩa bốn樣式 viền cho đoạn văn có tên lớp là aside: viền trên bằng đường thẳng, viền phải bằng đường chấm, viền dưới bằng đường trắc và viền trái bằng đường đôi.

Chúng ta lại thấy giá trị ở đây được sắp xếp theo thứ tự top-right-bottom-left, khi thảo luận về việc sử dụng nhiều giá trị để thiết lập viền khác nhau cũng đã thấy thứ tự này.

Định nghĩa樣式 đơn cạnh

Nếu bạn muốn thiết lập樣式 viền cho một cạnh của khung yếu tố mà không phải là tất cả 4 cạnh của khung, bạn có thể sử dụng thuộc tính viền đơn cạnh bên dưới:

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

Do đó, hai phương pháp này tương đương với nhau:

p {border-style: solid solid solid none;}
p {border-style: solid; border-left-style: none;}

Lưu ý:Nếu muốn sử dụng phương pháp thứ hai, bạn phải đặt thuộc tính đơn cạnh sau thuộc tính viết tắt. Bởi vì nếu đặt thuộc tính đơn cạnh trước border-style, giá trị của thuộc tính viết tắt sẽ chèn盖 đơn giá trị none.

Độ rộng của viền

Bạn có thể thông qua Thuộc tính border-widthChỉ định độ rộng của viền.

Có hai cách để chỉ định độ rộng của viền: bạn có thể chỉ định giá trị độ dài, chẳng hạn như 2px hoặc 0.1em; hoặc sử dụng một trong ba từ khóa, chúng là thin, medium (giá trị mặc định) và thick.

Ghi chú:CSS không định nghĩa độ rộng cụ thể của 3 từ khóa, vì vậy một người đại diện có thể thiết lập thin, medium (giá trị mặc định) và thick tương ứng với 5px, 3px và 2px, trong khi người đại diện khác thiết lập tương ứng với 3px, 2px và 1px.

Do đó, chúng ta có thể thiết lập độ rộng của viền như sau:

p {border-style: solid; border-width: 5px;}

hoặc:

p {border-style: solid; border-width: thick;}

Định nghĩa độ rộng của một cạnh

Bạn có thể thiết lập các cạnh viền của phần tử theo thứ tự top-right-bottom-left:

p {border-style: solid; border-width: 15px 5px 15px 5px;}

Ví dụ trên cũng có thể viết tắt như sau (cách viết này được gọi làGiá trị sao chép）：

p {border-style: solid; border-width: 15px 5px;}

Bạn cũng có thể thiết lập độ rộng của mỗi cạnh viền thông qua các thuộc tính sau:

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

Do đó, quy tắc dưới đây tương đương với ví dụ trên:

p {
  border-style: solid;
  border-top-width: 15px;
  border-right-width: 5px;
  border-bottom-width: 15px;
  border-left-width: 5px;
  }

Không có viền

Trong ví dụ trước, bạn đã thấy rằng nếu muốn hiển thị某种边框, bạn phải thiết lập kiểu viền, chẳng hạn như solid hoặc outset.

Vậy nếu đặt border-style thành none sẽ xảy ra điều gì:

p {border-style: none; border-width: 50px;}

Mặc dù độ rộng viền là 50px, nhưng樣式 viền được đặt là none. Trong trường hợp này, không chỉ mẫu viền biến mất, mà độ rộng cũng trở thành 0. Viền biến mất, tại sao lại như vậy?

Đây là vì nếu樣式 viền là none, tức là viền không tồn tại, thì viền không thể có độ rộng, do đó độ rộng viền tự động được đặt là 0, bất kể bạn đã định nghĩa gì.

Việc nhớ điều này rất quan trọng. Thực tế, quên chỉ định樣式 viền là một lỗi thường gặp. Dựa trên các quy tắc sau, tất cả các phần tử h1 sẽ không có viền nào, đừng nói đến độ rộng 20 pixel:

h1 {border-width: 20px;}

Do giá trị mặc định của border-style là none, nếu không có chỉ định, nó tương đương với border-style: none.Do đó, nếu bạn muốn viền xuất hiện, bạn phải chỉ định một樣式 viền.

Màu của viền

Cài đặt màu viền rất đơn giản. CSS sử dụng một biểu thức đơn giản Thuộc tính border-colorNó có thể chấp nhận tối đa 4 giá trị màu.

Bạn có thể sử dụng bất kỳ loại giá trị màu nào, ví dụ có thể là màu tên, cũng có thể là giá trị màu十六进制 và RGB:

p {
  border-style: solid;
  border-color: blue rgb(25%,35%,45%) #909090 red;
  }

Nếu giá trị màu nhỏ hơn 4, giá trị sao chép sẽ hoạt động. Ví dụ, quy tắc sau này đã chỉ định viền trên và dưới của đoạn văn là màu xanh, viền trái và phải là màu đỏ:

p {
  border-style: solid;
  border-color: blue red;
  }

Ghi chú:Màu viền mặc định là màu trước景 của phần tử. Nếu không có màu viền được chỉ định, nó sẽ giống với màu văn bản của phần tử. Mặt khác, nếu phần tử không có văn bản nào, giả sử nó là một bảng, chỉ chứa hình ảnh, thì màu viền của bảng đó là màu văn bản của phần tử cha (vì color có thể kế thừa). Phần tử cha này có thể là body, div hoặc một table khác.

Định nghĩa màu một bên

Còn có một số thuộc tính màu viền một bên. Nguyên lý của chúng tương tự như thuộc tính样式 và độ rộng một bên:

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

Để chỉ định viền đen thẳng và viền phải là đỏ thẳng cho phần tử h1, bạn có thể chỉ định như sau:

h1 {
  border-style: solid;
  border-color: black;
  border-right-color: red;
  }

Viền trong suốt

Chúng ta đã đề cập trước đó, nếu viền không có樣式, thì không có độ rộng. Tuy nhiên, có một số trường hợp bạn có thể muốn tạo một viền không nhìn thấy.

CSS2 đã giới thiệu giá trị màu viền trong suốt. Giá trị này được sử dụng để tạo viền không nhìn thấy với độ rộng. Hãy xem ví dụ dưới đây:

<a href="#">AAA</a>
<a href="#">BBB</a>
<a href="#">CCC</a>

我们为上面的链接定义了如下样式：

a:link, a:visited {
  border-style: solid;
  border-width: 5px;
  border-color: transparent;
  }
a:hover {border-color: gray;}

亲自试一试

从某种意义上说，利用 transparent，使用边框就像是额外的内边距一样；此外还有一个好处，就是能在你需要的时候使其可见。这种透明边框相当于内边距，因为元素的背景会延伸到边框区域（如果有可见背景的话）。

重要事项：在 IE7 之前，IE/WIN 没有提供对 transparent 的支持。在以前的版本，IE 会根据元素的 color 值来设置边框颜色。

Thuộc tính viền CSS

Công cụ

Tài liệu tham khảo CSS

Mẫu CSS

Kiểm tra CSS

Giáo trình CSS

Liên kết tài trợ