Bảng khóa học

Hướng dẫn nâng cao CSS

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

Mô hình khung CSS

• Giới thiệu mô hình khung CSS
• Bên trong lề CSS
• BORDER CSS
• Bên ngoài lề CSS
• Hợp nhất bên ngoài lề CSS

Định vị CSS

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

Chọn器 CSS

• Chọn lựa chọn phần tử CSS
• Nhóm chọn lựa CSS
• Giải thích chọn lựa lớp CSS
• Giải thích chọn lựa ID CSS
• Giải thích chọn lựa thuộc tính CSS
• Chọn lựa chọn con cháu CSS
• Chọn lựa chọn phần tử con CSS
• Chọn lựa chọn anh em cạnh CSS

Khóa học tự chọn

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

• Tủ đồ báu CodeW3C.com

Thuộc tính văn bản của CSS có thể xác định外观 của văn bản.

Bằng cách sử dụng thuộc tính văn bản, bạn có thể thay đổi màu sắc của văn bản, khoảng cách giữa các ký tự, canh chỉnh văn bản, trang trí văn bản, lùi văn bản, và nhiều hơn thế.

Giảm thiểu văn bản

Việc lùi dòng đầu tiên của đoạn văn trên trang web, đây là một trong những hiệu ứng định dạng văn bản phổ biến nhất.

CSS cung cấp Thuộc tính text-indentThuộc tính này giúp thực hiện việc lùi văn bản một cách dễ dàng.

Bằng cách sử dụng thuộc tính text-indent, dòng đầu tiên của tất cả các phần tử có thể lùi lại một khoảng dài đã cho, thậm chí khoảng dài có thể là giá trị âm.

Thuộc tính này thường được sử dụng để lùi dòng đầu tiên của đoạn văn, các quy tắc sau sẽ làm cho tất cả các đoạn văn lùi dòng đầu tiên 5 em:

p {text-indent: 5em;}

lưu ý:一般来说, bạn có thể áp dụng thuộc tính text-indent cho tất cả các phần tử cấp độ block, nhưng không thể áp dụng thuộc tính này cho các phần tử nội tuyến, các phần tử thay thế như hình ảnh. Tuy nhiên, nếu một phần tử cấp độ block (ví dụ: đoạn văn) có hình ảnh trong dòng đầu tiên, nó sẽ di chuyển cùng với văn bản còn lại của dòng đó.

Lưu ý:Nếu bạn muốn 'lùi' dòng đầu tiên của một phần tử trong dòng, bạn có thể tạo hiệu ứng này bằng cách sử dụng mép trong hoặc mép ngoài.

Sử dụng giá trị âm

Thuộc tính text-indent cũng có thể thiết lập thành giá trị âm. Sử dụng kỹ thuật này, bạn có thể thực hiện nhiều hiệu ứng thú vị, chẳng hạn như 'lùi nổi', tức là dòng đầu tiên nổi ở bên trái của phần tử còn lại:

p {text-indent: -5em;}

Nhưng khi thiết lập giá trị âm cho text-indent, hãy cẩn thận, nếu bạn thiết lập giá trị âm cho đoạn văn, một số văn bản trong dòng đầu tiên có thể vượt qua mép trái của cửa sổ trình duyệt. Để tránh sự cố hiển thị này, đề xuất thêm một mép ngoài hoặc một số mép trong cho lùi âm:

p {text-indent: -5em; padding-left: 5em;}

Sử dụng phần trăm

Thuộc tính text-indent có thể sử dụng tất cả các đơn vị độ dài, bao gồm phần trăm.

Phần trăm phải tương đối với chiều rộng của phần tử cha của giá trị lùi. Đ换句话说, nếu bạn thiết lập giá trị lùi là 20%, dòng đầu tiên của phần tử bị ảnh hưởng sẽ lùi vào 20% chiều rộng của phần tử cha.

Trong ví dụ sau, giá trị lùi là 20% của phần tử cha, tức là 100 pixel:

div {width: 500px;}
p {text-indent: 20%;}
<div>
<p> này là đoạn văn.</p>
</div>

Kế thừa

Thuộc tính text-indent có thể kế thừa, hãy xem xét các dấu phím sau:

div#outer {width: 500px;}
div#inner {text-indent: 10%;}
p {width: 200px;}
<div id="outer">
<div id="inner">some text. some text. some text.</div>
<p> này là đoạn văn.</p>
</div>
</div>

Các đoạn văn trong dấu phím này cũng sẽ lùi vào 50 pixel, vì đoạn văn này kế thừa giá trị lùi của phần tử div có id là inner.

Căn chỉnh ngang

