Tải bản đầy đủ

Thiết kế website bán hàng đồng hồ

VIỆN ĐẠI HỌC MỞ HÀ NỘI
KHOA CÔNG NGHỆ ĐIỆN TỬ THÔNG TIN

ĐỒ ÁN
TỐT NGHIỆP ĐẠI HỌC
Đề tài : “Thiết kế website bán hàng đồng hồ”

Giảng viên hƣớng dẫn : PGS.TS Phạm Minh Việt
Sinh viên thực hiện

: Ngô Thị Thanh Xuân

Lớp

: K16-DTTT

Khóa

: 16(2013-2017)

Hệ


: Chính quy

Hà Nội, tháng 5/2017


VIỆN ĐẠI HỌC MỞ HÀ NỘI

CỘNG HÒA XÃ HỘI CHỦ NGHĨA VIỆT NAM

KHOA CN ĐIỆN TỬ - THÔNG TIN

Độc lập - Tự do - Hạnh phúc

ĐỀ TÀI ĐỒ ÁN TỐT NGHIỆP ĐẠI HỌC
Họ và tên sinh viên: NGÔ THỊ THANH XUÂN
Lớp: K16B

Khóa: 16 (2013 – 2017)

Ngành đào tạo: Công nghệ Kỹ thuật điện tử, Truyền thông

Hệ đào tạo: ĐHCQ

1/ Tên đồ án tốt nghiệp:
Thiết kế website bán hàng đồng hồ.
2/ Nội dung chính của đồ án:
1. TÌM HIỂU NGÔN NGỮ NỀN TẢNG TRONG LẬP TRÌNH WEB VỚI PHP ,
HTML VÀ CSS.
2. KHẢO SÁT PHÂN TÍCH ĐỀ TÀI
3. THIẾT KẾ WEBSITE BÁN HÀNG ĐỒNG HỒ VỚI PHP & MYSQL
4. TỔNG KẾT VÀ ĐÁNH GIÁ HƯỚNG PHÁT TRIỂN CỦA ĐỀ TÀI.
3/ Cơ sở dữ liệu ban đầu
4/ Ngày giao đồ án: 10/03/2017
5/ Ngày nộp đồ án: 19/05/2017

TRƢỞNG KHOA

GIÁO VIÊN HƢỚNG DẪN


(Ký, ghi rõ họ tên)

(Ký, ghi rõ họ tên)


MỞ ĐẦU
Hiện nay, dưới sự phát triển của công nghệ thông tin, con người đã thực hiện
được nhiều công việc với tốc độ nhanh hơn và chi phí thấp hơn nhiều so với các thức
truyền thống. Chính điều này, đã thúc đẩy sự hình thành và phát triển của thương mại
điện tử trên khắp thế giới, làm biến đổi đáng kể bộ mặt văn hóa , nâng cao chất lượng
cuộc sống con người.
Trong hoạt động sản xuất kinh doanh, thương mại điện tử đã khẳng định được
vai trò xúc tiến và thúc đẩy sự phát triển của doanh nghiệp. Đối với một doanh nghiệp
hay một cửa hàng, việc quảng bá và giới thiệu đến khách hàng các sản phẩm mới đáp
ứng được nhu cầu của khách hàng sẽ rất cần thiết. Lĩnh vực thương mại điện tử đã
giúp các cá nhân, doanh nghiệp có mặt hàng dễ dàng tiếp cận được với người tiêu
dùng. Vậy phải quảng bá thế nào đó là việc xây dựng được một website cho cửa hàng
hay doanh nghiệp của mình để đưa sản phẩm của mình đến với khách hàng.
Đứng trước nhu cầu thiết kế website của các cá nhân, doanh nghiệp cũng như
việc đam mê lập trình ứng dụng web. Em đã chọn đề tài : “ xây dựng website bán hàng
đồng hồ online” làm đề tài báo cáo đồ án tốt nghiệp.
Nội dung chính của đề tài gồm 4 chương :
1. Chương I: Tìm hiểu ngôn ngữ , nền tảng trong lập trình web với PHP, HTML
VÀ CSS.
2. Chương II: Khảo sát phân tích đề tài.
3. Chương III: Thiết kế website bán hàng đồng hồ với PHP và MYSQL
4. Chương IV : Tổng kết và đánh giá hướng phát triển của đề tài.
Mặc dù đã rất cố gắng thực hiện đề tài nhưng vì năng lực cũng như kiến thức còn
hạn chế nên báo cáo của em khó tránh khỏi những thiếu xót. Em rất mong thầy cô
thông cảm và chỉ bảo góp ý để đề tài của em được hoàn thiện hơn. Những góp ý của
thầy cô là bài học và hành trang để em vững bước vào cuộc sống này.
Hà Nội, ngày 15 tháng 05 năm 2017

