1.1
Định dạng dòng & đoạn
1.1.1
Định dạng dòng
Ở các phần trước, chúng ta đã học cách định dạng từng chữ,
phần này sẽ tìm hiểu cách định dạng các dòng văn bản. Ví dụ: thụt đầu dòng, khoảng
cách giữa các dòng, căn chỉnh theo chiều ngang.
Một số khái niệm
Để dễ hiểu, chúng cùng tìm hiểu một số khái niệm liên quan đến
một dòng văn bản, xem hình minh họa,
– Đường cơ sở (baseline) là đường được dùng làm mặt nền, để
đặt các kí tự có đáy phẳng hoặc đáy tròn (ví dụ: a, b, c, d, e, o,u, i, n)
– Đường trung bình (mean line) là đường dùng để chặn trên
các kí tự thông thường (ví dụ: a, c, e, o, u, v)
– Khoảng cách từ đường cơ sở tới đường trung bình được gọi
là chiều cao cơ bản của một dòng, tiếng Anh gọi là x-height
– Đường đáy (descent line) là đường dùng làm mặt
đế (đáy) để chặn dưới các kí tự có phần nằm dưới đường trung bình (ví dụ: y, g,
p, q)
– Đường trần (ascent line) là đường
dùng làm mặt trên (trần) để chặn các kí tự có phần nằm trên đường trung bình
(ví dụ: b, d, h, k, l)
Thuộc tính line-height
Sử dụng thuộc tính line-height để thiết lập khoảng cách tối
thiểu giữa hai đường cơ sở. Gọi là khoảng cách tối thiểu vì nếu chèn một hình ảnh
hoặc một chữ lớn hơn bình thường vào một dòng thì khoảng cách này sẽ được tự động
tăng lên.
Dựa trên giá trị line-height, trình
duyệt sẽ chèn thêm khoảng trắng ở phía trên và phía dưới của dòng văn bản.
Hiểu đơn giản, line-height chính là
chiều cao của cái hộp chứa dòng chữ (line box).
Thuộc tính line-height:
– Giá trị: số | đơn vị
đo chiều dài | phần trăm | normal
– Mặc định: normal
– Áp dụng: cho mọi phần
tử
– Kế thừa: có
Ví dụ sau là ba cách để thiết lập line-height, có giá trị bằng 2 lần kích
thước phông chữ (font-size),
p { line-height: 2; }
p { line-height: 2em; }
p { line-height: 200%; }
Nếu giá trị của line-height là số, trình duyệt sẽ nhân số
này với kích thước phông chữ của phần tử hiện tại để có được chiều cao của dòng
văn bản. Tương tự, nếu giá trị của line-height
là em hoặc phần trăm, thì đó là hai đơn vị đo tương đối, trình duyệt sẽ dựa trên
nó để tính chiều cao của dòng văn bản.
Xem hình minh họa,
Ví dụ minh họa:
<style>
h1 { font-size: 30px; line-height: 1.1em; }
div { font-size: 15px; width: 10em; border: 1px solid red;}
.div1 { line-height: 1.1; }
.div2 { line-height: 1.1em }
</style>
</head>
<body>
<div class="div1">
<h1>Đoạn văn bản 1</h1>
</div>
<div class="div2">
<h1>Đoạn văn bản 2</h1>
</div>
</body>
Chạy đoạn mã trên, mở Developer
tools > tab Elements > Computed để xem giá trị line-height của .div1, .div2,
h1.
Chúng ta nên sử dụng giá trị số để
thiết lập cho line-height. Tại sao vậy?
Chúng ta cùng xem ví dụ trong trường hợp có kế thừa line-height (h1 kế thừa line-height của .div1, .div2):
<style>
h1
{
font-size:
30px;
}
div { font-size: 15px; width: 10em; border: 1px solid red;}
.div1 { line-height: 1.1; }
.div2 { line-height: 1.1em }
</style>
</head>
<body>
<div class="div1">
<h1>Đoạn văn bản 1</h1>
</div>
<div class="div2">
<h1>Đoạn văn bản 2</h1>
</div>
</body>
– h1 trong .div1 có line-height=1.1*30px =33px. Luôn lấy giá
trị font-size của phần tử hiện tại
nhân với giá trị số của line-height.
– h1 trong .div2 có line-height=1.1em*15px=16.5px. Giá trị line-height được tính dựa vào font-size của phần tử cha.
Giao diện kết quả:
Thuộc tính text-indent
Thuộc tính text-indent được sử dụng để thiết lập khoảng lùi của hàng đầu tiên
trong một đoạn. Nếu muốn thiết lập khoảng lùi cho cả đoạn, sử dụng thuộc tính margin hoặc padding.
Thuộc tính text-indent:
– Giá trị: đơn vị đo
chiều dài | phần trăm
– Mặc định: 0
– Áp dụng: thùng chứa kiểu
block
– Kế thừa: có
Giá trị của thuộc tính text-indent có thể là em, %
hoặc px. Giá trị % được tính dựa trên
độ rộng (width) của phần tử cha. Giá trị -35px sẽ dịch chuyển hàng đầu tiên về
phía bên trái của đoạn (thò đầu hàng – hang out). Xem hình minh họa,
Lưu ý:
– Thuộc tính text-indent có kế thừa xuống cho các hậu duệ, tuy nhiên, nó sẽ kế
thừa giá trị đã được tính toán. Ví dụ, một div
với chiều rộng là 800px, với text-indent
là 10%, vậy giá trị text-indent sẽ
chuyển xuống các hậu duệ sẽ là 80px chứ không phải là 10%.
– Nếu thiết lập giá trị text-indent là giá trị âm (ví dụ -35px),
thì phải đảm bảo là có thiết lập giá trị cho left margin, để đảm bảo phần chữ thò ra không bị che mất trên màn
hình giao diện.
Ví dụ:
<style>
body {
width: 500px;
margin-left: 50px;
border: 1px solid red;
}
p#doan1 { text-indent: 2em; }
p#doan2 { text-indent: 25%; }
p#doan3 { text-indent: -35px; }
</style>
</head>
<body>
<p id="doan1">Giá trị của thuộc tính text-indent có
thể là em, % hoặc px.
Giá trị % được tính dựa trên độ rộng (width) của phần tử
cha.
Giá trị -35px sẽ dịch chuyển hàng đầu tiên về phía bên
trái của đoạn.</p>
<p id="doan2">Giá trị của thuộc tính text-indent có
thể là em, % hoặc px.
Giá trị % được tính dựa trên độ rộng (width) của phần tử
cha.
Giá trị -35px sẽ dịch chuyển hàng đầu tiên về phía bên
trái của đoạn.</p>
<p id="doan3">Giá trị của thuộc tính text-indent có
thể là em, % hoặc px.
Giá trị % được tính dựa trên độ rộng (width) của phần tử
cha.
Giá trị -35px sẽ dịch chuyển hàng đầu tiên về phía bên
trái của đoạn.</p>
</body>
Căn đoạn văn bản theo
chiều ngang
Để căn đoạn văn bản theo chiều ngang, sử dụng thuộc tính text-align.
Thuộc tính text-align:
– Giá trị: left |
right | center | justify | start | end
– Mặc định: start
– Áp dụng: thùng chứa kiểu
block
– Kế thừa: có
Ý nghĩa các giá trị của thuộc tính text-align:
– left, start: căn lề trái
– right, left: căn lề phải
– center: căn giữa
– justify: căn đều hai bên
Ví dụ:
p#doan1 { text-align: center; }
p#doan2 { text-align: left; }
p#doan3 { text-align: right; }
Để gạch chân, gạch ngang, gạch trên, bỏ dấu gạch chân cho
các liên kết, sử dụng thuộc tính text-decoration.
Thuộc tính text-decoration:
– Giá trị: none |
underline | overline | line-through
– Mặc định: none
– Áp dụng: cho tất cả
phần tử
– Kế thừa: không
Ý nghĩa các giá trị của thuộc tính text-decoration:
– underline: gạch dưới
– overline: gạch trên
– line-through: gạch giữa
Ví dụ, thuộc tính text-decoration
dùng để bỏ dấu gạch chân khi làm thanh điều hướng (menu):
<style>
a {
text-decoration: none;
}
</style>
</head>
<body>
<ul>
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">News</a></li>
<li><a href="contact.asp">Contact</a></li>
<li><a href="about.asp">About</a></li>
</ul>
</body>
Sử dụng thuộc tính text-transform
để chuyển qua lại giữa các dạng chữ hoa và chữ thường, mà không cần phải gõ lại.
Lưu ý: việc chuyển đổi chữ hoa/chữ thường được thực hiện khi trình duyệt kết xuất
ra màn hình chứ không thay đổi văn bản trong mã nguồn.
Thuộc tính text-transform:
– Giá trị: none |
capitalize | lowercase | uppercase
– Mặc định: none
– Áp dụng: cho tất cả
phần tử
– Kế thừa: có
Ví dụ,
Ý nghĩa các giá trị của thuộc tính text-transform:
– capitalize: viết hoa kí tự đầu tiên của mỗi chữ
– lowercase: viết thường
– uppercase: viết hoa toàn bộ
– none: hiển thị như trong mã nguồn
Ví dụ: muốn viết hoa các chữ của phần tử a:
a {
text-transform: uppercase;
}
Khoảng
cách giữa các kí tự, chữ
Để thiết lập khoảng cách giữa các kí tự, sử dụng thuộc tính letter-spacing.
Thuộc tính letter-spacing:
– Giá trị: đơn vị đo
chiều dài | normal
– Mặc định: none
– Áp dụng: cho tất cả
phần tử
– Kế thừa: có
Để thiết lập khoảng cách giữa các chữ, sử dụng thuộc tính word-spacing.
Thuộc tính word-spacing:
– Giá trị: đơn vị đo
chiều dài | normal
– Mặc định: none
– Áp dụng: cho tất cả
phần tử
– Kế thừa: có
Ví dụ,
p { letter-spacing: 8px; }
p { word-spacing: 1.5em; }
Lưu ý: khi giá trị của thuộc tính là em, lúc kế thừa cho phần tử con, nó sẽ chuyển cho phần tử con giá
trị đã được tính ra px (chứ không phải
giá trị dạng em).
1.1.2 Tạo bóng chữ
Để tạo bóng cho chữ, sử dụng thuộc tính text-shadow.
Thuộc tính text-shadow:
– Giá trị: ‘horizontal
offset’‘vertical offset’‘blur radius’‘color’ | none
– Mặc định: none
– Áp dụng: cho tất cả
phần tử
– Kế thừa: có
Giá trị của thuộc tính text-shadow
gồm ba độ đo (horizontal offset, vertical
offset, blur radius) và màu, trong đó blur
radius là tùy chọn.
Hai ví dụ, sử dụng thuộc tính text-shadow dạng đơn giản nhất,
h1 {
color: darkgreen;
text-shadow: -.3em -.3em silver;
}
h1 {
color: darkgreen;
text-shadow: .2em .2em silver;
}
Kết quả được thể hiện ở hình sau,
Trong đó:
– horizontal offset:
là khoảng dịch của bóng sang phía phải so với văn bản, nếu giá trị này là âm,
bóng sẽ được dịch sang phía trái
– vertical offset:
là khoảng dịch của bóng xuống phía dưới so với văn bản, nếu giá trị này là âm,
bóng sẽ được dịch lên phía trên
– color: màu của
bóng, nếu bỏ qua giá trị này, bóng sẽ cùng màu với văn bản
Để bóng có tính mềm mại, cần sử dụng thêm giá trị blur-radius, đây là độ mờ của bóng, giá
trị bằng 0 là không làm mờ, giá trị càng cao bóng sẽ càng mờ.
Ví dụ,
h1 {
color: darkgreen;
text-shadow: -.3em
-.3em .03em silver;
}
Có thể sử dụng nhiều bóng trên một phần tử văn bản để tạo ra
các hiệu ứng khác nhau. Bóng nào khai báo trước sẽ được thực hiện trước, bóng
khai báo sau sẽ được thực hiện sau.
Ví dụ, tạo nhiều bóng,
h1 {
color: darkgreen;
text-shadow: -.7em
-.5em .2em silver,
.2em .2em
.1em gray;
}
Ví dụ, tạo chữ nổi,
body {background-color:
thistle;}
h1 {
color: #ba9eba;
text-shadow:
-.05em -.05em .05em
white,
.03em .03em .05em
purple;
}
Ví dụ, tạo chữ khắc nổi,
body {background-color:
thistle;}
h1 {
color: #ba9eba;
text-shadow:
-.05em -.05em .05em
purple,
.03em .03em .05em
white;
}
Ví dụ, làm chữ phát sáng,
h1 {
text-shadow: 0 0 .7em
purple;
}
Không nên quá lạm dụng việc tạo bóng cho văn bản vì một số
lý do sau: người dùng khó đọc nội dung, trang web bị chậm (đặc biệt trên các
thiết bị di động có khả năng xử lý hạn chế), khả năng hỗ trợ của các trình duyệt
là không giống nhau.
1.1.3 Đánh số và dấu đầu dòng
Như đã biết, trình duyệt sẽ tự động đánh số cho danh sách có
thứ tự (ordered list), và đánh dấu đầu dòng (bullets) cho danh sách không có thứ
tự (unordered list). Tuy nhiên, lập trình viên có thể sử dụng CSS để thay đổi:
loại, vị trí, thậm chí không cho xuất hiện các số hoặc các dấu này.
Chọn kiểu
Để chọn kiểu số hoặc dấu cho các mục của danh sách, sử dụng
thuộc tính list-style-type.
Thuộc tính list-style-type:
– Giá trị: none | disc
| circle | square | decimal | decimal-leading-zero | lower-alpha | upper-alpha
| lower-latin | upper-latin | lower-roman | upper-roman | lower-greek
– Mặc định: disc
– Áp dụng: ul, ol, li
(hoặc các phần tử có hiển thị là list-item)
– Kế thừa: có
Sử dụng giá trị none
của thuộc tính list-style-type để gỡ
bỏ số hoặc dấu khi dùng danh sách tạo menu hoặc tạo các thành phần của một web
form.
Các kiểu dấu đầu dòng được trình duyệt hỗ trợ mặc định gồm:
dấu tròn đặc (disc), dấu tròn rỗng (circle), dấu vuông đặc (square).
Các kiểu số và kí tự dùng cho danh sách có thứ tự được thể
hiện ở bảng sau,
|
Giá trị |
Hiển thị |
|
Decimal |
1, 2, 3, 4… |
|
decimal-leading-zero |
01, 02, 03, 04… |
|
lower-alpha |
a, b, c, d… |
|
upper-alpha |
A, B, C, D… |
|
lower-latin |
a, b, c, d… (giống lower-alpha) |
|
upper-latin |
A, B, C, D…(giống upper-alpha) |
|
lower-roman |
i, ii, iii, iv… |
|
upper-roman |
I, II, III, IV… |
|
lower-greek |
α, β, γ, δ… |
Để đánh số hoặc dấu đầu dòng cho một phần tử bất kì, sử dụng
thuộc tính display với giá trị là list-item, sau đó chọn một kiểu đánh số
hoặc đánh dấu bằng thuộc tính list-style-type.
Ví dụ,
p.bulleted {
display: list-item;
list-style-type: upper-alpha;
}
Xác định vị trí của số/dấu
Mặc định, số/dấu sẽ nằm ngoài (outside) vùng nội dung của
các mục (list-item), có thể sử dụng thuộc tính list-style-position để kéo số/dấu vào (inside) vùng nội dung của
các mục.
Thuộc tính list-style-position:
– Giá trị: inside | outside
– Mặc định: outside
– Áp dụng: ul, ol, li
(hoặc các phần tử có kiểu hiển thị là list-item)
– Kế thừa: có
Xem hình minh họa,
Ngoài các kiểu dấu đầu dòng có sẵn, lập trình viên có thể sử
dụng thuộc tính list-style-image để
dùng các hình ảnh tùy ý làm dấu đầu dòng.
Thuộc tính list-style-image:
– Giá trị: url | none
– Mặc định: none
– Áp dụng: ul, ol, li
(hoặc các phần tử có kiểu hiển thị là list-item)
– Kế thừa: có
Khi sử dụng thuộc tính list-style-image,
nên sử dụng thêm thuộc tính list-style-type
để dự phòng trong trường hợp không thể tải được hình ảnh của thuộc tính list-style-image. Ví dụ,
ul {
list-style-image: url(/images/happy.gif);
list-style-type: circle;
}
1.1.4 Xem và đọc thêm
– [1] Jenifer Niederst
Robbins, Learning Web Design,
O’Reilly, 2018, trang 287 - 298
– [2] Line-height: https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
– [3] navbar horizontal: https://www.w3schools.com/css/css_navbar_horizontal.asp
1.1.5 Bài tập và thực hành
Bài
tập 1. Viết lại các đoạn mã trong phần lý thuyết.
Bài tập 2. Sử dụng mã HTML (menu.html) của Bài tập 2, trong phần Bộ chọn (hoặc Phông chữ).
Let’s
add a few finishing touches to the online menu, menu.html. It might be useful
to save the file and look at it in the browser after each step to see the
effect of your edits and to make sure you’re on track.
1.
First, I have a few global changes to the body element in mind. I’ve had a
change of heart about the font-family. I think that a serif font such as
Georgia would be more sophisticated and appropriate for a bistro menu. Let’s
also use the line-height property to open up the text lines and make them
easier to read.
Make
these updates to the body style rule, as shown:
body {
font-family: Georgia, serif;
font-size: small;
line-height: 1.75em;
}
2.
I also want to redesign the “info” section of the document. Remove the teal
color setting by deleting that whole rule. Once that is done, make the h1 olive green and the paragraph in the header
gray. Add color declarations to the existing rules:
#info { color: teal; } /* delete */
h1 {
font: bold 1.5em "Marko
One", Georgia, serif;
color: olive;
}
#info p {
font-style: italic;
color: gray;
}
3.
Next, to imitate a fancy restaurant menu, I’m going to center a few key
elements on the page with the text-align property. Write a rule with a grouped
selector to center the headings and the “info” section:
h1, h2, #info {
text-align: center;
}
4.
I want to make the “Appetizer” and “Main Courses” h2 headings more
eye-catching. Instead of large, bold type, I’m going to use all uppercase
letters, extra letter spacing, and color to call attention to the headings.
Here’s the new rule for h2 elements that includes all of these changes:
h2 {
font-size: 1em;
text-transform: uppercase;
letter-spacing: .5em;
color: olive; }
5.
We’re really close now; just a few more tweaks to those paragraphs right after
the h2 headings. Let’s center those too and make them italic:
h2 + p {
text-align: center;
font-style: italic;}
Note
that I’ve used a next-sibling selector (h2 + p) to select any paragraph that
follows an h2.
6.
Next, add a softer color to the menu item names (in dt elements). I’ve chosen
“sienna,” one of the names from the CSS3 color module. Note that the strong
elements in those dt elements stay “tomato” red because the color applied to
the strong elements overrides the color inherited by their parents.
dt {
font-weight: bold;
color: sienna;}
7.
Finally, for kicks, add a drop shadow under the h1 heading. You can play around
with the values a little to see how it works. I find it to look a little clunky
against a white background, but when you have a patterned background image,
sometimes a drop shadow provides the little punch you need to make the text stand
out. Notice how small the shadow values are—a little goes a long way!
h1 {
font: bold 1.5em "Marko
One", Georgia, serif;
color: olive;
text-shadow: .05em .05em
.1em lightslategray;}
And
we’re done!
1.1.6 Câu hỏi ôn tập
Câu 1. Để thiết lập khoảng lùi của hàng đầu tiên trong một
đoạn, sử dụng thuộc tính nào?
A. line-height
B. text-indent
C. text-align
D. text-decoration
Câu 2. Để thiết lập chiều cao tối thiểu của dòng chữ (line
box), sử dụng thuộc tính nào?
A. text-shadow
B. text-align
C. text-transform
D. line-height
Câu 3. Để bỏ đường gạch chân của các liên kết, sử dụng thuộc
tính nào?
A. text-decoration
B. word-spacing
C. letter-spacing
D. text-align
Câu 4. Để căn giữa (theo chiều ngang) một đoạn văn bản, sử dụng
thuộc tính nào?
A. word-spacing
B. text-transform
C. text-align
D. text-shadow
Câu 5. Để định dạng cách đánh số, đánh dấu đầu dòng cho một
danh sách, sử dụng thuộc tính nào?
A. text-shadow
B. list-style-type
C. word-spacing
D. text-decoration
Đáp án: 1(B), 2(D), 3(A), 4(C), 5(B)
-----
-----