CSS=Cascading Style Sheets: Mẫu quy định cách thức thể hiện các thẻ HTML Style được đưa vào HTML 4.0 để giải quyết một số vấn đề về thiết kế. Giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web. Có thể định nghĩa nhiều style vào một thẻ HTML
Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Phát triển ứng dụng WEB Web Application Development Giảng viên: ThS Hoàng Anh Đức - Mobile: 0986999984 - Email: ducha.humg@gmail.com Bộ môn Công nghệ phần mềm, Phòng 703, Nhà C12 tầng Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Nội dung học • Giới thiệu CSS • Định nghĩa Style • Phân loại CSS • Các Selector CSS phạm vi ảnh hưởng chúng Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Giới thiệu CSS • CSS=Cascading Style Sheet: Mẫu quy định cách thức thể thẻ HTML • Style đưa vào HTML 4.0 để giải số vấn đề thiết kế • Giúp tiết kiệm nhiều thời gian công sức cho việc thiết kế web • Có thể định nghĩa nhiều style vào thẻ HTML Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Định nghĩa Style • Kiểu • Kiểu … propertyN:valueN;} • Ví dụ: HUMG Ví dụ: TieuDe1 { color: red; font-family: Verdana, sans-serif; } HUMG Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Định nghĩa Style – Ghi Giống Ghi C++ • Sử dụng /* Ghi */ • Vídụ: SelectorName{ property1:value1; /*Ghi chu */ property2:value2; /*Ghi chu */ ……… propertyN:valueN;} Phát triển ứng dụng WEB Giới thiệu HTML Phân loại CSS • Gồm loại: Inline Style Sheet Embedding Style Sheet External Style Sheet Browser Default CSS JavaScript Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Inline Style Sheet • Định nghĩa style thuộc tính style tag HTML • Theo cú pháp kiểu 1: … • Vídụ: This is yellow Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Embedding Style Sheet • Nhúng tag trang HTML • Theo cú pháp kiểu 2: SelectorName{ property1:value1; property2:value2; ……… propertyN:valueN;}… Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Embedding Style Sheet – Ví dụ Embedded Style Sheet P{color: red; font-size: 12pt; font-family: Garamond;} H2{color: green;} This is green This is red, 12 pt and Garamond. Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript External Style Sheet • Mọi style lưu file có mở rộng *.CSS • Theo cú pháp kiểu • Tạo liên kết đến file CSS Trong trang HTML: liên kết tag link: Trong trang HTML: Liên kết tag style với @import url: @import url(URL); Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Pseudo Element • Định dạng dựa vào vị trí ký tự, dòng văn • :first-letter, :first-line • Có thể kết hợp với Selector khác Phát triển ứng dụng WEB Giới thiệu HTML Pseudo Element CSS JavaScript Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question Muốn liên kết xHTML với file định nghĩa CSS ta dùng dòng sau đây? mystyle.css Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question 1: Answer Muốn liên kết xHTML với file định nghĩa CSS ta dùng dòng sau đây? mystyle.css Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question Đặt dòng liên kết với file CSS vùng file xHTML? Trong vùng Trong vùng Ở đầu tài liệu HTML Ở cuối tài liệu HTML Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question 2: Answer Đặt dòng liên kết với file CSS vùng file xHTML? Trong vùng Trong vùng Ở đầu tài liệu HTML Ở cuối tài liệu HTML Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question Làm thêm màu cho tất phần tử ? h1.all {background-color:#FFFFFF} h1 {background-color:#FFFFFF} all.h1 {background-color:#FFFFFF} Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question 3: Answer Làm thêm màu cho tất phần tử ? h1.all {background-color:#FFFFFF} h1 {background-color:#FFFFFF} all.h1 {background-color:#FFFFFF} Chương Giới thiệu CSS 32 Phát triển ứng dụng WEB Giới thiệu HTML Question Thuộc tính thay đổi kích cỡ chữ ? font-style font-size text-style text-size CSS JavaScript Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question Thuộc tính thay đổi kích cỡ chữ ? font-style font-size text-style text-size Chương Giới thiệu CSS 34 Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question Thuộc tính làm chữ thẻ p trở thành chữ đậm? p {text-size:bold} p {font-weight:bold} Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question 5: Answer Thuộc tính làm chữ thẻ p trở thành chữ đậm? p {text-size:bold} p {font-weight:bold} Phát triển ứng dụng WEB Giới thiệu HTML Question Định nghĩa sau cho kết quả: margin-top: 10px; margin-left: 9px margin-bottom: 5px; margin-right: 4px; {margin: 4px 10px 9px 5px;} {margin: 10px 4px 5px 9px;} {margin: 9px 5px 4px 10px;} {margin: 5px 9px 10px 4px;} CSS JavaScript Phát triển ứng dụng WEB Giới thiệu HTML CSS Test 3, question 6: Answer Định nghĩa sau cho kết quả: margin-top: 10px; margin-left: 9px margin-bottom: 5px; margin-right: 4px; margin – canh lề cho nội dung padding – khoảng cách từ lề đến nội dung {margin: 4px 10px 9px 5px;} {margin: 10px 4px 5px 9px;} {margin: 9px 5px 4px 10px;} {margin: 5px 9px 10px 4px;} JavaScript Phát triển ứng dụng WEB Giới thiệu HTML Kiểm tra CSS JavaScript [...]... Element CSS JavaScript Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question 1 Muốn liên kết xHTML với 1 file định nghĩa CSS ta dùng dòng nào sau đây? mystyle .css Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question 1: Answer Muốn liên kết xHTML với 1 file định nghĩa CSS ta... src=”mystyle .css > mystyle .css Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question 2 Đặt dòng liên kết với file CSS ở vùng nào trong file xHTML? Trong vùng Trong vùng Ở đầu tài liệu HTML Ở cuối tài liệu HTML Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question 2: Answer Đặt dòng liên kết... Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Kết hợp Element và Class rules • Ví dụ Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Contextual Selection • Định dạng được áp dụng cho nội dung trong chuỗi tag theo đúng thứ tự • Ví dụ Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Pseudo Class • Định dạng dựa vào trạng thái của liên kết, sự kiện chuột • Có thể kết hợp với Selector... ứng dụng WEB Giới thiệu HTML CSS Độ ưu tiên – Ví dụ JavaScript Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Selector trong CSS • Là tên 1 style tương ứng với một thành phần được áp định dạng • Vídụ: TieuDe1 { color: red; font-family: Verdana, sans-serif; } HUMG Phát triển ứng dụng WEB Giới thiệu HTML CSS Các loại Selector JavaScript Phát triển ứng dụng WEB Giới thiệu... 3 Giới thiệu về CSS 32 Phát triển ứng dụng WEB Giới thiệu HTML Question 4 Thuộc tính nào thay đổi kích cỡ chữ ? font-style font-size text-style text-size CSS JavaScript Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question 4 Thuộc tính nào thay đổi kích cỡ chữ ? font-style font-size text-style text-size Chương 3 Giới thiệu về CSS 34 Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question... JavaScript Phát triển ứng dụng WEB Giới thiệu HTML CSS Các loại Selector JavaScript Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Selector Element • Có hiệu ứng trên tất cả element cùng loại tag • Ví dụ Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript ID rules • Có hiệu ứng trên tất cả element có đúng ID • Ví dụ Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Class rules • Có hiệu ứng trên... H2 Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Phân loại CSS – So sánh, đánh giá Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Độ ưu tiên • Thứ tự ưu tiên áp dụng định dạng khi sử dụng các loại CSS (độ ưu tiên giảm dần) : 1 Inline Style Sheet 2 Embedding Style Sheet 3 External Style Sheet 4 Browser Default Chú ý: Từ CSS3 , thứ tự ưu tiên của Embedding Style và... dụng WEB Giới thiệu HTML CSS JavaScript Pseudo Element • Định dạng dựa vào vị trí đầu tiên của ký tự, của dòng văn bản • :first-letter, :first-line • Có thể kết hợp với Selector khác Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Pseudo Element • Định dạng dựa vào vị trí đầu tiên của ký tự, của dòng văn bản • :first-letter, :first-line • Có thể kết hợp với Selector khác Phát triển ứng dụng WEB. ..Phát triển ứng dụng WEB Giới thiệu CSS HTML JavaScript 3 External Style Sheet – Ví dụ • Trong tập tin MyStyle .CSS H2 { FONT-WEIGHT: bold; • Trong trang Web có sử dụng MyStyle .CSS FONT-SIZE: 16pt; COLOR: white; FONT-STYLE: italic; FONT-FAMILY: Arial; Cascading Style Sheets BACKGROUND-COLOR: red; ... liên kết với file CSS ở vùng nào trong file xHTML? Trong vùng Trong vùng Ở đầu tài liệu HTML Ở cuối tài liệu HTML Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question 3 Làm thế nào thêm màu nền cho tất cả các phần tử ? h1.all {background-color:#FFFFFF} h1 {background-color:#FFFFFF} all.h1 {background-color:#FFFFFF} Phát triển ứng dụng WEB Giới thiệu HTML CSS JavaScript Question