MỤC LỤC
LỜI MỞ ĐẦU....................................................................................................................3
CHƯƠNG I...................................................................................................................5
TỔNG QUAN ĐỀ TÀI...................................................................................................5
1.1. Lý do chọn đề tài.........................................................................................5
1.2. Đánh giá thực trạng hiện nay......................................................................5
1.3. Yêu cầu của đề tài.......................................................................................7
1.4. Phương pháp nghiên cứu..............................................................................7
1.5. Kết quả cần đạt được.................................................................................7
1.6. Bố cục của đề tài.........................................................................................7
CHƯƠNG II................................................................................................................9
TÌM HIỂU CSS 3...........................................................................................................9
I. TỔNG QUAN CSS.................................................................................................9
1.1. Giới thiệu CSS...............................................................................................9
1.2. Một số điểm mạnh của CSS........................................................................9
1.3. Cú pháp CSS.................................................................................................13
1.4. Một số thuộc tính thường dùng trong css................................................19
II. TÌM HIỂU VỀ CSS3..........................................................................................25
2.1. Giới thiệu css3............................................................................................25
2.2. Một số kĩ thuật sử dụng css3....................................................................25
2.3. Những ưu điểm, nhược điểm khi sử dụng kĩ thuật css3.......................31
CHƯƠNG III..............................................................................................................36
CÀI ĐẶT WEBSITE HỖ TRỢ BÁN SẢN PHẨM MÁY TÍNH - LINH KIỆN MÁY
TÍNH............................................................................................................................36
I. Mục đích ...........................................................................................................36
II. Ngôn ngữ cài đặt và công cụ hỗ trợ xây dựng website................................37
III. Đặc tả yêu cầu.................................................................................................37
3.1. Yêu cầu chức năng.....................................................................................37
3.2. Yêu cầu phi chức năng..............................................................................38
IV. Phân tích và thiết kế hệ thống......................................................................38
4.1. Mô tả hệ thống...........................................................................................38

Một trong những thành tựu đó mạng internet đã phát triển bùng nổ trong những
năm gần đây và đã trở thành một thế mạnh và là một phương tiện truyên thông có vai
trò rất lớn trong xã hội, những ứng dụng trên mạng internet đã trở nên thân thiện với
người dân hơn khi mà tỉ lệ người sử dụng internet đang tăng lên như hiện nay.
Việc xây dựng các website phục vụ riêng cho các tổ chức, công ty, thậm chí là
các cá nhân đã trở nên quen thuộc. Chỉ với một vài thao tác đơn giản, một người bất
kì có thể trở thành chủ của một website giới thiệu về bản thân, gia đình...
Đối với các công ty doanh nghiệp, tổ chức thì việc xây dựng các website riêng
ngày càng trở nên cấp thiết. Thông qua website các thông báo, các công văn, các quết
đinh cũng như thương hiệu được sẽ đến được với những dân một cách nhanh nhất.
Với vai trò to lớn là vậy, nhưng để làm sao có được một chất lượng dịch vụ tốt
nhất, giá thành rẻ nhất, điều này đã thúc đầy các chuyên gia, các nhà phát triển hàng
đầu trong lĩnh vực công nghệ thông tin không ngừng nghiên cứu sáng tạo để phục vụ
mục đích chung một cách tốt hơn.
Để hoàn thành đề tài này, tôi xin chân thành cảm ơn ban giám hiệu trường Đại
Học Vinh, ban chủ nhiệm khoa Công Nghệ Thông Tin, các thầy cô giáo đã tận tình

3


giảng dạy, trang bị cho tôi những kiến thức cần thiết trong những năm học tại trường.
Xin gửi lời cảm ơn đến bạn bè, gia đình tôi đã động viên tinh thần cũng như vật chât,
và đặc biệt là thầy giáo Th.s Nguyễn Quang Ninh đã tận tình giúp đỡ hưỡng dẫn tôi
trong thời gian làm đề tài.
Mặc dù đã cố gắng hoàn thành đồ án trong phạm vi và khả năng cho phép nhưng
chắc chắn sẽ không tránh khỏi những thiếu sót. Tôi rất mong nhận được sự thông
cảm, góp ý của các Thầy, Cô và các bạn.

Sinh viên thực hiện:
Phạm Văn Toàn