1


LỜI CẢM ƠN
Đầu tiên , em xin cảm ơn các thầy cô giáo bộ môn cũng như các thầy cô đang
công tác tại khoa Công nghệ Điện tử - Thông tin, Viện đại học Mở Hà Nội đã tạo điều
kiện và truyền đạt cho chúng em những kiến thức trong suốt quá trình 4 năm học vừa
qua.
Đặc biệt, em xin gửi lời cảm ơn sâu sắc đến giảng viên PGS.TS Phạm Minh Việt,
người đã hết lòng hướng dẫn , chỉ bảo , giúp đỡ em trong thời gian vừa qua. Thầy đã
giúp em có những hướng đi đúng đắn đề hoàn thành tốt đề tài này. Em cũng như các
bạn rất biết ơn thầy đã truyền đạt lại cho chúng em những kinh nghiệm, kiến thức và
những kĩ năng quý báu để chúng em có thể hoàn thiện đề tài của mình một cách tốt
nhất.
Quá trình thực hiện đề tài này là cơ hội để em áp dụng, tổng hợp các kiến thức đã
học trên lớp, đồng thời đúc kết được những bài học phục vụ cho học tập và công việc
thực tế sau này.
Em xin chân thành cảm ơn !
Người thực hiện đề tài

Ngô Thị Thanh Xuân

2


NHẬN XÉT CỦA GIÁO VIÊN HƢỚNG DẪN
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………
……………………………………………………………………………………

Hà Nội , ngày tháng 5 năm 2017
Giáo viên hƣớng dẫn

3


MỤC LỤC
DANH MỤC CÁC HÌNH ẢNH VÀ BẢNG
KÍ HỆU CÁC CỤM TỪ VIẾT TẮT
CHƢƠNG I : TÌM HIỂU NGÔN NGỮ NỀN TẢNG TRONG LẬP TRÌNH
WEB VỚI PHP, HTML VÀ CSS....................................................................... 9
1.1NGÔN NGỮ HTML (BỘ XƢƠNG WEBSITE)........................................... 9
1.1.1.

Khái niệm ............................................................................................. 9

1.1.2.

Cấu trúc trang HTML ........................................................................ 9

1.1.3.

Các thẻ HTML cơ bản ...................................................................... 10

1.2NGÔN NGỮ CSS (BỘ DA CỦA WEBSITE) ............................................. 13
1.2.1.

Khái niệm ........................................................................................... 13

1.2.2.

Nhúng CSS vào website .................................................................... 13

1.2.3.

Vùng chọn và các kiểu vùng chọn cơ bản ....................................... 14

1.2.4.

Các thuộc tính CSS cơ bản ............................................................... 15

1.3NGÔN NGỮ PHP (TRÁI TIM CỦA WEBSITE) ...................................... 18
1.3.1. Khái niệm ............................................................................................... 18
1.3.2. Biến, hằng, chuỗi và các kiểu DL trong PHP ..................................... 19
1.3.2.1 Biến .................................................................................................... 19
1.3.2.2. Hằng ................................................................................................. 20
1.3.2.3. Chuỗi ................................................................................................ 20
1.3.2.4. Các kiểu DL trong PHP .................................................................. 22
1.3.3. Toán tử trong PHP ................................................................................ 23
1.3.4 Các biểu thức điều kiện và vòng lặp trong PHP ................................. 25
1.3.5 Các kiểu dữ liệu mảng và các hàm hỗ trợ mảng trong PHP .............. 28
1.3.6 Hàm và gọi lại hàm trong PHP ............................................................. 30
1.3.7 Cookie và session trong PHP ................................................................. 31
1.3.8 Truy cập biến form................................................................................. 32
1.3.9 Lƣu trữ và truy vấn dữ liệu bằng PHP ................................................ 33
4


