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

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 tinCSS 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

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ý 55

V Một số giao diện chính của website 59

5.1 Một số giao diện dành cho người dùng 59

5.2 Giao diện quản trị 67

KẾT LUẬN 68

1 Đánh giá chung 68

2 Hướng phát triển 69

TÀI LIỆU THAM KHẢO 70

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àycà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ữngkhả 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àmviệ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 conngười

Một trong những thành tựu đó mạng internet đã phát triển bùng nổ trong nhữngnă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ó vaitrò 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ớingườ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êngngà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ốtnhấ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 ĐạiHọc Vinh, ban chủ nhiệm khoa Công Nghệ Thông Tin, các thầy cô giáo đã tận tình

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ôitrong 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ưngchắ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ôngcả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

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 khoahọ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 giahà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ựngnhằ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 tinhọ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ênquan 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ậylà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ộngrã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

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ệnviệc dàn trang Việc dàn trang đó bao gồm chia trang web thành các bảng, ô, để addtext, 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ự

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 http://www.trananh.vn/ , http://hongha.asia, http://www.bachphuong.com.vn

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 trongxâ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

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.

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ĩacủa W3C (World Wide Web Consortium) CSS (từ viết tắt của Cascading Style Sheettạ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ể addkiể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 HTMLgọ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ăngcho phép thiết kế nhanh, tuân thủ chuẩn HTML, dễ dàng tùy biến và thay đổi trìnhnhanh chóng việc dàn trang Web Ngoài ra CSS còn biết đến với nhiều khả năngkhá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ìmkiế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 tamuố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

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 Webcủa chúng ta.

Sử dụng các thẻ chuẩn của HTML, như <h1>, <h2>, <h3> sẽ giúp cho máy tìmkiế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ồmcá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 trongviệ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àngtù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êntrang Đ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ácchiế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ợpvới máy tìm kiếm) lên đầu trang HTML trong phần mã Di chuyển phần nội dung duynhất (unique text để phân biệt với duplicate content) này cũng như những đường dẫnquan 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

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ấytrong 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ốicù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 dungcủ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ệuchú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áytì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ánxem 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ànhphầ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áytì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ácliên kết nằm trong javascript hay các mã khác HTML sẽ không được hoặc khó tìmthấ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 Webcủ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ủaWebsite 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ănbả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 trongnhó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ầnmá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ẻ

<h1> 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ựctiế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àiviệ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ữanhiề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ìmkiế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 đườngdẫ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ượngchỉ 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à ítvấ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 EngineResults 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ựcthi 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ạnluô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ủakhá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

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 tinCSS 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ùngkhiếm thị sử dụng dể duyệt Web) Việc bỏ qua đường dẫn là chức năng cho phépngườ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 dungnhư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 đượcmộ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ộtdấu móc nhọn

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 đặtchú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áchmỗ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ộctính trên một dòng giống như sau:

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óilê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ănphả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}

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

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ớpnà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":

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ử

Một thuộc tính ID(mã số) phải là duy nhất bên trong một văn bảnLuậ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:

<h1 id="tieude">

Đâ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ờichú 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ằngdấ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 ứngdụng cho nhiều trang Với một Style Sheet ngoài, chúng ta có thể thay đổi cách nhìncủ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ớiStyle 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"/>

Trình duyệt sẽ đọc chỉ định về style từ file "mystyle.css", và định dạng văn bảntheo 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ảnnà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ănbản đơn có một style duy nhất Bạn định nghĩa các Style Trong bên trong phần đầubằng cách sử dụng thẻ <style> giống như thế này:

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:

<p style = "color: red; margin-left: 20px">Đây là đoạn văn.</p>

Khi một trang chịu nhiều hiệu ứng Style Sheets(Multiple Style Sheets) Nếumộ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 StyleSheet Ngoài thì thuộc tính chung cho h3 sẽ là:

