Đang tải... (xem toàn văn)
Bộ giáo trình CSS sẽ cung cấp cho các bạn những kiến thức cơ bản trong CSS, giúp làm cho trang web trở nên đẹp hơn. Bên cạnh đó, giáo trình bao gồm cả lý thuyết và các ví dụ minh họa, các bài tập sẽ giúp bạn nắm bắt được nội dung tốt hơn.
Bài 1. Tổng quan CSS Trước tiên để bắt đầu học CSS tôi xin giới thiệu chức năng của CSS và vì sao phải sử dụng CSS. 1. CSS là gì? CSS viết tắt của Cascading Style Sheets được hiểu là ngôn ngữ định dạng website, thường dùng để định dạng các thành phần của 1website như: font chữ, độ rộng, màu nền, vị trí,… 2. Vì sao phải sử dụng CSS? Như chúng ta đã biết trong các thẻ HTML cũng có các thuộc tính định dạng, tuy nhiên các thuộc tính đó chưa đủ dùng cho 1website thực tế, đồng thời với các bài toán lớn thì những thuộc tính đó xử lý rất khó. Ví dụ: Định dạng font chữ thành màu đỏ cho 100 đoạn văn, sửa nền cho 1000 thành phần,… trong trường hợp trên sử dụng CSS là 1 lựa chọn khôn ngoan nhất. Đồng thời việc sử dụng chuẩn khi lập trình web sẽ có lợi cho việc SEO( Các bạn tự tìm hiểu thêm) 3. Dùng CSS ra sao? Có lẽ đây là câu hỏi của tất cả chúng ta khi bắt đầu 1 ngôn ngữ lập trình nào đó. Trong CSS có 3 cách khai báo và 3 cách định dạng chính Khai báo: - CSS trong: Được đặt trong cặp thẻ <style></style> và chứa ngay tại file .html cần xử lý( hay trong page cần định dạng). - CSS nội tuyến: Là cách khai báo ngay tại thẻ html cần định dạng <p style=“thuộc_tính:giá_trị;”>Đây là đoạn văn sử dụng CSS nội tuyến( Phần in đậm)</p> - CSS ngoài: Là cách khai báo sử dụng 1 file .css ở bên ngoài file .html cần định dạng, trong thực tế chúng ta hay gặp dạng này vì 1 file .css có thể áp dụng cho nhiều page( nhiều file .html) [...]... code và dễ cho quá trình thay đổi, sửa chữa chúng ta sử dụng cách viết tắt sau: Background: color image repeat attachment position; Ví dụ: p{ background: red url(‘banner.png’) no-repeat fixed top left;} Bài tập Bài tập: Thiết kế website như hình bên dưới sử dụng 3 cách khai báo: CSS trong, CSS ngoài, CSS nội tuyến Sử dụng ảnh nền: http://i.imgur.com/D7MBDfU.png Bài 4 Font trong CSS 1 Font-family Là... TT Thái Nguyên nên tôi viết lại những lý thuyết căn bản về HTML, CSS dưới dạng slide để các bạn tham khảo thêm Những phần lý thuyết qua slide chưa phải là đầy đủ nhất nhưng hy vọng nó sẽ giúp ích được cho các bạn Toàn bộ video HTML, CSS: http://bit.ly/vsnet-html -css Các bạn có thể tham khảo thêm 1 số tài liệu do tôi viết về 1 số kinh nghiệm lập trình web tại: http://vietsource.net http://svictu.com... phần qua 1 vị trí khác chúng ta phải làm thế nào? Trong CSS chúng ta có thuộc tinh Position sử dụng để định vị trí của thành phần này so với thành phần khác( Thành phần làm mốc) hoặc so với chính cửa sổ trình duyệt 1 Fixed - Sử dụng để cố định 1 thành phần so với cửa sổ trình duyệt, khi kéo thanh cuộn thì thành phần đó vẫn được cố định so với trình duyệt 2 Relative - Là cách cố định vị trí 1 cách tương... Left với các giá trị tương ứng với cửa sổ trình duyệt( với Fixed), chính nó ( Relative), thành phần mẹ( Đối với Absolute) Bài 10- Position Ví dụ: http://jsbin.com/uvaros/1/edit Xem thêm : http://bit.ly/vsnet-position Do 1 số thành viên VSNet yêu cầu làm TUT dạng văn bản để thuận tiện trong quá trình tham khảo, đồng thời sử dụng trong 1 số buổi sinh hoạt Ban lập trình web- CLB Tin học Trường ĐH CNTT&... dụ: font: italic smallcaps normal 13px Arial, “Time New Roman”; BÀI TẬP: Sử dụng mẫu HTML như bên dưới, sử dụng css để định dạng sao cho kết quả như hình bên phải Làm tối thiểu 3 cách Bài 5 Text trong CSS 1 Color Định dạng màu chữ trong CSS Giá trị: + Tên màu tiếng Anh: gray, blue, green,… + Bảng mã màu hệ 16: Gồm ký tự # và chuỗi 6 ký tự liền kề Ví dụ: #FF7692 Xem them: http://vietsource.net/bang-ma-mau.html... trị trên Ví dụ: http://jsbin.com/irumop/1/edit Bài 5 Text trong CSS 7 Text-transform Uppercase: Định chữ in hoa Lowercase: Định chữ thường Capitalize: Định kiểu in hoa chữ cái đầu BÀI TẬP: Thiết kế website như hình bên: Yêu cầu: Sử dụng CSS để định dạng tất cả các thành phần của website Đối với text phải viết bằng chữ thường và sử dụng CSS để định dạng Bài 6 Pseodu- Phần tử giả Pseodu( hay dịch là... in xiên) 3 Font-size Định kích thước cho chữ, giá trị là các giá trị độ dài, có thể sử dụng các đơn vị: px, em,… Tham khảo đơn vị trong CSS tại: http://vietsource.net/don-vi-trong -css. html 4 Font-variant Định dạng 1 số kiểu chữ như: small-caps, normal Bài 4 Font trong CSS 5 Font-weight Định dạng kiểu in đậm( bold), in thường( normal) cho 1 thành phần nào đó Ví dụ: p{ font-weight: bold } • Font thu gọn:... http://vietsource.net/bang-ma-mau.html + Mã màu RBG +… 2 Text-indent Định khoảng thụt vào của 1 dòng bất kỳ 3 Text-align Định vị trí của 1 đoạn văn bản Giá trị: + Left: Căn trái + Center: Căn giữa + Right: Căn phải + Justify: Căn đều 4 Letter-spacing Định khoảng cách giữa các ký tự Ví dụ: Bài 5 Text trong CSS 5 Word-spacing Định khoảng cách giữ các từ 6 Text-decoration Underline: Chữ gạch chân Line-through: Chữ gạch xiên Overline:... chỉnh 4 vị trí: top, right, bottom, left hay auto Ví dụ: Căn chỉnh website ra giữa body{ margin: auto; } Khi lập trình chúng ta thường sử dụng đoạn code sau để reset *{ margin: 0px; padding: 0px; } Như vậy: Toàn bộ các thành phần của website sẽ có margin và padding bằng 0, để tránh việc các trình duyệt hiển thị khác nhau Xem them: http://bit.ly/vsnet-box-model Bài 7- Box Model( Định dạng kiểu khối) BÀI... http://jsbin.com/ibaqev/2/edit Bài 8- Float & Clear Bài tập: Thiết kế website như hình bên dưới sử dụng css( Không dung table), với tên các thành phần và kích thước cho trước Xem thêm nội dung: http://bit.ly/vsnet-float-clear Bài 9- Block, Inline Trong bài này chúng ta sẽ tìm hiểu về Block và Inline trong CSS, tuy nhiên đây không phải thuộc tinh mà là giá trị quy định cách hiển thị của 1 thành phần nào . Bài 1. Tổng quan CSS Trước tiên để bắt đầu học CSS tôi xin giới thiệu chức năng của CSS và vì sao phải sử dụng CSS. 1. CSS là gì? CSS viết tắt của Cascading Style Sheets. định dạng). - CSS nội tuyến: Là cách khai báo ngay tại thẻ html cần định dạng <p style=“thuộc_tính:giá_trị;”>Đây là đoạn văn sử dụng CSS nội tuyến( Phần in đậm)</p> - CSS ngoài: Là. tất cả chúng ta khi bắt đầu 1 ngôn ngữ lập trình nào đó. Trong CSS có 3 cách khai báo và 3 cách định dạng chính Khai báo: - CSS trong: Được đặt trong cặp thẻ <style></style> và