text-align Là một thuộc tính cơ bản, nó ảnh hưởng đếnDòng văn bảnCách căn chỉnh giữa chúng. Ba giá trị đầu tiên rất trực tiếp, nhưng giá trị thứ tư và thứ năm thì phức tạp hơn một chút.

Giá trị left, right và center sẽ làm cho văn bản trong phần tử căn chỉnh trái, phải và giữa.

Ngôn ngữ phương Tây đọc từ trái sang phải, vì vậy giá trị mặc định của text-align là left. Văn bản căn chỉnh ở cạnh trái, cạnh phải có hình dạng răng cưa (gọi là văn bản từ trái sang phải). Đối với các ngôn ngữ như Hebrew và Arabic, text-align mặc định là right, vì chúng đọc từ phải sang trái. Không ngạc nhiên, center sẽ làm cho mỗi dòng văn bản trong phần tử được căn giữa.

Lưu ý:Để căn giữa các phần tử khối hoặc phần tử bảng, cần thiết phải đặt khoảng cách ngoài trái và phải một cách hợp lý trên các phần tử đó.

text-align:center và <CENTER>

Bạn có thể nghĩ rằng text-align:center và phần tử <CENTER> có cùng tác dụng, nhưng thực tế二者 rất khác nhau.

<CENTER> Không chỉ ảnh hưởng đến văn bản mà còn làm cho toàn bộ phần tử được căn giữa. Thuộc tính text-align không kiểm soát việc căn chỉnh phần tử mà chỉ ảnh hưởng đến nội dung bên trong. Phần tử本身 sẽ không di chuyển từ một đoạn sang đoạn khác, chỉ là văn bản bên trong bị ảnh hưởng.

justify

Thuộc tính đối齐水平 cuối cùng là justify.

Trong văn bản两端对齐, hai bên trái và phải của dòng văn bản được đặt trên cạnh trong của phần tử cha. Sau đó, điều chỉnh khoảng cách giữa các từ và các chữ cái để các dòng dài ngang nhau. Bạn có thể đã nhận ra rằng văn bản两端对齐 rất phổ biến trong lĩnh vực in.

Điều cần lưu ý là, việc xác định cách text-align两端对齐文本 được kéo dãn để lấp đầy khoảng cách giữa các cạnh trái và phải của phần tử cha (parent element) sẽ do người đại diện người dùng (user agent) quyết định (không phải CSS). Để biết thêm chi tiết, xin xem Trang tham khảo thuộc tính text-align CSS.

Khoảng cách từ

Thuộc tính word-spacingCó thể thay đổi khoảng cách tiêu chuẩn giữa các từ (đoạn văn). Giá trị mặc định normal và giá trị được đặt là 0 là giống nhau.

Thuộc tính word-spacing chấp nhận một giá trị độ dài dương hoặc âm. Nếu cung cấp một giá trị độ dài dương, khoảng cách giữa các từ sẽ tăng lên. Để đặt giá trị âm cho word-spacing, nó sẽ拉近:

p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}
<p class="spread">
Đây là một đoạn văn. Khoảng cách giữa các từ sẽ được tăng lên.
</p>
<p class="tight">
This is a paragraph. The spaces between words will be decreased.
</p>

ví dụ TIY: Tăng hoặc giảm khoảng cách giữa các từ (khoảng cách giữa các chữ)

ghi chú:Nếu bạn muốn hiểu sâu hơn về cách CSS định nghĩa 'ký tự' (word), hãy truy cập Trang tham khảo thuộc tính word-spacing CSS.

Khoảng cách giữa các chữ cái

Thuộc tính letter-spacingKhác với word-spacing, letter-spacing修改的是字符或字母之间的间隔。

Giống như thuộc tính word-spacing, giá trị hợp lệ của thuộc tính letter-spacing bao gồm tất cả các đơn vị đo. Giá trị mặc định là normal (điều này tương đương với letter-spacing:0). Giá trị độ dài nhập vào sẽ tăng hoặc giảm khoảng cách giữa các ký tự hoặc các chữ cái một cách xác định:

h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}
<h1>This is header 1</h1>
<h4>This is header 4</h4>

ví dụ TIY: Định nghĩa khoảng cách giữa các ký tự (khoảng cách giữa các chữ cái)

Chuyển đổi ký tự

Thuộc tính text-transformXử lý chữ hoa và chữ thường của văn bản. Thuộc tính này có 4 giá trị:

• text-decoration có 5 giá trị:
• uppercase
• lowercase
• capitalize