font-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 { background-

color: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 background-image 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ớnhơ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áttrì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ố địnhcủ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: Ảnhnền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định + fixed: Cố định ảnh

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 khichú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

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

đị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 { font-family: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à caps 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 { font-

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 đề h1mà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> 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 <p> 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à

7px và thành phần <p> 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ànhphầ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 {

border:1px dotted #FF0000 }

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áihay 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àntrang (như tạo các trang web 2 column layout hay 3 column layout), hiển thị văn bảnthành, hay thực hiện việc định vị trí ảnh và text Thuộc tính float có 3 giá trị:

+ Left: Cố định phần tử về bên trái

+ 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ộctí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à cascadedự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ínhnă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ệnwebsite 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ớihạ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ể

#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ànhphần con là sidebar và maincontent được định nghĩa như là 2 ô của thành phần mẹ

- Tạo các hiệu ứng động: với tính năng này, việc sử dụng các đoạn mã flash,

javascript trong thiết kế web để tạo nên các hiệu ứng động sẽ được loại bỏ, việc thiết

kế cũng trở nên đơn giản hơn,mã HTML cũng gọn gàng hơn, nhằm giảm thời gianhoàn thành dự án và giúp website trở nên sinh động và đẹp mắt hơn

- Bo góc bằng css3: Trong nhiều thiết kế bo tròn góc của các block, các

element , việc này nhằm làm cho thiết kế mềm mại hơn Tuy nhiên bo góc thì khi

mã html sẽ mất khá nhiều thời gian và mã rườm rà

- Tạo hiệu ứng shadow: Ta có thể sử dụng kĩ thuật này đẻ tạo hiệu ứng bóng đổ

cho text, cho các block, các element Trong thiết kế đôi khi có một chút hiệu ứngshadow sẽ làm cho website có chiều sâu hơn và cool hơn

Ví dụ:

text-shadow: 2px 2px 5px #ccc;

Đoạn mã trên có nghĩa là tạo một shadow cho text với mã màu là #cccccc dịch sang phải 2px(nếu muốn dịch bên trái ta để giá trị âm ví dụ: -2px;), xuống dưới 2px(tương tự, lên trên: -2px;) và độ làm mờ là 5px.

Tương tự, để tạo đổ bóng cho một thể block, hoạc các elemen ta viết như sau:

-moz-box-shadow: 2px 2px 5px black;

-webkit-box-shadow: 2px 2px 5px black;

- Sử dụng Font Face: Nếu như trước kia rất ít font có thể sử dụng được trong

thiết kế web vì không phải máy nào cũng cài sẵn các font mà chúng ta sử dụng để thểhiện nội dung dạng text Thường là người ta chỉ sử dụng các font sẵn có của hệ thốngnhư Arial, Tahoma, Time New Roman Điều này vô hình chung sẽ cản trở sự trìnhbày text theo ý muốn CSS3 cho phép chúng ta sử dụng fonts theo ý muốn của riêngmình, điều này sẽ không phụ thuộc trong hệ thống các client sử dụng font gì

Ví dụ:

Khai báo sử dụng một font như sau:

@font-face {font-family: vnTime ; src: url('.vnTime.ttf');}

Đoạn trên có nghĩa là : nhúng một font đặt tên là vnTime với đường dẫn url tới file font vnTime.ttf Khi khai báo xong chúng ta có thể gọi và sử dụng font bằng cách

thông thường: font-family: vntime;

- Tạo hiệu ứng transition: sử dụng tính năng transition tạo nên tính mềm dẻo

trong giao diện

- ta có một số ví dụ sau:

a{ color: red; -webkit-transition: color 2s linear;}

a:hover{ color: blue;}

Ở ví dụ trên khi đưa chuột vào các đường link trên website màu của các đường link sẽđổi trong khoảng thời gian 2s từ màu red sang màu blue

img {margin-left: 0px; -webkit-transtion: right 2s linear; position: relative;}img:hover {margin-left: 20px;}

Ở ví dụ trên khi đưa chuột vào ảnh thì tấm ảnh di chuyển sang phải 20px trongkhoảng thời gian 2s

- multiple backgrounds: trong css3 cho phép chúng ta có thể sử dụng nhiều

hình background trong cùng một element

Ví dụ: background: url(background-top.gif) top center no-repeat,

url(background-bottom.gif) bottom center no-repeat;

Muốn thêm background nào đó ta chỉ cần thêm đường dẫn background đó màthôi Đoạn trên có nghĩa là hình nền backgound-top.gif luôn được hiển thị nằm ở trên căngiữa, backgound-bottom.gif luôn hiển thị nằm dưới và căn giữa

- Tạo hiệu ứng Gradient: trong css3 chúng ta có thể tạo ra hiệu ứng gradient

cho một element như sau:

Ví dụ:

H1{ Background: -webkit-gradient(linear, left top, left bottom, from(black),color-stop(.5, white), to(blue));}

Trong đoạn mã trên, chúng ta tạo ra hiệu ứng gradient cho tiêu đề h1 trong websitevới kiểu đường thẳng, từ đỉnh trái màu black đến phía dưới trái màu blue, còn 50 % từđỉnh là màu white

- Tạo hiệu ứng reflect: kĩ thuật này được dùng làm đổ bóng tấm hình hoặc các

element trước đây chỉ có photoshop mới làm được

- Tạo các hiệu ứng animation: animation cũng là một dạng tạo hiệu ứng động

như transition, nhưng animation linh hoạt hơn rất nhiều

Để sử dụng animation, trước tiên chúng ta khai báo hay định nghĩa 1 kiểu độngtrước nó gần giống như kiểu khai báo hàm trong các ngôn ngữ lập trình Từ khóa khaibáo như sau:

@-webkit-keyframe [tên người dùng định nghĩa] {

Hiệu ứng động do người dùng định nghĩa}

Ta có một số ví dụ sau:

@-webkit-keyframe moveright{

img:hover{ -webkit-animation: moveright 2s alternate 4;}

Khi đưa chuột vào tấm hình, thì tấm hình di chuyển sang phải theo phương thức tađịnh nghĩa trong thời gian 2s và alternate 4 có nghĩa là chuyển động đó lặp lại 4 lần

Tương tự như vậy ta có khai báo sau:

2.3 Những ưu điểm, nhược điểm khi sử dụng kĩ thuật css3

- Ưu điểm: Trong khi thiết kế người thiết kế luôn mong muốn rằng website của

mình đạt được tính thẩm mỹ cao nhất Website đẹp sẽ thu hút người xem, tạo sự hấpdẫn và cuốn hút về mặt hình thức sẽ dẫn dắt người xem tìm hiểu sâu về nội dung và tạonên sự thành công trong công tác quảng bá thương hiệu

Css3 mang lại những kĩ thuật thiết kế website trở nên nhẹ nhàng hơn, đơn giảnhơn, nó mang lại nhiều ưu điểm nổi bật hơn so với những phiên bản cũ Người thiết

kế sẽ không mất nhiều thời gian để đạt được điều mong muốn trong thiết kế giao diện,tránh tính rườm rà trong mã html, giảm tải được việc sử dụng các đoạn mã javascript

và flash Hơn nữa sử dụng các kĩ thuật css3 giúp giảm đi đáng kể kích thước websitexuống giúp đẩy nhanh tốc độ tải và xử lý mã của trình duyệt

- Tiết kiệm thời gian, đơn giản trong thiết kế

Giả sử, khi chúng ta muốn trình bày nội dung thể hiện trên một thành phần, màchúng ta muốn bo tròn góc của thành phần này để thể hiện nội dung được mềm mại,

có tính thẩm mĩ cao hơn

Để đạt được điều này, trong trường hợp phần nội dung thể hiện là cố định thìngười thiết kế tạo ra một tấm hình với kích thước cố định được bo tròn các góc, sau

đó dùng tấm hình này làm hình nền Với cách làm này người thiết kế phải bỏ thời gian

để thiết kế tấm hình, ngoài ra kích thước của tấm hình cũng lớn điều này làm tăng

kích thước website Nếu trong trường hợp nội dung thể hiện, được lấy từ cơ sở dữliệu, người thiết kế sẽ không xác định được kích thước của thành phần này là baonhiêu để phù hợp với nội dung cần trình bày Để đạt được mục đích này có rất nhiều

kĩ thuật làm, có thể sử dụng mã javascript, flash, cách phổ biến nhất là sử dụng css.Với cách này khi thiết kế chúng ta phải tạo ra bốn tấm hình bo tròn góc tương ứng sau

đó tạo ra 4 thẻ div rỗng dùng 4 tầm hình này làm ảnh nền và dùng thuộc tính position

để định vị 4 tấm hình nằm ở 4 góc của thành phần Như vậy chúng ta cũng phải mấtthời gian thiết kế 4 tấm hình, ngoài ra làm mã HTML thêm rườm rà phức tạp hơn.Trong khi đó để đạt được mục đích này trong css3 chỉ sử dụng một đoạn mã như sau:

Ta xét mộ ví dụ sau, để tạo ra được hiệu ứng khi đưa chuột vào tấm hình, tấmhình sẽ bị đổi màu trong khoảng thời gian do mình đặt trước, kĩ thuật phổ biến là

dùng mã nguồn thư viện mở javascript là Jquery Ngoài việc phải tải 1 tệp 1.3.2.min có kích thước là 56 KB, còn trong phần mã HTML ta còn phải thêm một

$(document).ready(function() {

$("ul.photos li").hover(function() {

var imageOver = $(this).find("img").attr("src"); $(this).find("a.image").css({'background' : 'url(' + imageOver + ') no-repeat center bottom'});

$(this).find("span").stop().fadeTo('normal', 0 , function() {

$(this).hide() //Hide the image after fade});

} , function() { //on hover out

//Fade the image to full opacity

từ khóa, gây ảnh hưởng đến mục đích quảng bá thương hiệu của website trên internet.Bởi vậy kĩ thuật này ngày càng được đào thải, thay vào đó các nhà phát triển css đã

cho ra đời phiên bản css2, sử dụng các thuộc tính float, clear, thì việc dàn trang trở

nên đơn giản hơn, giảm tải được tính phức tạp của mã HTML và kĩ thuật này hiện nayvẫn được sử dụng rộng rãi tuy vậy nhưng nó cũng gặp phải một số hạn chế nhất định,như là: trong khi thiết kế khó hình dung vì nó không có tính trực quan, thêm vào đócông tác bảo trì cũng gặp một số khó khăn nhất định Với css3 kĩ thuật dàn trang trởnên dễ dàng hơn, nó mang tính chất của kĩ thuật thiết kế bảng như trước kia, mà lạithừa hưởng những tính năng linh hoạt của css2 Ta xét ví dụ sau:

Để dàn trang theo dạng mô phỏng vậy trong css3 chúng ta chỉ cần viết mã như sau: