Tìm hiểu CSS3 và ứng dụng cài đặt website hỗ trợ bán hàng

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

4.2. Biểu đồ phân cấp chức năng....................................................................40
4.3. Biểu đồ luồng dữ liệu...............................................................................40
4.4. Chuẩn hóa dữ liệu......................................................................................45
4.5. Thiết kế bảng dữ liệu ..............................................................................49
4.5. Thiết kế dữ liệu hệ thống mức vật lý......................................................54
..................................................................................................................................58
V. Một số giao diện chính của website...............................................................58
5.1. Một số giao diện dành cho người dùng....................................................58
5.2. Giao diện quản trị.......................................................................................66

1


KẾT LUẬN......................................................................................................................67
1. Đánh giá chung...................................................................................................67
2. Hướng phát triển................................................................................................68
TÀI LIỆU THAM KHẢO.................................................................................................69

2


LỜI MỞ ĐẦU

Cùng với nhân loại bước vào nền kinh tế tri thức, tin học cũng phát triển mạnh
mẽ và đem lại nhiều thành công rực rỡ cho xã hội, các ứng dụng của tin học ngày
càng đi sâu vào cuộc sống con người trở thành một bộ phận không thể thiếu của thế
giới văn minh, việc nắm bắt thông tin nhiều, chính xác trở nên rất quan trọng. Những
khả năng mới mẻ và ưu việt này đã nhanh chóng làm thay đổi cách sống, cách làm
việc, cách học tập, cách tư duy và quan trọng hơn là cách ra quyết định của con
người.

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

4


CHƯƠNG I
TỔNG QUAN ĐỀ TÀI
1.1. Lý do chọn đề tài
Ngày nay, không ai có thể phủ nhận vai trò của tin học trong mọi lĩnh vực khoa
học kĩ thuật đời sống xã hội. Tin học được ứng dụng nhiều trong các công tác quản lý,
phục vụ vui chơi giải trí, nghiên cứu khoa học, đặc biệt là mạng internet mỗi ngày có
hàng chục triệu người truy cập và sử dụng. Bởi vậy, các nhà phát triển, các chuyên gia
hàng đầu trong lĩnh vực công nghệ thông tin luôn không ngừng nghiên cứu, xây dựng
nhằm đưa ra những sản phẩm tốt nhất, và có giá thành thấp trong lĩnh vực ứng dụng tin
học vào đời sống. Và việc vận dụng những nghiên cứu mới đó vào thực tế cũng trở nên
quan trọng hơn nhằm đưa những công nghệ mới vào cuộc sống một cách nhanh nhất.
Ứng dụng thương mại điện tử đã phát triển rầm rộ trong nhưng năm gần đây ở
trên thế giới cũng như trong khu vực, không ai có thể phủ nhận vai trò của nó trong
đời sống. Ở Việt Nam tuy đã bắt đầu ứng dụng thương mại điện tử trong vài năm gần
đây nhưng thực sự chưa phát triển mạnh như các nước trong khu vực và thế giới, vậy
làm sao để thương mại điện tử có thể đến gần hơn với người dân đó là nhiệm vụ hàng
đầu của các nhà tin học Viêt Nam.
Nhận thấy tầm quan trọng đó tôi đã chọn đề tài "tìm hiểu css3 và ứng dụng
cài đặt website hỗ trợ bán hàng", CSS 3 là một kĩ thuật trong thiết kế giao diện
website được tổ chức W3C phát triển. Các kĩ thuật này hiện nay vẫn chưa được sử
dụng rộng rãi trong lĩnh vực phát triển website.
1.2. Đánh giá thực trạng hiện nay
- Ứng dụng css trong thiết kế giao diện website: Trong lĩnh vực công nghệ
thông tin nói chung, và lĩnh vực xây dựng và ứng dụng website nói riêng, thì việc tạo

5

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

quan tâm của Đảng và Nhà Nước trong tương không xa tin học nói chung và
thương mại điện tử nói riêng sẽ được xã hội hóa.

