HTML
CSS
CƠ BẢN
https://www.w3schools.com
Hờ Tờ
Mờ Lờ
Cấu trúc
<!DOCTYPE html>
(thẻ khai
<html lang="vi">
(thẻ đóng
<head>
(thẻ đóng
<meta charset="utf-8" />
</head>
<body>
(thẻ đóng
<p>Đây là nội dung website</p>
</body>
</html>
báo loại tập tin)
mở tài liệu html)
mở phần thông tin)
mở phần nội dung)
Các thẻ trong header
Thẻ title
Các thẻ trong header
Thẻ meta (thẻ dữ liệu vĩ mô)
Charset: khai báo cho trình duyệt biết bảng mã ký tự
Name:
•author: Khai báo tên tác giả của tài liệu.
•description: Khai báo mô tả của tài liệu.
•keyword: Khai báo từ khóa của tài liệu
Các thẻ định dạng chữ viết và văn bản
(Body)
Thẻ Heading level (thẻ tiêu đề)
Thẻ Paragraph (thẻ đoạn văn bản)
Các thẻ định dạng chữ viết
Các thẻ định dạng chữ viết
<strong>
<i>
<u>
<strike>
<em>
<code>
<hr>
<mark>
In đậm chữ viết.
In nghiêng chứ viết.
Gạch chân chữ viết.
Gạch ngang chữ viết.
Nhấn mạnh câu.
Định dạng cho một đoạn mã nào đó.
Thước kẻ ngang trên tài liệu.
Tô sáng chữ viết.
Các thẻ định dạng chữ viết
Thẻ trích dẫn <quote>
Các thẻ định dạng chữ viết
Thẻ định dạng sẵn <pre>
=> Xuống hàng không cần thẻ <p>
Thẻ định dạng chữ viết <span>
Thẻ định dạng chữ viết <span>
Thẻ định dạng chữ viết <span>
Đơn vị: px, %, pt hoặc em
Căn lề văn bản
Để canh lề, sử dụng thuộc tính text-align với giá trị
là left, center, right hoặc justify
Tạo danh sách - LIST
Kiểu không sắp xếp (Unordered List)
Kiểu sắp xếp (Ordered List)
Kiểu mô tả (Description List)
Ordered List <ol> {1/2}
Ordered List <ol> {2/2}
Giá trị của thuộc tính type là 1, i, I, a, A.
Unordered List <ul> {1/2}
Unordered List <ul> {2/2}
Description List <dl>
Xếp chồng sử dụng <li>
Thẻ liên kết <a> {1/2}
Thẻ liên kết <a> {1/2}
<a href="https://fb.com" title=“Đến Facebook" target="_blank">nhấp vào đây</a>
href="https://fb.com" là liên kết muốn tới
title=“Đến Facebook“ là pop-up hiển thị khi rê chuột vào liên kết
target="_blank“ xác định nơi mở tài liệu
_blank (mở tài liệu trên cửa sổ mới)
_self (mở tài liệu trên cửa sổ hiện tại) – mặc định
_top (mở tài liệu trong nội dung trang hiện tại)
_parent (mở tài liệu trên khung trình duyệt mẹ của nó)
Liên kết neo (Anchor Link) 1/2
Liên kết neo (Anchor Link) 2/2
<a href="#than-bai">Xem thân bài</a>
<p id="than-bai">Đây là thân bài</p>
Chèn ảnh
src: Đường dẫn đến tập tin hình ảnh.
title: Tiêu đề của hình ảnh.
alt: Tên định danh của hình ảnh.
Có thể thêm width, height để điều chỉnh kích thước
Chèn video/âm thanh
<video width="320" height="240" controls>
<source src="https://fb.com/movie.mp4" type="video/mp4">
Trình duyệt của bạn không hỗ trợ HTML5.
</video>
-------------------------------------------------------------------------
<audio controls>
<source src=" https://fb.com/audio.mp3" type="audio/mp3">
Trình duyệt của bạn không hỗ trợ HTML5
</audio>
Nhúng tài liệu HTML vào web {1/2}
Nhúng tài liệu HTML vào web {2/2}
target <a> = name <iframe>
Tạo form nhập liệu
action: Đường dẫn đến một trang xử lý dữ liệu sau khi nhấn nút gửi dữ liệu.
method: Phương thức gửi dữ liệu.
name:
Tên của form.
Danh sách giá trị thuộc tính TYPE
button
date
checkbox
datetime
color
datetime-local
Danh sách giá trị thuộc tính TYPE
email
image
file
month
hidden
number
Danh sách giá trị thuộc tính TYPE
password
reset
radio
search
range
submit
Danh sách giá trị thuộc tính TYPE
tel
text
time
url
week
Cờ Sờ Sờ
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Nhúng CSS vào website
Inline Styles
CSS
External Styles
HTML
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Inline Styles</title>
<style type="text/css">
p {
color: blue;
font-family: Arial;
}
</style>
</head>
Inline Styles
<body>
<p>Đây là một đoạn chữ đã được định dạng với CSS</p>.
</body>
</html>
p {
color: blue;
font-family: Arial;
Tạo 1 file css có tên là name.css
}
<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>External Styles</title>
<link rel="stylesheet" href="name.css" />
</head>
External
Styles
<body>
<p>Đây là một đoạn chữ đã được định dạng với CSS</p>.
</body>
</html>
Nhúng tập tin CSS vào bên trong một tập tin CSS
Vùng chọn cơ bản - Selector
Vùng chọn dựa vào tên thẻ
name.css
Vùng chọn dựa vào ID
css
Vùng chọn dựa vào class
css
Vùng chọn theo thứ cấp
css
Vùng chọn theo thứ cấp liền nhau
css
Thuộc tính cho text (TextStyle)
text-align: Căn lề văn bản.
text-decoration: Trang trí văn bản.
text-indent: Thêm khoảng trống trước văn bản theo chiều ngang từ trái sang phải.
text-shadow: Thêm bóng cho văn bản.
text-transform: Tùy chỉnh việc hiển thị chữ in hoa.
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
Thuộc tính cho text (TextStyle)
text-align:
Thuộc tính cho text (TextStyle)
text-decoration: overline:
gạch trên chữ
underline:
gạch dưới chữ
line-through: gạch ngang chữ
none:
không có gạch gì cả
Thuộc tính cho text (TextStyle)
text-indent:
Thuộc tính cho text (TextStyle)
text-shadow:
Thuộc tính cho text (TextStyle)
text-transform:
4 giá trị chính là:
capitalize (in hoa chữ cái đầu tiên của mỗi từ)
uppercase (in hoa cả đoạn văn bản)
lowercase (viết thường cả đoạn văn bản)
none
(không có gì cả).
Trang trí Font chữ
font-family:
(Font chữ có chân)
o serif
(Font chữ không chân)
o sans-serif
http://www.cssfontstack.com/
Trang trí Font chữ
font-style:
chữ viết được hiển thị dưới dạng in nghiêng hoặc bình thường.
normal
(bình thường)
italic
(in nghiêng)
oblique
(cũng là nghiêng)
font-weight: In đậm chữ viết
Giá trị của nó từ 100, 200, 300, …, 900, số càng lớn thì chữ càng đậm và “mập” ra.
Có thể dùng các giá trị kiểu chữ là normal, bold
Giá trị lighter và bolder để thiết lập độ đậm tương đối.
font-color:
sử dụng đó là kiểu tên, kiểu HEX và kiểu RBG
font-size:
Kích thước font chữ
*Block (khối) và Inline (nội dòng)*
Block: Hiển thị ở mỗi dòng riêng biệt, một số thẻ block cơ bản như <p>, <ul>, <ol>, <h1>
<div>
Inline: nằm chung một dòng với các văn bản khác
<span>
một số thẻ Inline cơ bản như <b>, <strong>, <i>, <u>
Thẻ <div>
Một website sẽ có 4 phần chính là:
- header (hiển thị banner, logo)
- content (hiển thị nội dung)
- sidebar (cột bên cạnh nội dung)
Nếu
cần gom
- footer (khu ~>
vực chân
website)
4 thẻ <div> quản lý 4 phần
nhóm nhiều
thành phần trên website vào
một khu vực thì có thể sử dụng
thẻ <div> để làm.
Model Box
Model Box
1, Padding
(Canh nội dung với border)
Có thể viết
Hoặc
padding: 20px 10px 20px 10px;
padding: 20px 10px;
(top bottom 20px, left right 10px)
padding: 20px;
(top bottom left right 20px)
Ngoài ra còn có padding-top, padding-bottom, padding-left và padding-
Model Box
2, Border
border-style
border-width
border-color
Ví dụ:
Một số type:
dotted, dashed, solid, double, groove,
ridge, inset, outset, none, hidden
Ngoài ra còn có: border-radius, border-top, borderright, border-bottom và border-left.
Model Box
3, Margin
margin: 32px 0 0 0
(Canh bordervới border)
Tương tự như Padding
margin-top
margin-right
margin-bottom
margin-left
Các thuộc tính tùy chỉnh kích thước
Tên thuộc tính
Mô tả
Các kiểu giá trị
Thiết lập chiều cao, chiều rộng
của một phần tử.
auto
length
%
inherit
max-height
max-width
Thiết lập chiều cao, chiều rộng
tối đa của một phần tử.
none
length
%
inherit
min-height
min-width
Thiết lập chiều cao, chiều rộng
tối thiểu của một phần tử.
height
width
length
%
inherit
Boxsizing
box-sizing
Cách viết: box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
(Khuyên sử dụng vì nó đầy đủ)
Màu nền - Ảnh nền
Màu nền
#mau-nen {
width: 300px;
height: 300px;
background-color: #e7e7e7;
border: 1px solid #cacaca;
}
Màu nền - Ảnh nền
Ảnh nền
#anh-nen {
/* Ảnh nền */
background-image: url('http://fb.com/1.jpg');
/* Kích thước #header */
width: 940px;
height: 350px;
margin: 0 auto; /* Căn giữa trang */
}
Ngoài ta có thể thêm nhiều ảnh nền khác nhau:
Màu nền - Ảnh nền
Ảnh nền
Lặp ảnh nền: background-repeat
Màu nền - Ảnh nền
Ảnh nền
Đổi vị trí ảnh nền: background-position
Chia cột với float và clear-float
Khi chia cột trong CSS, bạn nên làm tuần tự đầy đủ các bước sau để
chia cột được chính xác:
1.Các cột phải luôn có một container, tức là phần tử mẹ bao bọc nó.
2.Thiết lập chiều rộng cho container.
3.Thiết lập chiều rộng cho hai cột, tổng chiều rộng trong hai cột phải
luôn bằng hoặc ít hơn chiều rộng của container.
4.Nên sử dụng box-sizing: border-box để tính toán kích thước chính
xác.
5.Sử dụng thuộc tính float với giá trị left và right để đẩy phần tử về
sang trái hoặc phải.
6.Tiến hành clear float.
Reset CSS
https://github.com/necolas/normalize.css/blob/master/normalize.css
Tùy biến danh sách LIST
list-style: <list-style-type> <list-style-position> <list-style-image>;
Tùy biến danh sách LIST
list-style: <list-style-type> <list-style-position> <list-style-image>;
list-style-type
Tùy biến danh sách LIST
list-style: <list-style-type> <list-style-position> <list-style-image>;
list-style-position
Tùy biến danh sách LIST
list-style: <list-style-type> <list-style-position> <list-style-image>;
list-style-image
VIẾT NGẮN GỌN list-style
Sử dụng list-style cho phần tử khác
Tùy biến loại phần từ với “display”
Ví dụ “display”
Position và Absolute – Relative
Position và Absolute – Relative
Kiểu relative
Kiểu absolute
Kiểu fixed
Pseudo Class
Ví dụ Pseudo Class 1
Ví dụ Pseudo Class 2
Ví dụ Pseudo Class 3
Tạo menu ngang cơ bản
Bước 1: Tạo danh sách menu bằng list
Tạo menu ngang cơ bản
Bước 2: Xử lý phần bao bọc menu – thẻ <ul>
Tạo menu ngang cơ bản
Bước 3: Xử lý phần tử con bên trong menu – thẻ <li>
Tạo menu ngang cơ bản
Bước 4: Xử lý thẻ <a>
Tạo menu dropdown
css menu xo xuong.txt