Lý thuyết HTML, CSS
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (152.64 KB, 16 trang )
HTML
Phần <Head> chứa title của trang web
Phần <Body> chứa tất cả của trang web
Các loại thẻ
-
h1,h2,h3,h4,h5,h6
p : là văn bản
b : in đậm
i : In nghiêng (italic)
u : gạch chân
a : có thể click ( <a href = “”>)
br : xuống dòng (break)
hr : gạch ngang trang web
strong : in đậm
del : gạch ngang text
img : ảnh (<img src = “” width = “”>)
ul : tạo 1 list không sắp xếp (unorder list) – mặc định chấm trịn
li : thơng tin của từng phân từ trong list (list)
ol : tạo 1 list có thứ tự (order list)
table : tạo 1 bảng
tr : các hàng
td: các cột
th: các cột tiêu đề sẽ được in đậm
div : là block-level trống
span : là inline trống
label: dùng để định nghĩa nhãn cho phần tử <input>
Thuộc tính của html: quy định mơ tả của thẻ
-
href = “ ” : chèn link trang web
src = “ “ : nguồn
width = “ “ : chiều rộng
height = “ “ : chiều cao
style = “ “ :
alt = “” : khi khơng tìm thấy ảnh thì hiện thị text này
title =”” : thông tin khi di con trỏ chuột
cellpadding = “” : tạo khoảng cách giữa các nội dung
cellspacing = “” : tạo khoảng cách giữa các khung
Block-level elements:
- ln bắt đầu tại 1 dịng mới
- ln chiếm tồn bộ chiều rộng có sẵn
- có margin top và margin bottom
Inline elements:
- Khơng bắt đầu trên 1 dịng mới
- Chỉ chiếm chiều rộng đủ mức cần thiết
CSS
Selector:
- Lựa chọn theo tên thẻ: Name
- Lựa chọn theo Id (unique):
o Id của mỗi phần tử trong 1 trang là duy nhất id selector chỉ chọn 1
phần tử duy nhất
o Sử dụng dấu #id để truy xuất theo id
- Lựa chọn theo class:
o Sử dụng cho nhiều phần tử cùng bản chất
o Sử dụng dấu .class để truy xuất
o Universal selector * để truy cập tất cả phần tử trong trang
o Grouping selector để truy cập tất cả phần tử có chung bản chất
(h1,h2,p,….)
- CSS Combinators: là mối quan hệ giữa các selector
o Descendant selector (quan hệ cha - con): biểu diễn bằng space
o Child selector: ( > ) chọn tất cả thẻ con trực tiếp của nó
o Adjacent sibling selector: ( + ) chọn 1 anh chị em ruột nằm liền kề
sau selector
o General sibling selector: ( ~ ) chọn tất cả anh chị em nằm sau
ĐỘ ưu tiên: priority
1.
2.
3.
4.
5.
6.
7.
Internal, external: ai được gọi trước thì trước, ai gọi sau thì sau
Inline – 1000:
#id – 100
.class – 10
Tag – 1 : gọi h1,h2,…..
Equal specificity: selector giống nhau – gọi lặp lại sau thì đc ưu tiên
Universal selector and inherited:
a. phổ cập chung – * chọn tất : 0 điểm
b. thừa hưởng – gọi tên thẻ : 0 điểm
Thang điểm độ ưu tiên
!important: độ ưu tiên cao nhất
Variable (biến): cần var() gọi ra
1. Dùng -2. Dùng :root{} là biến global
3. Dùng trong 1 thẻ là biến local
CSS units: đơn vị
1. Absolute units (tuyệt đối): không thay đổi đơn vị
2. Relative units (tương đối): không cố định, thay đổi theo giá trị phụ thuộc
- %: phụ thuộc vào thẻ chứa nó
- Rem: phụ thuộc vào thẻ html
- Em: phụ thuộc vào thẻ gần nhất chứa nó
- Vw: viewport width: độ rộng trình duyệt
- Vh: viewport heght: độ dài trình duyệt
Insert CSS:
- Inline CSS: chèn trực tiếp
- Internal CSS: chèn trong html
- External CSS: định nghĩa riêng 1 file CSS
Color: dùng đổi màu text
- RGB: màu cơ bản
- HEX: màu cơ số 16 #0000
- HSL:
Background: màu cho background
CSS padding (đệm): khoảng cách từ border tới nội dung (content) của phần từ đó
Border : là đường viên bao quanh phần tử
(viết liền mạch có thể hiểu theo các thuộc tính)
-
border-width: độ rộng
border-style: kiểu dạng
border-color: màu của border
border-radius: bo tròn các cạnh
CSS margin: khoảng cách từ border đến phần từ khác (top right left bottom)
Box-sizing: tự động tính tốn để tổng kích thước nằm trong khai báo, nhưng nếu
quá lớn sẽ bị out
- content-box: không set
- unset: hủy đi
- border-box: base cơ bản
background-image: dùng để thiết lập hình nền cho phần tử
- url(): liên kết ảnh, có thể thêm nhiều hình ảnh cách nhau bằng dấu ‘,’
- background-size: kích thước ảnh
o contain: lấy chiều dài nhất có thể, khơng bị hỏng – hở khoảng trắng
o cover: lấy chiều dài nhất, chấp nhận bị hỏng – không hở
- background-repeat: set lặp lại
- linear-gradient(): tạo ra 1 dải màu chuyển đều đặn: hướng, màu đầu, màu
cuối (có thể dùng rgba)
- background-origin: hình ảnh đổ từ các giá trị vào
o content-box
o padding-box
o border-box
- background-position: vị trí
- “shorthand” : viết gộp (thuộc tính background-size cần dấu /)
CSS text:
text color: màu của text
text Alignment: vị trí của text (left, center, right)
text decoration (overline, line-through, underline, none) – gạch chân, …
text transform (uppercase, lowercase, capitalize) – in hoa, in thường, hoa
chữ đầu
- text Spacing:
o text indent: lùi đầu dịng
o letter-spacing: khoảng cách giữa 2 kí tự
o line-height: khoảng cách giữa các dòng
-
o word—spacing: khoảng cách giữa 2 từ
o white-space: khi tràn màn hình xuống dịng hay khơng
- text shadow
CSS font: lệnh font-family:
- serif
- sans-serif
CSS Icons:
- fontawesome: <script src = “”>
CSS Display:
-
Inline: chỉ chiếm đủ content (width)
Block: chiếm toàn bộ chiều rộng có thể
None: khơng hiển thị ra
Visibility: có hiện hay là không ?
Flex:
Grid:
? display: none và visibility: hidden khác nhau ở chỗ nào : visibility không
hiển thị ra nhưng vẫn chiếm diện tích trong trang web cịn display là mất hồn
tồn
CSS max width: thay đổi theo tỉ lệ màn hình
CSS Position: vị trí có thể đề lên element khác
- Static (mặc định)
- Fixed: ln nằm ở vị trí cố định dùng cuộn hay khơng
o Phụ thuộc vào cửa sổ trình duyệt
- Relative: dịch chuyển tương đối so với vị trí ban đầu của nó:
o dựa vào chính nó
- Absolute: dịch chuyển tương đối so với thẻ relative gần nhất chứa nó:
o phụ thuộc vào thẻ cha gần nhất.
- Sticky: dịch chuyển khi chạm khoảng quy định (không dùng nhiều)
CSS Float:
- Left: chuyển trôi sang bên trái và chiếm phần bên trái
- Right: chuyển trôi sang bên phải và chiếm phần bên phải
- Clear: (both, left, right) khơng dùng float thì dùng clear
CSS Align:
- Center align element: căn phần tử ra giữa – ( margin: auto; )
- Center align text: căn text ra giữa – ( text-align: center; )
- Center align image:
Hàm trong CSS:
Var():
Linear-gradient():
Rgba():
Rgb(): lấy màu theo mã hex
Calc(): tính tốn (thêm các phép toán ở trong), cả gtri tuyệt đối và tương
đối
- Attr(): atribute, thay thế giá trị
-
Pseudo-classes: (lớp giả)
-
:root (tham chiếu tới phần tử gốc = html)
:hover (di chuột vào đối tượng)
:active (bấm và dữ)
:first-child (con đầu tiên)
:last-child (con cuối cùng)
Pseudo-elements: (phần tử giả): phải có content và display: block
- ::before (chèn vào đầu)
- ::after (chèn vào cuối)
- ::first-letter (kí tự đầu tiên)
- ::first-line (dòng đầu tiên)
- ::selection (lựa chọn – khi bôi chuột)
Một số ticks và tips
Cách căn giữa:
-
Theo chiều ngang: text-align: center;
Theo chiều cao: line-height:
Display: flex. Margin: auto;
Display: flex. Align-items:center. Justyfy-content: center;
Position: absolute; top:50%; left:50%; transform: translate(-50%,-50%)
Width: 100% cho thẻ div
Hiển thị ảnh dự phịng khi ảnh chính lỗi: fallback img
- Tải về source code
- Onerror=”this.src=’tenanh’”
- Trong background-image: thì thêm url=’’ vào
Tối ưu perfomance hình ảnh với srcset:
- Dùng để sử dụng nhiều ảnh có kích thước khác nhau
- Hiệu quả với boostrap
- Srcset=”linkanh kichthuoc(100w), linkanh kichthuoc,….”
Flex Box
Container: phần bao bên ngoài
Items: phần tử bên trong
CSS Flex Container:
Display: display: flex;
Flex-direction (chiều) : row, row-reverse, column, column-reverse
Flex-wrap (xuống dòng khi hết width) : nowrap, wrap, wrap-reverse
Justify-content (căn chỉnh các phần tử theo trục chính ):
o flex-start (trái)
o flex-end (phải)
o center, space-between (cách đều nhau)
o space-around (cách phần tử cách đều nhau và cách khung)
o space-evenly (cách khúc đều nhau)
- Align-items (căn chỉnh các phần tử theo chiều vng góc với trục chính):
-
CSS Flex Items:
- Order (quy đinh thứ tự hiển thị): default = 0
- flex-grow (chia phần còn thừa): default = 0
- flex-basis (như width): default = 0
Javascript
Khai báo biến: biến khơng có định kiểu dữ liệu
- let: có thể thay đổi được
- const: đại diện cho hằng số không thay đổi được
- var
Kiểu dữ liệu:
- Kiểu dữ liệu nguyên thủy:
o Number: là số nguyên hoặc số thực
o String: là text
o Boolean: true và False
o Null: không chứa giá trị nào
o Undefine: các giá trị không xác định (khai báo mà không khởi tạo)
- Kiểu dữ liệu tham chiếu:
o Object: đối tượng – giống hashmap trong java
o Array: nhóm các giá trị giống nhau – giống stack
o RegExp: biểu thức chính quy
In giá trị:
- document.write(value)
- console.log(value)
- để kiểm tra kiểu dữ liệu: “typeof”
Alert: mở cửa sổ thông báo – trả về undefine
Prompt: mở cửa sổ nhập dữ liệu – trả về undefine
Function trong js:
- function name_of_function(var 1, var 2, ….) { // }
Vòng lặp:
- for:
- while
- do while
SetTimeout: làm 1 việc gì đó sau 1 khoảng thời gian
SetInterval: cứ sau 1 khoảng thời gian lại làm 1 việc gì đó
JS DOM
Tìm phần tử HTML
-
ID: document.getElementById(‘//’) trả về 1 phần tử
Tag name: document.getElementByTagName(‘//’) – truy xuất như 1 mảng
Class name: document.getElementByClassName(‘//’) – mảng
QuerySelectorAll (tìm theo selector): document.querySelectorAll(‘//’)
Thay đổi phần tử HTML
- Property: (tìm trước và thay đổi)
o Element.innerHTML = new html content : thay đổi tất cả nội dung
trong thẻ html
o Element.attribute = new value : thay đổi thuộc tính
o Element.style.property = new style : thay đổi style
- Method:
o Element.setAttribute(attribute, value)
Events:
-
Onclick: khi click thì thực hiện hành động – click 1 lần
Ondbclick: khi click thì thực hiện hành động – click 2 lần (double click)
Onmouseover: khi di chuyển chuột qua (trỏ vào) thì thực hiện hành động
Onmouseout: khi di chuyển chuột ra khỏi thì thực hiện hành động
Onchange: khi 1 phần tử thay đổi thì thực hiện hành động
Onkeyup: khi một phím được thả ra
Onkeydown: khi 1 phím bị nhấn
Event listener:
Dynamic element
- Create element: tạo ra 1 phần tử
- appendChild: thêm 1 phần tử vào
Grid
Grid layout:
- hai phần tử cốt lõi của grid là các div bọc ngoài và các item bên trong
- div bọc ngoài tạo ra grid và item chính là nội dung bên trong cần sắp xếp
của grid
Display:
- display: grid
Columns & rows:
- grid-template-rows
- grid-template-columns
Sắp xếp các phần tử: dùng theo số line 1,2,… từ trái qua phải
- grid-column-start (row)
- grid-column-end (row)
Responsive
- code để thích ứng được với nhiều màn hình – linh hoạt
ViewPort: khung nhìn – màn hình hiển thị
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Media query:
Media query:
- break point: điểm chạm để thay đổi gaio diện
- mobie first: phát triển từ nhỏ lên lớn
- decktop first: từ to thu nhỏ dần
Bootstrap
LocalStorage:
- localStorage.getItem(): lấy giá trị từ localStorage
- localStorage.setItem(): cài giá trị vào localStorage
JSON:
- JSON.stringify() : chuyển từ object sang string
- JSON.parse(): chuyển từ JSON sang object
- 1em = số px của parent
- 1rem = số px khai báo trong font-size của thẻ html
Phân Tích Bài Tốn
Những thành phần thường gặp
1.
2.
3.
4.
5.
6.
7.
8.
Header (đầu trang)
Navigation (điều hướng)
Breadcrumb: cho biết đang ở đâu
Sidebar (thanh menu bên trái hoặc phải)
Slider (thanh trượt như slide)
Banner
Content (nội dung chính của web)
Footer (chân trang)
