CSS
thieunganhg@yahoo.com
10/29/2018
1
CSS LÀ GÌ?
CSS có nhiều kiểu nhưng gom lại thì chúng ta sẽ có các thể loại CSS thông dụng như sau:
Background: CSS tùy chỉnh hình nền
Text: CSS tùy chỉnh cách hiển thị đoạn text
Font: CSS tùy chỉnh kích thước, kiểu chữ
Link: CSS tùy chỉnh link
List: CSS tùy chỉnh danh sách
Table: CSS tùy chỉnh bảng
Box model: Mô hình box model kết hợp padding, margin, border.
10/29/2018
2
CSS ViẾT Ở ĐÂU?
inline: viết trực tiếp vào thẻ html thông qua thuộc tính style
external: viết riêng một thẻ có phần đuôi .css rồi sau đó import vào bằng thẻ link.
internal: viết tại file html hiện tại và nằm trong thẻ style
10/29/2018
3
CSS ViẾT Ở ĐÂU?
inline: viết trực tiếp vào thẻ html thông qua thuộc tính style
10/29/2018
4
CSS ViẾT Ở ĐÂU?
internal: Định nghĩa style cùng trang với html (thường đặt ở cặp thẻ

10/29/2018
5
CSS ViẾT Ở ĐÂU?
external: viết css ra một trang riêng, có phần đuôi .css (vd: style.css) rồi sau đó import vào bằng thẻ link.
10/29/2018
6
CSS – Cú pháp
Cú pháp:
selector: định nghĩa một vùng chọn trong website được chỉ định áp dụng một đoạn css nào đó. Một đoạn css có thể áp dụng cho nhiều vùng chọn khác nhau.
declaration: các thuộc tính CSS dùng để style cho thẻ selector
Thuộc tính css đều có định dạng:
Tên dấu_hai_chấm giá_trị dấu_chấm_phẩy  
10/29/2018
7
CSS – Cú pháp
Cú pháp:
selector: selector sẽ trỏ đến những đối tượng (html) chịu ảnh hưởng bởi CSS
declaration: các thuộc tính CSS dùng để style cho thẻ selector
Thuộc tính css đều có định dạng:
Tên dấu_hai_chấm giá_trị dấu_chấm_phẩy  
10/29/2018
8
CSS – Cú pháp
Selector: Có 5 kiểu vùng chọn cơ bản
Chọn theo thẻ html (basic selector)
Chọn theo id
Chọn theo class
Chọn thứ cấp
Chọn thứ cấp liền nhau
10/29/2018
9
CSS – Cú pháp – Selector – Ví dụ
Basic Selector: Sử dụng chính thẻ html
Ví dụ (Basic Selector): Tất cả các thẻ

trong trang sẽ có nền màu đỏ, chữ màu xanh.
10/29/2018
10
CSS – Cú pháp - Selector
Class: Được định nghĩa cho những khối định dạng chung được sử dụng nhiều lần ở nhiều nơi.
Khai báo trong css bắt đầu bằng dấu chấm “.”
10/29/2018
11
CSS – Cú pháp - Selector
Id: Dùng cho một phần tử hoặc một nhóm phần tử cụ thể trong trang html.
Khai báo trong css bắt đầu bằng dấu thăng “#”.
Mỗi phần tử có một id riêng và id này không đặt trùng nhau.
10/29/2018
12
CSS – Cú pháp - Selector
Vùng chọn thứ cấp: Định dạng một thẻ mà thẻ đó mà thẻ đó nằm trong một thẻ khác, hay trong một id, một class khác và id, class đó lại nằm trong một id, class khác nữa.
Ví dụ:
10/29/2018
13
CSS – Cú pháp - Selector
Vùng chọn thứ cấp liền nhau: Chọn các phần tử bên trong một phần tử nào đó nhưng nó chỉ áp dụng cho các phần tử nằm dưới một bậc
Ví dụ:
10/29/2018
14
CSS – Cú pháp – Selector – Ví dụ
Ví dụ Id và Class
10/29/2018
15
CSS – Ví dụ
10/29/2018
16
Một số đơn vị cơ bản
10/29/2018
17
Tuyệt đối
Px (điểm ảnh) (such as font-size:12px)
Pt (font-size:2em)(Tham chiếu theo đơn vị inch, 72pt=1 inch)
Tương đối
% (định tỉ lệ so với phần tử mẹ)
Em: Tham chiếu đến thuộc tính font-size. 1em = value font-size mà bạn đặt
Rem: Tham chiếu đến thuộc tính font – size của phần tử lớn nhất trong html.
Một số đơn vị cơ bản
10/29/2018
18
Tuyệt đối
Px (điểm ảnh)
Một số đơn vị cơ bản
10/29/2018
19
Tương đối
%
Một số đơn vị cơ bản
10/29/2018
20
Tương đối
Em: Chỉ tác dụng trên phần tử mẹ, còn phần tử bên ngoài không có tác dụng
Một số đơn vị cơ bản
10/29/2018
21
Tương đối
Rem: Trong toàn bộ website cho toàn bộ web
CSS - Color
10/29/2018
22
red
rgb(255,0,0)
rgb(100%,0%,0%)
#ff0000
#f00
CSS – Thuộc tính trang trí văn bản
Text-align: căn lề văn bản(left, right, center, justify)
Text-decoration: thêm gạch dưới, gạch trên và gạch giữa vào văn bản (overline, underline, line-through, none)
Text-index:“value”: Tạo khoảng trống bên trái cho văn bản.
Text-shadow:mau_sac toa_do_xy bong_mo;: đổ bóng cho văn bản
.trangtri{text-shadow: blue 2px 3px 4px;}
.trangtri{text-shadow: blue 2px 3px 4px, red 2px 1px 3px;}
Text-transform: Tùy chỉnh hiển thị in hoa, in thường
10/29/2018
23
CSS – Thuộc tính trang trí văn bản
Text-transform: Tùy chỉnh hiển thị in hoa, in thường
text-transform: capitalize Kí tứ đầu tiên của mỗi từ in hoa.
text-transform: uppercase Tất cả nội dung in hoa.
text-transform: lowercase Tất cả nội dung in thường.
text-transform: none Mặc định.
10/29/2018
24
CSS – Thuộc tính trang trí chữ viết
Font – family:tenfont1, tenfont2;: Đổi kiểu font chữ (thường sử dụng 4 kiểu font liên tiếp)
Font -style: Làm chữ nghiêng( italic, oblique, normal)
Font-weight:: Tùy chỉnh độ đậm nhạt của chữ (max là 900, số càng to càng đậm)
Color: Thêm màu chữ
10/29/2018
25
CSS – Block và Inline
Block(khối): là các phần tử html khi tạo ra nó sở hữu một hàng riêng biệt. Có thể tùy chỉnh kích thước của block (vd: div, h1, h2, p, ul…)
Inline (nội dòng): là các phần tử html khi tạo ra nó có thể đứng trên một hàng. (vd: span, strong, a…)
10/29/2018
26
CSS – Float
Thuộc tính float xác định có hay không một thành phần được float (trôi nổi).
Thuộc tính float áp dụng cho các phần tử html có vị trí đã xác định.
Float:(left, right, inherit, none)
Left: di chuyển sang bên trái khu vực hiển thị nội dung của phần tử cha.
Right: di chuyển sang bên phải khu vực hiển thị nội dung của phần tử cha.
None: Trả về giá trị float như bình thường, coi như thành phần chưa sử dụng float. Thường được sử dụng để phục hồi giá trị float cho thành phần.
Inherit: Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài)
10/29/2018
27
CSS –Vấn đề khi sử dụng float
Lý do là Footer nó nối tiếp lề trên bởi thẻ div#main, mà thẻ div#main lại chứa hai thẻ có float:left và float:right nên theo mặc định nó sẽ có chiều cao là 0px, nghĩa là thuộc tính float sẽ không được tính vào vùng chiếm không gian của thẻ cha nó. Lúc này footer sẽ bị hai phần Main content và Sidebar đè lên trên.
10/29/2018
28
CSS –Vấn đề khi sử dụng float - Giải quyết
10/29/2018
29
CSS –Vấn đề khi sử dụng float - overflow
10/29/2018
30
CSS –Vấn đề khi sử dụng float - Giải quyết
10/29/2018
31
CSS – Clear
Thuộc tính clear ngăn chặn thành phần A chiếm vùng không gian của thành phần B (B là thành phần sử dụng float).
Thuộc tính clear: (left, right, none, both)
Sử dụng Clear:left; ở thành phần B, ngăn chặn B chiếm chỗ A, khi thành phần A có sử dụng float:left;
10/29/2018
32
CSS – Clear
Thuộc tính clear ngăn chặn thành phần A chiếm vùng không gian của thành phần B (B là thành phần sử dụng float).
Thuộc tính clear: (left, right, none, both)
Sử dụng Clear:right; ở thành phần B, ngăn chặn B chiếm chỗ A, khi thành phần A có sử dụng float:right;
10/29/2018
33
CSS – Clear
Thuộc tính clear ngăn chặn thành phần A chiếm vùng không gian của thành phần B (B là thành phần sử dụng float).
Thuộc tính clear: (left, right, none, both)
Sử dụng Clear:both; ở thành phần C ngăn chặn sự chiếm vùng của C, khi cả 2 thành phần A và B sử dụng float, chúng ta không thể sử dụng clear: left; hay clear: right; để ngăn chặn thành phần C chiếm vùng không gian còn trống, trong trường hợp này ta sử dụng thuộc tính clear: both; để ngăn chặn sự chiếm vùng của thành phần C.
10/29/2018
34
CSS – Clear
Thuộc tính clear ngăn chặn thành phần A chiếm vùng không gian của thành phần B (B là thành phần sử dụng float).
Thuộc tính clear: (left, right, none, both)
Sử dụng Clear:both; ở thành phần C ngăn chặn sự chiếm vùng của C, khi cả 2 thành phần A và B sử dụng float, chúng ta không thể sử dụng clear: left; hay clear: right; để ngăn chặn thành phần C chiếm vùng không gian còn trống, trong trường hợp này ta sử dụng thuộc tính clear: both; để ngăn chặn sự chiếm vùng của thành phần C.
10/29/2018
35
CSS – Clear
Thuộc tính clear ngăn chặn thành phần A chiếm vùng không gian của thành phần B (B là thành phần sử dụng float).
Thuộc tính clear: (left, right, none, both)
Phục hồi clear bằng cách sử dụng Clear:none;
10/29/2018
36
CSS – Clear
Thuộc tính clear ngăn chặn thành phần A chiếm vùng không gian của thành phần B (B là thành phần sử dụng float).
Thuộc tính clear: (left, right, none, both)
Phục hồi clear bằng cách sử dụng Clear:none;
10/29/2018
37
CSS – Mô hình box
Kết hợp ba thuộc tính margin, padding và border sẽ cho ta một mô hình với tên gọi là Box Model, Box Model thể hiện được sơ đồ các thuộc tính xác định vị trí của đối tượng HTML
10/29/2018
38
CSS – Mô hình box
Trong mô hình này thì:
Đường xọc ngoài cùng là đường biên 
Tiếp theo khoảng cách giữa đường biên so với đường border (màu xanh) ta gọi là margin.
Tiếp khoảng cách giữa border so với nội dung bên trong ta gọi là padding.
10/29/2018
39
CSS – Thẻ div
Là một thẻ block thường được dùng để tạo bố cục cho website.
Thuộc tính width, height xác định chiều rộng và cao của thẻ
VD: Canh giữa div trên trang: ta cần sử dụng 2 thuộc tính width…px; margin:auto cùng lúc.
VD2: Canh nội dung giữa thẻ div: ta dùng 2 thuộc tính text-align:center; line-height: giá trị chiều cao height của thẻ div này.
10/29/2018
40
CSS – Thuộc tính margin và padding
Margin và padding
10/29/2018
41
CSS – Thuộc tính margin
Ứng dụng margin trong css: dùng để điều chỉnh khoảng cách giữa các thành phần của trang
10/29/2018
42
CSS – Thuộc tính margin
Margin: có 4 thuộc tính top, right, bottom, left. Sử dụng theo các cách sau:
Cách 1: margin 5px 5px 0 5px;
Nghĩa là top:5px, right:5px, bottom:0px, left:5px;