ra một sản phẩm tốt, có chất lượng đáp ứng được nhu cầu đạt ra luôn được đạt lên
hàng đầu.
Khi thế giới web mới ra đời người ta thường dùng các thẻ HTML để thực hiện
việc dàn trang. Việc dàn trang đó bao gồm chia trang web thành các bảng, ô, để add
text, add ảnh, kiểu chữ, màu sắc...
Khi mà công nghệ web ngày càng phát triển người ta nhận thấy việc dàn
trang bằng các bảng ngày càng trở nên bất tiện. Khối lượng mã HTML lớn cùng
với việc khó khăn trong kiểm soát các vùng nội dung trên trang web là những lý do
khiến HTML ngày càng thất thế. Bởi vậy xu hướng việc dàn trang chuyển sang
hoàn toàn bằng các thẻ DIV của CSS ngày càng được sử dụng nhiều trong kĩ thuật
thiết kế trang web. Trong những năm trở lại đây, với sự ra đời của CSS2 và sự phát
triển mạnh mẽ, nó đã hoàn toàn chiếm lĩnh vị trí số một trong công nghệ thiết kế
giao diện website. Mặc dù có được những ưu thế nổi trổi song nhiều vấn đề chưa
được hoàn thiện như: giảm chi phí trong thiết kế, giảm kích thước của website
nhằm tăng tốc độ tải và xử lý, tính đơn giản hóa trong thiết kế và một điều quan
trọng là thân thiện hơn với các công cụ tìm kiếm trên mạng hiện nay giúp việc
quảng bá website được tốt hơn.
- Ứng dụng website trong thương mại điện tử: nhìn chung hiện nay trên thế
giới cũng như trong khu vực thương mại điện tử đã và đang rất phát triển và đã
trở thành chiến lược của nhiều nước. Ở Việt Nam chúng ta cũng vậy, việc đưa ứng
dụng website trong thương mại điện tử cũng đã khởi sắc trong vài năm gần đây,
song hiệu quả hoạt động chưa cao, các dịch vụ chưa đến được với người dân.
Nguyên nhân một phần là do tin học hóa trong xã hội chưa đạt được kết quả như
mong muốn, niềm tin của người dân với thương mại điện tử chưa cao. Song với sự

6



Chương III: cài đặt website hỗ trợ bán sản phẩm máy tính- linh kiện máy tính.

8


CHƯƠNG II
TÌM HIỂU CSS 3

I. TỔNG QUAN CSS
1.1. Giới thiệu CSS
Công nghệ CSS được đề cập đầu tiên bởi W3C vào năm 1996. Theo định nghĩa
của W3C (World Wide Web Consortium) CSS (từ viết tắt của Cascading Style Sheet
tạm dịch là bảng kiểu xếp chồng) là một ngôn ngữ giúp người thiết kế web có thể add
kiểu vào tài liệu web (như kiểu font chữ, màu sắc, khoảng cách v.v...).
1.2. Một số điểm mạnh của CSS
Để có thể viết ngữ nghĩa đầy đủ, gọn gàng với dung lượng mã nguồn HTML
gọn nhẹ theo một trình tự tốt nhất có thể nhằm giúp cho các máy tìm kiếm đánh chỉ số
dễ dàng. Mặt khác, lại có thể áp dụng tất cả các kiểu định dạng và dàn trang mà chúng
ta muốn để thỏa mãn thiết kế. CSS quả là một công cụ mạnh và nhiều lợi thế.
Cascading Style Sheets (CSS) được sử dụng rộng rãi ngày nay nhờ khả năng
cho phép thiết kế nhanh, tuân thủ chuẩn HTML, dễ dàng tùy biến và thay đổi trình
nhanh chóng việc dàn trang Web. Ngoài ra CSS còn biết đến với nhiều khả năng
khác: CSS có thể mang lại nhiều lợi thế trong quảng bá Web, tối ưu hóa cho máy tìm
kiếm SEO/SEM. Có thể tóm lược vài lợi thế như sau:
Chuyển dời các nội dung quan trọng, đặt biệt là các phần chứa văn bản mà
chúng ta muốn đứng thứ hạng cao, trên các phần nội dung liên quan khác. Chúng ta
muốn đặt những phần nội dung quan trọng này tại đầu trang, trong phần mã HTML.
Đây có lẽ là điểm quan trọng nhất của việc ứng dụng CSS trong quảng bá Web
(SEO/SEM). Nó sẽ có nhiều ảnh hưởng nhiều tới thứ hạng trang Web của chúng ta.




