TAGS THUỘC TÍNH GIÁ TRỊ MISTAKE Best practices

Ứng dụng hỗ trợ code Visual Các thành phần phải tải: Đặt tên file.html !+tab ra khuôn HTML
Studio Code Auto Rename Tag Đặt tên file.css
Auto close tag
ESLint
Live Server
Prettier-Code Formatter
Sau khi chạy Tạo assets thư viện tài nguyên(css để thư mục riêng, ảnh để
server lên nó hỏi thư mục riêng)
chọn thư mục
Không có
Không được viết CSS inline mặc dù nó ra
class Đặt cho h1 cái tiêu đề tạo bằng class
img Có thuộc tính Nên tải tấm ảnh về lưu trong thư mục assets image
Width và heigh Tạo một cái đường dẫn đặt trong source
hr Gạch ngang đến hết hàng
Align một số trình
duyệt nó không
chạy nên giờ đã cũ
rồi
div Sử dụng thẻ div để bọc
toàn trang, toàn khu vực
<a>…….<a/> Tittle: một cái quan trọng Chữ xanh sẽ nằm trong
của wed mặc dù không thẻ link<a>….</a>viết
hiện lên(Khi mình đưa con trong … có thẻ nhúng
chuột vô nó sẽ hiện chú img vào
thích cho link)
Thẻ liên kết Href: tạo đường dẫn đến
Thẻ link trang đích
Target”blank”:qua tab mới
bên trình duyệt
Target”self”: Chuyển tag tại
trang wed đó luôn
Liên kết CSS Bằng thẻ link nằm trên thẻ
head
Index.html( File chạy trước)
<h1>……</h1> Sử dụng nhiều thẻ <br> ở cuối
Thay vì sử dụng nhiều dòng <h1>
<em>…..</em> In nghiên cho nội dung
nằm ở trong nó
Bên html:
Thẻ lớn.TênClass.thẻ nhỏ+tab để tạo
CSS Có kế thừa do sử dụng link Muốn tạo thuộc tính thứ 2 phải thêm dấu ”;”
Id sẽ ưu tiên hơn (Nhưng
css chỉ viết cho JavaSript)
CSS định dạng văn bản <trong>…..</strong>: Để in
đậm văn bản
Background- color Thêm heigh để cho nó hiện Làm màu cho nề của header
lên một khu vực
Viết code mà wed
chạy lâu là dở
<article>……..</article> Float: left(dàn trang, thả Bắt buộc phải set một cái width với 70% màn hình
nổi bên trái)
Nội dung Lên coi dàn trang ở trên gg để thiết kế bố cục cho biết
<aside>…….</aside> Width:30%

Menu đứng
CSS flexbox Nó sẽ sài hay hơn float: left
<footer>…….</footer> Có chiều cao
Chiều rộng 100%
Float: left
Thì nó mới chạy
CSS(Hoặc sử dụng
clear:both , dùng
để loại bỏ float)
font Font-variant: định dạng in
hoa chữ nhỏ

Text Text-align: Can lề

Decorartion: gạch chân
Shadow: Đổ bóng chứ

Stranform:uppercase:Cũng
in hoa văn bản toàn bộ
nhưng chữ lớn hơn font-
variant
Line-heigh:Chiều cao văn bản :2; thì gấp 2 lần Nếu không có line-heigh thì mặc định độ cao dòng chữ là
Mặc định là 37px
1(minimum)
0 là không có dãn dòng
Word-spacing
Letster-spacing
Font-family Font chính để trong dẫu Viết từ hai font trở lên, font sau là font phụ, sans-serrif(font
nháy đơn, hiện màu lên là của trình duyệt) do trình duyệt có lúc lỗi, trên trình duyệt
đúng không nên sài font có đuôi( ở chữ) như time new romal
Font-weigh Nomal:Mặc định(400) Độ mập(In đậm của
Medium (600-900) chữ)
Bold(700)
Black(900)
Light: (100-300)
Color :red màu bình thường Color adode.com để thử mã màu
không cần dấu nhay Với 3 màu chính 2 màu phụ

Màu hệ 16 phải có dấu #mã

màu

Đơn vị đo kích thướt Rem, em, px CSS sử dụng bằng

cm không chính
 xác
..a: Link mặc định sẽ có màu Bao thẻ h ở ngoài
Chọn tất cả thẻ blue thẻ a sẽ không có
tác dụng
H1.a:Visisted(đã click) Trường hợp thẻ a
CSS đến nó mới
nhận CSS
Transition Color .3s(Số giây để thay
đổi)
Tạo hiệu ứng cho wed mượn mà
đẹp hơn
Độ ưu tiên Cái css đặt sau được chạy Đừng tạo class cùng tên
CSS: H1> span Khi có Span trong Span
thì nó vẫn chạy hai cái
span
<ul> Khi có class nó sẽ kiếm các thẻ lớp đầu còn khi có lồng vào lớp
<li> đầu thì phải đặt class cho cái thẻ con thứ hai đó thì nó sẽ
nhận giá trị
Thẻ li lồng vào ul

Tạo hover khi đưa chuột vào sẽ box-shadow: 0 0 20px Định dạng cho thẻ img width: 150px;
hiện bóng xung quanh red; height:
background-color: 150px;
aqua; padding:
10px;
margin:
5px;
border-
radius: 10px;

background-
color: yellow;
 box-
shadow: 0 0
5px blue;

