---------
Phần 15.
Kiểm tra kiến thức về HTML và CSS
Trước khi ‘tạm’ kết thúc phần tìm hiểu cơ bản về HTML và
CSS, sẽ tự kiểm tra lại khả năng đọc hiểu tiếng Anh chuyên ngành, cùng với kiến
thức cơ bản về HTML và CSS.
Vào trang codecademy.com
Tạo tài khoản và đăng nhập vào hệ thống.
Chọn khóa học là HTML & CSS.
Làm lần lượt các bài học.
Thực ra nói là kiểm tra vậy thôi, chứ kiểm tra là chuyện
nhỏ, mà nên xem đây là một dịp để làm việc với tiếng Anh, với HTML và với CSS.
Làm nhiều lần sẽ thấy kiến thức, kĩ năng nó không quá khó, rèn luyện nhiều thì
sẽ được. Chứ học chỉ để kiểm tra, để thi thôi, cộng với áp lực này nọ thì chán
chết.
Kiên trì làm theo từng bước, và làm các bài kiểm tra.
Một số kiến thức học thêm được:
- Có thể bổ sung thêm chức năng cho một thẻ bằng cách thêm
thuộc tính (attribute) vào thẻ mở của nó.
- Trong HTML5, để tô đậm chữ, sử dụng thẻ <strong>
thay cho thẻ <b> ở các phiên bản HTML trước đây; để cho chữ nghiêng, sử
dụng thẻ <em> (emphasis).
- Trong HTML, bảng (table) bao gồm các hàng (row) và cột
(column), tuy nhiên, khái niệm cột sẽ được thay thế bằng khái niệm “ô dữ liệu”
(data cell), dùng thẻ <td>, viết tắt của table data.
- <tbody> chứa phần dữ liệu của bảng
Cấu trúc của bảng thường có dạng sau:
<table>
<!--
hàng tiêu đề cho các cột -->
<thead>
<tr>
<th></th>
</tr>
</thead>
<!--
phần chứa các hàng dữ liệu -->
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
- Thẻ <div> viết tắt của
division, rất quan trọng trong việc phân vùng giao diện web, để CSS.
- Dùng thẻ <a> bọc thẻ
<div> để tạo các link.
- Thẻ <span> viết tắt của
spantastic (chưa biết nghĩa của từ này), thẻ <div> dùng để CSS các vùng
lớn (block, line), còn <span> dùng để CSS các vùng nhỏ hơn (inline), ví
dụ các chữ, các phần trong văn bản (text).
- Thẻ được viết theo cặp, ví dụ
<p></p>, vì giữa chúng có chứa nội dung; vậy những thẻ mà giữa
chúng không có nội dung thì viết rút gọn lại thành một thẻ thôi (vừa mở, vừa
đóng), ví dụ <img />, <link />. Tuy nhiên, thấy khi dùng Emmet để
tự điền các thẻ trong Sublime Text, thì thấy nó chỉ có <img> mà không
phải là <img />. Vậy, nên dùng cách nào?
- Đơn vị đo px là viết tắt của pixel,
1px là một điểm ảnh trên màn hình máy tính (và một điểm ảnh trên smartphone
chưa chắc đã bằng một điểm ảnh trên máy tính), vì vậy, nếu để kích thước là px
thì không chắc nó sẽ được hiển thị giống nhau ở các thiết bị khác nhau.
- Đơn vị đo em là một đơn vị đo tương đối, 1em bằng kích thước của font mặc
định trên thiết bị người dùng đang sử dụng.
- Tạo một button bằng thẻ div.
- Parent: cha; children: con;
sibling: anh em.
- Trong CSS, khai báo là: body > p: tác động tới các thẻ <p>
là con trực tiếp của <body>
- Selector nào có giá trị cụ thể hơn
sẽ ưu tiên hơn, ví dụ ul li p {} sẽ
có độ ưu tiên cao hơn p {}
-
ID và class có độ ưu tiên cao hơn các selector là thẻ HTML lồng nhau (kế
thừa).
- Pseudo: nth-child (n); n chính là
con thứ n của nút cha, không phân biệt kiểu của các nút con.
- Thuộc tính clear: left, right hoặc both để ngắt ảnh hưởng của chế độ float.
- Position mặc định là static.
+ Static: If you don't specify an element's positioning type, it
defaults to static. This just means "where the element would normally
go." If you don't tell an element how to position itself, it just plunks
itself down in the document.
+ Absolute: When an element is set to position:absolute, it's then positioned in relation to the first
parent element it has that doesn't have position:static. If there's no such element, the element with position: absolute gets positioned
relative to <html>.
+ Relative: Relative positioning is more straightforward: it tells
the element to move relative to where it would have landed if it just had the
default static positioning. If you give an element relative positioning
and tell it to have a margin-top of 10px, it doesn't move down
ten pixels from any particular thing - it moves down ten pixels from where
it otherwise would have been.
+ Fixed: fixed positioning anchors an element to the browser window
- you can think of it as gluing the element to the screen. If you scroll up and
down, the fixed element stays put even as other elements scroll past.
Phần nói về position bằng tiếng Anh
khó hiểu quá.
Đọc thêm bằng tiếng Việt vậy: https://hoclamweb888.wordpress.com/2013/02/21/phan-biet-cac-loai-position-trong-css/
Link tới một ví trí cụ thể trong cùng
một trang, ví dụ:
<p id="top"> This is the top of the page!
</p>
<h1 id="bottom">This is the bottom! </h1>
<ol>
<li><a
href="#top">Top</a></li>
<li><a
href="#bottom">Bottom</a></li>
</ol>
Việc link tới các phần tử trong cùng
một trang hoặc tới các trang khác trong cùng một site được gọi là chuyển hướng,
liên kết, hay điều hướng (navigation). HTML sử dụng thẻ <nav> để bọc lại
các link này nhằm tạo ra một thanh điều hướng chung.
Trong CSS, ID có độ ưu tiên cao hơn
tag và class.
Specificity (tính cụ thể, tính xác
định): ID có tính xác định cao nhất, tiếp theo là class, sau đó là tag.
Selector nào có tính xác định cao thì có độ ưu tiên cao, nghĩa là được chọn để
áp dụng. Việc thêm một tag, ID hay một class vào selector, sẽ làm tăng tính xác
định của một selector.
!important có tính xác định cao hơn
ID. Nên hạn chế sử dụng “!important”, vì rất khó để ghi đè (override) các nội
dung của nó.
Khi thực hiện CSS, nên ưu tiên dùng
selector là tag trước, sau đó đến class và cuối cùng là ID, nghĩa là hạn chế sử
dụng ID.
Lưu ý về font:
- Đảm bảo font thiết lập trong CSS
phải được cài đặt tại máy người dùng
- Font mặc định cho mọi phần tử của
HTML là Times New Roman
- Một trang web chỉ nên sử dụng không
quá 3 loại font
- Nếu tên font nhiều hơn một từ, nên
bao lại bằng dấu nháy kép (ví dụ “Courier New”)
Box model:
The box model comprises the set of properties which define parts
of an element that take up space on a web page. The model includes the content
area's size (width and height) and the
element's padding, border, and margin. The properties include:
1. Width and height: specifies the width and height of the content area.
2. Padding: specifies the amount of space between the content area
and the border.
3. Border: specifies the thickness and style of the border
surrounding the content area and padding.
4. Margin: specifies the amount of space between the border and
the outside edge of the element.
Để căn giữa một element, sử dụng [margin:
0 auto;], lưu ý cần phải thiết lập độ rộng của element thì mới có kết quả, vì
nếu không, độ rộng của element sẽ bằng chính độ rộng của phần tử chứa nó.
Khoảng cách theo chiều dọc (vertical)
giữa hai element chính là margin có giá trị lớn hơn của hai element đó, tuy
nhiên, khoảng cách theo chiều ngang (horizontal) giữa hai element chính là tổng
margin (margin-right của element này và margin-left của element cạnh nó).
Sự khác nhau giữa [display: none] và
[visibility: hidden]: What's the difference between display: none and visibility:
hidden? An element with display: none will be completely
removed from the web page. An element with visibility: hidden,
however, will not be visible on the web page, but the space reserved for it
will.
[box-sizing: border-box]: tính cả
border và padding vào height và width của một box.
Các thuộc tính ảnh hưởng đến việc
hiển thị của các phần tử HTML:
- position
- display
- z-index
- float
- clear
Bốn giá trị của position: static,
relative, fixed, absolute. Relative là tương đối so với static của chính nó.
Element nào được thiết lập là absolute, các element còn lại sẽ coi nó như không
tồn tại trên trang web, absolute là tuyệt đối theo trang. Fixed là cố định theo
màn hình.
z-index: thiết lập chế độ ưu tiên
hiển thị, giá trị càng lớn độ ưu tiên càng cao. z-index không làm việc ở chế độ
position là static.
Inline: kích thước của phần tử vừa đủ
để bao lại phần nội dung. Block chiếm nguyên chiều rộng, inline-block: kết hợp
của inline và block.
Float: chỉ làm việc ở position static
và relative.
Một số chủ đề liên quan đến CSS:
- Selectors & visual rules
- Box model
- Display & positioning
- Color
- Typography
FINISHED!!! Kiên trì làm, cuối cùng cũng xong, tự thưởng cho bản thân một huy chương :D.
-----------
Cập nhật [1/9/2020]
-----------