Các máy tìm kiếm thường coi trọng các phần nội dung văn bản được tìm thấy
trong phần trên cùng của tệp tin mã nguồn hơn là các phần còn đâu đó hoặc ở cuối
cùng tệp tin. Vì thế, nếu chúng ta có 2000 dòng trong tệp tin mã nguồn mà nội dung
của văn bản quan trọng mà chúng ta muốn đề cập lại nằm ở tận dòng thứ 1400 thì liệu
chúng ta có thể đoán được đâu là nội dung quan trọng của tài liệu này không ?. Máy
tìm kiếm cũng như chúng ta thôi, thông qua những người quản trị mạng, nó sẽ đoán
xem chúng ta coi đâu là phần quan trọng nhất của văn bản.
Kỹ thuật cơ bản nhất là chia nhỏ mã nguồn HTML ra làm nhiều phần nhỏ mà vị
trí của chúng được xác định một cách độc lập trong tệp tin định dạng văn bản. Thành
phần HTML thông dụng hay được dùng nhất là thẻ <div>.
Tối ưu trang Web cho chỉ số hóa
Các thẻ chuẩn trên giúp cho đường dẫn dễ dàng được tìm thấy bởi các bộ máy
tìm kiếm. Và đương nhiên trang Web sẽ được chỉ số hóa dễ dàng hơn. Ngược lại các
liên kết nằm trong javascript hay các mã khác HTML sẽ không được hoặc khó tìm
thấy bởi bộ máy tìm kiếm, điều này làm giảm khả năng được đánh chỉ số trang Web
của chúng ta. CSS có thể giúp chúng ta làm rất nhiều thành phần quan trọng của
Website thay vì dùng javascript.
Dàn trang phần nội dung với CSS
Khi sử dụng CSS thì chúng ta còn có thể trình bày nội dung đúng với ngữ nghĩa
(semantic) của nó (Ví dụ các thẻ chỉ định nghĩa và mức độ quan trọng của đoạn văn
bản), nhưng chúng ta lại vẫn có thể tùy ý hiển thị trang theo thiết kế.
Người thiết kế trang Web sủ dụng<font> để định dạng các tiêu đề, người trong
nhóm lập trình lại dùng font này và các thẻ in đậm để điền các nội dung khác. Một lần
máy tìm kiếm đọc tài liệu một cách hơi khác so với người dùng thường. Nó không
đọc nội dung đã được biên dịch (render) và vì thế nó sẽ không hiểu các thẻ font được
sử dụng để nhấn mạnh mức độ quan trọng của các tiêu đề. Mặt khác nó sẽ côi các thẻ

11


khác sẽ được tiến hành nhanh chóng và đơn giản nếu chúng ta sử dụng các tệp tin
CSS nằm ngoài văn bản.
Sử dụng CSS để trang Web được truy cập dễ dàng hơn
Một ví dụ điển hình của kỹ thuật này có thể bắt gặp tại nhiều trang cung cấp
“bỏ qua liên kết” để thích ứng với màn hình của người dùng (Thiết bị người dùng
khiếm thị sử dụng dể duyệt Web). Việc bỏ qua đường dẫn là chức năng cho phép
người dùng khiếm thị tách bỏ phần sơ đồ mục lục để xem trực tiếp nội dung, hoặc bỏ
qua nội dung để duyệt mục lục. Nó được tạo ra để phục vụ người dùng khiếm thị
nhưng một số người thiết kế Web lại ẩn nó đi. CSS cung cấp menu này trong phần mã
nguồn HTML để các trình duyệt của người dùng khiếm thị hiển thị được nội dung
nhưng nó lại ẩn đi với các trình duyệt bình thướng khác.
1.3. Cú pháp CSS
Cú pháp của một CSS được tạo nền từ ba phần: một "bộ chọn - selector", một
"thuộc tính - property" và một "giá trị - value":
Bộ chọn{thuộc tính: giá trị}
"Bộ chọn" thông thường là các phần tử/thẻ HTML mà bạn muốn chỉ định,
thuộc tính là các tính chất mà bạn muốn thay đổi, và mỗi thuộc tính có thể mang được
một giá trị. Thuộc tính và giá trị được phân cách bởi một dấu ":" và được bao bởi một
dấu móc nhọn.
Ví dụ:
Body{color: black}
Thì:
Body: là "Bộ chọn".
Color: là "thuộc tính".
Black: là "giá trị".