CHƢƠNG II : KHẢO SÁT VÀ PHÂN TÍCH ĐỀ TÀI ...................................... 35
2.1KHẢO SÁT YÊU CẦU ĐỀ TÀI................................................................... 35
2.1.1.

Mục đích chọn đề tài ......................................................................... 35

2.1.2.

Chức năng .......................................................................................... 35

2.1.3.

Yêu cầu đặt ra .................................................................................... 35

2.2CÁC KỊCH BẢN SỬ DỤNG USERCASE .................................................. 36
2.2.1. Chức năng của khách hàng .................................................................. 36
2.2.2. Chức năng của nhà quản trị ................................................................. 38
2.2.3. Phân tích hệ thống xử lý ....................................................................... 39
2.2.4. Biểu đồ phân cấp chức năng của khách hàng..................................... 41
2.2.5. Biểu đồ phân cấp chức năng quản lý nhà quản trị ............................ 41
2.3MÔ HÌNH HÓA ............................................................................................. 42
2.3.1. Biểu đồ luồng dữ liệu mức khung cảnh (mức 0)................................. 42
2.3.2. Biểu đồ luồng dữ liệu mức 1 ................................................................. 43
2.4BIỂU ĐỒ THỰC THỂ LIÊN KẾT .............................................................. 44
2.5BẢNG CƠ SỞ DỮ LIỆU............................................................................... 44
2.5.1. Bảng cơ sở dữ liệu của admin............................................................... 44
2.5.2. Bảng cơ sở dữ liệu của loại sản phẩm.................................................. 45
2.5.3. Bảng cơ sở dữ liệu hiệu sản phẩm....................................................... 46
2.5.4. Bảng cơ sở dữ liệu đăng ký ................................................................... 47
2.5.5. Bảng cơ sở dữ liệu chi tiết sản phẩm ................................................... 48
CHƢƠNG III : THIẾT KẾ WEBSITE BÁN HÀNG ĐỒNG HỒ VỚI PHP VÀ
MYSQL .............................................................................................................. 49
3.1THIẾT KẾ GIAO DIỆN TRANG CHỦ ...................................................... 49
3.2THIẾT KẾ GIAO DIỆN TRANG ĐĂNG KÝ ............................................ 49
3.3THIẾT KẾ GIAO DIỆN TRANG ĐĂNG NHẬP ...................................... 50
3.4THIẾT KẾ GIAO DIỆN TRANG HƢỚNG DẪN MUA HÀNG .............. 50
3.5THIẾT KẾ TRANG GIỎ HÀNG................................................................. 51
3.6THIẾT KẾ TRANG QUẢN TRỊ NỘI DUNG WEBSITE ........................ 52
5


3.6.1

Thiết kế trang chủ ............................................................................. 52

3.6.2

Thiết kế giao diện quản lý loại sản phẩm ........................................ 53

3.6.3

Thiết kế giao diện quản lý hiệu sản phẩm ....................................... 53

3.6.4

Thiết kế giao diện trang quản lý chi tiết sản phẩm ........................ 54

CHƢƠNG IV : TỔNG KẾT VÀ ĐÁNH GIÁ HƢỚNG PHÁT TRIỂN ĐỀ TÀI55
4.1ĐÁNH GIÁ ƢU, NHƢỢC ĐIỂM CỦA HỆ THỐNG ................................ 55
4.2PHƢƠNG HƢỚNG PHÁT TRIỂN ............................................................. 55
TÀI LIỆU THAM KHẢO ..................................................................................... 57

6


