Đề tài : Tìm hiểu về HTML5 và CSS 3, ứng dụng để viết một website đơn giản

Chia sẻ: Lê Duy Khánh | Ngày: | Loại File: DOC | Số trang:41

Thêm vào BST

Báo xấu

812
lượt xem 275
download

Download Vui lòng tải xuống để xem tài liệu đầy đủ

Hiện nay, công nghệ dành cho thiết bị di động ngày càng phát triển. Nếu như trước đây, bạn phải dùng chiếc máy tính để bàn (MTĐB) cồng kềnh cùng trình duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với máy tính xách tay (MTXT), điện thoại thông minh (ĐTTM) cùng rất nhiều trình duyệt khác (Firefox, Opera…) bạn có thể dễ dàng lướt “net” ở bất kỳ đâu.

Chủ đề:

Bình luận(0) Đăng nhập để gửi bình luận!

Lưu

Nội dung Text: Đề tài : Tìm hiểu về HTML5 và CSS 3, ứng dụng để viết một website đơn giản

BÁO CÁO TỐT NGHIỆP Đề tài Tìm hiểu về HTML5 và CSS 3, ứng dụng để viết một website đơn giản 1
MỤC LỤC LỜI NÓI ĐẦU ................................................................................................................3 CHƯƠNG 1: TỔNG QUAN VỀ HTML5 VÀ CSS ...........................................................6 1. Cơ bản về HTML và CSS ..........................................................................................6 1.1. HTML: ....................................................................................................................6 1.1.1. Định nghĩa về HTML............................................................................................6 1.1.2. Thành phần của HTML: .......................................................................................6 1.1.3. Cơ bản về các thẻ HTML:....................................................................................7 2. CSS:.......................................................................................................................19 II. Những điểm khác và nổi bật của html5 và css3 ......................................................22 A. HTML5: ...................................................................................................................22 B. CSS3: .....................................................................................................................24 Multiple background ..............................................................................................24 Selectors ...............................................................................................................26 Resize ...................................................................................................................26 Font......................................................................................................................26 Chương 2....................................................................................................................28 PHÂN TÍCH THIẾT KẾ VÀ HỆ THỐNG.......................................................................28 1. Sơ đồ chức năng.....................................................................................................28 2. Sơ đồ luồng.............................................................................................................29 2.1. Sơ đồ luồng mức khung cảnh ..............................................................................29 2.2. Sơ đồ luồng dữ li ệu mức đỉnh ..............................................................................29 3. Sơ đồ mức dưới đỉnh ..............................................................................................30 3.1. Quản lý bài viết.....................................................................................................30 3.2. Hiển thị .................................................................................................................31 3.3. Tìm kiếm ..............................................................................................................31 3.4. Quản lý danh mục ................................................................................................32 4. Sơ đồ thực thể kiên kết ...........................................................................................33 Chương 3....................................................................................................................34 2
I. Thiết kế website .......................................................................................................34 1.Tạo các cấp lưu trữ nội dung cho từng chủ đề: ........................................................34 Tạo Menu ....................................................................................................................36  Chọn Menus -> mainmenu -> New -> Articles -> Section Blog Layout ..............36 Ví dụ 2: Thẻ : ...................................................................................................41 II. Kết luận ...................................................................................................................45 III. Hướng phát triển ....................................................................................................45 LỜI NÓI ĐẦU 3
H iện nay, công nghệ dành cho thiết bị di động ngày càng phát triển. N ếu như trước đây, bạn phải dùng chiếc máy tính để bàn (MTĐB) cồng kềnh cùng trình duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với máy tính xách tay (MTXT), điện thoại thông minh (ĐTTM) cùng rất nhiều trình duyệt khác (Firefox, Opera…) bạn có thể dễ dàng lướt “net” ở bất kỳ đâu. Tuy nhiên với các thiết bị, trình duyệt web khác nhau, nội dung hiển thị trên màn hình sẽ khác nhau. Chẳng hạn, trên máy tính b ạn xem trang web này rất tốt, nhưng trên ĐTTM thì giao diện và cấu trúc trang bị xáo trộn. Hay bạn có thể xem phim rất tốt với IE nhưng với Firefox thì không. V ậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt trên bất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung, thông tin trên internet. H TML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có những tính năng ưu việt hơn. Không những vậy, HTML5 còn đem đến cho người dùng những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú hơn. H TML5 và CSS3 cũng làm cho các ứng dụng web và các trang web hấp dẫn hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụng web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ đường co ng, việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các hình ảnh để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline. Tất cả những điều này làm một trang Web trở nên dễ nhìn hơn, bắt mắt hơn và làm cho mọi thứ trở nên sát với những gì mà nhà thiết kế tưởng tượng trong đầu hơn. N goài ra, HTML5 và CSS3 sẽ giúp các nhà thiết kế Wed dễ dàng hơn trong việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến Flash. Một số ví dụ về những gì bạn có thể làm với HTML5, CSS3 và một ít hỗ trợ từ JavaScript đó là A kihabra Games và Star Wars 4
A T-AT Walker. Thiết kế Shack cũng có một số ví dụ hiệu ứng động CSS3 khác. Mặc dù không thể thay thế hoàn toàn cho Flash nhưng HTML5 và CSS3 sẽ có nhiều hứa hẹn trong lĩnh vực này. Đó là lý do em lựa chọn đề tài “Tìm hiểu về HTML5 và CSS 3, ứng dụng để viết một website đơn giản” Trong đề tài thực tập của mình em tập chung vào nghiên cứu các nôi dung chính sau: Chương 1: Tổng quan html5, css3  Khái niệm HTML, CSS  Điểm mạnh của HTML5, CSS3 Chương 2: Phân tích thiết kế hệ thống Chương 3: Thiết kế website  Sử dụng joomla để làm một website tin tức  ứng HTML5 và CSS3 vào trong các bài viết Chương 4: Kết luận và hướng phát triển. Em xin chân thành cảm ơn các thầy, cô giáo khoa Công Nghệ Thông Tin, ĐH Thái Nguyên đã giảng dạy em các bộ môn trong thời gian vừa qua. Đặc biệt là thầy giáo Nguyễn Quốc Bảo là giáo viên hướng dẫn trực tiếp, đã tận tình chỉ bảo em hoàn thành đề tài. 5
CHƯƠNG 1: TỔNG QUAN VỀ HTML5 VÀ CSS 1. Cơ bản về HTML và CSS 1.1. HTML: 1.1.1. Định nghĩa về HTML HTML được biết đến là một loại ngôn ngữ dùng để mô tả hiển thị các trang web. (Viết tắt) *Hyper Text Markup Language chính là HTML * Nhiều người nhầm tưởng HTML là ngôn ngữ lập trình nhưng sự thực không phải như vậy, nó là một ngôn ngữ đánh dấu * Một ngôn ngữ đánh d ấu là mộ t bộ các thẻ đánh dấu * Để có thể miêu tả trang web ta cần đánh dấu các th ẻ HTML 1.1.2. Thành phần của HTML: - Các d ạng th ẻ HTML Th ẻ HTML dùng để viết lên những thành tố HTML  Th ẻ HTML được bao quanh bởi hai dấu lớn hơn < và > nhỏ hơn.  Những th ẻ HTML thường có một cặp giống như và  Th ẻ thứ nhất là thẻ mở đầu và thẻ thứ hai là thẻ kết thúc.  Dòng chữ ở giữ a hai thẻ bắt đầu và kết thúc là nội dung.  Những th ẻ HTML không phân biệt in hoa và viết thường, ví dụ d ạng  và đều như nhau, - Thành phần HTML Thành phần của HTML bắt đầu với thẻ: Nội dung của nó là: web design resources 6
Thành phần của HTML kết thúc với thẻ: Mục đích của thẻ là để xác định mộ t thành ph ần của HTML ph ải được thể hiện dưới d ạng in đậm Phần này bắt đầu bằng th ẻ bắt đầu và kết thúc b ằng thẻ kết thúc . Mục đích của thẻ là xác định thành phần của HTML bao gồm nộ i dung của tài liệu. - Các thuộ c tính của thẻ HTML Những th ẻ HTML đ ều có nh ững thuộ c tính riêng. Những thuộ c tính này cung cấp thông tin về thành ph ần HTML của trang web. Tag này xác định thành phần thân của trang HTML: . Với m ột thuộc tính thêm vào là bgcolor, bạn có th ể báo cho trình duyệt biết rằng màu nền của trang này là màu đỏ, giống như sau: hoặc (#E6E6E6 là giá trị h ex của màu) Th ẻ này sẽ xác định dạng b ảng HTML: với một thuộc tính đường viền (border), bạn có thể báo cho trình duyệt biết rằng bảng sẽ không có đường viền: Thuộ c tính luôn luôn đi kèm một cặp như name/value: name="value" (tên="giá trị") thuộ c tính luôn luôn được thêm vào thẻ mở đầu của thành phần HTML. Dấu ngoặc kép, "red" hoặc 'red' Giá trị thuộ c tính nên được đặt trong dấu trích dẫn " và ". Kiểu ngo ặc kép như vậy thì phổ biến hơn, tuy nhiên kiểu đơn như ' và ' cũng có thể được dùng. Ví dụ trong một vài trường hợp đặc biệt hiếm, ví dụ như giá trị thu ộc tính đã mang dấu n goặc kép rồi, thì việc sử dụng ngoặc đơn là cần thiết. Ví d ụ n ame='ban"tay"den' 1.1.3. Cơ bản về các thẻ HTML: 7
Những th ẻ quan trọng nhất trong HTML là những thẻ xác định Heading, đoạn văn và xuố ng dòng. Headings Headings được đ ịnh dạng với hai th ẻ đến . xác định h eading lớn nhất. xác định heading nhỏ nhất Đây là heading Đây là heading HTML sẽ tự động thêm mộ t dòng trắng trước và sau mỗi heading. Đoạ n văn – paragraphs P aragraphs được định d ạng bởi thẻ . Đây là đoạn văn Đây là mộ t đo ạn văn khác HTML sẽ tự động thêm một dòng trắng trước và sau mỗ i heading. Line Breaks - x uống dòng Th ẻ được sử dụng khi bạn muốn kết thúc mộ t dòng nh ưng lại không muốn bắt đầu một đoạn văn khác. Th ẻ sẽ tạo ra một lần xuống dòng khi bạn viết nó. Đây là một đođo ạn văn với thẻ xuống hàng Th ẻ là một thẻ trống, nó không cần th ẻ đóng dạng Lời chú thích trong HTML Th ẻ chú thích được sử dụng để thêm lời chú thích trong mã nguồn của HTML. Mộ t dòng chú thích sẽ được bỏ qua bởi trình duyệt. Bạn có thể sử dụng chú thích đ ể giải thích về code của b ạn, để sau này b ạn có phải quay lại chỉnh sửa gì thì cũng dễ nhớ h ơn. Bạn cần mộ t d ấu ch ấm than ! ngay sau d ấu nhỏ hơn nhưng không cần ở d ấu lớn hơn. Các ký tự đặc biệt trong HTML 8
Một vài ký tự tương tự như dấu nhỏ hơn
Chữ bạn muốn ở đây Th ẻ được sử dụng để tạo một điểm neo và liên kết b ắt đầu từ đó, thuộc tính href đư ợc sử dụng để chỉ ra tài liệu sẽ được liên kết đến, và chữ ở xu ất hiện ở giữa hai tag < và > sẽ được hiển thị dưới dạng siêu liên kết. Thuộc tính đích đến: Với thuộc tính đích đến, b ạn có th ể xác đ ịnh liên kết đ ến tài liệu khác sẽ đ ư ợc m ở ra ở đâu. Dòng code dưới đây sẽ m ở tài liệu được liên kết trong một cửa sổ trình duyệt m ới. Mời bạn vào diễn đ àn củ a niemvui.net Th ẻ anchor và thuộc tính tên Thuộ c tính tên được sử dụng để tạo một điểm neo đã được đặt tên. Khi sử dụng điểm neo đã được đặt tên trước chúng ta có th ể tạo ra những đường liên kết m à người đọc có thể nhảy trự c tiếp đ ến một phần cụ thể nào đó trên trang web, thay vì h ọ p hải kéo xuống dưới để tìm thông tin. Mộ t dạng như là bookmark vậy! Dưới đây là cú pháp của điểm neo được đ ặt tên trước: Chữ bạn muốn hiển th ị ở đây Thuộ c tính tên được sử dụng để tạo điểm neo. Tên của điểm neo có th ể là b ất cứ thứ gì b ạn muốn. Dòng code sau xác định điểm neo được đ ặt tên trước. Tất cả tutorial ở đ ây Bạn có th ể nhận ra rằng thẻ anchor được đ ặt tên trư ớc được hiển th ị không có gì đặc biệt. Để trự c tiếp liên kết ph ần Photoshop Tutorial, b ạn chỉ phải thêm dấu # và tên của điểm neo và cuố i cùng của một URL. Xem ví dụ sau Quay lại trang tutorials Một đường liên kết đến phần Quay lại trang tutorials TỪ trang "html_chuong_3.htm" sẽ như sau: Quay lại trang tutorials 10
Điểm neo được đặt tên thường được sử dụng để tạo Mục Lục tại trang đầu tiên củ a một tài liệu nhiều trang. Môi chương trong tài liệu đó được cho một đ iểm neo, và liên kết đ ến mỗ i mộ t điểm neo này sẽ đ ược đặt ở trên cùng của tài liệu. Nếu trình duyệt không tìm được điểm neo được chỉ ra từ trước, nó sẽ quay lên phần trên cùng của tài liệu. Thẻ frameset Th ẻ xác định b ạn sẽ chia cửa sổ trình duyệt thành những frame như thế nào. Môi một frame xác đ ịnh mộ t tập hợp các hàng ho ặc cột. Giá trị của hàng ho ặc cộ t chỉ ra diện tích của màn hình mà frame đó sẽ chiếm. Thẻ Frame Th ẻ xác đ ịnh tài liệu HTML nào sẽ được chèn vào mỗ i frame. Ví d ụ: Bảng HTML Với HTML bạn cũng có thể tạo bẳng cho trang web của mình. Bảng được đ ịnh d ạng bởi th ẻ . Một b ảng được chia ra làm nhiều h àng với th ẻ , môi hàng được chia ra làm nhiều cột dữ liệu với thẻ . Cb ữ td là chữ viết tắt của "table data", là nội dung củ a cột d ữ liệu. Mộ t cộ t dữ liệu có thể bao gồ m chữ, hình ảnh, danh sách, đoạn vắn, form và b ảng v.v. Đoạn code trên sẽ h iển thị như thế này trong cử a sổ trình duyệt row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2 Bảng và thuộc tính đường biên 11
Nếu bạn không thiết lập thuộc tính đường biên cho bảng thì bảng của bạn sẽ được hiển th ị mà không có đường biên. Đôi khi nó có thể hữu dụng nhưng thường th ì bạn muốn b ảng của bạn có đường biên. Để h iển thị đ ường biên của một b ảng, bạn phải sử dụng thuộc tính đường b iên. Row 1, cell 1 Row 1, cell 2 H eanding trong bảng Heading trong mộ t bảng được xác đ ịnh bằng thẻ Cộ t trống trong bả ng Cộ t trống không có nội dung thì không được hiển th ị tốt lắm ở hầu hết các trình duyệt. row 1, cell 1 row 1, cell 2 row 2, cell 1 Nó sẽ có d ạng th ế n ày trên trình duyệt row 1, cell 1 row 1, cell 2 row 2, cell 1 Bạn chú ý rằng đường biên bao quanh cộ t trống bị m ất (nhưng trong trình duyệt Mozilla Firefox nó sẽ hiển th ị đường biên) 12
Để tránh điều này xảy ra, bạn thêm một non-breaking space ( ) vào cột trống đó, để làm cho đường biên của nó được hiện th ỉ. row 1, cell 1 row 1, cell 2 row 2, cell 1   Nó sẽ hiển thị như sau ở trình duyệt row 1, cell 1 row 1, cell 2 row 2, cell 1 Thẻ table Mô Tả Tag Vẽ bảng h àng đầu của b ảng h àng trong b ảng ô trong hàng nhãn của bảng nhóm các cộ t Định các thuộc tính củ a cột Hàng Đầu bảng Thân củ a b ảng Hàng cuố i bảng 13
H TML form và trường nhập liệu. HTML form được sử dụng để chọn những dữ liệu nh ập vào khác nhau của n gười dùng. Form Một form là m ột vùng mà nó bao gồm nh ững thành phần của form. Thành phần của form là những thành ph ần cho phép người dùng có thể điền thông tin như là trường chữ, menu thả xuống, nút radio, và các hộp kiểm vào mộ t form. Một form được xác đ ịnh bởi thẻ Nhập liệu Th ẻ form được sử dụng nhiều nhất là thẻ . Lo ại dữ liệu nhập vào sẽ được xác định bởi thuộc tính củ a nó. Những trường nhập liệu được sử d ụng nhiều nhất được giải thích ở dưới đây. Text field Text field được sử dụng khi b ạn muốn người dùng đánh chữ, số v.v.. vào một form. First name: Last name: Nó sẽ xu ất hiện như sau trong trình duyệt First name: 14
Last name: Bạn chú ý rằng bản thân củ a form thì b ị ẩn đi. Hơn n ữa trên hầu h ết các trình duyệt trư ờng text được mặc định là 20 ký tự. 15
Nút radio Nút radio được sử dụng khi bạn muốn người dùng chọn một trong những lựa chọn b ạn đưa ra. Male Female Nó sẽ xu ất hiện như sau trên trình duyệt Male Female Chú ý rằng chỉ có một lựa ch ọn có thể được chọn. Hộp kiểm Hộp kiểm được sử dụng khi b ạn muốn người chọn có thể chọn nhiều lựa chọn hơn. I h ave a bike I h ave a car Nó sẽ như sau trong trình duyệt I have a bike I have a car 16
Thuộ c tính hoạt động cùa form và nút Submit. Khi ngư ời dùng nh ấp chuột vào nút "submit", nội dung củ a form đó sẽ được gửi đ ến mộ t tệp tin khác. Thuộct ính hoạt động của form xác định tên của file mà nó sẽ gửi nội dung đến. Tệp tin đó được xác đ ịnh trong thuộc tính hoạt động củ a form và thường thì nó sẽ có những hành động với dữ liệu nó nhận được. Username: Trong trình duyệt nó nhìn nh ư sau Submit Usern ame: Khi bạn gõ tên b ạn vào trường ch ữ ở trên và nh ấp vào nút Submit, b ạn sẽ gửi thông tin đó vào một trang gọ i là "html_form_action.asp". Trang đó sẽ chỉ cho bạn thấy d ữ liệu nhận được. H ình ảnh trong HTML Với HTML bạn có th ể thể hiện hình ảnh trong tài liệu. Thẻ Image và thuộc tính src Trong HTML, hình ảnh được xác định b ởi th ẻ . Để hiển th ị mộ t hình trên trang web, bạn cần phải sử dụng thuộ c tính src. Src là chữ viết tắt của source. Giá trị của thuộc tính src là địa chỉ URL của hình ảnh mà bạn muốn h iển thị trên trang web. Cú pháp để xác định mộ t tấm hình 17
Địa ch ỉ URL ch ỉ đến điểm mà hình ảnh đư ợc lưu trữ . Một file hình có tên là "boat.gif" được đặt ở thư mục images trên www.niemvui.net có đ ịa chỉ URL là: http://www.niemvui.net/images/boat.gif Trình duyệt sẽ hiển th ị hình ảnh nơi mà có th ẻ image được chèn trong tài liệu. Nếu b ạn muố n thêm thẻ image vào giữa một đo ạn văn, trình duyệt sẽ h iển thị đ oạn văn thứ nh ất trước, sau đó đến hình và sau cùng là đo ạn văn thứ h ai. Thuộc tính Alt Thuộ c tính alt được sử dụng để xác định chữ thay cho hình. Bởi vì n ếu hình đó không hiện được thì một dòng chữ sẽ xu ất hiện đ ể báo cho người đọc b iết. Gía trị củ a thuộ c tính alt là một dòng chữ như sau: Thuộ c tính alt báo cho người đọ c biết họ không xem được hình gì khi mà trình duyệt không load được hình đó. Trình duyệt sau đó sẽ h iển thị dòng chữ thay vì hình ảnh. Bạn nên tạo cho mình thói quen thêm thuộ c tính "alt" vào mỗ i tấm hình trên mộ t trang, để tăng khả năng hiển th ị và giúp những n gười lướt web mà không dùng hình ảnh. H TML Background Một background đẹp có thể làm cho trang của bạn nhìn đẹp m ắt hơn. Backgrounds Th ẻ có hái thuộc tính nơi mà bạn có thể chọn loại background cho m ình. Background có thể là một màu hoặc là một tấm hình. Bgcolor Thuộ c tính bgcolor thiết lập hình nền là m ột màu. Giá trị củ a thuộ c tính này là h ệ số hexadecimal, một giá trị m àu RGB hoặc một tên màu Dòng code trên cùng thiết lập hình n ền thành màu đen. 18
Background Thuộ c tính background thiết lập một tấm hình làm hình n ền. Giá trị của thuộ c tính này là đ ịa chỉ URL của tấm hình bạn muốn sử dụng. Nếu một tấm hình nhở hơn so với cửa sổ trình duyệt, tấm hình đó sẽ tự nhân lên đến khi nào nó che phủ hết cửa sổ trình duyệt. Địa ch ỉ URL có thể là tương đối như là ở dòng code thứ nhất hoặc tuyệt đố i như là ở dòng thứ 2. 2. CSS: CSS là chữ viết tắt của cụm từ tiếng Anh “Cascading Style Sheet”, là kiểu thiết kế sử dụng nhiều lớp đ ịnh dạng chồng lên nhau. CSS được tổ chứ c World Wide Web (W3C) giới thiệu vào năm 1996. Cách đơn giản nh ất để hiểu CSS là hãy coi nó như một ph ần mở rộng củ a HTML đ ể giúp đơn giản hóa và cải tiến việc thiết kế cho các trang web. Mỗi khi bạn bắt đầu mộ t Style Sheets, thì bắt buộc mở bằng và kết thúc bằng và tiếp theo sau đó là khai báo và kết thúc b ằng và sau những bước trên thì b ạn có thể nhìn thấy nguyên đoạn code như sau và ở giữa này là nơi bạn thêm vào sau này * Cấu trúc của CSS: Tag {definition1; definition2;.....; definition n} ví dụ sau đây về dòng lệnh củ a CSS: 19
H2 {font-size: 16pt; font-style: italic; font-family: arial} Ưu điểm của CSS - CSS có thể tách riêng phần định dạng ra khỏi nội dung mộ t trang web, do đó nó sẽ rất thuận tiện khi bạn muốn thay đổi giao diện củ a một trang web. - CSS là m ột sợi chỉ xuyên su ốt trong quá trình thiết kế một website bởi vì nó cho phép nhà thiết kế kiểm soát toàn bộ giao diện, kiểu cách và sự sắp đ ặt của nhiều trang hay nhiều đối trong mộ t lần đ ịnh nghĩa. Để thay đổ i tổng thể hay nhiều đối tượng có cùng Style, bạn chỉ cần thay đổi Style đó và lập tức tất cả các thành phần áp dụng Style đó sẽ thay đ ổi theo. Nó giúp bạn tiết kiệm công sức rất nhiều. - Do định nghĩa các Style có thể được tách riêng ra khỏ i nộ i dung của trang web, chúng được các trình duyệt load một lần và sử dụng cho nhiều lần, do đó nó giúp các trang web nhẹ h ơn và chạy nhanh hơn. Các đặc tính cơ b ản củ a CSS - CSS quy định cách hiển th ị của các th ẻ HTML bằng cách quy đ ịnh các thuộ c tính của các thẻ đó (font chữ, màu sắc). Để cho thuận tiện bạn có thể đ ặt toàn bộ các thuộc tính của th ẻ vào trong mộ t file riêng có phần mở rộng là “.css”, thư ờng người ta hay đặt tên nó là stylesheet.css. CSS nó phá vỡ giới hạn trong thiết kế Web, bởi ch ỉ cần một file CSS có th ể cho phép bạn qu ản lí định dạng và layout trên nhiều trang khác nhau. Các nhà phát triển Web có thể định nghĩa sẵn thuộc tính củ a một số thẻ HTML nào đó và sau đó nó có thể dùng lại trên nhiều trang khác. - Có thể khai báo CSS bằng nhiều cách khác nhau. Bạn có thể đặt đoạn CSS của bạn phía trong thẻ …, hoặc ghi nó ra một file riêng với phần mở rộng “.css”, ngoài ra bạn còn có thể đặt chúng trong từng thẻ HTML riêng biệt. Th ứ tự xếp lớp Style nào sẽ được áp dụng khi có nhiều hơn mộ t style được ch ỉ định cho một thành phần HTML. Tùy vào từng cách đặt khác nhau mà m ức độ ưu tiên cho nó cũng khác nhau. Mức độ ưu tiên này tuân theo thứ tự sau: 1 . Style nội tuyến – Style đặt trong từng thẻ HTML riêng biệt. 20