Lưu ý nhỏ là thuộc tính này chỉ hiển thị trên FireFox.
☼ Tìm hiểu cấu trúc của từng lệnh và ví dụ minh họa:
1. Lệnh uotline:
- Cấu trúc :
outline : outline-color outline-style outline-width
Lưu ý: sau lênh không có dấu ";" . outline-color, outline-style, outline-width lần lượt là các thuộc tính màu, style, độ rộng (sẽ hiểu rõ hơn khi đi vào cụ thể từng lệnh).
- Ví dụ:
<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
outline: green dotted thick}
</style>
</head>
<body>
<p>
FD's BlOg - Testing</p>
</body>
</html>
Kết quả :
2. Lệnh outline-color :
- Cấu trúc :
outline-color: #{trị màu}
- Ví dụ:
<html>
<head>
<style type="text/css">
p
{
border: red solid thin;
outline-style: solid;
outline-color: #00ff00}
</style>
</head>
<body>
<p>
FD's BlOg - Testing</p>
</body>
</html>
Kết quả :
3. Lệnh outline-style :
- Cấu trúc :
outline-style: {style}
Với các style:
- none
- dotted
- dashed
- solid
- double
- groove
- ridge
- inset
- outset
xem ví dụ bên dưới để thấy rõ các style
- Ví dụ:
<html>
<head>
<style type="text/css">
p
{
padding: 0 0 0 15px;
border: red solid thin;
}
p.dotted {outline-style: dotted}p.dashed {outline-style: dashed}p.solid {outline-style: solid}p.double {outline-style: double}p.groove {outline-style: groove}p.ridge {outline-style: ridge}p.inset {outline-style: inset}p.outset {outline-style: outset}</style>
</head>
<body>
<p class="dotted">
FD Testing - dotted;</p>
<p class="dashed">
FD Testing - dashed</p>
<p class="solid">
FD Testing -solid</p>
<p class="double">
FD Testing - double</p>
<p class="groove">
FD Testing - groove</p>
<p class="ridge">
FD Testing - ridge</p>
<p class="inset">
FD Testing - inset</p>
<p class="outset">
FD Testing - outset</p>
</body>
</html>
Kết quả :
4. Lệnh outline-width :
- Cấu trúc :
outline-width: {thuộc tính}
Với các thuộc tính:
- thin
- medium
- thick
- pixel (ví dụ 5px)
- Ví dụ:
<html>
<head>
<style type="text/css">
p.thick{
padding: 0 0 0 15px;
border: red solid thin;
outline-style: solid;
outline-width: thick}
p.pixel{
padding: 0 0 0 15px;
border: red solid thin;
outline-style: solid;
outline-width: 2px}
</style>
</head>
<body>
<p class="thick">
FD Testing - thick</p>
<p class="pixel">
FD Testing - pixel</p>
</body>
</html>
Kết quả :
[FD's BlOg] - Khoảng 30 con xế khủng thuộc các nhãn hiệu cao cấp nhất tại Việt Nam như Bentley Continental GT, Porsche Cayenne, Lamborghini Murcielago, Chrysler 300C limousine … vừa có dịp tụ hội tại một đám cưới thuộc dạng đình đám nhất Hà Nội. (Nguồn : Chuyện Hot)