Trong lĩnh vực xây dựng ứng dụng website giới thiệu sản phẩm và bán sản
phẩm qua mạng, nhìn chung nhiều cơ quan doanh nghiệp cũng bước đầu đạt
được một số kết quả nhất định như: website ,
a,
1.3. Yêu cầu của đề tài
- Tìm hiểu và nắm rõ các kĩ thuật thiết kế giao diện trang web với CSS3 trong
xây dựng ứng dụng website.
- Tìm hiểu ứng dụng website trong thương mại điện tử, và ứng dụng những kĩ
thuật thiết kế trang web với CSS3 trong thực tế.
1.4. Phương pháp nghiên cứu
- Kết hợp lý thuyết với thực hành đã được học.
- Tìm hiểu về công nghệ web.
- Tìm hiểu các kĩ thuật thiết kế giao diện trang web.
- Tham khảo quy trình hoạt động của các hệ thống website hỗ trợ bán hàng
đang hoạt động.
1.5. Kết quả cần đạt được
- Hiểu rõ các kĩ thuật thiết kế giao diện trang web với CSS3.
- Cài đặt ứng dụng website hỗ trợ giới thiệu và bán sản phẩm máy tính, thể
hiện được tính ứng dụng và điểm mạnh của kĩ thuật CSS3 trong thiết kế giao diện.
1.6. Bố cục của đề tài

7


Nội dung đề tài gồm có 3 chương:
Chương I: Tổng quan đề tài.
Chương II: Tìm hiểu css3.

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.

9


CSS còn cho phép chúng ta giảm dung lượng trang, điều này đồng nghĩa giảm lệ
mã-nội dung (code-to-content ratio). Khi trang Web được viết, trình bày sạch sẽ thì nó sẽ
giúp cho các máy tìm kiếm đánh chỉ số dễ dàng hơn và nhanh hơn nội dung trang Web
của chúng ta.
Sử dụng các thẻ chuẩn của HTML, như

,

,

sẽ giúp cho máy tìm
kiếm nhận dạng dẽ dàng các nội dung quan trọng trong trang, thay vì các thẻ định dạng
<font>.
Sử dụng các thẻ HTML chuẩn như <ul>, <ol>,< a> để tạo các mục menu bao gồm
các đường dẫn chuẩn tới các thành phần quan trọng khác của trang. Việc này giúp các
đường dẫn trên dễ dàng được nhận diện hơn bởi máy tìm kiếm. Nó giúp việc đánh chỉ số
các thư mục nằm sâu trang chủ được hiệu quả hơn.
Ngoài những lợi ích trực tiếp kể trên, CSS còn mang lại nhiều lợi thế khác trong
việc tối ưu hóa cho công cụ tìm kiếm và các chiến dịch quảng bá khác.
Việc tách rời nội dung và phần trình bày (dàn trang), điều này có thể dễ dàng
tùy biến giữa nội dung, trình bày, thử nghiệm nhanh để tìm ra giải pháp tốt nhất.
Webmaster sẽ mất ít thời gian hơn để bào trì và nâng cấp các tài nguyên trên
trang. Điều này giải phóng thời gian để tập trung vào xây dựng nội dung mới và các
chiến thuật quảng bá, quảng cáo Website.
- Một số kĩ thuật ưu thế của css
Dàn trang với CSS
Với CSS, ta có thể di chuyển các thành phần nội dung quan trọng nhất (phù hợp
với máy tìm kiếm) lên đầu trang HTML trong phần mã. Di chuyển phần nội dung duy
nhất (unique text để phân biệt với duplicate content) này cũng như những đường dẫn
quan trọng khác lên đầu trang mã sẽ giúp bộ máy tìm kiếm tìm thấy thông tin đó
nhanh chóng và dễ dàng.

10

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