(width X heigh) X20% Width: 20%; Định dạng khi Thẻ(tags)> img:hover{
Định dạng CSS cho một ảnh X150px Heigh: 150px; đưa chuột vào Box-shadow: 0 0 10px red;
Khoảng đệm từ chiều rộng Padding: 10px; dính ảnh (10 px là độ nhỏe)
p>img{…..} của ảnh tính ra(padding: Margin: 5px;
10px) Cho nó thay đổi Background-color: aqua;
Muốn đưa ảnh vào giữa thì định Margin(mặc định là khoản Background-color: viền(bóng mờ của
dạng text align center luôn trắng, tính từ padding hay yello; hộp)
border ra ) Border-radius: 10px;
Border-radius( bo cong gốc Box-shadow: 0 0 5px
của viền, có thể tính bằng aqua(xanh nhạt);(Hình
px hay %) như là nó không hiện
Backgound-color(tính từ thì phải)
ảnh đến border hay
padding)
Box-shadow(tính từ border
ra ngoài)(
Bài 5 Thiết kế form( Biểu Mẫu) Vai trò Giới thiệu Form: Textbox: abc
Thiết kế Nhận dữ liệu từ người Password: ****
Định dạng với CSS dùng Checkbox: Yes/No
Trình bài dữ liệu cho Botton:
người dùng xem

Các biểu mẫu thường

gặp:
Đăng kí, Đăng nhập,…
Tìm kiếm…
Thẻ Form

Action: trong xây dựng

trang wed 2
Khi sử dụng up lên sever
phải có dòng:
Enctype=”mutipart/form-
data”
Điểu khiển file
Tạo một cái form đơn giản

Có type là file phải có

action method và enctype
Demo
Type radio

Tạo cùng trong mỗi lebel cùng

name để cho nó cùng nhóm

Áp dụng chỉ được phép chọn 1

Demo check box

Có hay không

Nhiều lựa chọn: sở thích

Cái label có tác dụng mình nhấp

vào cái chữ thì nó vẫn chọn

Các type: sudmit, image, reset sẽ

gửi lên sever

Nút botton như có xác mà không

hồn chờ người lập trình định nghĩa
cho nó

Muốn tạo thành nhiều Thuộc tính của form Khi có thẻ type file
phần tử thì tạo nhiều thẻ không có type mà type thì bắt buộc định
div trong form nằm trong label dạng của form
phải có Method và
enctrend để
upload lên sever
Combobox là chỉ có một lựa chọn

Listbox: là có nhiều lựa chọn nếu

không đủ chiều cao thì nó sẽ tạo
thanh cuộn
Tạo một cái combo box

Cái selected đỏ là cái chọn đầu tiên

khi chạy cái form lên trong
combobox nó sẽ gửi lên sever :
Country là lựa chọn quốc gia

Độ rộng của textarea là cols

Điều khiển thẻ botton Button không mặc định là
sudmit

Type sudmit
Type reset: Khởi tạo trạng
thái ban đầu
Type botton: Không có
chức năng, phải cài đặt
riêng cho nút này
Filedset và label
Tạo ra giao diện thân thiện với
người dùng hơn
Filedset tạo điều khiển
trình bày theo nhóm
Legend tạo đề mục cho
filedset
Label tạo điều khiển cho
nhãn
Tabindex là thứ tự chuyển Giá trị placeholder: tạo Readonly: chỉ đọc Disabled: Vô hiệu hóa điều khiển, chỉ thấy chứ không cho
khi bấm nút tab cho nó gợi ý chữ mờ không cho người nhấp khác cancel
 dùng sửa
Input không cho hình ảnh Botton có thể chứa
hình ảnh
Tag Input Thuộc tính:

Type:
Date:Nhập ngày tháng năm
Time: Nhập giờ phút giây
Week: Nhập tuần
Color: Nhập màu
Number: Nhập số
Range: Nhập số trong
phạm vi
Email: Nhập địa chỉ email
Lọc dữ liệu từ danh sách có sẵn

Kết hợp thẻ

<input list=”tên danh sách”> và
<datalist id=”tên danh sách”>

Demo các input

Định dạng form với CSS Các thuộc tính của box
model: Kích thướt, đường
Đẹp hơn, Ngăn nắp hơn bao lề, lề, khoảng điệm,
nền, bóng, bo góc.

Thuộc tính ouline: Thiết lặp

đường bao bên ngoài cho
các điều khiển đang nhận
focus
.form-control: focus{

}Khi nhấn chuột vào thì nó sẽ thay

đổi theo định nghĩa CSS
CSS outline là đường bao bên
ngoài khi nhận điều khiển

CSS thuộc tính outline khác border

Tóm lại phần form Tag form dùng để tiếp nhận
dữ liệu từ người dùng
<form> dùng để làm khung
chứa
Các tạo thẻ điều khiển: Tạo độ thẩm mỹ
cao hơn với CSS
Ngày, tháng, thời gian,
màu sắc, số, khoản số

Tên trong form có thẻ

Input
Textarea: ví dụ như ghi chú
và có clos và rows
Select:
Botton:

Tạo box tìm kiếm <Input Type= search

placehoder=”Gợi ý chữ
xám cho người dùng thấy”>
 <button> Tìm kiếm
</button>
Danh sách có thứ tự

Danh sách không có thứ tự

+ position

Danh sách có thứ tự: type 1 A,a I, i

Type:
• Disc
• Square
• Circle
• None
Position: static|absolute|
relative|fixed

Fixed nó luôn chạy theo màn hình:

nhu đứng im trên màn hình