Giá trị mặc định none không thay đổi bất kỳ gì đối với văn bản, sẽ sử dụng chữ hoa và chữ thường ban đầu trong tài liệu nguồn. Như tên gọi, uppercase và lowercase sẽ chuyển văn bản thành chữ hoa và chữ thường hoàn toàn. Cuối cùng, capitalize chỉ viết hoa cho mỗi từ đầu tiên.

Như một thuộc tính, text-transform có thể không quan trọng lắm, nhưng nếu bạn đột nhiên quyết định chuyển tất cả các phần tử h1 thành chữ hoa, thuộc tính này lại rất hữu ích. Bạn không cần phải sửa đổi nội dung của tất cả các phần tử h1 một cách riêng lẻ, chỉ cần sử dụng text-transform để hoàn thành việc thay đổi này:

h1 {text-transform: uppercase}

Sử dụng text-transform có hai lợi ích. Đầu tiên, chỉ cần viết một quy tắc đơn giản để hoàn thành việc thay đổi này mà không cần修改 phần tử h1本身. Thứ hai, nếu bạn quyết định sau này sẽ chuyển tất cả các chữ cái thành chữ hoa hoặc chữ thường ban đầu, bạn có thể dễ dàng hoàn thành việc thay đổi này.

ví dụ TIY: Điều khiển chữ cái in hoa và in thường trong văn bản

thuộc tính trang trí văn bản

tiếp theo, chúng ta sẽ thảo luận text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为。

， Đây là một thuộc tính rất thú vị, nó cung cấp rất nhiều hành vi thú vị.}}

• text-decoration có 5 giá trị:
• none
• underline
• overline
• line-through

Không ngạc nhiên, underline sẽ thêm dòng dưới cho phần tử, giống như thẻ U trong HTML. Overline hoạt động ngược lại, sẽ vẽ một dòng trên đỉnh văn bản. Giá trị line-through sẽ vẽ một đường xuyên suốt giữa văn bản, tương đương với thẻ S và strike trong HTML. Blink sẽ làm văn bản chớp chớp, tương tự như thẻ blink được Netscape hỗ trợ.blink

Giá trị none sẽ tắt tất cả các trang trí đã áp dụng cho một phần tử. Thường thì văn bản không trang trí là mặc định, nhưng không phải lúc nào cũng như vậy. Ví dụ, liên kết mặc định sẽ có dòng dưới. Nếu bạn muốn loại bỏ dòng dưới của liên kết, bạn có thể sử dụng CSS sau để làm điều này:

a {text-decoration: none;}

lưu ý:Nếu rõ ràng sử dụng quy tắc này để loại bỏ dòng dưới của liên kết, thì sự khác biệt duy nhất về thị giác giữa điểm dính và văn bản bình thường sẽ là màu sắc (tại least, mặc định như vậy, nhưng cũng không thể đảm bảo rằng màu sắc chắc chắn có sự khác biệt).

Bạn có thể kết hợp nhiều trang trí trong một quy tắc. Nếu bạn muốn tất cả các liên kết đều có cả dòng dưới và dòng trên, quy tắc sẽ như sau:

a:link a:visited {text-decoration: underline overline;}

Nhưng cần lưu ý rằng, nếu hai trang trí khác nhau đều khớp với cùng một phần tử, giá trị chiến thắng sẽ hoàn toàn thay thế giá trị khác. Hãy xem quy tắc sau:

h2.stricken {text-decoration: line-through;}
h2 {text-decoration: underline overline;}

Đối với quy tắc đã cho, tất cả các phần tử h2 có class là stricken chỉ có một trang trí xuyên suốt, không có dòng dưới và dòng trên, vì Giá trị text-decoration sẽ thay thế而不是 tích lũy lại.

Xử lý khoảng trống

Thuộc tính white-spaceSẽ ảnh hưởng đến cách người đại diện người dùng xử lý khoảng trống, dòng ngắn và ký tự tab trong tài liệu nguồn.

Bằng cách sử dụng thuộc tính này, bạn có thể ảnh hưởng đến cách trình duyệt xử lý khoảng trống giữa các ký tự và giữa các dòng văn bản. Độ lớn nào đó, việc xử lý khoảng trống mặc định của XHTML đã hoàn thành công việc xử lý khoảng trống: nó sẽ hợp nhất tất cả các khoảng trống thành một khoảng trống duy nhất. Do đó, với các thẻ sau, khi hiển thị trong trình duyệt web, các ký tự sẽ chỉ hiển thị một khoảng trống, đồng thời bỏ qua dòng ngắn trong các phần tử:

<p>This     paragraph has    many
    spaces           in it.</p>

