Please enable JavaScript.
Coggle requires JavaScript to display documents.
HTML -CSS - Coggle Diagram
HTML -CSS
Thẻ meta
báo cho trình duyệt về mô tả trang, tác giả, tập ký tự, các từ khóa và nhiều thứ khác.
-
người dùng bình thường sẽ không thấy các thẻ meta, trừ khi biết cách xem mã nguồn trang
-
Box-model
-
-
content
vùng chứa nội dung của một element, với chiều rộng/cao được xác định qua thuộc tính width và height. Vùng này thường chứa text, hình ảnh, video…
-
Specificity Hierarchy
-
3: Classes, pseudo-classes, attribute selectors - Example: .test, :hover, [href]
- Inline styles - Example: <h1 style="color: pink;">
- Elements and pseudo-elements - Example: h1, ::before
đơn vị đo lường css
tương đối
-
-
%: Xác định một đơn vị đo theo phần trăm liên quan đến một giá trị khác, thường là một phần tử bao quanh.
-
-
tuyệt đối
-
-
giá trị của nó đã được xác định sẵn rồi, nó sẽ không thay đổi hay phụ thuộc vào 1 thành phần khác
-
-
-
Display
inline
-
Các inline item sẽ chỉ có thể điều chỉnh margin và padding left and right , không thể set width và height.
-
block
chiếm toàn bộ width nếu width không được set., luôn được xuống dòng
margin-colapse
khi 2 phần từ gần nhau cùng có margin nó sẽ lấy giá trị margin lơn nhất của 1 trong hai phẩn từ, chứ không phải là tổng margin của 2 phẩn tử.
-
sử dụng margin 1 chiều đó là dùng margin-top hoặc margin-bottom thì sẽ hạn chế đươc margin collapsing xảy ra,
selector
-
attribute
-
[attribute~="value"]
selects all elements with a title attribute that contains a space-separated list of words,
[attribute|="value"]
select elements with the specified attribute, whose value can be exactly the specified value, or the specified value followed by a hyphen (-).
[attribute^="value"]
select elements with the specified attribute, whose value starts with the specified value.
bat dau bang tu gi
-
-
combinator
-
-
Adjacent Sibling Selector (+)
ex: selects the first <p> element that are placed immediately after <div> elements
-
-
width: auto
-
width: Thuộc tính này làm cho phần tử có chiều rộng bằng 100% chiều rộng của phần tử mẹ (parent element).
box-sizing: border-box
khi đặt kích thước cho một phần tử, tổng kích thước sẽ bao gồm cả nội dung , padding và border
-
-
html
-
semantic
giúp trình đọc màn hình và các công cụ hỗ trợ hiểu được cấu trúc và nội dung của trang, t
ác công cụ tìm kiếm như Google có thể hiểu nội dung của bạn dễ dàng hơn khi bạn sử dụng các thẻ ngữ nghĩa, từ đó cải thiện thứ hạng trang web.
-
clip-path
-
Cắt hình ảnh, video, hoặc các phần tử HTML khác theo các hình dạng tùy chỉnh.
-