DANH MỤC CÁC HÌNH ẢNH VÀ BẢNG
Biểu đồ 1: Biểu đồ phân cấp chức năng ........................................................ 40
Biểu đồ 2: Biểu đồ phân cấp chức năng của khách hàng .............................. 41
Biểu đồ 3:Biểu đồ phân cấp chức năng admin ............................................... 42
Biểu đồ 4: Biểu đồ luồng dữ liệu mức khung cảnh ........................................ 42
Biểu đồ 5 : Biểu đồ luồng dữ liệu của khách hàng ......................................... 43
Biểu đồ 6: Biểu đồ luồng dữ liệu của nhà quản trị ........................................ 43
Biểu đồ 7: Biểu đồ thực thể liên kết ................................................................. 44
Bảng 1: Cơ sở dữ liệu của Admin .................................................................... 45
Bảng 2: Bảng sử dụng admin ........................................................................... 45
Bảng 3: Bảng CSDL loại sản phẩm ................................................................. 45
Bảng 4: Bảng sử dụng của loại sản phẩm ....................................................... 46
Bảng 5: Bảng CSDL của hiệu sản phẩm ......................................................... 46
Bảng 6: Bảng sử dụng của hiệu sản phẩm ...................................................... 46
Bảng 7: Bảng CSDL của đăng ký .................................................................... 47
Bảng 8: Bảng sử dụng của đăng ký ................................................................. 47
Bảng 9: Bảng CSDL của chi tiết sản phẩm..................................................... 48
Bảng 10: Bảng sử dụng của chi tiết sản phẩm................................................ 48
Hình ảnh 1: Trang chủ ..................................................................................... 49
Hình ảnh 2: Trang đăng ký .............................................................................. 49
Hình ảnh 3: Trang đăng nhập và thanh toán ................................................. 50
Hình ảnh 4: Trang hƣớng dẫn mua hàng ....................................................... 51
Hình ảnh 5: Trang giỏ hàng ............................................................................. 51
Hình ảnh 6: Trang đăng nhập tài khoản admin ............................................ 52
Hình ảnh 7: Trang chủ quản trị nội dung website ......................................... 52
Hình ảnh 8: Trang quản lý loại sản phẩm ...................................................... 53
Hình ảnh 9: Trang quản lý hiệu sản phẩm ..................................................... 53
Hình ảnh 10: Trang quản lý chi tiết sản phẩm............................................... 54
7


KÍ HỆU CÁC CỤM TỪ VIẾT TẮT
Ý nghĩa

Viết tắt
HTML

HyperText Markup Language : ngôn ngữ đánh dấu siêu văn
bản.

CSS

Cascading Style Sheets : ngôn ngữ định dạng website.

PHP

Hypertext Processor : ngôn ngữ kịch bản máy chủ

SQL

Structured Query Language : ngôn ngữ quản trị hệ CSDL

CSDL

Cơ sở dữ liệu

8


CHƢƠNG I : TÌM HIỂU NGÔN NGỮ NỀN TẢNG TRONG
LẬP TRÌNH WEB VỚI PHP, HTML VÀ CSS
1.1 NGÔN NGỮ HTML (BỘ XƢƠNG WEBSITE)
1.1.1. Khái niệm
HTML (HyperText Markup Language : ngôn ngữ đánh dấu siêu văn bản)
HTML là một ngôn ngữ đánh dấu được thiết kế ra để tạo nên các trang web
với các mẩu thông tin được trình bày trên word wide web. HTML được định
nghĩa như là một ứng dụng đơn giản của SGML và được sử dụng trong các tổ
chức cần đến các yêu cầu xuất bản phức tạp. HTML đã trở thành một chuẩn
internet do tổ chức Word Wide Web consortium(W3C) duy trì. Phiên bản
chính thức mới nhất của HTML là HTML 4.01 (1999). Sau đó, các nhà phát
triển đã thay thế nó bằng XHTML. Hiện nay, HTML đang được phát triển tiếp
với phiên bản HTML5 hứa hẹn mang lại diện mạo mới cho Web.
Các trình duyệt hỗ trợ: IE (Internet Explorer), Mozzila Firefox , Google
Chorm, Safari, Opera,…
1.1.2. Cấu trúc trang HTML
Một trang HTML cơ bản bao gồm 2 phần nằm trong thẻ :
-

Phần đầu(head): nội dung tiêu đề trang web nằm trong thẻ

-

Phần thân(body): nội dung website nằm trong thẻ


//Ngôn ngữ Tiếng Việt

Nội dung tiêu đề
//Bảng mã Tiếng Việt
=> Phần tiêu đề đầu.

//Phần thân, nội dung website



9


1.1.3. Các thẻ HTML cơ bản
Một số thẻ khai báo thông tin trên website (phần head)
-

: thẻ xác định tiêu đề website

-

: thẻ khai báo bảng mã

-

: thẻ khai báo nội dung
mô tả

-

: thẻ khai báo tên tác giả

-

: thẻ khai báo từ khóa cho website
Các thẻ định dạng văn bản (phần body)

-