Có thể thiết lập hành vi mặc định này một cách rõ ràng bằng cách sử dụng biểu thức sau:

p {white-space: normal;}

Các quy tắc trên cho biết trình duyệt sẽ xử lý như bình thường: bỏ qua khoảng trống dư thừa. Nếu cho giá trị này, ký tự chuyển dòng (ký tự chuyển dòng) sẽ được chuyển đổi thành khoảng trống, và chuỗi ký tự khoảng trống nhiều dòng sẽ được chuyển đổi thành một khoảng trống.

Ví dụ TIY: white-space: normal

Giá trị pre

Nhưng, nếu thiết lập white-space là pre, việc xử lý ký tự trống trong yếu tố bị ảnh hưởng bởi thuộc tính này sẽ khác nhau, hành vi của nó giống như yếu tố pre của XHTML; ký tự trống không bị bỏ qua.

Nếu giá trị của thuộc tính white-space là pre, trình duyệt sẽ chú ý đến khoảng trống bổ sung, thậm chí cả ký tự chuyển dòng. Trong trường hợp này và chỉ trong trường hợp này, bất kỳ yếu tố nào đều có thể tương đương với yếu tố pre.

Ví dụ TIY: white-space: pre

lưu ý:Sau khi kiểm tra, trình duyệt IE 7 và các phiên bản trước không hỗ trợ giá trị này, vì vậy hãy sử dụng trình duyệt không phải IE để xem ví dụ trên.

Giá trị nowrap

Giá trị ngược lại là nowrap, nó sẽ ngăn chặn văn bản trong yếu tố được chuyển dòng, trừ khi sử dụng yếu tố br. Việc sử dụng nowrap trong CSS rất giống với việc sử dụng <td nowrap> trong HTML 4 để thiết lập một ô bảng không thể chuyển dòng, nhưng giá trị white-space có thể được áp dụng cho bất kỳ yếu tố nào.

Ví dụ TIY: white-space: nowrap

Giá trị pre-wrap và pre-line

CSS2.1 đã giới thiệu giá trị pre-wrap và pre-line, điều này không có trong các phiên bản CSS trước đó. Các giá trị này có tác dụng cho phép người sáng tạo kiểm soát tốt hơn việc xử lý ký tự trống.

Nếu thiết lập white-space của yếu tố là pre-wrap, thì văn bản trong yếu tố sẽ giữ lại chuỗi ký tự trống, nhưng dòng văn bản sẽ chuyển dòng bình thường. Nếu thiết lập giá trị này, ký tự phân cách dòng của văn bản nguồn và ký tự phân cách dòng được tạo ra cũng sẽ được giữ lại. pre-line ngược lại với pre-wrap, sẽ hợp nhất chuỗi ký tự trống như văn bản bình thường, nhưng giữ lại ký tự chuyển dòng.

ví dụ TIY: white-space: pre-wrap

ví dụ TIY: white-space: pre-line

lưu ý:Chúng tôi đã kiểm tra hai ví dụ trên trong trình duyệt IE7 và FireFox2.0, nhưng kết quả là, giá trị pre-wrap và pre-line đều không được hỗ trợ tốt.

tóm tắt

bảng dưới đây tóm tắt hành vi của thuộc tính white-space:

hướng văn bản

Nếu bạn đang đọc sách tiếng Anh, bạn sẽ đọc từ trái sang phải, từ trên xuống dưới, đó là hướng chảy của tiếng Anh. Tuy nhiên, không phải tất cả ngôn ngữ đều như vậy. Chắc chắn rằng ngôn ngữ cổ Trung Quốc được đọc từ phải sang trái, cũng như tiếng Hebrew và tiếng Ả Rập, v.v. CSS2 đã giới thiệu một thuộc tính để mô tả hướng của nó.

thuộc tính directiongiả định hướng viết của văn bản block-level, hướng sắp xếp của các cột trong bảng, hướng lấp đầy khung phần tử của nội dung, và vị trí của dòng cuối cùng trong phần tử đối diện.

ghi chú:đối với các phần tử nội bộ, chỉ khi thuộc tính unicode-bidithuộc tính direction sẽ được áp dụng khi được đặt thành embed hoặc bidi-override.

thuộc tính direction có hai giá trị: ltr và rtl. Trong hầu hết các trường hợp, giá trị mặc định là ltr, hiển thị văn bản từ trái sang phải. Nếu hiển thị văn bản từ phải sang trái, nên sử dụng giá trị rtl.

thuộc tính văn bản CSS

Công cụ

Sách tham khảo CSS

Mẫu CSS

Kiểm tra CSS

Hướng dẫn CSS

Liên kết nhà tài trợ