10/29/2018
43
CSS – Thuộc tính margin
Margin: có 4 thuộc tính top, right, bottom, left. Sử dụng theo các cách sau:
Cách 2: margin: 10px 20px 5px;

Nghĩa là top:10px, right:20px, bottom:5px, left:20px;


10/29/2018
44
CSS – Thuộc tính margin
Margin: có 4 thuộc tính top, bottom, left, right. Sử dụng theo các cách sau:
Cách 3: margin: 10px 20px;

Nghĩa là Top: 10px và bottom:10px; right: 20px và left:20px;

Cách 4: margin: 10px;

Nghĩa là: top, right, bottom, left đều có giá trị là 10px;




10/29/2018
45
CSS – Thuộc tính margin
Margin: có 4 thuộc tính top, bottom, left, right. Sử dụng theo các cách sau:
Cách 5: Đưa ra từng vị trí cụ thể:
Ví dụ:
margin-top: 10px;
margin-right: 5px;
margin-bottom: 8px;
margin-left: 15px;

10/29/2018
46
CSS – Thuộc tính margin
10/29/2018
47
CSS – Thuộc tính padding
Ứng dụng padding trong css: dùng để phân cách giữa nội dung và viền (border) của một thành phần
10/29/2018
48
CSS – Thuộc tính padding
Padding: có 4 thuộc tính top, right, bottom, left. Và sử dụng tương tự margin.
Chú ý:
Khi sử dụng padding thì độ lớn của thành phần sẽ bao gồm cả padding. Còn nếu sử dụng margin thì độ lớn của thành phần không thay đổi, giá trị margin chỉ là khoảng cách bên ngoài thành phần.
10/29/2018
49
CSS – Thuộc tính padding
Padding: có 4 thuộc tính top, right, bottom, left. Và sử dụng tương tự margin.
Chú ý:
Khi sử dụng padding thì độ lớn của thành phần sẽ bao gồm cả padding. Còn nếu sử dụng margin thì độ lớn của thành phần không thay đổi, giá trị margin chỉ là khoảng cách bên ngoài thành phần.
10/29/2018
50
CSS – Thuộc tính border
border-style: (solid, dotted, dashed, double, groove, ridge, inset and outset).
10/29/2018
51
h2 {
border-style: dashed;
border-width: 3px;
border-left-width: 10px;
border-right-width: 10px;
border-color: red; }
CSS – Thuộc tính position
Thuộc tính position dùng để xác định vị trí hiển thị cho thẻ HTML và thường được dùng để xây dựng CSS cho menu đa cấp, tooltip hoặc một số chức năng khác. 
Position: (static, relative, absolute, fixed, inherit)
10/29/2018
52
CSS – Thuộc tính position
Position:relative; Định vị trí của một phần tử theo vị trí bình thường của nó.
Khi sử dụng relative, các đặc tính CSS khác như top, bottom, left, right sẽ được thêm vào để điều chỉnh cho phần tử ra khỏi vị trí bình thường của nó.
VD: Định vị trí thẻ div lệch về bên trái 30px;