như là tiêu đề. Vì vậy việc sử dụng các thẻ tiêu đề HTML chuẩn sẽ giúp văn bản
được hiểu đúng ngữ nghĩa.
Giảm kích thước văn bản với CSS
Việc sử dụng các tệp tin định dạng CSS bên ngoài thay vì nhúng chúng trực
tiếp trong tài liệu HTML sẽ giúp làm giảm kích thước trang Web. Tệp tin càng nhỏ thì
tốc độ tải trang càng nhanh cho người dùng và đương nhiên cả máy truy tìm. Ngoài
việc chỉ phải tải xuống một file HTML nhỏ hơn thì tệp tin CSS còn được chia sẻ giữa
nhiều trang Web và được cho vào cache của các trình duyệt hoặc của công cụ tìm
kiếm. Bởi thế mỗi lần tải một trang thì trình duyệt và máy tìm kiếm khi thấy đường
dẫn CSS trùng lặp thì sẽ không tải xuống nữa.
Số lượng trang phải tải xuống ít đi thì cho phép bạn tận dụng tốt “dung lượng
chỉ số hóa”. Tất nhiên là mỗi máy tìm kiếm sẽ định trước một số lượng tài nguyên
(thời gian, băng thông, …) nhất định để đánh chỉ số trang Web của chúng ta. Nếu như
trang Web của chúng ta dung lượng càng nhỏ thì việc đánh chỉ số càng nhanh và ít
vấn đề hơn và càng nhiều trang được dánh chỉ số một lúc. Càng nhiều trang được
đánh chỉ số thì càng có nhiều trang hơn trong kết quả tìm kiếm (Search Engine
Results Pages - SERPs).
Webmaster có nhiều thời gian cho SEO
Sử dụng CSS cho phép cập nhật nhanh và dễ dàng trang Web. Cho phép thực
thi các tác vụ Webmaster một cách đơn giản nhất và như vậy sẽ có nhiều thời gian để
tối ưu hóa trang Web cho công cụ tìm kiếm và các chiến dịch quảng bá, ví dụ như :
- Sử dụng thời gian để cung cấp thêm các nội dung mới giúp trang Web của bạn
luôn có thứ hạng cao trên máy tìm kiếm.
- Các thay đổi lớn nhỏ và trình bày đều có tác động nhất định tới hoạt động của
khác hàng. Vì thế việc thay đổi phông chữ, màu nền hay các thành phần định dạng

12

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

Nếu giá trị có một chuỗi các từ liên tiếp để chỉ ra một tên nào đó, ta phải đặt
chúng trong dấu nháy kép như thế này "...".
Ví dụ: p{font-family: "sans serif"}
Vì phông chữ có tên là "sans serif" về bản chất là có khoảng trống giữa từ
"sans" và "serif" vì thế phải được đặt trong nháy kép.
Lưu ý: Nếu muốn chỉ định nhiều hơn một thuộc tính, chúng ta phải phân cách
mỗi một thuộc tính bằng một dấu chấm phẩy. Ví dụ dưới đây chỉ ra cách làm thế nào
để định nghĩa một phân đoạn được căn giữa với dòng chữ có màu đỏ
P{text-align: center ; color: red}
Để tạo ra những định nghĩa về style dễ đọc hơn, bạn có thể mô tả mỗi thuộc
tính trên một dòng giống như sau:
P{
Text-align: center;
Color: black;
Font-fmily: arial;
}
Nhóm các phần tử với nhau(Grouping) Bạn có thể nhóm các bộ chọn. Phân
cách mỗi bộ chọn bằng một dấu chấm phẩy. Trong ví dụ dưới đây chúng ta nhóm tất
cả các thành phần "Header". Mỗi một thành phần header sẽ có màu xanh lá cây
Ví dụ: h1, h2, h3, h4, h5, h6 { color: green }
Bộ chọn Lớp(The class Selector) Với một "bộ chọn lớp" mà chúng ta có thể
định nghĩa các style khác nhau cho cùng một kiểu thành phần HTML. Điều này nói
lên rằng nếu như khi muốn có hai kiểu của phân đoạn trong văn bản: một đoạn căn
phải, một đoạn căn giữa. Đây là những gì chúng ta có thể làm với những kiểu đó:
p.right {text-align: right}
p.center {text-align: center}

14

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

Luật về style phía dưới sẽ tương ứng với một phần tử "p" mà có giá trị id là "para1":
P#para1 {
text-align: center;
color: red;
}
Luật về style phía dưới sẽ tương ứng với phần tử đầu tiên mà có giá trị id là " tieude "
#tieude { color: red}
Luật ở trên sẽ tương ứng với thành phần h1 này:

