Mô hình cái hộp (box model)
Mô hình cái hộp là cách mà trình duyệt đã dùng để hiển thị nội dung, nó dùng hình chữ nhật để chứa phần tử HTML, mỗi phần tử HTML được chứa trong một hộp riêng, có bao nhiêu phần tử HTML thì có bấy nhiêu cái hộp (không phân biệt là phần tử kiểu block hay inline).
Với mỗi cái hộp sẽ có các thuộc tính đi kèm, ví dụ: đường biên (border), căn lề ngoài (margin), căn lề trong (padding), nền (background), vị trí (position); lập trình viên sẽ học cách để thiết lập giá trị hợp lý cho các thuộc tính này.
Thêm đoạn mã CSS sau vào phần tử style của tập tin twenties.html để xem những chiếc hộp.
h1 { border: 1px solid blue; }
h2 { border: 1px solid blue; }
p { border: 1px solid blue; }
em { border: 1px solid blue; }
img { border: 1px solid blue; }
Mặc định, các hộp của phần tử kiểu block có chiều rộng chiếm hết màn hình, trong khi các hộp của phần tử kiểu inline có kích thước vừa đủ để chứa nội dung bên trong.
Gộp các bộ chọn (grouped selectors)
Trong trường hợp nhiều luật CSS có phần khai báo giống nhau thì nên gộp các bộ chọn lại để giảm kích thước mã nguồn, mỗi bộ chọn ngăn cách nhau bằng dấu phẩy (,).
Ví dụ, với đoạn mã CSS để xem những chiếc hộp phía trên có thể viết lại là,
h1, h2, p, em, img { border: 1px solid blue; }
2.1.4 Câu hỏi & bài tập
1. Chỉ ra các thành phần của một luật CSS sau:
blockquote { line-height: 1.5; }
– selector:
– property:
– value:
– declaration:
2. Khi áp dụng các luật CSS sau, đoạn văn bản có chữ màu gì? Tại sao?
<style>
p { color: purple; }
p { color: green; }
p { color: gray; }
</style>
3. Viết lại các đoạn mã CSS sau cho đúng, vì một số đoạn có lỗi, và cách viết chưa tối ưu.
a.
p {font-family: sans-serif;}
p {font-size: 1em;}
p {line-height: 1.2em;}
b.
blockquote {
font-size: 1em
line-height: 150%
color: gray }
c.
body
{background-color: black;}
{color: #666;}
{margin-left: 12em;}
{margin-right: 12em;}
d.
p {color: white;}
blockquote {color: white;}
li {color: white;}
e.
<strong style="red">Act now!</strong>
2.2 Định dạng văn bản
Sau khi đã biết dùng các phần tử HTML để tạo cấu trúc và chứa nội dung văn bản, phần này sẽ học cách để trình bày, định dạng và trang trí văn bản.
2.2.1 Phông chữ
Trong CSS để định dạng phông chữ (font) sử dụng một số thuộc tính phổ biến sau:
– font-family
– font-size
– font-style
– font-weigth
– font-variant
– font
Chọn kiểu chữ (typeface, font family)
Để chọn kiểu chữ (hay phông chữ), sử dụng thuộc tính font-family, với một số đặc tính sau:
– Giá trị (values): tên của phông chữ hoặc họ phông, ngăn cách nhau bằng dấu phẩy | inherit (kế thừa). Đây là một dãy gồm nhiều phông, trình duyệt sẽ tìm các phông này để định dạng cho nội dung, ưu tiên từ trái sang phải, nếu không có, nó sẽ sử dụng phông mặc định.
– Phông mặc định (default): tùy theo trình duyệt
– Áp dụng: cho mọi phần tử (vì có một số thuộc tính chỉ áp dụng cho một số phần tử HTML cụ thể)
– Kế thừa: có (có kế thừa cho các phần tử chứa trong nó)
Ví dụ,
body { font-family: Arial; }
tt { font-family: Courier, monospace; }
p { font-family: “Duru Sans”, Verdana, sans-serif; }
Lưu ý,
– Tên phông chữ phải viết hoa kí tự đầu tiên, ví dụ Arial; họ phông viết thường, ví dụ sans-serif
– Nếu phần giá trị gồm nhiều tên phông, họ phông, thì sử dụng dấu phẩy (,) để ngăn cách
– Tên phông có khoảng trắng thì phải bao lại bằng dấu nháy kép (“”), ví dụ “Duru Sans”
Thông thường, số lượng phông có thể sử dụng là hữu hạn, nó tùy thuộc vào số phông đã được cài đặt trên đĩa cứng của người dùng. Tuy nhiên, lập trình viên cũng có thể sử dụng các phông không có trên đĩa cứng của người dùng bằng việc sử dụng luật @font-face của CSS (tìm hiểu thêm về web font).
Để sử dụng web font:
– Lấy web font trực tiếp trên mạng
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
– Sử dụng font cho phần tử HTML
body {
font-family: "Open Sans", sans-serif;
}
Hoặc,
– Tải web font trên mạng về, để sẵn trong website
– Sử dụng luật @font-face để khai báo và chỉ ra đường dẫn của web font
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'),
url('../vendor/fonts/open-sans-v15-vietnamese_latin/open-sans-v15-vietnamese_latin-300.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
url('../vendor/fonts/open-sans-v15-vietnamese_latin/open-sans-v15-vietnamese_latin-300.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
– Sử dụng font cho phần tử HTML
body {
font-family: "Open Sans", sans-serif;
}
Các họ phông phổ biến
Có năm họ phông phổ biến, gồm: serif, sans-serif, monospace, cursive và fantasy. Mỗi họ phông gồm nhiều phông khác khau, khi biên dịch trình duyệt sẽ chọn một cái trong họ phông để áp dụng.
Họ serif
Đây là kiểu chữ có chân, nghĩa là phần đầu hoặc phần cuối trong nét chính của chữ sẽ được vẽ thêm nét nhỏ.
Ví dụ các phông thuộc họ này: Times, Times New Roman, Georgia
Xem hình minh họa các họ phông,
Họ sans-serif
Ngược lại với họ serif, đây là kiểu chữ gồm các nét thẳng, không có chân, sans là tiếng latinh có nghĩa là “không” (without).
Ví dụ các phông thuộc họ này: Arial, Arial Black, Verdana, Trebuchet MS, Helvetica, Geneva
Họ monospace
Họ monospace (cũng được gọi là constant width) là kiểu phông mà các chữ đều có độ rộng bằng nhau, cho dù là chữ “w” hay chữ “i” thì cũng chiếm độ rộng giống nhau. Lưu ý: các họ phông khác sẽ có độ rộng của các chữ khác nhau (proportional font).
Ví dụ các phông thuộc họ này: Courier, Courier New, and Andale Mono
Họ cursive
Họ cursive gồm các phông có kiểu chữ giống chữ viết tay.
Ví dụ các phông thuộc họ này: Apple Chancery, Zapf-Chancery, and Comic Sans
Họ fantasy
Kiểu chữ này chủ yếu dùng trong thiết kế trang trí, hoặc dùng cho tiêu đề, rất ít khi dùng để định dạng nội dung văn bản, vì kiểu chữ này khó đọc.
Ví dụ các phông thuộc họ này: Impact, Western, or other decorative font
.jpg)
.jpg)
){kind=link}
0 Nhận xét