ĐỊNH DẠNG VĂN BẢN
Văn bản này được theo kiểu với một số các thuộc tính định dạng văn bản. Nhóm này sử dụng text-align, văn bản biến đổi, và thuộc tính màu sắc. Đoạn được thụt vào, liên kết, và không gian giữa các ký tự được quy định. Đường dưới được lấy từ màu này "Hãy thử nó Yourself" liên kết.
Văn bản màu
Các
color bất động sản được sử dụng để thiết lập màu sắc của văn bản.
Với CSS, một màu sắc thường được xác định bởi:
- một tên màu - như "đỏ"
- một giá trị HEX - như "# FF0000"
- một giá trị RGB - như "rgb (255,0,0)"
Nhìn vào giá trị màu CSS cho một danh sách đầy đủ các giá trị màu sắc có thể.
Thí dụ
body {
color: blue;
}
h1 {
color: green;
}
 | Lưu ý: Đối với W3C CSS tuân thủ: Nếu bạn xác định color thuộc tính, bạn cũng phải xác định background-colortài sản. |
|---|
Tiêu Alignment
Các
text-align tài sản được dùng để thiết lập sự liên kết ngang của một văn bản.
Một văn bản có thể được bỏ hoặc chỉnh lề phải, trung tâm, hoặc biện minh.
Ví dụ sau đây cho thấy kết trung tâm, và trái và bên phải văn bản liên kết (liên kết còn lại là mặc định nếu văn bản chỉ đạo là trái sang phải, và sự liên kết phải là mặc định nếu văn bản chỉ đạo là phải sang trái):
Thí dụ
h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
Khi
text-align tài sản được thiết lập để "biện minh", mỗi dòng được kéo dài để mỗi dòng có độ rộng bằng nhau, và bên trái và bên phải lề thẳng (như trong các tạp chí và báo chí):Thí dụ
div {
text-align: justify;
}
Trang trí văn bản
Các
text-decoration tài sản được dùng để thiết lập hoặc tháo đồ trang trí từ văn bản.
Các giá trị
text-decoration: none; thường được sử dụng để loại bỏ đường gạch dưới từ các liên kết:Thí dụ
a {
text-decoration: none;
}
Các khác
text-decoration giá trị được sử dụng để trang trí văn bản:Thí dụ
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
| Lưu ý: Không nên để gạch dưới văn bản đó không phải là một liên kết, vì điều này thường gây lẫn lộn cho người đọc. |
|---|
văn bản chuyển đổi
Các
text-transform tài sản được dùng để xác định chữ hoa và chữ thường trong một văn bản.
Nó có thể được sử dụng để biến mọi thứ thành chữ hoa hoặc chữ thường, in hoa chữ cái đầu tiên của mỗi từ:
Thí dụ
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
Tiêu lõm
Các
text-indent tài sản được sử dụng để xác định sự thụt dòng của dòng đầu tiên của một văn bản:Thí dụ
p {
text-indent: 50px;
}
Letter Spacing
Các
letter-spacing tài sản được dùng để xác định khoảng cách giữa các ký tự trong một văn bản.
Ví dụ sau đây cho thấy làm thế nào để tăng hoặc giảm không gian giữa các nhân vật:
Thí dụ
h1 {
letter-spacing: 3px;
}
h2 {
letter-spacing: -3px;
}
Chiều cao giữa các dòng
Các
line-height tài sản được sử dụng để xác định không gian giữa các dòng:Thí dụ
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
text Direction
Các
direction bất động sản được sử dụng để thay đổi các văn bản chỉ đạo của một phần tử:Thí dụ
div {
direction: rtl;
}
Giãn cách từ
Các
word-spacing tài sản được sử dụng để xác định không gian giữa các từ trong một văn bản.
Ví dụ sau đây cho thấy làm thế nào để tăng hoặc giảm không gian giữa các từ:
Thí dụ
h1 {
word-spacing: 10px;
}
h2 {
word-spacing: -5px;
}
Tất cả các thuộc tính CSS Tiêu đề
| Property | Description |
|---|---|
| color | Sets the color of text |
| direction | Specifies the text direction/writing direction |
| letter-spacing | Increases or decreases the space between characters in a text |
| line-height | Sets the line height |
| text-align | Specifies the horizontal alignment of text |
| text-decoration | Specifies the decoration added to text |
| text-indent | Specifies the indentation of the first line in a text-block |
| text-shadow | Specifies the shadow effect added to text |
| text-transform | Controls the capitalization of text |
| unicode-bidi | Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document |
| vertical-align | Sets the vertical alignment of an element |
| white-space | Specifies how white-space inside an element is handled |
| word-spacing | Increases or decreases the space between words in a text |
Các thuộc tính font CSS xác định họ phông chữ, Kiểu chữ, kích thước và phong cách của một văn bản.
Sự khác biệt giữa Fonts Serif và Sans-serif
Các CSS Font Family
Trong CSS, có hai loại tên font:
- chung gia đình - một nhóm các họ phông chữ với một cái nhìn tương tự (như "Serif" hoặc "Monospace")
- phông chữ gia đình - một gia đình phông chữ cụ thể (như "Times New Roman" hoặc "Arial")
| Generic family | Font family | Description |
|---|---|---|
| Serif | Times New Roman Georgia | Serif fonts have small lines at the ends on some characters |
| Sans-serif | Arial Verdana | "Sans" means without - these fonts do not have the lines at the ends of characters |
| Monospace | Courier New Lucida Console | All monospace characters have the same width |
| Lưu ý: Trên màn hình máy tính, phông chữ sans-serif được coi là dễ đọc hơn serif. |
|---|
Họ Phông chữ
Các gia đình font chữ của một văn bản được thiết lập với các
font-family tài sản.
Các
font-family bất động sản nên giữ một số tên font chữ như là một hệ thống "dự phòng". Nếu trình duyệt không hỗ trợ font chữ đầu tiên, nó sẽ cố gắng font tiếp theo, và như vậy.
Bắt đầu với các phông chữ mà bạn muốn, và kết thúc với một gia đình chung, để cho các trình duyệt chọn một phông chữ tương tự trong gia đình chung, nếu không có phông chữ khác có sẵn.
Lưu ý: Nếu tên của một gia đình font là nhiều hơn một từ, nó phải được đặt trong ngoặc kép, như: "Times New Roman".
Hơn một gia đình phông chữ được quy định trong một danh sách bằng dấu phẩy:
Thí dụ
p {
font-family: "Times New Roman", Times, serif;
}
Đối với kết hợp chữ thường được sử dụng, nhìn vào chúng tôi Web Safe Font kết hợp .
Font Style
Các
font-style tài sản là chủ yếu được sử dụng để xác định văn bản in nghiêng.
Khách sạn này có ba giá trị:
- bình thường - Các văn bản được hiển thị bình thường
- nghiêng - Các văn bản được hiển thị trong nghiêng
- xiên - Các văn bản được "nghiêng" (xiên là rất tương tự để nghiêng, nhưng ít được hỗ trợ)
Thí dụ
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
Cỡ chữ
Các
font-size tài sản thiết lập kích thước của văn bản.
Có khả năng quản lý kích thước văn bản là rất quan trọng trong thiết kế web. Tuy nhiên, bạn không nên sử dụng điều chỉnh kích cỡ phông chữ để làm cho đoạn văn giống như tiêu đề, hoặc tiêu đề giống như đoạn văn.
Luôn luôn sử dụng các thẻ HTML thích hợp, như <h1> - <h6> cho tiêu đề và <p> cho đoạn văn.
Các giá trị font-size có thể là một kích thước tuyệt đối, hoặc người thân.
kích thước tuyệt đối:
- Thiết lập văn bản đến một kích thước quy định
- Không cho phép người dùng thay đổi kích thước văn bản trong tất cả các trình duyệt (xấu vì lý do tiếp cận)
- kích thước tuyệt đối là hữu ích khi kích thước vật lý của sản lượng được biết đến
kích thước tương đối:
- Thiết lập kích thước tương đối so với các yếu tố xung quanh
- Cho phép người dùng thay đổi kích thước văn bản trong trình duyệt
| Lưu ý: Nếu bạn không chỉ định kích thước font chữ, kích thước mặc định cho văn bản bình thường, giống như đoạn văn, là 16px (16px = 1em). |
|---|
Thiết lập cỡ chữ Với Pixels
Thiết lập kích cỡ văn bản với các điểm ảnh cung cấp cho bạn toàn quyền kiểm soát kích thước văn bản:
Thí dụ
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Mẹo: Nếu bạn sử dụng điểm ảnh, bạn vẫn có thể sử dụng công cụ Zoom để thay đổi kích cỡ toàn bộ trang.
Thiết lập cỡ chữ Với Em
Để cho phép người dùng thay đổi kích thước văn bản (trong trình đơn trình duyệt), nhiều nhà phát triển sử dụng em thay vì các điểm ảnh.
Các đơn vị em kích thước là khuyến cáo của W3C.
1em là bằng với kích thước font chữ hiện tại. Kích thước văn bản mặc định trong trình duyệt là 16px. Vì vậy, kích thước mặc định của 1em là 16px.
Các kích thước có thể được tính toán từ các điểm ảnh để em sử dụng công thức này: điểm ảnh / 16 = em
Thí dụ
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
Trong ví dụ trên, kích thước văn bản trong em là giống như ví dụ trước bằng pixel. Tuy nhiên, với kích thước em, nó có thể điều chỉnh kích thước văn bản trong tất cả các trình duyệt.
Thật không may, vẫn còn là một vấn đề với các phiên bản cũ của trình duyệt IE. Các văn bản trở nên lớn hơn nó nên khi thực hiện lớn hơn và nhỏ hơn so với nó nên khi làm nhỏ hơn.
Sử dụng một kết hợp của Phần trăm và Em
Các giải pháp mà làm việc trong tất cả các trình duyệt, là để thiết lập mặc định font-size theo phần trăm cho các <body> yếu tố:
Thí dụ
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
mã của chúng tôi hiện đang làm việc tuyệt vời! Nó cho thấy kích thước văn bản như trong tất cả các trình duyệt, và cho phép tất cả các trình duyệt để phóng to hay thay đổi kích thước văn bản!
trọng lượng Font
Các
font-weight tài sản xác định trọng lượng của một phông chữ:Thí dụ
p.normal {
font-weight: normal;
}
p.thick {
font-weight: bold;
}
Font Variant
Các
font-variant tài sản xác định có hay không một văn bản sẽ được hiển thị trong một phông chữ nhỏ mũ.
Trong một phông chữ nhỏ mũ, tất cả các chữ thường được chuyển đổi thành chữ hoa. Tuy nhiên, các chữ viết hoa được chuyển đổi sẽ xuất hiện trong một kích thước phông chữ nhỏ hơn so với các chữ cái viết hoa ban trong văn bản.
Thí dụ
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
Tất cả các thuộc tính CSS Font
| Property | Description |
|---|---|
| font | Sets all the font properties in one declaration |
| font-family | Specifies the font family for text |
| font-size | Specifies the font size of text |
| font-style | Specifies the font style for text |
| font-variant | Specifies whether or not a text should be displayed in a small-caps font |
| font-weight | Specifies the weight of a font |
0 Bình luận:
Đăng nhận xét
Khi các bạn đóng góp ý kiến nhớ chú ý ngôn từ cho phù hợp với thuần phong ,mỹ tục văn hóa nước ta. Cảm ơn!