: thẻ xác định phần thân của website
 Bgcolor : định dạng màu nền website
 Background : xác định ảnh nền
 Text : định dạng màu chữ
 Link :định dạng màu của lien kết
 Alink :định dạng màu của lien kết đang hoạt động
 Vlink :định dạng màu của liên kết đã ghé thăm
 Leftmargin:căn lề trái
 Topmargin:căn lề trên

-

:thẻ tiêu đề
 Có các thẻ

theo chiều kích thước giảm dần

-

: thẻ định dạng đoạn văn bản
 Align:căn chỉnh lề

-


-

: in đậm

-

: in nghiêng

-

: gạch chân

-

: gạch ngang

-

: Đưa 1 ký tự lên trên( mũ) . AX2+ BX+C= 0 –

-

: Đưa 1 ký tự xuống dưới. H2O –

-

: Giữ nguyên đoạn văn bản( Như khi code)

-

: tạo dòng kẻ để phân đoạn ra

10


-

: thẻ định dạng font chữ
 Color :màu chữ
 Size: kích thước

-

:thẻ hình ảnh
 src=“url”: Đường dẫn của ảnh cần hiển thị
 border=“giá_trị”: Đường viền của ảnh
 height=“giá_trị”: Độ cao của ảnh, đơn vị pixel
 width=“giá_trị”: Độ rộng của ảnh
 alt=“”: Nội dung hiển thị thay thế khi ảnh không được hiển thị( Do sai
đường dẫn, ảnh không được tải về,… ).
 title=“” : Tiêu đề của ảnh( Khi di chuột qua ảnh sẽ hiển thị tiêu đề)
 vspace: Khoảng cách từ ảnh đến thành phần khác bên ngoài( Theo chiều
dọc)
 hspace: Khoảng cách từ ảnh đến thành phần khác bên ngoài( Theo chiều
ngang)

-

: thẻ liên kết
 href=“url”: Đường dẫn
 target=“giá_trị”: Phương thức khi mở liên kết. Gồm các giá trị _self( mở
liên kết ở tab hiện tại), _blank( mở với 1 cửa sổ mới), _parent( mở với
frame), _top( khác với _parent, _top mở với cả trang)
 title: Tiêu đề của liên kết

-

: thẻ tạo bảng
 width: Độ rộng của bảng, thường sử dụng giá trị kích thước có đơn vị %
hoặc px
 height: Chiều cao bảng
 bgcolor: Định màu nền của bảng
 background: Định ảnh nền của bảng
 Độ lớn đường viền của bảng
 bordercolor: Màu của đường viền
 align: Căn vị trí của bảng so với toàn website. Giá trị: left, right, center

11


 cellspacing: Định độ dày của khung
 cellpadding: Định khoảng cách từ nội dung đến đường bao của bảng
-

: xác định dòng nằm trên bảng
 height: Khai báo chiều cao của dòng( độ lớn dòng)
 align: Định vị trí nội dung trong dòng( theo chiều ngang): left( trái), right(
phải), center( giữa)
 valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa),
bottom( dưới)

-

: thẻ dữ liệu bảng
 width: Độ rộng của cột
 height: Chiều cao của cột
 align: Định vị trí nội dung trong cột( theo chiều ngang): left( trái), right(
phải), center( giữa)
 valign: Định vị trí nội dung theo chiều dọc: top( trên), middle( giữa),
bottom( dưới)

-

: thẻ định dạng form
 name: Tên của form, đặt tùy ý sao cho dễ nhớ, có mối tương quan với đối
tượng form
 action: Link xử lý dữ liệu
 method: Phương thức truyền dữ liệu, có 2 giá trị là GET và POST
Thẻ tạo danh sách trong HTML