10/29/2018
53
CSS – Thuộc tính position
Position: absolute; Định vị tuyệt đối, một phần tử sẽ được chỉ định vị trí dựa trên phần tử bao ngoài của nó
10/29/2018
54
CSS – Thuộc tính position (Relative và absolute)
Kết hợp Relative và absolute: Relative ví như cái khung và absolute chuyển động bên trong khung đó nên nó có thể lăn tới bất kì vị trí nào.
Để thiết lập vị trí thì ta sử dụng bốn thuộc tính sau: top, right, bottom, left.
Bạn chỉ có thể sử dụng nhiều nhất là 2 giá trị liền kề nhau tuân theo tọa độ đề cát, các cặp đó là: (top, right) - (right, bottom) - (bottom, left) - (left, top).
Lưu ý: Vì các giá trị (top, left, right, bottom) nằm trong tọa độ đề cát và tâm chính là các một trong những góc vuông (tùy vào cách chọn cặp) nên nếu nó mang số âm thì đối tượng HTML sẽ nằm ngoài khung.
10/29/2018
55
CSS – Thuộc tính position (Relative và absolute)
Giả sử có ba thẻ HTML cấp 1, cấp 2, cấp 3 khai báo giá trị như hình bên thì nó sẽ cho chọn khung là thẻ có khái báo relative gần nó nhất.
10/29/2018
56
CSS – Gom nhóm Selectors
10/29/2018
57
CSS - Comment
10/29/2018
58
Cấu trúc trang
10/29/2018
59
Cấu trúc trang
10/29/2018
60
Cấu trúc trang
10/29/2018
61
Cấu trúc trang
10/29/2018
62
Cấu trúc trang
10/29/2018
63
Cấu trúc trang
10/29/2018
64
Tài liệu tra cứu
https://developer.mozilla.org/en-US/docs/Web/CSS
http://www.w3schools.com/
Mã màu: www.colorpicker.com


10/29/2018
65