Bài giảng có các nội dung trình bày Giới thiệu về CSS; phân loại, cách tạo CSS; định dạng mẫu cho lớp, các thuộc tính định dạng CSS,... Để biết rõ hơn về nội dung chi tiết, mời các bạn cùng tham khảo.
ThS Nguyen Ho Minh Duc • Bảng kiểu (style sheet) nhằm thoả mản nhu cầu – Thẩm mỹ – Giữ tính thống cho trang HTML – Định dang số tính chất thơng thường lúc cho tất đối tượng trang • Tiện ích CSS : – Tiết kiệm thời gian – Khi thay đổi định dạng cần thay đổi CSS, trang khác tự động cập nhật thay đổi – Có thể dùng CSS với JavaScript để tạo hiệu ứng đặc biệt • Bất lợi CSS: – Khơng trình duyệt chấp nhận hồn tồn – Phải thời gian để học cách sử dụng Phân loại : Có loại – Inline style – Internal style – External style Inline style: Cú pháp: • Ví dụ : Internal style : Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn – Cách tạo: Taọ bảng mẫu chung phần đầu trang cặp tag – Sử dụng: Trong phần body, nội dung muốn sử dụng định dạng theo bảng mẫu đặt tag định nghĩa phần head Cú pháp: External style : • Là bảng kiểu lưu trữ thành file bên liên kết với trang HTML Bảng kiểu áp dụng ảnh hưởng cho tất trang website Cách tạo: – Tạo tập tin văn – Nhập tên tag muốn định dạng thuộc tính theo mẫu: – Lưu tập tin với định dạng Text Only có phần mở rộng css • Ví dụ: Tạo tập tin Sheet1.css Cách dùng External style: Cú pháp: Ví dụ: 10 • • • • Có loại tag chung kết nối Class hay ID để tạo tag tuỳ ý, cần phân biệt đối tượng cấp khối cấp hàng Đối tượng cấp khối đoạn văn, thường bắt đầu dịng chứa đối tượng cấp khối khác gồm tag: P, H1, Body, table Đối tượng cấp hàng khơng tạo dịng mới, thường chứa văn yếu tố hàng khác gồn tag: B, Font… Các tag DIV SPAN: kết nối với phần tử cấp khối ID để tạo tag tuỳ ý Trong DIV phù hợp với đối tượng cấp khối, SPAN phù hợp với đối tượng cấp hàng 16 Cú pháp: Bằng cách thêm CLASS ID vào tag DIV định mẫu cần có Trong phần Style bảng mẫu bên ta nhập: với ClassName tên lớp sử dụng hoặc: với IDName tên định danh tag DIV 17 • Áp dụng tag cấp khối tuỳ ý vào trang HTML Tại đầu phần văn muốn định dạng, ta nhập cú pháp” (bên chứa tag) 18 • Ví dụ : 19 Kết nối nhiều kiểu định dạng văn tag Cú pháp: Trong phần Style, nhập cú pháp: Hoặc: 20 Áp dụng tag hàng tuỳ ý vào trang HTML: Tại đầu đoạn văn muốn định dạng, nhập cú pháp: Hoặc: 21 • Ví dụ : 22 ĐỊNH DẠNG VĂN BẢN –Chọn font: font-family: familyname1, familyname2… –Tạo chữ nghiêng: Font-style: italic –Tạo chữ đậm: Font-weight: bold –Định cỡ chữ: Font-size: xx-small x-small, small, medium, large, x-large, xx-large Fontsize:12pt (giá trị cụ thể) –Có thể định dạng thuộc tính chữ nghiêng, đậm cở chữ lúc: Font: italic bold size 23 – Màu chữ: – Màu chữ: – Định khoảng từ, ký tự: – Canh lề cho văn bản: – Thay đổi dạng chữ: 24 25 • Ví dụ: 26 – bacground-color: màu – background-image: ảnh – Background- position: vị trí đặt ảnh gồm giá trị:left, right, center, top, bottom,inherit – background-repeat: ảnh lặp – Repeat: lặp trang – Repeat-x: lặp theo chiều ngang – Repeat-y: lặp theo chiêù đứng – background-attachment: giữ ảnh cuộn /khơng cuộn theo trang trình duyệt 27 • Ví dụ: 28 • • • • • • • border-style: kiểu đường viền border-collapse: collapse: đường viền lún border-bottom-style border-left-style:double border-right-style:double Định dạng cạnh border-top-style khung border-left-color 29 • • • • • Text-Decoration:none: khơng gạch A:visited{color:#rrggbb} A:link{styles cho vị trí chưa xem} A:active{style cho link click} A:hover{style trỏ lướt qua link} a:hover { color: #FF00FF;} 30 ... gian để học cách sử dụng Phân loại : Có loại – Inline style – Internal style – External style Inline style: Cú pháp: • Ví dụ : Internal style : Là bảng mẫu thích hợp cho trang riêng lẻ với nhiều... • • • • border -style: kiểu đường viền border-collapse: collapse: đường viền lún border-bottom -style border-left -style: double border-right -style: double Định dạng cạnh border-top -style khung border-left-color... định dạng cần thay đổi CSS, trang khác tự động cập nhật thay đổi – Có thể dùng CSS với JavaScript để tạo hiệu ứng đặc biệt • Bất lợi CSS: – Khơng trình duyệt chấp nhận hồn tồn – Phải thời gian