6. Các định dạng CSS cơ bản
6.3.2. Thuộc tính text-indent
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng tab (vào đầu dòng) cho dòng đầu tiên của đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo chiều dài cơ bản dùng trong CSS.
6.3.3.Thuộc tính text-align
Thuộc tính text-align giúp canh chỉnh văn bản cho các thành phần trong trang web. Thuộc tính này có 4 giá trị cơ bản: left (canh trái – mặc định), right (canh phải), center (canh giữa) và
justify (canh đều).
Ví dụ:
6.3.4.Thuộc tính vertical-align
Thuộc tính vertical-align canh chỉnh văn bản theo chiều dọc. Thuộc tính này nhận các giá trị đơn vị đo chiều dài của CSS (hỗ trợ cả số âm). Ngoài ra vertical-align còn có các giá trị khác gồm baseline, sub, super, top, text-top, middle, bottom, text-bottom.
Ví dụ:
6.3.5.Thuộc tính letter-spacing
Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản.
Ví dụ:
6.3.6.Thuộc tính text-decoration
Thuộc tính text-decoration thêm các hiệu ứng gạch chân (underline), gạch giữa dòng (line- through), gạch đầu (overline)
Ví dụ:
span { text-decoration : line-through; }
6.3.7.Thuộc tính text-transform
Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản mà không
phụ thuộc vào văn bản gốc trên HTML. Thuộc tính này có các giá trị: uppercase (in hoa),
lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) và none (không áp dụng hiệu ứng – mặc định).
Ví dụ:
div { text-transform : capitalize; }
6.4.Box model
Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần. Box model bao gồm padding (vùng đệm), border (viền) và margin (canh lề) và các tùy chọn độ rộng và chiều cao của khối không gian.
Ví dụ:
Xét đoạn mã HTML sau
<p>
Trong CSS, box model (mô hình hộp) mô tả cách mà CSS định dạng khối không gian bao quanh một thành phần.
</p>
và định dạng CSS cho thành phần HTML ở trên như sau
p { width :200px; margin :30px 20px; padding :20px 10px; border :1px dotted #000; text-align :justify }
Với ví dụ trên mô hình hộp được khái quát như sau:
Boder
Vùng thể hiện nội dung của thành phần HTML
6.4.1.Margin
Margin là vùng không gian bên ngoài viền của 1 thành phần HTML và có thể được chia thành 4 thuộc tính chi tiết: margin-top, margin-right, margin-bottom, margin-left. Giá trị margin tính theo các đơn vị đo chiều dài của CSS.
Margin không có màu nền (trong suốt).
Ví dụ: body { margin-top :80pt; margin-right :30pt; margin-bottom :40pt; margin-left :50pt; } có thể viết gọn thành body { margin : 80pt 30pt 40pt 50pt; } Cú pháp tổng quát
margin : <margin-top> | <margin-right> | <margin-bottom> | <margin-left>
hoặc
margin : <value1> | < value2>
(với value1 là giá trị margin-top và margin-bottom và value2 là giá trị margin-left và margin-right.)
hoặc
margin : <value>
(với value là cả 4 giá trị margin-top, margin-bottom, margin-left, margin-right.)
Ví dụ: #myBox { margin : 20px 10px; } .myArea { margin : 10%; } 6.4.2.Padding
Padding có thể hiểu như là một vùng đệm xung quanh nội dung của đối tượng HTML. Padding không ảnh hưởng tới khoảng cách giữa các các đối tượng như margin mà nó chỉ quy định khoảng cách giữa phần nội dung và viền của một đối tượng
Cú pháp tổng quát: tương tự như margin
padding : <padding-top> | < padding-right> | < padding-bottom> | < padding-left>
hoặc
padding : <value1> | < value2>
(với value1 là giá trị padding-top và padding-bottom và value2 là giá trị padding-left và padding-right.)
hoặc
padding : <value>
(với value là cả 4 giá trị padding-top, padding-bottom, padding-left, padding-right.)
6.4.3.Border
Border là một thành phần quan trọng trong một trang web. Nó thường được dùng trong trang trí, đóng khung cho một đối tượng cần nhấn mạnh, phân cách các đối tượng giúp trang web trông dễ nhìn hơn,…Border có các thuộc tính cơ bản gồm border-width, border-color và border-style.
a)border-width
Border-width quy định độ rộng (độ dày mỏng) cho viền của một đối tượng HTML. Thuộc tính này có các giá trị thuộc đơn vị chiều dài của CSS và thêm các giá trị: thin (mảnh), medium
(vừa), thick (dày).
b)border-color
Border-color là thuộc tính quy định màu viền cho một đối tượng HTML. Thuộc tính này nhận giá trị thuộc đơn vị đo màu CSS.
c)boder-style
Border-style là thuộc tính quy định kiểu viền thể hiện của một đối tượng HTML. CSS cung cấp các giá trị kiểu viền sau: dotted, dashed, solid, double, groove, ridge, inset và outset. Ngoài ra, hai giá trị none (mặc định) hay hidden dùng để ẩn đường viền.
Ví dụ: h1 { border-width :thin; border-color :#FF0C00; border-style :solid; } có thể viết gọn lại thành h1 {
border : thin #FF0C00 solid; }
Như vậy, thuộc tính border có thể được viết rút gọn như sau
Ngoài ra, thuộc tính border còn có thể chia thành 4 thuộc tính thành phần: border-top,
border-right, border-bottom và border-left.
Ví dụ: div { border-top-width : 5px; border-top-color : blue; border-top-style : double; border-right : 1% #000 dotted; border-bottom : 2pt RBG(20, 200, 125) groove; border-left : none; }