13



Trong văn bản HTML chúng ta phải sử dụng "thuộc tính lớp".
Ví dụ:

Phân đoạn này sẽ can bên phải.

Phân đoạn này sẽ nằm giữa.

Chúng ta cũng có thể bỏ qua tên thẻ trong bộ chọn để định nghĩa một style cái
mà sẽ được sử dụng bởi tất cả các thành phần trong HTML mà có mặt trong một lớp
nào đó. Trong ví dụ phía dưới, tất cả các thành phần HTML với class="center" sẽ
được căn giữa:
.center {text-align: center}
Trong đoạn mã phía dưới thì thành phần "h1" và thành phần "p" có
class="center". Điều này có nghĩa là cả hai phần tử sẽ tuân theo những luật trong bộ
chọn ".center":

Đây là tiêu đề được căn chỉnh ở giữa

Đây là đoạn văn được căn chỉnh giữa.

Bộ chọn Mã(The id Selector) Bộ chọn mã thì khác với bộ chọn lớp. Trong khi
một bộ chọn lớp có thể ứng dụng cho một vài phần tử trong một trang, thì một bộ trọn
mã luôn luôn áp dụng cho chỉ một phần tử.

15


Một thuộc tính ID(mã số) phải là duy nhất bên trong một văn bản

Trình duyệt sẽ đọc chỉ định về style từ file "mystyle.css", và định dạng văn bản
theo file này. Một Style Sheet Ngoài có thể được viết trong một bộ soạn thảo văn bản
nào đó. Tệp đó không được chứa các thẻ html. Style Sheet nên được lưu lại với phần
mở rộng là "tên_file.css".
- Style Sheet Trong: Một Style Sheet Trong cần phải được sử dụng khi một văn
bản đơn có một style duy nhất. Bạn định nghĩa các Style Trong bên trong phần đầu
bằng cách sử dụng thẻ <style> giống như thế này:
<head>
<style type = "text/css">
H1 {color: red}
P {text-align: center}
</style>
<head>
Trình duyệt lúc này sẽ đọc các chỉ định style, và định dạng văn bản theo các chỉ
định trong đó.
- Style Nội tuyến(Inline Styles): Một Style nội tuyến mất rất nhiều ưu điểm của
các Style Sheet bình thường bởi việc trộn lẫn nội dung với việc thể hiện. Sử dụng
phương pháp tiết kiệm này, giống như khi một style được áp dụng cho một sự kiện
riêng lẻ của một thành phần. Để sử dụng các Style nội tuyến chúng ta sử dụng thuộc
tính style trong thẻ có liên quan. Thuộc tính thẻ có thể bao gồm bất cứ mẫu CSS nào.

17


Ví dụ dưới đây sẽ đưa ra cách làm thế nào để thay đổi màu và việc căn trái cho một
đoạn:

Đây là đoạn văn.

Khi một trang chịu nhiều hiệu ứng Style Sheets(Multiple Style Sheets). Nếu
một vài thuộc tính cùng được thiết lập cho cùng bộ chọn với style sheets khác nhau,
giá trị sẽ được kế thừa nhiều hơn từ các chỉ định đó. Ví dụ, một Style sheet Ngoài có

+ repeat: Lặp lại ảnh theo cả 2 phương, đây là giá trị mặc định.
+ no-repeat: Không lặp lại ảnh.
Khóa ảnh nền (thuộc tính background-attachment):
Background-attachment là một thuộc tính cho phép bạn xác định tính cố định
của ảnh nền so với với nội dung trang web. Thuộc tính này có 2 giá trị: + scroll: Ảnh
nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định. + fixed: Cố định ảnh

19


nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi
chúng ta đang cuộn trang web.
Định vị ảnh nền (thuộc tính background-position):
Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình.
Tuy nhiên với thuộc tính background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị trí
nào (trong không gian của thành phần mà nó làm nền).
Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có
khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị chính xác như centimeters,
pixels, inches,… hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top,
bottom, left, right
Font chữ
Thuộc tính font-family:
Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các font sẽ
được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt
kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy
cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên…cho đến
khi có một font phù hợp. Có hai loại tên font được dùng để chỉ định trong font-family:
family-names và generic families. + Family-names: Tên cụ thể của một font. Ví dụ:
Arial, Verdana, Tohama,… + Generic families: Tên của một họ gồm nhiều font. Ví
dụ: sans-serif, serif,… Khi lên danh sách font dùng để hiển thị một trang web sẽ chọn

