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