-

    : thẻ danh sách có trật tự
     a: Hiển thị theo kiểu ký tự thường a, b, c…
     A: Hiển thị theo dạng ký tự hoa A, B, C..
     i: Hiển thị dạng La Mã thường i, ii, iii, iv,..
     I: Hiển thị dang La Mã I, II, III, IV,..
     square: Hình ô vuông
     circle: Hình tròn màu rỗng ( màu trắng)
     disc: Hình tròn đặc( chấm tròn màu đen)

    -

      : thẻ tạo danh sách không có sắp xếp

      12


      -

      : thẻ tạo danh sách có mô tả

      -

      Thuộc tính style

      nền)”; font-size: kích thước chữ px(pixel); font-family: phông chữ; textalign: vị trí căn lề>
      Để không bị xuống hàng ta thay thẻ

      bằng thẻ :

      1.2 NGÔN NGỮ CSS (BỘ DA CỦA WEBSITE)
      1.2.1. Khái niệm
      CSS viết tắt của Cascading Style Sheets được hiểu là ngôn ngữ định dạng
      website hay ngôn ngữ định dạng cho các ngôn ngữ đánh dấu siêu văn bản (html,
      xml, svg...), thường dùng để định dạng các thành phần của 1 website như: font
      chữ, độ rộng, màu nền, vị trí,…
      CSS là ngôn ngữ được dùng để miêu tả cách trình bày các tài liệu viết bằng
      ngôn ngữ HTML và XHTML. Ngoài ra ngôn ngữ định kiểu theo tầng cũng có
      thể dùng cho XML, SVG, XUL. Các đặc điểm kỹ thuật của CSS được duy trì
      bởi World Wide Web Consortium (W3C).
      Tác dụng của CSS:
      -

      Làm đẹp website như chia cột, thêm màu sắc, biến đổi các khối.

      -

      Hạn chế tối thiểu việc làm rối mã HTML của trang Web bằng các thẻ quy
      định kiểu dáng (chữ đậm, chữ in nghiêng, chữ có gạch chân, chữ màu), khiến
      mã nguồn của trang Web được gọn gàng hơn, tách nội dung của
      trang Web và định dạng hiển thị, dễ dàng cho việc cập nhật nội dung.

      -

      Tạo ra các kiểu dáng có thể áp dụng cho nhiều trang Web, giúp tránh phải
      lặp lại việc định dạng cho các trang Web giống nhau.
      1.2.2. Nhúng CSS vào website
      Có 3 cách nhúng CSS vào website:

      -

      "Inline Style": Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc
      tính style:

      13


      Đoạn text cần in đậm, gạch chân, màu đỏ
      -

      "Internal Style": Đặt CSS ở đầu trang Web để áp dụng kiểu dáng cho toàn
      bộ trang ấy, khi đó chỉ cần đặt đoạn CSS vào trong cặp thẻ
      -

      "External CSS": Đặt các thuộc tính CSS vào một tệp tin riêng biệt (*.css),
      khi đó có thể tham chiếu đến từ nhiều trang Web khác nhau:
       Ví dụ về nội dung tệp style.css:

      body {font-family:verdana; color:#0000FF;}
       Tham chiếu tới tệp tin CSS trên từ trang Web bằng đoạn mã (mã có thể
      nằm ngoài thẻ ):


      1.2.3. Vùng chọn và các kiểu vùng chọn cơ bản
      Vùng chọn là 1 khu vực trong website được chỉ định áp dụng cho 1 đ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
      Các kiểu vùng chọn cơ bản
       Chọn theo thẻ HTML: Viết CSS cho toàn bộ phần tử trong một thẻ
       Chọn phần tử theo ID: Sử dụng #id viết CSS cho 1 hoặc ít phần tử
       Chọn phần tử theo Class: Sử dụng .class viết CSS cho nhiều phần tử khác
      nhau

      14


       Chọn thứ cấp ( chọn phần tử con)
       Chọn phần tử thứ cấp liền nhau
      1.2.4. Các thuộc tính CSS cơ bản
      -

      Background-color:
       Là thuộc tính sử dụng để định dạng màu nền cho website
       Giá trị:
      + Màu theo tên tiếng anh: red, green, blue, white, black,..
      + Là mã màu theo hệ hex

      -

      Background-image
       Là thuộc tính định ảnh nền cho website background-image:
      url(„liên_kết_ảnh_nền‟);

      -

      Background-repeat
       Xác định việc lặp lại của ảnh nền trong trường hợp ảnh nền nhỏ hơn kích
      thước phần định dạng
       Giá trị:
      + Repeat: Lặp lại nếu ảnh nhỏ hơn kích thước phần cần định dạng
      + No-repeat: Không lặp.
      + Repeat-x: Lặp theo chiều ngang
      + Repeat-y: Lặp theo chiều dọc website

      -

      Background-position
       Định vị trí nền của website
       Giá trị:
      + Left: Bắt đầu từ bên trái
      + Right: Bắt đầu từ bên phải
      + Top: Bắt đầu từ trên.
      + Bottom: Bắt đầu từ dưới
      + Có thể dùng đơn vị % để định vị trí.

      -

      Font-family
       Là thuộc tính định dạng font chữ cho website
       Giá trị là tên các font chữ.

      -

      Font-style

      15


       Định kiểu chữ: Normal( bình thường), Italic( in nghiêng), Oblique( in xiên)
      -

      Font-size
       Định kích thước cho chữ, giá trị là các giá trị độ dài, có thể sử dụng các đơn
      vị: px, em,…

      -

      Font-variant
       Định dạng 1 số kiểu chữ như: small-caps, normal

      -

      Font-weight
       Định dạng kiểu in đậm( bold), in thường( normal) cho 1 thành phần nào đó

      -

      Color
       Định dạng màu chữ trong CSS
       Giá trị:
      + Tên màu tiếng Anh: gray, blue, green,…
      + Bảng mã màu hệ 16: Gồm ký tự # và chuỗi 6 ký tự liền kề

      -

      Text-indent
       Định khoảng thụt vào của 1 dòng bất kỳ

      -

      Text-align
       Định vị trí của 1 đoạn văn bản.
       Giá trị:
      + Left: Căn trái
      + Center: Căn giữa
      + Right: Căn phải.
      + Justify: Căn đều.

      -

      Letter-spacing
       Định khoảng cách giữa các ký tự

      -

      Word-spacing
       Định khoảng cách giữ các từ.

      -

      Text-decoration
       Underline: Chữ gạch chân.
       Line-through: Chữ gạch xiên
       Overline: Chữ có gạch ngang trên đầu

      16


       Blink: Chữ nháy.
       None: Không có 4 giá trị trên
      -

      Text-transform
       Uppercase: Định chữ in hoa
       Lowercase: Định chữ thường
       Capitalize: Định kiểu in hoa chữ cái đầu.

      -

      Border- Đường viền
       Trong border chúng ta có 3 thuộc tính

      a) Border-width: Độ dày của đường viền.
      Cú pháp: border-width: apx bpx cpx dpx; Với: a, b, c, d lần lượt là giá trị độ dày
      đường viền của các cạnh: bên trên, bên phải, bên dưới và bên trái( Theo thứ tự
      chiều kim đồng hồ) Khi 1 trong 4 giá trị kia bị thiếu thì nó sẽ lấy giá trị độ dày
      của cạnh đối diện nó.
      b)Border-style: Kiểu đường viền
      Chúng ta có 1 số giá trị về đường viền như hình bên
      Không nhất thiếu phải định dạng cả 4 cạnh có viền mà có thể sử dụng 4 thuộc
      tính sau: border-top-style( viền trên), border-right-style( viền phải), Borderbottom-style( viền dưới), border-left-style( viền trái).
      c) Border-color: Màu đường viền - Giá trị của border là các loại mã màu.
      -

      Padding
      Biên Là thuộc tính tạo khoảng cách đường viền và nội dung Đối với padding
      chúng ta cũng có 4 thuộc tính: padding-top, padding-right, padding-bottom,
      padding-left Sử dụng để căn chỉnh nội dung so với các viền tương ứng: trên,
      phải, dưới, trái.

      -

      Float
      Là thuộc tinh sử dụng để cố định thành phần của website về 1 phía: trái( left)
      hay phải( right).
      Thường sử dụng trong việc dàn trang, chia cột cho website.
      Giá trị:
       Left: Dàn qua trái.
       Right: Dàn qua phải.

      17


       None: Bình thường.
      -

      Clear
      Là thuộc tinh sử dụng cho các thành phần đi cùng các thành phần sử dụng
      float. Sử dụng để định dạng cách tràn cho thành phần này khi thành phần trước
      nó đặt float và còn khoảng trống.
      Giá trị:
       Left: Tràn sang trái.
       Right: Tràn phải.
       Both: Không tràn, thường dung để tránh tràn các thành phần trong
      website

      -

      Phần tử BLOCK và INLINE
      BLOCK (khối) là các phần tử html khi tạo ra nó sở hữu 1 hàng riêng biệt. Có
      thể dùng tùy chỉnh kích thước của block
       VD:
      ,

      ...,

      ,

      Tài liệu bạn tìm kiếm đã sẵn sàng tải về

      Tải bản đầy đủ ngay

      ×