small, medium, large, x-large, xx-large, smaller, larger. Tùy theo mục đích sử dụng
của website có thể lựa chon những đơn vị phù hợp. Ví dụ trang web mục đích phục vụ
chủ yếu là những người già, thị lực kém hay những người dùng sử dụng các màn hình

21


máy tính kém chất lượng thì chúng ta có thể cân nhấc sử dụng các đơn vị qui đổi như
em hay %. Như vậy sẽ đảm bảo font chữ trên trang web của luôn ở kích thước phù
hợp. Ở ví dụ sau trang web sẽ có kích cỡ font là 20px, h1 là 3em = 3 x 20 = 60px, h2
là 2em = 40px. body { font-size:20px } h1 { font-size:3em } h2 { font-size:2em }.
Màu chữ (thuộc tính color) :
Để định màu chữ cho một thành phần nào đó trên trang web chúng ta sử dụng
thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ. Ví dụ sau
chúng ta sẽ viết CSS để định màu chữ chung cho một trang web là đen, cho tiêu đề h1
màu xanh da trời, cho tiêu đề h2 màu xanh lá chúng ta sẽ làm như body
{ color:#000 } h1 { color:#0000FF } h2 { color:#00FF00}
Thuộc tính text-indent :
Thuộc tính text-indent cung cấp khả năng tạo ra khoảng thụt đầu dòng cho
dòng đầu tiên trong đoạn văn bản. Giá trị thuộc tính này là các đơn vị đo cơ bản dùng
trong CSS. Trong ví dụ sau chúng ta sẽ định dạng thụt đầu dòng một khoảng 30px
cho dòng văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành phần

p
{ text-indent:30px }
Thuộc tính text-align :
Thuộc tính text-align giúp thêm các tính năng canh chỉnh văn bản cho các
thành phần trong trang web. Cũng tương tự như các lựa chọn canh chỉnh văn bản
trong các trình soạn thảo văn bản thông dụng như MS Word, thuộc tính này có tất cả
4 giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) và justify
(canh đều). Trong ví dụ sau chúng ta sẽ thực hiện canh phải các thành phần h1, h2 và
canh đều đối với thành phần

h1, h2 { text-align:right } p { text-align:justify }

phần nội dung và viền của một đối. Ví dụ: { margin:80px 30px 40px 50px;
border:1px dotted #FF0000 }

23


Thuộc tính Border:
Thuộc tính border-width: Border-width là một thuộc tính CSS quy định độ rộng
cho viền của một đối tượng web. Thuộc tính này có các giá trị: thin (mảnh), medium
(vừa), thick (dày), hay là một giá trị đo cụ thể như pixels.
Thuộc tính border-color: Border-color là thuộc tính CSS quy định màu viền
cho một đối tượng web. Thuộc tính này nhận tất cả đơn vị màu CSS hỗ trợ.
Thuộc tính border-style: Border-style là thuộc tính CSS quy định kiểu viền thể
hiện của một đối tượng web. CSS cung cấp tất cả 8 kiểu viền tương ứng với 8 giá trị:
dotted, dashed, solid, double, groove, ridge, inset và outset.
Thuộc tính Height & Width
-Thuộc tính Width: Width là một thuộc tính CSS dùng để quy định chiều rộng
cho một thành phần web.
Ví dụ: p { width:700px; }
- Thuôc tính Max-width: Max-width là thuộc tính CSS dùng để quy định chiều
rộng tối đa cho một thành phần web.
- Thuộc tính Min-width: Min-width là thuộc tính CSS dùng để quy định chiều
rộng tối thiểu cho một thành phần web.
- Thuộc tính max-width: Height là một thuộc tính CSS dùng để quy định chiều
cao cho một thành phần web.
Ví dụ p { height:300px }
Thuộc tính float:
Float là một thuộc tính CSS dùng để cố định một thành phần web về bên trái
hay bên phải không gian bao quanh nó. Đây là một thuộc tính rất cần thiết khi dàn
trang (như tạo các trang web 2 column layout hay 3 column layout), hiển thị văn bản

#content div#maincontent{display: table-cell; width: 350px;}
Trong ví dụ trên thành phần id="content" được hiện thị theo dạng bảng, 2 thành
phần con là sidebar và maincontent được định nghĩa như là 2 ô của thành phần mẹ.

25

---