Đây là tiêu đề.
Lời chú thích trong CSS có thể chèn một đoạn chú thích để giải thích mục đích
đoạn mã, nó có thể giúp gợi nhớ lại cho người viết sau nhiều ngày làm việc. Một lời
chú thích sẽ không được trình duyệt hiển thị. Một lời chú thích của CSS bắt đầu bằng
dấu "/*" và kết thúc bằng dấu "*/", giống như sau:
/* đây là lời chú thích *
Làm thế nào để chèn một Style Sheet Khi một trình duyệt đọc một style sheet,
nó sẽ định dạng văn bản theo các quy định có trong Style Sheet đó.
Có ba cách để chèn một Style Sheet:
- Style Sheet Ngoài: Một Style Sheet ngoài là lý tưởng khi style đó được ứng
dụng cho nhiều trang. Với một Style Sheet ngoài, chúng ta có thể thay đổi cách nhìn
của toàn bộ một Website chỉ cần với một file thay đổi. Mỗi trang muốn liên kết với
Style Sheet cần phải sử dụng thẻ <link>. Thẻ <link> đứng bên trong đoạn
<head>...</head>:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css"/>

16


</head>

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ó

những thuộc tính cho bộ chọn h3 như sau:
H3 {color: red; text-align: left; font-size: 14px}
Và một Style Sheet Trong cũng có các thuộc tính bộ chọn h3 như sau:
H3 {color: blue; text-align: right}
Nếu trang web đã được thiết lập Style Sheet Trong mà đồng thời cũng gọi Style
Sheet Ngoài thì thuộc tính chung cho h3 sẽ là:
Color: blue;
Text-align: right;
Font-size: 14px;
Màu cho h3 sẽ kế thừa từ Style Sheet Ngoài và các thuộc tính text-alignment và fontsize sẽ thay thế bởi Style Sheet Trong(đúng theo tính chất ưu tiên)

18


1.4. Một số thuộc tính thường dùng trong css
- Màu nền: Thuộc tính background-color giúp định màu nền cho một thành
phần trên trang web. Các giá trị mã màu của background-color cũng giống như color
nhưng có thêm giá trị transparent để tạo nền trong suốt. Ví dụ sau đây sẽ chỉ cho
chúng ta biết cách sử dụng thuộc tính background-color để định màu nền cho cả trang
web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ và cam. body { backgroundcolor:cyan } h1 { background-color:red } h2 { background-color:orange }.
- Ảnh nền (thuộc tính background-image):
Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn. Để chèn
ảnh nền vào một thành phần trên trang web chúng ta sử dụng thuộc tính backgroundimage. Ví dụ: body { background-image:url(logo.png) }.
Lặp lại ảnh nền (thuộc tính background-repeat):
Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn
hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa.
Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát
trình trạng lặp lại của ảnh nền. Thuộc tính này có 4 giá trị:
+ repeat-x: Chỉ lặp lại ảnh theo phương ngang.
+ repeat-y: Chỉ lặp lại ảnh theo phương dọ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

những font mong muốn trang web sẽ được hiển thị để đặt ở các vị trí ưu tiên. Tuy
nhiên, có thể những font này sẽ không thông dụng lắm nên chúng ta cũng cần chỉ định
thêm một số font thông dụng dự phần như Arial, Tohama hay Times New Roman và
bạn cũng được đề nghị đặt vào danh sách font của mình một generic families (thường
thì nó sẽ có độ ưu tiên thấp nhất). Thực hiện theo cách này thì sẽ đảm bảo trang web
có thể hiển thị tốt trên bất kỳ hệ thống nào. Ví dụ sau chúng ta sẽ viết CSS để quy

20


định font chữ dùng cho cả trang web là Times New Roman, Tohama, sans-serif, và
font chữ dùng để hiển thị các tiêu đề h1, h2, h3 sẽ là Arial, Verdana và các font họ
serif. body { font-family:”Times New Roman”,Tohama,sans-serif } h1, h2, h3 { fontfamily:arial,verdana,serif }.
Thuộc tính font-style:
Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in
nghiêng (italic) hay xiên (oblique) lên các thành phần trang web. Trong ví dụ bên
dưới chúng ta sẽ thử thực hiện áp dụng kiểu in nghiêng cho thành phần h1 và kiểu
xiên cho h2. h1 { font-style:italic; } h2 { font-style:oblique; }
Thuộc tính font-variant:
Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và smallcaps của một font chữ. Một font small-caps là một font sử dụng chữ in hoa có kích cỡ
nhỏ hơn in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để
hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế.
Trong ví dụ sau chúng ta sẽ sử dụng kiểu small-caps cho phần h1 h1 { fontvariant:small-caps;}
Thuộc tính font-weight:
Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình
thường (normal) hay in đậm (bold). Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả độ
in đậm bằng các con số từ 100 – 900. Thử in đậm phần p: p { font-weight:bold }.
Thuộc tính font-size:
Kích thước của một font được định bởi thuộc tính font-size. Thuộc tính này
nhận các giá trị đơn vị đo hỗ trợ bởi CSS bên cạnh các giá trị xx-small, x-small,

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 }

Thuộc tính letter-spacing:
Thuộc tính letter-spacing được dùng để định khoảng cách giữa các ký tự trong
một đoạn văn bản. Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là

22


7px và thành phần

là 5px chúng ta sẽ viết CSS sau: h1, h2 { letter-spacing:7px }
p { letter-spacing:5px }
Thuộc tính text-decoration:
Thuộc tính text-decoration tạo các hiệu ứng gạch chân (underline), gạch xiên
(line-through), gạch đầu (overline), và một hiệu ứng đặc biệt là văn bản nhấp nháy
(blink). Ví dụ sau chúng ta sẽ định dạng gạch chân cho thành phần h1, gạch đầu thành
phần h2 h1 { text-decoration:underline } h2 { text-decoration:overline }
Thuộc tính text-transform:
Text-transform là thuộc tính qui định chế độ in hoa hay in thường của văn bản
mà không phụ thuộc vào văn bản gốc trên HTML. Thuộc tính này có tất cả 4 giá trị:
uppercase (in hoa), lowercase (in thường), capitalize (in hoa ở ký tự đầu tiên trong
mỗi từ) và none (không áp dụng hiệu ứng – mặc định). Trong ví dụ dưới đây chúng ta
sẽ định dạng cho thành phần h1 là in hoa, h2 là in hoa đầu mỗi ký tự. h1 { texttransform:uppercase } h2 { text-transform:capitalize}
Thuộc tính margin:
Thuộc tính margin trong CSS cũng được dùng để canh lề cho cả trang web hay
một thành phần web này với các thành phần web khác hay với viền trang. Ví dụ sau
sẽ chỉ cho chúng ta biết cách canh lề cho một trang web. body { margin-top:80px;
margin-bottom:40px; margin-left:50px; margin-right:30px; border:1px dotted
#FF0000 } Hoặc gọn hơn chúng ta sẽ viết như sau: body { margin:80px 30px 40px
50px; border:1px dotted #FF0000 }
Thuộc tính padding:
Padding có thể hiểu như là một thuộc tính đệm. Padding không ảnh hưởng tới
khoảng các giữa các các đối tượng như margin mà nó chỉ quy định khoảng cách giữa

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

thành, hay thực hiện việc định vị trí ảnh và text.
+ Left: Cố định phần tử về bên trái.

24

Thuộc tính float có 3 giá trị:


+ Right: Cố định phần tử về bên phải.
+ None: Bình thường.
Thuộc tính clear:
Đi cùng với thuộc tính float, trong CSS còn có một thuộc tính là clear. Thuộc
tính clear là một thuộc tính thường được gán vào các phần tử liên quan tới phần tử đã
được float để quyết định hướng xử sự của phần tử này.
II. TÌM HIỂU VỀ CSS3
2.1. Giới thiệu css3
CSS3 được xây dựng dựa trên các nguồn gốc của các style, selectors và cascade
dựa trên phiên bản cũ của CSS 2.0 trước đó. Nó cho phép thực thi thêm một số tính
năng mới, bao gồm cả mới selectors, pseudo-class và các properties. Bằng cách sử
dụng các tính năng mới này, việc thiết kế trình bày, dàn trang trong thiết kế giao diện
website sẽ trở nên dễ dàng hơn rất nhiều. Ngoài ra, việc sử dụng các tính năng mới
hạn chế được sử dụng hình ảnh trong thiêt kế giao diện, làm cho mã HTML bớt rườm
rà và dung lượng website cũng được giảm đi đáng kể.
2.2. Một số kĩ thuật sử dụng css3
- Kĩ thuật dàn trang: - trong css3 kĩ thuật dàn trang trở nên đơn giản hơn rất
nhiều nhờ thuộc tính display: table, kĩ thuật này sẽ thay thế cho phương pháp dùng
bảng cổ điện như xưa.
Ta có ví dụ sau.
#content {display: table; width: 650px;}
#content div#sidebar{display: table-cell; width: 300px;}

#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