In the past, we used the HTML tag to change font family, size, and other attributes. CSS makes it much easier. Learn how to modify font family and font size using CSS in the following steps.
- Thuộc tính
0 được sử dụng trong CSS để chỉ định tên phông chữ sẽ áp dụng cho một phần tử. Bạn có thể chỉ định theo tên phông chữ [chẳng hạn như Arial, Helvetica, v.v. ] hoặc loại phông chữ [chẳng hạn như chữ thảo, giả tưởng, cách đơn, v.v. ]. Ví dụ, để chỉ định mộtp { font-family: Arial, Helvetica; }
0 của Arial, bạn sử dụng.p { font-family: Arial, Helvetica; }
p { font-family: Arial; }
- Nếu không tìm thấy phông chữ Arial trên máy tính của người dùng cuối, trình duyệt sẽ hiển thị phông chữ mặc định. Nếu bạn lo ngại rằng tên phông chữ bạn muốn sử dụng có thể không tìm thấy trên máy tính của người dùng, bạn có thể cung cấp danh sách các tùy chọn, như thế này.
Trong trường hợp này, trước tiên trình duyệt sẽ tìm kiếm Arial. Nếu nó không tìm thấy Arial, thì nó sẽ tìm Helveticap { font-family: Arial, Helvetica; }
- Để an toàn hơn, bạn có thể chỉ định một vài tùy chọn họ phông chữ cụ thể theo sau là danh mục họ phông chữ, như vậy.
Bằng cách này, nếu không tìm thấy Arial hay Helvetica, trình duyệt ít nhất cũng biết sử dụng một số phông chữ sans-serif. Đây là một số mã mẫu.p { font-family: Arial, Helvetica, sans-serif; }
Trông như thế nàyFont Family body { font-size: large; } div { margin: 10px; padding: 10px; border: 1px solid black; }
Arial, Helvetica, sans-serif'Times New Roman', Times, seriffont-family: 'Courier New', Courier, monospaceVerdanaComic Sans MSWingdings - CSS cho phép chúng tôi chỉ định chính xác mức độ lớn hay nhỏ mà chúng tôi muốn văn bản xuất hiện bằng cách sử dụng
2. Các đơn vị bạn có thể sử dụng là. Đơn vịMô tảpxPixelsptPointsinInchescmCentimetersmmMillimeterspcPicasemEmsexExs%PercentageremRemsp { font-family: Arial, Helvetica; }
- Ngoài ra, kích thước phông chữ có thể được xác định bằng các thuật ngữ tương đối sau
- xx-lớn
- x-lớn
- lớn
- Trung bình
- bé nhỏ
- x nhỏ
- xx-nhỏ
- nhỏ hơn
- lớn hơn
Đoạn mã trên sẽ xuất ra như sauFont Sizes
This text is smaller and even smaller and even smaller .This text is larger and even larger and even larger .
Hầu hết các chuyên gia đồng ý rằng kích thước phông chữ nên được xác định theo đơn vị tương đối [e. g. , em, rem, %, v.v. ] hoặc theo thuật ngữ [e. g. , lớn, nhỏ, v.v. ]. Điều này là do kích thước phông chữ tuyệt đối có thể khiến những người gặp khó khăn trong việc xem các trang không thể truy cập được. Trong hầu hết các trình duyệt, người dùng có thể thay đổi cả "thu phóng" của trang và riêng kích thước phông chữ mặc định. Mặc dù "thu phóng" sẽ tăng kích thước của tất cả các thành phần [bao gồm phông chữ] trên trang, nhưng việc thay đổi kích thước phông chữ mặc định của trình duyệt sẽ không có bất kỳ ảnh hưởng nào đối với các phông chữ có kích thước trong CSS được chỉ định bằng đơn vị tuyệt đối, thay vì tương đối,
Thật không may, có một nhược điểm khi sử dụng các cỡ chữ tương đối xác định, đó là bạn có ít quyền kiểm soát hơn đối với thiết kế. Điều này có thể khiến văn bản bị ngắt dòng khi bạn không muốn hoặc các ô của bảng mở rộng ra ngoài những gì bạn dự định
Phần này của đặc tả thảo luận về một số phần tử và thuộc tính HTML có thể được sử dụng để định dạng trực quan các phần tử. Nhiều người trong số họ không được chấp nhận
15. 1 định dạng
định nghĩa thuộc tính
bgcolor = color [CI]Không dùng nữa. Thuộc tính này đặt màu nền cho nội dung tài liệu hoặc các ô của bảngThuộc tính này đặt màu nền của canvas cho nội dung tài liệu [phần tử BODY] hoặc cho các bảng [phần tử TABLE, TR, TH và TD]. Các thuộc tính bổ sung để chỉ định màu văn bản có thể được sử dụng với phần tử BODY
Thuộc tính này không được dùng nữa để thay thế cho biểu định kiểu để chỉ định thông tin màu nền
Có thể căn chỉnh các thành phần khối [bảng, hình ảnh, đối tượng, đoạn văn, v.v. ] trên canvas với thuộc tính align. Mặc dù thuộc tính này có thể được đặt cho nhiều phần tử HTML, phạm vi giá trị có thể có của nó đôi khi khác nhau giữa các phần tử. Ở đây chúng ta chỉ bàn về ý nghĩa của thuộc tính align cho văn bản
định nghĩa thuộc tính
căn = trái. trung tâm. đúng. biện minh [CI]Không dùng nữa. Thuộc tính này chỉ định căn chỉnh ngang của phần tử của nó đối với bối cảnh xung quanh. Những giá trị khả thi- trái. các dòng văn bản được hiển thị phẳng bên trái
- trung tâm. các dòng văn bản được căn giữa
- đúng. các dòng văn bản được hiển thị phẳng bên phải
- biện minh. dòng văn bản được căn đều cho cả hai lề
Mặc định phụ thuộc vào hướng văn bản cơ sở. Đối với văn bản từ trái sang phải, mặc định là align=left, trong khi đối với văn bản từ phải sang trái, mặc định là align=right
Ví dụ, sử dụng CSS, bạn có thể đạt được hiệu ứng tương tự như sau
________số 8Lưu ý rằng điều này sẽ căn giữa tất cả các khai báo H1. Bạn có thể giảm phạm vi của kiểu bằng cách đặt thuộc tính lớp trên phần tử
mà, với CSS, sẽ là
p { font-family: Arial, Helvetica; }
0Với CSS, thuộc tính text-align được kế thừa từ phần tử cha, do đó bạn có thể sử dụng
p { font-family: Arial, Helvetica; }
1Căn giữa toàn bộ tài liệu bằng CSS
p { font-family: Arial, Helvetica; }
2Phần tử TRUNG TÂM hoàn toàn tương đương với việc chỉ định phần tử DIV với thuộc tính căn chỉnh được đặt thành "trung tâm". Phần tử TRUNG TÂM không được dùng nữa
Hình ảnh và đối tượng có thể xuất hiện trực tiếp "trong dòng" hoặc có thể nổi ở một bên của trang, tạm thời thay đổi lề của văn bản có thể chảy ở hai bên của đối tượng
Làm nổi một đối tượng
Thuộc tính căn chỉnh cho các đối tượng, hình ảnh, bảng, khung, v.v. , làm cho đối tượng nổi sang lề trái hoặc phải. Các đối tượng nổi thường bắt đầu một dòng mới. Thuộc tính này nhận các giá trị sau
- trái. Làm nổi đối tượng đến lề trái hiện tại. Văn bản tiếp theo chạy dọc theo phía bên phải của hình ảnh
- đúng. Làm nổi đối tượng đến lề phải hiện tại. Văn bản tiếp theo chạy dọc theo phía bên trái của hình ảnh
Một số thuộc tính căn chỉnh cũng cho phép giá trị "trung tâm", giá trị này không làm nổi mà căn giữa đối tượng trong các lề hiện tại. Tuy nhiên, đối với P và DIV, giá trị "trung tâm" làm cho nội dung của phần tử được căn giữa
Văn bản nổi xung quanh một đối tượng
Một thuộc tính khác, được xác định cho phần tử BR, kiểm soát luồng văn bản xung quanh các đối tượng nổi
định nghĩa thuộc tính
rõ ràng = không có. trái. đúng. tất cả [CI]Không dùng nữa. Chỉ định nơi dòng tiếp theo sẽ xuất hiện trong trình duyệt trực quan sau khi ngắt dòng do phần tử này gây ra. Thuộc tính này tính đến các đối tượng nổi [hình ảnh, bảng, v.v. ]. Những giá trị khả thi- không ai. Dòng tiếp theo sẽ bắt đầu bình thường. Đây là giá trị mặc định
- trái. Dòng tiếp theo sẽ bắt đầu ở dòng gần nhất bên dưới bất kỳ đối tượng nổi nào ở lề bên trái
- đúng. Dòng tiếp theo sẽ bắt đầu ở dòng gần nhất bên dưới bất kỳ đối tượng nổi nào ở lề bên phải
- tất cả các. Dòng tiếp theo sẽ bắt đầu ở dòng gần nhất bên dưới bất kỳ đối tượng nổi nào ở hai bên lề
Xem xét tình huống trực quan sau đây, trong đó văn bản chảy ở bên phải của hình ảnh cho đến khi một dòng bị ngắt bởi BR
p { font-family: Arial, Helvetica; }
3Nếu thuộc tính rõ ràng được đặt thành không, dòng sau BR sẽ bắt đầu ngay bên dưới nó ở lề phải của hình ảnh
p { font-family: Arial, Helvetica; }
4Sử dụng biểu định kiểu, bạn có thể chỉ định rằng tất cả các ngắt dòng sẽ hoạt động theo cách này đối với các đối tượng [hình ảnh, bảng, v.v. ] trôi nổi so với lề trái. Với CSS, bạn có thể đạt được điều này như sau
p { font-family: Arial, Helvetica; }
5Để chỉ định hành vi này cho một phiên bản cụ thể của phần tử BR, bạn có thể kết hợp thông tin kiểu và thuộc tính id
p { font-family: Arial, Helvetica; }
6Các phần tử HTML sau chỉ định thông tin phông chữ. Mặc dù không phải tất cả chúng đều bị phản đối, nhưng việc sử dụng chúng không được khuyến khích để ủng hộ các biểu định kiểu
thẻ bắt đầu. bắt buộc, Thẻ kết thúc. cần thiết
Các thuộc tính được xác định ở nơi khác
Kết xuất các phần tử kiểu phông chữ phụ thuộc vào tác nhân người dùng. Sau đây chỉ là một mô tả thông tin
TT. Hiển thị dưới dạng văn bản điện báo hoặc văn bản đơn cách. I. Hiển thị dưới dạng kiểu văn bản in nghiêng. B. Hiển thị dưới dạng kiểu văn bản in đậm. TO LỚN. Hiển thị văn bản ở phông chữ "lớn". BÉ NHỎ. Hiển thị văn bản bằng phông chữ "nhỏ". ĐÁNH và S. không dùng nữa. Kết xuất văn bản kiểu gạch ngang. U. không dùng nữa. Hiển thị văn bản được gạch chânCâu sau thể hiện mấy kiểu văn bản
p { font-family: Arial, Helvetica; }
7Những từ này có thể được kết xuất như sau
Có thể đạt được nhiều hiệu ứng phông chữ phong phú hơn bằng cách sử dụng biểu định kiểu. Để chỉ định văn bản in nghiêng, màu xanh lam trong đoạn văn bằng CSS
How to Carve Wood How to Carve Wood0
Các phần tử kiểu phông chữ phải được lồng đúng cách. Việc hiển thị các phần tử kiểu phông chữ lồng nhau phụ thuộc vào tác nhân người dùng
FONT và BASEFONT không được dùng nữa
Xem DTD chuyển tiếp để biết định nghĩa chính thức
định nghĩa thuộc tính
size = cdata [CN]Không dùng nữa. Thuộc tính này đặt kích thước của phông chữ. Những giá trị khả thi- Một số nguyên từ 1 đến 7. Điều này đặt phông chữ thành một số kích thước cố định, hiển thị phụ thuộc vào tác nhân người dùng. Không phải tất cả các tác nhân người dùng đều có thể hiển thị tất cả bảy kích thước
- Kích thước phông chữ tăng tương đối. Giá trị "+1" có nghĩa là lớn hơn một cỡ. Giá trị "-3" có nghĩa là ba kích thước nhỏ hơn. Tất cả các kích thước thuộc về thang điểm từ 1 đến 7
Các thuộc tính được xác định ở nơi khác
Phần tử FONT thay đổi kích thước phông chữ và màu sắc cho văn bản trong nội dung của nó
Phần tử BASEFONT đặt kích thước phông chữ cơ sở [sử dụng thuộc tính kích thước]. Những thay đổi về kích thước phông chữ đạt được với FONT có liên quan đến kích thước phông chữ cơ sở được đặt bởi BASEFONT. Nếu BASEFONT không được sử dụng, cỡ chữ cơ sở mặc định là 3
Kích thước phông chữ cơ sở không áp dụng cho các tiêu đề, trừ khi chúng được sửa đổi bằng phần tử FONT với thay đổi kích thước phông chữ tương đối
15. 3 quy tắc. yếu tố nhân sự
thẻ bắt đầu. bắt buộc, Thẻ kết thúc. cấm
định nghĩa thuộc tính
căn = trái. trung tâm. phải [CI]Không dùng nữa. Thuộc tính này chỉ định căn chỉnh theo chiều ngang của quy tắc đối với bối cảnh xung quanh. Những giá trị khả thi- trái. quy tắc được hiển thị tuôn ra bên trái
- trung tâm. quy tắc là trung tâm
- đúng. quy tắc được hiển thị tuôn ra ngay
Mặc định là căn chỉnh = trung tâm
noshade [CI]Không dùng nữa. Khi được đặt, thuộc tính boolean này yêu cầu tác nhân người dùng hiển thị quy tắc ở dạng đồng màu thay vì ở dạng "rãnh" hai màu truyền thống. kích thước = pixel [CI]Không dùng nữa. Thuộc tính này chỉ định chiều cao của quy tắc. Giá trị mặc định cho thuộc tính này phụ thuộc vào tác nhân người dùng. chiều rộng = chiều dài [CI]Không dùng nữa. Thuộc tính này chỉ định chiều rộng của quy tắc. Chiều rộng mặc định là 100%, tôi. e. , quy tắc mở rộng trên toàn bộ canvasCác thuộc tính được xác định ở nơi khác
Phần tử nhân sự làm cho một quy tắc ngang được hiển thị bởi các tác nhân người dùng trực quan
Lượng không gian dọc được chèn giữa một quy tắc và nội dung bao quanh nó phụ thuộc vào tác nhân người dùng