Bài giảng Thiết kế web: Chương 3 - Trường ĐH Thủ Dầu Một

Chia sẻ: _ _ | Ngày: | Loại File: PDF | Số trang:15

Thêm vào BST

Báo xấu

17
lượt xem 7
download

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

Bài giảng Thiết kế web: Chương 3 Ngôn ngữ CSS, cung cấp cho người học những kiến thức như: Các loại style; Khai báo và sử dụng style; Cách tạo các loại style; Các thuộc tính định dạng; Thiết lập các thuộc tính cho liên kết; Đơn vị trong CSS; Một số thuộc tính mới trong CSS3. Mời các bạn cùng tham khảo!

Chủ đề:

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

Lưu

Nội dung Text: Bài giảng Thiết kế web: Chương 3 - Trường ĐH Thủ Dầu Một

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT NỘI DUNG KHOA KỸ THUẬT - CÔNG NGHỆ 1. Giới thiệu CSS 2. Các loại style 3. Khai báo và sử dụng style THIẾT KẾ WEB 4. Cách tạo các loại style 5. Các thuộc tính định dạng 6. Thiết lập các thuộc tính cho liên kết Chương 3 7. Đơn vị trong CSS NGÔN NGỮ CSS 8. Một số thuộc tính mới trong CSS3 (Cascading Style Sheet) Phone: 0274. 3834930 Website: http://et.tdmu.edu.vn 18/01/2019 Bài giảng Thiết kế Web 2 1. Giới thiệu CSS 1. Giới thiệu CSS  CSS (Cascading Style Sheets) là một ngôn ngữ quy  Tại sao CSS? định cách trình bày cho các tài liệu viết bằng HTML,  CSS cung cấp nhiều thuộc tính trình bày dành cho các đối tượng với sự sáng tạo trong việc kết hợp các thuộc tính XHTML, XML, SVG, hay UML,… giúp mang lại hiệu quả cao.  CSS đã được hỗ trợ bởi tất cả các trình duyệt và hiển thị “như nhau” trên mọi hệ điều hành.  CSS đưa ra phương thức áp dụng từ một file CSS ở ngoài. Có hiệu quả đồng bộ khi tạo một website có hàng trăm trang hay khi muốn thay đổi một thuộc tính trình bày nào đó.  CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn. 18/01/2019 Bài giảng Thiết kế Web 3 18/01/2019 Bài giảng Thiết kế Web 4 1. Giới thiệu CSS 2. Các loại style  Có 4 loại style:  Inline Style (Style được qui định trong 1 thẻ HTML cụ thể)  Internal Style (Style được qui định trong phần của 1 trang HTML )  External Style (style được qui định trong file .CSS ngoài)  Browser Default (thiết lập mặc định của trình duyệt)  Thứ tự ưu tiên: Mức ưu tiên giảm dần từ trên xuống 18/01/2019 Bài giảng Thiết kế Web 5 18/01/2019 Bài giảng Thiết kế Web 6 1
3. Khai báo và sử dụng style 3. Khai báo và sử dụng style Chú ý khi viết style Khai báo style  Style phân biệt chữ hoa, chữ thường  Để ghi chú trong style sử dụng: Selector { /* Property: Value; Đoạn ghi chú } */ Trong đó: + Selector: Đối tượng sẽ áp dụng trình bày. + Property: Các thuộc tính quy định cách trình bày. Nếu có nhiều hơn một thuộc tính thì phải dùng một dấu ; (chấm phẩy) + Value: Giá trị thuộc tính 18/01/2019 Bài giảng Thiết kế Web 7 18/01/2019 Bài giảng Thiết kế Web 8 3. Khai báo và sử dụng style 3. Khai báo và sử dụng style Style áp dụng cho thẻ cụ thể Tạo lớp (có thể áp dụng cho nhiều thẻ)  Gắn với thẻ cụ thể: Đặt selector là tên_thẻ.tên_lớp  Trường hợp 1 thẻ: Đặt selector là tên_thẻ p.loai1{ p { color:red; color: red; } } p.loai2{ color:blue;  Khai báo đồng thời nhiều thẻ: Viết danh sách tên thẻ } phân cách bởi dấu phẩy  Không gắn với thẻ cụ thể: bỏ phần tên_thẻ đi, giữ lại dấu h1,h2,h3,h4,h5,h6{ chấm: .loai3{ font-family:arial; color:green; } } 18/01/2019 Bài giảng Thiết kế Web 9 18/01/2019 Bài giảng Thiết kế Web 10 3. Khai báo và sử dụng style 3. Khai báo và sử dụng style Sử dụng lớp Định danh (id)  Đặt thuộc tính class của thẻ=“tên_lớp”:  Tương tự như class. Thay dấu chấm (.) thành dấu thăng (#).  Cho thẻ cụ thể: tên_thẻ#định_danh{…}  Tổng quát: #định_danh{…}  Ví dụ: Đoạn này màu đỏ  Ví dụ: p#doan1{ Style không có hiệu color:red; lực } Tiêu đề màu xanh #loai2{ Đoạn này màu xanh color:blue; } 18/01/2019 Bài giảng Thiết kế Web 11 18/01/2019 Bài giảng Thiết kế Web 12 2
3. Khai báo và sử dụng style 3. Khai báo và sử dụng style Sử dụng định danh  Ví dụ: Xét đoạn mã HTML sau đây : Danh Sách Các Tỉnh, Thành Phố Của Việt Nam  Mỗi định danh là duy nhất trên trang  Đặt thuộc tính id của thẻ = định_danh Hà Nội TP. Hồ Chí Minh Đà Nẵng  Ví dụ: Thừa Thiên Huế Khánh Hòa Đoạn này màu đỏ Quãng Ninh Tiêu đề xanh Tiền Giang  Làm thế nào để tên các thành phố là màu đỏ và tên các tỉnh là màu  Chú ý: Không nên đặt tên class, id với ký tự đầu là xanh da trời  Dùng class để tạo thành 2 nhóm. chữ số, nó sẽ không làm việc trong Firefox. 18/01/2019 Bài giảng Thiết kế Web 13 18/01/2019 Bài giảng Thiết kế Web 14 3. Khai báo và sử dụng style 3. Khai báo và sử dụng style  Ví dụ: …  Ví dụ: li.tp { color:#F00; } Với ví dụ bên nhưng yêu cầu Hà Nội sẽ có màu đỏ sậm, TP. li.tinh { color:#00F; } Hồ Chí Minh màu đỏ, Đà Nẵng màu đỏ tươi và tên các tỉnh là Danh Sách Các Tỉnh, Thành Phố Của Việt Nam màu xanh da trời  Dùng id để nhận dạng mỗi thành phố, class để nhóm các tỉnh. Hà Nội TP. Hồ Chí Minh Đà Nẵng Thừa Thiên Huế Khánh Hòa Quãng Ninh Tiền Giang 18/01/2019 Bài giảng Thiết kế Web 15 18/01/2019 Bài giảng Thiết kế Web 16 3. Khai báo và sử dụng style 4. Cách tạo các loại style  Ví dụ: … Inline style #hanoi { color:#790000 } #hcmc { color:#FF0000 }  Là kiểu được gán cho một dòng hoặc một đoạn văn bản, bằng #danang { color:#FF00FF } cách sử dụng thuộc tính style bên trong tag muốn định dạng .tinh { color:#00F; } Danh Sách Các Tỉnh, Thành Phố Của Việt Nam  Cú pháp: TP. Hồ Chí Minh Đà Nẵng Nội dung văn bản muốn định dạng Thừa Thiên Huế Khánh Hòa Quãng Ninh Tiền Giang 18/01/2019 Bài giảng Thiết kế Web 17 18/01/2019 Bài giảng Thiết kế Web 18 3
4. Cách tạo các loại style 4. Cách tạo các loại style Inline style Internal style  Ví dụ:  Là style thích hợp cho trang riêng lẻ với nhiều văn bản.  Cách tạo: Tạo style chung trên phần đầu trang trong cặp tag … This paragraph has an inline style applied to it  Cú pháp: This paragraph is displayed in the default style. Can you see the difference in this line selector {property1:value1;property2:value 2; …} ..... 18/01/2019 Bài giảng Thiết kế Web 19 18/01/2019 Bài giảng Thiết kế Web 20 4. Cách tạo các loại style 4. Cách tạo các loại style Internal style External style  Ví dụ:  Là style được lưu trữ thành một file bên ngoài và được liên kết với trang HTML. Style này sẽ được áp dụng và ảnh hưởng cho tất cả các trang của một website.  Cách tạo: h1,h2 { color: limegreen; font-family: Arial }  Tạo một tập tin văn bản mới  Nhập tên các selector theo mẫu: selector {property1: value1; property2:value2;…} This is the H1 element  Lưu tập tin với định dạng Text Only và có phần mở rộng .css This is the H2 element  Cách dùng: Liên kết tập tin css vào file html theo cú pháp: This is the H3 element with its default style as displayed in the browser 18/01/2019 Bài giảng Thiết kế Web 21 18/01/2019 Bài giảng Thiết kế Web 22 5. Các thuộc tính định dạng Thuộc tính Background (tt) Thuộc tính Background Thuộc tính giá trị Ví dụ Mô tả Thuộc tính giá trị Ví dụ Mô tả left Xác định thành phần right Xác định vị trí hình ảnh nền được cố định background- top background- nền cho thành phần. hoặc cuộn so với position bottom position: left top; Được sử dụng kèm với background- fixed background-attachment trang. px giá trị background-image. attachment scroll :fixed; Được sử dụng kèm % với giá trị background- repeat-x image background- repeat-y background- Xác định hình ảnh nền background-color repeat repeat repeat: repeat-x; được lặp như thế nào. mã màu :#ff0000; no-repeat background- Xác định màu nền cho tên màu background-color: red; Một hoặc nhiều background: Có giá trị riêng lẻ hoặc color thành phần. Giá trị rgb background-color: background giá trị của các url(ico_arrow.gif) tổng hợp các thuộc tính rgb(255,0,0); thuộc tính trên repeat-x left top; trên. background- url(đường dẫn background-image: Xác định hình ảnh nền image hình) url(ico_arrow.gif); cho thành phần. 18/01/2019 Bài giảng Thiết kế Web 23 18/01/2019 Bài giảng Thiết kế Web 24 4
Box Model Thuộc tính Border  Box model (mô hình hộp) mô tả cách mà CSS định Thuộc tính giá trị Ví dụ Mô tả border-color: dạng khối không gian bao quanh một thành phần. mã màu #ff0000; Xác định màu sắc Gồm padding (vùng đệm), border (viền) và margin border-color tên màu border-color: red; của đường viền. Giá trị rgb border-color: (canh lề) và các tùy chọn. rgb(255,0,0); Xác định hình border-style kiểu border border-style: solid;dạng của đường p{width:200px; margin:30px 20px; viền. padding:20px 10px; border:1px solid #000; px text-align:justify } thin Xác định bề dày border-width border-width: 5px; medium của đường viền. Trong CSS, box model (mô hình hộp) thick mô tả cách mà CSS định dạng khối không Một hoặc nhiều Xác định tất cả gian bao quanh một thành phần. giá trị của các border: #ff0000 border các đường viền thuộc tính định solid 2px; xung quanh. dạng. 18/01/2019 Bài giảng Thiết kế Web 25 18/01/2019 Bài giảng Thiết kế Web 26 Thuộc tính Border (tt) Thuộc tính Border (tt) Thuộc tính Giá trị Ví dụ Mô tả Các kiểu border border-top- Giá trị Mô tả Hiển thị mã màu color: red; Xác định màu sắc border-top-color tên màu border-top- cho đường viền Xác định thành phần sẽ không có none Đường viền hiển thị Giá trị rgb color: bên trên. đường viền. rgb(255,0,0); Giống như giá trị none, nhưng được hidden Đường viền hiển thị Xác định hình dùng cho table. border-top-style: border-top-style kiểu border dạng cho đường Xác định đường viền cho thành phần solid; dotted Đường viền hiển thị viền bên trên. là dấu chấm (dotted). px Xác định đường viền cho thành phần Xác định bề dày dashed Đường viền hiển thị thin border-top- là gạch ngang (dashed). border-top-width cho đường viền medium width: 5px; Xác định đường viền cho thành phần bên trên. solid Đường viền hiển thị thick là đường thẳng nét (solid). Một hoặc Xác định đường viền cho thành phần border-top: double Đường viền hiển thị nhiều giá trị Xác định đường là 2 đường thẳng nét (double). border-top #ff0000 solid của các thuộc viền bên trên. 2px; tính định dạng. 18/01/2019 Bài giảng Thiết kế Web 27 18/01/2019 Bài giảng Thiết kế Web 28 Thuộc tính Border (tt) Thuộc tính Border (tt) Thuộc tính Giá trị Ví dụ Mô tả Thuộc tính Giá trị Ví dụ Mô tả border-right- border-bottom- mã màu Xác định màu sắc mã màu Xác định màu sắc border-right- color: #ff0000; border-bottom- color: #ff0000; tên màu cho đường viền tên màu cho đường viền color border-right- color border-bottom- Giá trị rgb bên phải. Giá trị rgb bên dưới. color: red; color: red; Xác định hình Xác định hình border-right- border--right- border-bottom- border-bottom- kiểu border dạng cho đường kiểu border dạng cho đường style style: solid; style style: solid; viền bên phải. viền bên dưới. px px Xác định bề dày Xác định bề dày border-right- thin border-right- border-bottom- thin border-bottom- cho đường viền cho đường viền width medium width: 5px; width medium width: 5px; bên phải. bên dưới. thick thick Một hoặc Một hoặc border-right: border-bottom: nhiều giá trị Xác định đường nhiều giá trị Xác định đường border-right #ff0000 solid border-bottom #ff0000 solid của các thuộc viền bên phải. của các thuộc viền bên dưới. 2px; 2px; tính định dạng. tính định dạng. 18/01/2019 Bài giảng Thiết kế Web 29 18/01/2019 Bài giảng Thiết kế Web 30 5
Thuộc tính Border (tt) Thuộc tính Border (tt) Thuộc tính Giá trị Ví dụ Mô tả border-left-color: Thuộc tính border-collapse mã màu Xác định màu sắc border-left-color tên màu #ff0000; cho đường viền  Thuộc tính border-collapse xác định đường viền border-left-color: Giá trị rgb red; bên trái. của table có tách biệt ra hay không. border-left-style: Xác định hình  Chú ý là thuộc tính border-collapse chỉ được sử dụng border-left-style kiểu border dạng cho đường solid; viền bên trái. cho thành phần table. px Xác định bề dày thin border-left- border-left-width cho đường viền medium width: 5px; bên trái. thick Một hoặc border-left: nhiều giá trị Xác định đường border-left #ff0000 solid của các thuộc viền bên trái. 2px; tính định dạng. 18/01/2019 Bài giảng Thiết kế Web 31 18/01/2019 Bài giảng Thiết kế Web 32 Thuộc tính Border (tt) Thuộc tính Border (tt) Thuộc tính border-collapse Thuộc tính border-spacing Thuộc tính Giá trị Ví dụ Mô tả Khoảng trống giữa các  Thuộc tính border-spacing xác định khoảng cách giữa border- các đường viền của table. đường viền (border) của collapse collapse: table bị loại bỏ, chỉ còn collapse; đường viền duy nhất.  Chú ý là thuộc tính border-spacing chỉ được sử dụng Khoảng trống giữa các cho thành phần table có các đường viền tách biệt border- border- đường viền (border) của nhau (border-collapse: separate). separate collapse: table vẫn giữ nguyên, đây collapse separate; là dạng mặc định của table. Xác định thừa hưởng border- thuộc tính từ thành phần inherit collapse: cha (thành phần bao inherit; ngoài). 18/01/2019 Bài giảng Thiết kế Web 33 18/01/2019 Bài giảng Thiết kế Web 34 Thuộc tính Border (tt) Thuộc tính Margin Thuộc tính Giá trị Ví dụ Mô tả Thuộc tính border-spacing Đây là cách viết ngắn gọn đơn vị margin: 5px 10px các thuộc tính bên dưới, Thuộc tính Giá trị Ví dụ Mô tả margin auto 3px 20px; đơn vị có thể là px, em, Độ rộng giữa các inherit border-spacing: %, ... độ rộng đường viền (border) đơn vị Canh lề bên trên cho 10px; của table. margin-top auto margin-top: 5px; thành phần, đơn vị có thể Độ rộng giữa các inherit là px, em, %, ... ngang border-spacing: đường viền (border) đơn vị Canh lề bên phải cho border-spacing dọc 10px 20px; của table với giá trị margin-right auto margin-right: 5px; thành phần, đơn vị có thể ngang và dọc. inherit là px, em, %, ... Xác định thừa hưởng đơn vị Canh lề bên dưới cho border-collapse: thuộc tính từ thành margin-bottom auto margin-bottom: 5px; thành phần, đơn vị có thể inherit inherit là px, em, %, ... inherit; phần cha (thành phần bao ngoài). đơn vị Canh lề bên trái cho margin-left auto margin-left: 5px; thành phần, đơn vị có thể inherit là px, em, %, ... 18/01/2019 Bài giảng Thiết kế Web 35 18/01/2019 Bài giảng Thiết kế Web 36 6
Cách sử dụng thuộc tính margin Thuộc tính Padding Thuộc tính Thành phần Thể hiện Ví dụ Mô tả Thuộc tính Giá trị Ví dụ Mô tả margin-top: 5px; Đây là cách viết ngắn gọn margin: 5px đơn vị padding: 5px 4 thành top right margin-right: 10px padding các thuộc tính bên dưới, đơn 10px 3px inherit 10px 3px 20px; phần bottom left margin-bottom: 3px vị có thể là px, em, %, ... 20px; margin-left: 20px Thêm vào khoảng không bên margin-top: 5px; đơn vị padding-top: padding-top trên cho thành phần, đơn vị 3 thành top (right margin: 5px margin-right: 10px inherit 5px; có thể là px, em, %, ... phần left) bottom 10px 15px; margin-left: 10px Thêm vào khoảng không bên margin-bottom: 15px đơn vị padding-right: margin padding-right phải cho thành phần, đơn vị margin-top: 5px; inherit 5px; (top có thể là px, em, %, ... 2 thành margin: 5px margin-bottom: 5px Thêm vào khoảng không bên bottom) padding- đơn vị padding-bottom: phần 10px; margin-right: 10px dưới cho thành phần, đơn vị (right left) bottom inherit 5px; margin-left: 10px có thể là px, em, %, ... margin-top: 10px; Thêm vào khoảng không bên 1 thành (top right margin-right: 10px đơn vị padding-left: margin: 10px; padding-left trái cho thành phần, đơn vị có phần bottom left) margin-bottom: 10px inherit 5px; thể là px, em, %, ... margin-left: 10px 18/01/2019 Bài giảng Thiết kế Web 37 18/01/2019 Bài giảng Thiết kế Web 38 Cách sử dụng thuộc tính padding Thuộc tính List Thuộc tính Thành phần Thể hiện Ví dụ Mô tả Thuộc tính Giá trị Ví dụ Mô tả padding-top: 5px; Một hoặc padding: 5px 4 thành top right padding-right: 10px nhiều giá 10px 3px phần bottom left padding-bottom: 3px trị của các Đây là dạng viết ngắn gọn, 20px; padding-left: 20px thuộc tính tổng hợp các kiểu bên padding-top: 5px; list-style list-style: square; image, dưới (image, position, 3 thành top (right padding: 5px padding-right: 10px position, type). phần left) bottom 10px 15px; padding-left: 10px style bên padding-bottom: 15px dưới. padding padding-top: 5px; (top list-style: Thay thế các mục của 2 thành padding: 5px padding-bottom: 5px URL bottom) url(images/list.gif); danh sách bằng hình ảnh. phần 10px; padding-right: 10px Không hiển thị image list, (right left) none list-style: none; padding-left: 10px đây là dạng mặc định. padding-top: 10px; list-style-image Xác định thừa hưởng 1 thành (top right padding: padding-right: 10px thuộc tính từ thành phần phần bottom left) 10px; padding-bottom: 10px inherit list-style: inherit; cha (thành phần bao padding-left: 10px ngoài). 18/01/2019 Bài giảng Thiết kế Web 39 18/01/2019 Bài giảng Thiết kế Web 40 Thuộc tính List (tt) Thuộc tính List (tt) Thuộc tính Giá trị Ví dụ Mô tả Thuộc tính Giá trị Ví dụ Mô tả Xác định các mục nằm list-style-type: Danh sách list-style-type 01. inside list-style: inside; none bên trong nội dung. none; Danh sách list-style-type 02. Xác định các mục nằm list-style-type: • Danh sách list-style-type 01. disc list-style- outside list-style: outside; bên ngoài nội dung, đây là circle; • Danh sách list-style-type 02. dạng mặc định. list-style-type: o Danh sách list-style-type 01. position circle Xác định thừa hưởng disc; o Danh sách list-style-type 02. thuộc tính từ thành phần list-style-type list-style-type:  Danh sách list-style-type 01. inherit list-style:inherit; square cha (thành phần bao square;  Danh sách list-style-type 02. ngoài). list-style-type: 1. Danh sách list-style-type 01. decimal decimal; 2. Danh sách list-style-type 02. decimal- list-style-type: 01. Danh sách list-style-type 01. leading- decimal- 02. Danh sách list-style-type 02. zero leading-zero; 18/01/2019 Bài giảng Thiết kế Web 41 18/01/2019 Bài giảng Thiết kế Web 42 7
Thuộc tính List (tt) Thuộc tính Font Thuộc tính Mô tả Giá trị Thuộc tính Giá trị Ví dụ Mô tả font Thuộc tính ngắn font-style lower- list-style-type: a. Danh sách list-style-type 01. cho tất cả các thiếtfont-variant alpha lower-alpha; b. Danh sách list-style-type 02. lập về font. font-weight upper- list-style-type: A. Danh sách list-style-type 01. font-size alpha upper-alpha; B. Danh sách list-style-type 02. font-family lower- list-style-type: i. Danh sách list-style-type 01. font-style Thiết lập chế độ in normal list-style-type roman lower-roman; ii. Danh sách list-style-type 02. nghiêng, xiên hay italic upper- list-style-type: I. Danh sách list-style-type 01. bình thường. oblique roman upper-roman; II. Danh sách list-style-type 02. font-variant Thiết lập font bình normal Xác định thừa hưởng thuộc tính thường hay small- small-caps list-style-type: inherit từ thành phần cha (thành phần caps inherit; bao ngoài). font-weight Thiết lập in đậm, normal thường. bold bolder lighter 100 – 900 18/01/2019 Bài giảng Thiết kế Web 43 18/01/2019 Bài giảng Thiết kế Web 44 Thuộc tính Font (tt) Thuộc tính Text Thuộc tính Mô tả Giá trị Thuộc tính Mô tả Giá trị font-size Thiết lập kích cỡ font. xx-small color Thiết lập màu chữ. x-small text-indent Thiết lập khoảng small thụt đầu dòng. % medium text-align Thiết lập chế độ left large canh văn bản. right center x-large justify xx-large letter-spacing Thiết lập khoảng normal smaller cách giữa các ký tự. larger text-decoration Thêm hiệu ứng none đặc biệt cho văn underline bản. overline % line-through font-family Thiết lập loại font family-name blink hiển thị trang web/ generic-family đối tượng web. 18/01/2019 Bài giảng Thiết kế Web 45 18/01/2019 Bài giảng Thiết kế Web 46 Thuộc tính Text (tt) Thuộc tính Layout Position Thuộc tính Mô tả Giá trị Thuộc tính Float text-transform Change case văn none Thuộc tính float xác định có hay không một thành phần được float (trôi bản. upper nổi). lower capitalize Thuộc tính Giá trị Ví dụ Mô tả none Thành phần được trôi nổi text-shadow left float: left; color (float) qua bên trái. length Thành phần được trôi nổi right float: right; (float) qua bên phải. Thành phần không được trôi float none float: none; nổi (float) qua bên phải hay trái, đây là dạng mặc định. Xác định thừa hưởng thuộc inherit float: inherit; tính từ thành phần cha (thành phần bao ngoài). 18/01/2019 Bài giảng Thiết kế Web 47 18/01/2019 Bài giảng Thiết kế Web 48 8
Thuộc tính Layout Position (tt) Thuộc tính Layout Position (tt) Thuộc tính Clear Thuộc tính Position Thuộc tính clear ngăn cản không cho đối tượng tràn lên vị trí rỗng do Nguyên lý hoạt động của position các đối tượng phía trước bị float để lại. Cửa sổ trình duyệt giống như một hệ tọa độ và với position có thể đặt một đối tượng web ở bất cứ vị trí nào Thuộc tính Giá trị Ví dụ Mô tả trên hệ tọa độ này Bên trái của thành phần left clear: left; không được float. Bên phải của thành phần right clear: right; không được float. clear Bên trái và phải của thành both clear: both; phần không được float. Đây là mặc định của thành none clear: none; phần clear, bên trái và phải của thành phần được float. 18/01/2019 Bài giảng Thiết kế Web 49 18/01/2019 Bài giảng Thiết kế Web 50 Thuộc tính Layout Position (tt) Thuộc tính Layout Position (tt) Thuộc tính Position Các thuộc tính Top, Right, Bottom, Left Thuộc tính position thường dùng kèm với các thuộc tính Các thuộc tính top, right, bottom, left được dùng để định vị trí cho thành phần khi sử dụng thuộc tính position. định vị trí: left, right, bottom, top Chú ý: các thuộc tính này sẽ không có tác dụng khi position có giá trị là static Thuộc tính Giá trị Ví dụ Mô tả Thành phần sẽ nằm theo thứ Thuộc Giá trị Ví dụ Mô tả static position: static; tự trong văn bản, đây là dạng tính mặc định. Khoảng cách tính từ mép trên ngoài cùng Định vị trí tương đối cho Khoảng top top: 20px; của thành phần bao ngoài, đơn vị có thể relative position: relative; cách thành phần. là px, em, %, ... position Định vị trí tuyệt đối cho thành Khoảng Khoảng cách tính từ mép phải ngoài cùng phần theo thành phần bao right right: 20px; position: cách của thành phần bao ngoài absolute ngoài (thành phần định vị trí Khoảng bottom: Khoảng cách tính từ mép dưới cùng của absolute; bottom tương đối position: relative;) cách 20px; thành phần bao ngoài hoặc theo cửa sổ trình duyệt. Khoảng Khoảng cách tính từ mép trái ngoài cùng left left: 20px; cách của thành phần bao ngoài Minh họa Minh họa 18/01/2019 Bài giảng Thiết kế Web 51 18/01/2019 Bài giảng Thiết kế Web 52 Thuộc tính Layout Position (tt) Thuộc tính Layout Position (tt) Thuộc tính Z-index Thuộc tính Display Thuộc tính z-index thiết lập thứ tự xếp chồng nhau của một thành phần. giá trị Mô tả Thứ tự chồng nhau được sắp xếp dựa theo giá trị số, thành phần HTML Thành phần hiển thị như một khối, khi sử dụng giá trị block thành nào có chỉ số z-index cao hơn sẽ nằm trên, giá trị mặc định là 0. block phần sẽ đứng một hàng độc lập so với thành phần trước và sau Chú ý: z-index chỉ làm việc cùng với thuộc tính position. nó. đây là dạng mặc định. Thành phần sẽ hiển thị như một nội tuyến (inline, không ngắt inline Thuộc dòng), Giá trị Ví dụ Mô tả tính inline-block Thành phần sẽ hiển thị như một khối, nhưng là một khối nội tuyến. Thành phần sẽ hiển thị như một khối và một nội tuyến cho các list-item z-index: Tự động sắp xếp thứ tự chồng nhau cho điểm đánh dấu danh sách. auto auto; thành phần, đây là dạng mặc định. none Thành phần không hiển thị. Thành phần sẽ hiển thị như một table, ngắt dòng trước và sau z-index table z-index: Sắp xếp thứ tự chồng nhau cho thành thành phần. giá trị 10; phần theo giá trị. table-row Thành phần sẽ hiển thị như một row của table z-index: Xác định thừa hưởng thuộc tính từ thành table-cell Thành phần sẽ hiển thị như một cell trong table inherit inherit; phần cha (thành phần bao ngoài). Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần inherit Minh họa 1 bao ngoài). Minh họa 2 Minh họa 18/01/2019 Bài giảng Thiết kế Web 53 18/01/2019 Bài giảng Thiết kế Web 54 9
Thuộc tính Layout Position (tt) 6. Thiết lập các thuộc tính cho liên kết Thuộc tính Visibility • Để thiết lập các thuộc tính cho liên kết, chúng Thuộc tính giá trị Mô tả ta thiết lập các thuộc tính trong các trạng thái: Làm "sụp đổ" các hàng và cột của Trạng thái Giải thích collapse thành phần table, giá trị này chỉ sử a Chung cho các trạng thái dụng cho thành phần table. a:link Liên kết chưa thăm. hidden Thành phần sẽ không được nhìn thấy. a:hover Khi rê chuột lên liên kết. visibility Hiển thị thành phần, đây là dạng mặc a:visited Khi liên kết đã thăm. Visible định. a:active Đang nhấn giữ chuột Xác định thừa hưởng thuộc tính từ Inherit thành phần cha (thành phần bao a:link { a:hover{ ngoài). color:#F00; text-decoration:underline; font-family:verdana; border:#00F solid 1px; text-decoration:none; background-color:#399; } } Minh họa 1 Minh họa 2 18/01/2019 Bài giảng Thiết kế Web 55 18/01/2019 Bài giảng Thiết kế Web 56 7. Đơn vị trong CSS 7. Đơn vị trong CSS Đơn vị chiều dài Đơn vị màu sắc Đơn vị Mô tả Đơn vị Mô tả % Phần trăm Color-name Tên màu tiếng Anh. in Inch (1 inch = 2.54 cm) Ví dụ: black, white, red, green, blue, cyan, magenta,… cm Centimeter RGB (r,g,b) Màu RGB với 3 giá trị R, G, B có trị từ 0 – 255 kết hợp với mm Millimeter nhau tạo ra vô số màu. 1 em tương đương kích thước font hiện hành, nếu font RGB Màu RGB với 3 giá trị R, G, B có trị từ 0 – 100% kết hợp. hiện hành có kích cỡ 14px thì 1 em = 14 px. Đây là một (%r,%g,%b) em đơn vị rất hữu ích trong việc hiển thị trang web. Hexadecimal Mã màu RGB dạng hệ thập lục. RGB Ví dụ: #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ tươi. pt Point (1 pt = 1/72 inch) pc Pica (1 pc = 12 pt) Pixels (điểm ảnh trên màn hình máy tính) px 18/01/2019 Bài giảng Thiết kế Web 57 18/01/2019 Bài giảng Thiết kế Web 58 8. Một số thuộc tính mới trong CSS3 Tổng quan về CSS3  Làm việc với các thuộc tính mới trong CSS3:  Một số module quan trọng trong CSS3:  Border-radius  Selectors  Border-image  Box Model  Gradient  Backgrounds and Borders  Transform, transition, animation  Text Effects  Chèn nhiều hình nền với CSS3  2D/3D Transformations  Animations  Multiple Column Layout  User Interface 18/01/2019 Bài giảng Thiết kế Web 59 18/01/2019 Bài giảng Thiết kế Web 60 10
Những thuộc tính mới trong CSS3 Những thuộc tính mới trong CSS3 Thuộc tính Ví dụ Mô tả  Border-radius: tạo ra góc bo tròn cho đường viền border-top-left-radius: 5px; Góc trên - bên trái sẽ được uốn border-top-left-radius  border-radius: 10px; border-top-left-radius: 5px 10px; cong. border-top-right- border-top-right-radius: 5px; Góc trên - bên phải sẽ được  -webkit-border-radius: 10px; radius uốn cong. border-top-right-radius: 5px 10px;  -moz-border-radius: 10px; border-bottom-left- border-bottom-left-radius: 5px; Góc dưới - bên trái sẽ được radius uốn cong.  -ms-border-radius: 10px; border-bottom-left-radius: 5px 10px; border-bottom-right- border-bottom-right-radius: 5px; Góc dưới - bên phải sẽ được  -o-border-radius: 10px; radius border-bottom-right-radius: 5px 10px; uốn cong. border-radius: 5px; -moz-animation hỗ trợ cho firefox. border-radius: 5px 10px; -webkit-animation hỗ trợ cho Google Chrome và Safari. border-radius Cả 4 góc đều được uốn cong. border-radius: 5px 10px 4px; -ms-animation hỗ trợ cho Internet Explorer. -o-animation hỗ trợ cho Opera. border-radius: 5px 10px 4px 8px; 18/01/2019 Bài giảng Thiết kế Web 61 18/01/2019 Bài giảng Thiết kế Web 62 Những thuộc tính mới trong CSS3 Những thuộc tính mới trong CSS3  Border-radius: Tạo border: http://border-radius.com/  Border-image: -webkit-border-radius: 24px; -moz-border-radius: 24px; -webkit-border-image: url(border.png) 30 30 round; border-radius: 24px; -o-border-image: url(border.png) 30 30 round; -webkit-border-top-left-radius: 24px; border-image: url(border.png) 30 30 round; -webkit-border-top-right-radius: 23px; -webkit-border-bottom-right-radius: 45px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-topleft: 24px; -moz-border-radius-topright: 23px; -moz-border-radius-bottomright: 45px; -moz-border-radius-bottomleft: 10px; -webkit-border-image: url(border.png) 30 30 stretch; border-top-left-radius: 24px; -o-border-image: url(border.png) 30 30 stretch; border-top-right-radius: 23px; border-image: url(border.png) 30 30 stretch; border-bottom-right-radius: 45px; border-bottom-left-radius: 10px; Minh họa Minh họa 18/01/2019 Bài giảng Thiết kế Web 63 18/01/2019 Bài giảng Thiết kế Web 64 Những thuộc tính mới trong CSS3 Những thuộc tính mới trong CSS3  CSS3 Shadow:  CSS3 Gradient: div {  Gradient là thành phần phổ biến trên trang web width: 300px;  Gradient thường bao gồm: height: 100px;  2 điểm dừng màu (color stop) background-color: yellow;  1 điểm chuyển màu /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 10px 10px 5px #888888; }  Với CSS3: sử dụng các thuộc tính định nghĩa gradient:  Linear-gradient  Radial-gradient Minh họa 18/01/2019 Bài giảng Thiết kế Web 65 18/01/2019 Bài giảng Thiết kế Web 66 11
Những thuộc tính mới trong CSS3 Những thuộc tính mới trong CSS3  CSS3 Gradient:  CSS3 Gradient: #grad1 { #grad1 { height: 200px; height: 200px; width:500px; width:500px; background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ background: -webkit-linear-gradient(left, red , blue); background: -o-linear-gradient(red, blue); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(red, blue); /* For Firefox 3.6 to 15 */ background: -o-linear-gradient(right, red, blue); background: linear-gradient(red, blue); /* Standard syntax (must be last) */ background: -moz-linear-gradient(right, red, blue); } background: linear-gradient(to right, red , blue); } Linear Gradient - Top to Bottom This linear gradient starts at the top. It starts red, transitioning to blue: 18/01/2019 Bài giảng Thiết kế Web 67 18/01/2019 Bài giảng Thiết kế Web 68 Những thuộc tính mới trong CSS3 Những thuộc tính mới trong CSS3  CSS3 Gradient:  CSS3 Gradient: #grad1 {  Gradient với góc độ: height: 200px; width:500px; #grad1 { background: -webkit-linear-gradient(left top, red , blue); height: 200px; background: -o-linear-gradient(bottom right, red, blue); width:500px; background: -moz-linear-gradient(bottom right, red, blue); background: -webkit-linear-gradient(45deg, red, blue); background: linear-gradient(to bottom right, red , blue); background: -o-linear-gradient(45deg, red, blue); } background: -moz-linear-gradient(45deg, red, blue); background: linear-gradient(45deg, red, blue); } 18/01/2019 Bài giảng Thiết kế Web 69 18/01/2019 Bài giảng Thiết kế Web 70 Những thuộc tính mới trong CSS3 Những thuộc tính mới trong CSS3  CSS3 Gradient:  Tạo CSS3 Gradient: www.Css3maker.com  Gradient với nhiều điểm màu: #grad1 { height: 200px; width:500px; background: -webkit-linear-gradient(red, green, blue); background: -o-linear-gradient(red, green, blue); background: -moz-linear-gradient(red, green, blue); background: linear-gradient(red, green, blue); } Minh họa 18/01/2019 Bài giảng Thiết kế Web 71 18/01/2019 Bài giảng Thiết kế Web 72 12
Transform – Transition - Animation Transform – Transition - Animation  Transform:  Transform:  Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên trang  Rotate(10deg) transform: rotate(15deg) ; transform: scale(0.5,1); transform: skew(45deg, 5deg) ; Minh họa 18/01/2019 Bài giảng Thiết kế Web 73 18/01/2019 Bài giảng Thiết kế Web 74 Transform – Transition - Animation Transition Thuộc tính giá trị Ví dụ Mô tả Hiệu ứng của quá trình chuyển đổi  Transition transition- none transition-property: none; sẽ không được hiển thị. property Xác định hiệu ứng của quá trình all transition-property: all;  Sử dụng hành động (hover, click,…) để thực hiện chuyển đổi cho tất cả thuộc tính. transition- Quá trình chuyển đổi mất bao nhiêu Transition duration Thời gian transition-duration: 2s; thời gian. Xác định một hiệu ứng của quá trình transition-timing-function: chuyển đổi với một sự khởi đầu transition-property: xác định thuộc tính chuyển đổi ease ease; chậm, sau đó nhanh chóng, sau đó kết thúc chậm. transition-duration: quy định thời gian chuyển đổi Xác định một hiệu ứng của quá trình transition-timing-function: ease-in chuyển đổi với một khởi đầu chậm transition-timing-function: xác định tốc độ của hiệu ứng ease-in; chạp. transition-timing-function: Xác định một hiệu ứng của quá trình ease-out chuyển tiếp. transition- ease-out; chuyển đổi với một kết thúc chậm. timing-function Xác định một hiệu ứng của quá trình transition-timing-function: ease-in-out chuyển đổi với một khởi đầu và kết ease-in-out; thúc chậm. Xác định một hiệu ứng của quá trình transition-timing-function: linear chuyển đổi với cùng một tốc độ từ linear; đầu đến cuối. Xác định giá trị cho hiệu ứng của quá cubic- transition-timing-function: trình chuyển đổi theo từng giai đoạn, bezier(n,n,n,n) cubic-bezier(0,1,0.35,0); giá trị xác định chỉ có thể từ 0 tới 1. 18/01/2019 Bài giảng Thiết kế Web 75 18/01/2019 Bài giảng Thiết kế Web 76 Transform – Transition - Animation Transform – Transition - Animation  Transition  Transition img { transition-property:all; transition-duration:0.5s; transition-timing-function:ease; -webkit-transition-property:all; -webkit-transition-duration:0.5s; -webkit-transition-timing-function:ease; -moz-transition:all 0.5s ease; -o-transition:all 0.5s ease; } img:hover{ transform: scale(1.5); -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -o-transform: scale(1.5); -ms-transform: scale(1.5); } Minh họa 18/01/2019 Bài giảng Thiết kế Web 77 18/01/2019 Bài giảng Thiết kế Web 78 13
Transform – Transition - Animation Animation Thuộc tính giá trị Ví dụ Mô tả  CSS animation animation- tên animation-name: Xác định tên cho một name animation myAnimation; animation.  Tạo hoạt hình animation- Tương tự transition-duration  Thay thế ảnh động, hoạt hình Flash duration animation- Tương tự transitoin-timing-function timing-function animation-name: xác định tên cho một animation số tự animation-iteration- Xác định số lần thực hiện animation- nhiên count: 4; chuyển động. animation-duration: quy định thời gian chuyển đổi iteration- count infinite animation-iteration- Chuyển động sẽ thực hiện count: infinite; không giới hạn số lần. animation-iteration-count: xác định số lần thực hiện chuyển normal animation-direction: Chuyển động bình thường, đây động. animation- normal; là dạng mặc định. direction animation-direction: Chuyển động sẽ được đảo animation-timing-function: xác định tốc độ của hiệu ứng alternate alternate; ngược ở chu kỳ tiếp theo. animation-play-state: Xác định chuyển động dừng chuyển tiếp. paused paused; lại. animation- play-state animation-play-state: running running; Xác định chuyển động chạy. Minh họa 18/01/2019 Bài giảng Thiết kế Web 79 18/01/2019 Bài giảng Thiết kế Web 80 Transform – Transition - Animation Transform – Transition - Animation  CSS animation  CSS animation  keyframe .sanphammoi{  Hỗ trợ tạo hình ảnh dạng động/hoạt hình background-color:#93F; animation: myfirst 5s infinite;  Hình ảnh động tạo ra bằng cách thay đổi thuộc tính từ tập hợp style -webkit-animation: myfirst 5s infinite;} này sang style khác. @-webkit-keyframes myfirst { 0% {background:#93F;} @keyframe animationname { 25% {background:#939;} 50% {background:#933;} keyfarmes-selector { css-styles;} 100% {background:#903;} } } @keyframes myfirst { 0% {background:#93F;} 25% {background:#939;} 50% {background:#933;}  Animationname: tên của animation 100% {background:#903;}  Keyframes-selector: tỷ lệ phần trăm thời gian chuyển động }  Css-styles: một hoặc nhiều thuộc tính css quy định Minh họa 18/01/2019 Bài giảng Thiết kế Web 81 18/01/2019 Bài giảng Thiết kế Web 82 Hình nền với CSS3 Hình nền với CSS3  Thực hiện chèn 3 hình ảnh làm nền cho web  Chèn nhiều hình nền với vị trí chính xác: .specialsale { width: 550px; border: 2px #773636 solid; background-image: url(images/blueberry.jpg),url(images/orange.png); background-repeat: no-repeat; background-position: top right, 0 -45px; } body { background-color: #B3BBCA; background-image: url(images/bg1.png),url(images/bg2.png), url(images/bg3.png); } 18/01/2019 Bài giảng Thiết kế Web 83 18/01/2019 Bài giảng Thiết kế Web 84 14
Phone: 0274. 3834930 Website: http://et.tdmu.edu.vn 15