Báo cáo nghiên cứu môn Thiết kế Web cơ bản đề tài "Tìm hiểu về CSS" | Học viện Công nghệ Bưu chính Viễn thông

lOMoARcPSD| 10435767 Tìm hiểu về CSS
BỘ THÔNG TIN VÀ TRUYỀN THÔNG
HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG BÁOCÁONGHIÊNCỨU
Môn: Thiết kế web cơ bản
Đề tài: TÌM HIỂU VỀ CSS I. Mở đầu
1. Tên ề bài: TÌM HIỂU VỀ CSS TRONG THIẾT KẾ WEBSITE 2. Mục ích nghiên cứu:
- Báo cáo những kiến thức liên quan ến ngôn ngữ CSS và cách ể vận hành một
oạn code CSS nhằm thiết kế cho trang web 3. Khách thể và ối tượng nghiên cứu:
- Bài báo cáo nghiên cứu này hướng
ến sinh viên của học viện
Bưu chính viễn thông Hà Nội nhằm giúp hiểu hơn về kiến thức liên
quan ến ngôn ngữ lập trình CSS trong việc thiết kế lên website lOMoARcPSD| 10435767 Tìm hiểu về CSS
- Đối tượng nghiên cứu chính là kiến thức về CSS, cụ thể là về lịch sử
phát triển, khái niệm, ưu nhược iểm, so sánh với HTML, các thuộc
tính của CSS, cấu trúc cơ bản của 1 oạn CSS… 4. Nhiệm vụ nghiên cứu
- Nghiên cứu các kiến thức liên quan mật thiết ến CSS trong thiết kế website. Thông qua ó,
ưa ra những ưu, nhược iểm trong việc
sử dụng CSS và tìm hiểu về cấu trúc của một oạn CSS, thuộc tính của CSS.
5. Đóng góp mới của ề tài:
- Bài báo cáo ưa ra những luận iểm so sánh iểm giống (khác) nhau
về 2 ngôn ngữ lập trình CSS và HTML và ưu nhược iểm khi sử dụng CSS
6. Cơ sở phương pháp luận và phương pháp nghiên cứu
Tổng hợp những phương pháp nghiên cứu ã sử dụng trong bài báo cáo:
1. Phương pháp phân tích - tổng hợp: Phân tích, tổng hợp thông tin
vềCSS như khái niệm, ưu nhược
iểm, cách vận hành,... từ nhiều nguồn khác nhau
2. Phương pháp so sánh: So sánh sự giống và khác nhau giữa CSS
vàHTML thông qua nhiều yếu tố như: chức năng, khái niệm, thành phần, sự liên quan…
3. Phương pháp liệt kê: Liệt kê những thông tin về thuộc tính cơ bản của
CSS và diễn giải ra theo thứ tự
4. Phương pháp lịch sử: Nghiên cứu quá trình hình thành và phát triển
của CSS trong ngành công nghiệp Internet II. Nội dung MỤC LỤC lOMoARcPSD| 10435767 Tìm hiểu về CSS I. MỞĐẦU: 1 .Tên ềtài 2 .Mục íchnghiêncứu 3 .Kháchthểvà ốitượngnghiêncứu 4 .Nhiệmvụnghiêncứu 5 .Đónggópmớicủa ềtài
6. Cơsởphươngphápluậnvàphươngphápnghiêncứu II. NỘIDUNG
1 .Lịchsửhìnhthànhvàpháttriển 2 .KháiniệmcơbảnvềCSS 3 .Ưunhược iểmcủangônngữCSS 4 .Sosánh
iểmgiống,khácnhaugiữa2ngônngữCSSvàHTML
5 .Cấutrúcvàcáchvậnhành 1 oạncodeCSS
6 .CáccáchnhúngCSSvàotrangweb
7 .MộtsốthuộctínhcơbảncủaCSS 8 .Tàiliệuthamkhảo III. KẾT LUẬN 1. Khái quát nội dung
2. Đánh giá, nhận xét chủ quan về nghiên cứu
3. Hạn chế và hướng phát triển
1. Lịch sử hình thành và phát triển
a. Lịch sử hình thành:
- Sự xuất hiện của HTML (1990s): Trước khi có CSS, nội dung web
thường ược trình bày bằng cách sử dụng các thẻ HTML mà chúng
kết hợp cả nội dung và kiểu dáng. Điều này gây khó khăn trong việc
bảo trì và cải thiện giao diện.
- Sáng tạo của CSS (1996): CSS
ược tạo ra ể giải quyết vấn ề
này. Håkon Wium Lie và Bert Bos là hai trong những người ầu tiên
phát triển CSS. Họ ã công bố phiên bản ầu tiên của CSS,
CSS1, vào tháng 12 năm 1996. lOMoAR cPSD| 10435767 Tìm hiểu về CSS
- Phát triển chuẩn (1996-1998): Sau CSS1, W3C (World Wide Web Consortium)
ã tiếp quản và tiếp tục phát triển chuẩn CSS. CSS2
ược công bố vào tháng 5 năm 1998 và ã bổ sung nhiều tính năng
mới, bao gồm hỗ trợ cho bố cục trang và quản lý kiểu dáng.
b. Phát triển và tiếp tục phát triển:
- CSS2 (1998): CSS2 cung cấp nhiều tính năng mới và ược chấp nhận
rộng rãi trong ngành phát triển web.
- CSS2.1 (2004): CSS2.1 là phiên bản sửa lỗi và bổ sung của CSS2. Nó
ã trở thành một phần quan trọng của các trình duyệt web hiện ại.
- CSS3 (Từ năm 2000): CSS3 là một chuỗi các mô- un ược phát triển
ộc lập, mỗi mô- un ịnh nghĩa các tính năng cụ thể của CSS. Các
mô- un này bao gồm nhiều tính năng mạnh mẽ như CSS Grid,
Flexbox, Animation, và nhiều kiểu dáng và hiệu ứng khác.
- Hỗ trợ cho mobile và responsive design: Với sự gia tăng của iện
thoại di ộng và thiết bị di ộng, CSS
ã phải thích nghi ể hỗ trợ giao diện
áp ứng và hiển thị tốt trên các loại màn hình khác
nhau. Điều này ã dẫn ến sự phát triển của các kỹ thuật và mô- un CSS
ể làm cho việc phát triển giao diện di ộng dễ dàng hơn.
- Công cụ và thư viện CSS: Cộng ồng phát triển web ã tạo ra nhiều
công cụ và thư viện CSS như Bootstrap, Foundation, và Materialize CSS
ể giúp phát triển trang web inhanh chóng và dễ dàng hơn.
- Tiêu chuẩn CSS4 (Dự kiến): CSS4 ang trong quá trình phát triển và dự kiến sẽ
ưa vào nhiều tính năng mới và cải tiến cho CSS. CSS
ã trải qua một hành trình dài và phát triển mạnh mẽ, trở
thành một phần quan trọng trong việc xây dựng các trang web hiện
ại và a dạng. Nó tiếp tục ược cải tiến và mở ra nhiều khả năng mới
cho phát triển web trong tương lai. 2. Khái niệm về CSS
- CSS, viết tắt của Cascading Style Sheets, là một ngôn ngữ ịnh dạng
và kiểm soát kiểu dáng của các trang web và tài liệu HTML. Nó cho
phép bạn xác ịnh cách các phần tử HTML sẽ ược hiển thị trên màn
hình, giúp tạo ra giao diện và trình bày trực quan cho trang web.
- Nhiệm vụ chính của CSS là thực hiện việc xử lý giao diện của một
trang web cụ thể. Đó là những yếu tố như màu sắc văn bản, hay
khoảng cách giữa các oạn, hoặc kiểu font chữ, hình ảnh, bố cục, màu nền,… ều có thể thay
ổi, chỉnh sửa theo ý muốn với hỗ trợ của CSS. lOMoAR cPSD| 10435767 Tìm hiểu về CSS
- Sử dụng CSS chính là một công cụ hỗ trợ hữu ích và cần thiết cho
quá trình phát triển, thiết kế webisite. Những công việc mà HTML không xử lý ược sẽ
ược giải quyết tốt với CSS. Nhờ có CSS
giúp mang lại khả năng kiểm soát mạnh mẽ, hiệu quả với quá trình
trình bày một tài liệu HTML cụ thể. Bởi thế mà nó là công cụ thường
ược kết hợp với các ngôn ngữ như HTML hay XHTML. 3. Ưu, nhược
iểm của việc sử dụng CSS: a. Ưu iểm của CSS:
- Tách biệt nội dung và kiểu dáng: CSS cho phép bạn tách biệt nội dung
HTML và kiểu dáng, giúp dễ dàng bảo trì và cải thiện trang web.
- Kiểu dáng linh hoạt: CSS cung cấp nhiều thuộc tính và giá trị, cho
phép bạn tạo ra giao diện a dạng và phức tạp. - Hiệu suất tốt: CSS
ược xử lý bởi trình duyệt một cách nhanh
chóng, giúp trang web tải nhanh hơn và áp ứng tốt trên nhiều thiết
bị. Tích hợp dễ dàng: CSS có thể ược tích hợp vào các tài liệu
HTML bằng cách sử dụng các tệp CSS riêng biệt hoặc viết trực tiếp bên trong tài liệu HTML.
- Bảo trì dễ dàng: Sửa ổi kiểu dáng của trang web có thể ược thực
hiện nhanh chóng bằng cách chỉnh sửa các tệp CSS mà không cần thay ổi nội dung HTML. - Hỗ trợ
a nền tảng: CSS ược hỗ trợ rộng rãi trên các trình duyệt
web và nền tảng, làm cho trang web hiển thị ồng nhất trên nhiều môi trường. b. Nhược iểm của CSS:
- Khả năng xuyên qua trình duyệt: Mặc dù CSS là một tiêu chuẩn web,
nhưng một số tính năng có thể hoạt ộng khác nhau trên các trình duyệt khác nhau,
ặc biệt là trong quá khứ. Khó khăn trong việc tùy
chỉnh giao diện phức tạp: Đôi khi, việc tạo kiểu cho các yêu cầu thiết
kế phức tạp có thể trở nên phức tạp và
òi hỏi nhiều công sức.
- Học cú pháp: CSS có cú pháp riêng của nó, và việc học và hiểu cú
pháp này có thể ôi khi khó khăn
ối với người mới bắt ầu.
- Hiệu năng không tối ưu: Sử dụng quá nhiều CSS và hiệu ứng phức tạp
có thể dẫn ến hiệu năng trang web kém.
- Các trình duyệt cũ không hỗ trợ: Một số trình duyệt cũ không hỗ trợ
CSS3 và các tính năng mới, òi hỏi việc viết mã dự phòng hoặc sử
dụng các kỹ thuật khác ể tạo kiểu.
4. Điểm giống, khác nhau giữa 2 ngôn ngữ CSS và HTMLĐược trình bày qua bảng so sánh dưới ây: lOMoAR cPSD| 10435767 Tìm hiểu về CSS Đặc iểm HTML CSS Khái niệm
HTML là ngôn ngữ ánh dấu CSS là ngôn ngữ lập trình
tiêu chuẩn cho các tài liệu
ược sử dụng ể mô tả cách
ược thiết kế ể hiển thị trên
trình bày tổng thể của tài trang web. liệu bằng ngôn ngữ ánh dấu như HTML. Chức năng HTML dùng ể xác
ịnh cấu CSS tập trung thiết kế cho trúc của trang web trang web ó Thành phần
bao gồm thẻ và nội dung CSS bao gồm bộ chọn và khối khai báo Tính liên quan
không thể ược sử dụng
CSS có thể sử dụng trong trong các tệp CSS các tệp HTML Sao lưu và hỗ
HTML có ít sao lưu và hỗ trợ CSS có nhiều sao lưu và hỗ trợ hơn trợ hơn
Tốc ộ tải trang Tính năng tải trang chậm hơn Tính năng tải trang nhanh hơn HTML và CSS
ều là 2 ngôn ngữ lập trình ộc lập với nhau, cùng
hoạt ộng ể tạo ra các trang web hoàn chỉnh.
5. Cấu trúc và cách hoạt ộng của CSS a. Bố cục của 1 oạn CSS
- Bố cục của một oạn CSS chủ yếu dựa vào hình hộp với mỗi hộp chiếm
những khoảng trống trên trang web với các thuộc tính chính như:
+ Padding: Là các không gian xung quanh nội dung (ví dụ: không
gian xung quanh oạn văn bản).
+ Border: Là các ường nằm ngoài phần ệm.
+ Margin: Là khoảng cách bao quanh phía ngoài của phần tử. b. Cấu trúc của 1 oạn CSS
- Bộ chọn (Selector): mẫu
ể chọn phần tử HTML mà bạn muốn ịnh nghĩa phong cách.
- Khai báo (Declaration): Khối khai báo có thể chứa một hoặc nhiều khai báo và chúng
ược phân tách với nhau bằng dấu chấm phẩy. lOMoAR cPSD| 10435767 Tìm hiểu về CSS
Mỗi khai báo lại bao gồm tên & giá trị ặc tính CSS, dược phân tách
với nhau bằng dấu phẩy. Quy tắc khai báo CSS là chúng luôn phải kết
thúc bằng dấu chấm phẩy, và khối khai báo phải nằm trong các dấu ngoặc móc.
- Thuộc tính (Properties): Thuộc tính là các cách thức mà bạn có thể tạo
kiểu cho một phần tử HTML. Vì vậy, với CSS, bạn chỉ cần lựa chọn
thuộc tính mà bạn muốn tác ộng nhất trong bộ quy tắc bạn ã tạo ra.
- Giá trị thuộc tính: Được nằm ở bên phải của thuộc tính. Việc lựa chọn
một thuộc tính trong số
ó phụ thuộc vào số lần xuất hiện của thuộc tính.
c. Cách hoạt ộng của CSS
- Bước 1: Trình duyệt tải HTML (ví dụ: nhận nó từ mạng).
- Bước 2: Trình duyệt chuyển ổi HTML thành DOM (Document Object Model – Mô hình
ối tượng tài liệu). DOM ại diện cho tài liệu
trong bộ nhớ của máy tính.
- Bước 3: Trình duyệt tìm nạp hầu hết các tài nguyên ược liên kết với
tài liệu HTML, chẳng hạn như hình ảnh nhúng, video và thậm chí cả CSS
ược liên kết. Sau ó, JavaScript ược xử lý trong quá trình này.
- Bước 4: Trình duyệt phân tích cú pháp CSS ã tìm nạp và sắp xếp
các quy tắc khác nhau theo loại bộ chọn của chúng thành các “nhóm”
khác nhau. Ví dụ: phần tử, lớp, ID, v.v. Dựa trên các bộ chọn mà nó
tìm thấy, nó sẽ tìm ra các quy tắc nên
ược áp dụng cho các nút nào
trong DOM và ính kèm kiểu cho chúng theo yêu cầu (bước trung gian này
ược gọi là cây kết xuất).
- Bước 5: Cây kết xuất ược ặt trong cấu trúc mà nó sẽ xuất hiện sau khi các quy tắc ã ược áp dụng cho nó.
- Bước 6: Hình ảnh hiển thị trực quan của trang ược ưa ra màn hình (giai oạn này ược gọi là painting).
6. Cách nhúng CSS vào trang web
a. Nhúng CSS trực tiếp vào tài liệu HTML (Inline CSS): Đặt thuộc tính
style vào thẻ mở của phần tử HTML, giá trị của thuộc tính style là các cặp thuộc tính
ịnh dạng CSS. Mã CSS chỉ tác ộng nên chính phần tử ó. lOMoAR cPSD| 10435767 Tìm hiểu về CSS
b. Nội tuyến (Internal CSS): Với cách nhúng nội tuyến, bạn cần dùng thẻ