Bài giảng thiết kế web chương 3 trường đh thủ dầu một

THÔNG TIN TÀI LIỆU

TRƯỜNG ĐẠI HỌC THỦ DẦU MỘT NỘI DUNG KHOA KỸ THUẬT - CÔNG NGHỆ THIẾT KẾ WEB Chương NGÔN NGỮ CSS (Cascading Style Sheet) Phone: 0274 3834930 Website: http://et.tdmu.edu.vn Giới thiệu CSS Các loại style Khai báo sử dụng style Cách tạo loại style Các thuộc tính định dạng Thiết lập thuộc tính cho liên kết Đơn vị CSS Một số thuộc tính CSS3 18/01/2019 Giới thiệu CSS Giới thiệu CSS  CSS (Cascading Style Sheets) ngôn ngữ quy  Tại CSS? định cách trình bày cho tài liệu viết HTML, XHTML, XML, SVG, hay UML,… 18/01/2019 Bài giảng Thiết kế Web Giới thiệu CSS Bài giảng Thiết kế Web  CSS cung cấp nhiều thuộc tính trình bày dành cho đối tượng với sáng tạo việc kết hợp thuộc tính giúp mang lại hiệu cao  CSS hỗ trợ tất trình duyệt hiển thị “như nhau” hệ điều hành  CSS đưa phương thức áp dụng từ file CSS ngồi Có hiệu đồng tạo website có hàng trăm trang hay muốn thay đổi thuộc tính trình bày  CSS cập nhật liên tục mang lại trình bày phức tạp tinh vi 18/01/2019 Bài giảng Thiết kế Web Các loại style  Có loại style:  Inline Style (Style qui định thẻ HTML cụ thể)  Internal Style (Style qui định phần trang HTML )  External Style (style qui định file CSS ngoài)  Browser Default (thiết lập mặc định trình duyệt)  Thứ tự ưu tiên: Mức ưu tiên giảm dần từ xuống 18/01/2019 Bài giảng Thiết kế Web 18/01/2019 Bài giảng Thiết kế Web Khai báo sử dụng style Khai báo sử dụng style Chú ý viết style  Style phân biệt chữ hoa, chữ thường  Để ghi style sử dụng: Khai báo style Selector { Property: Value; } /* Đoạn ghi */ Trong đó: + Selector: Đối tượng á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 thuộc tính phải dùng dấu ; (chấm phẩy) + Value: Giá trị thuộc tính 18/01/2019 Bài giảng Thiết kế Web 18/01/2019 Bài giảng Thiết kế Web Khai báo sử dụng style Khai báo sử dụng style Style áp dụng cho thẻ cụ thể  Trường hợp thẻ: Đặt selector tên_thẻ Tạo lớp (có thể áp dụng cho nhiều thẻ)  Gắn với thẻ cụ thể: Đặt selector tên_thẻ.tên_lớp p.loai1{ p { color: red; } color:red; } p.loai2{  Khai báo đồng thời nhiều thẻ: Viết danh sách tên thẻ phân cách dấu phẩy color:blue; }  Không gắn với thẻ cụ thể: bỏ phần tên_thẻ đi, giữ lại dấu chấm: h1,h2,h3,h4,h5,h6{ loai3{ font-family:arial; color:green; } 18/01/2019 } Bài giảng Thiết kế Web 18/01/2019 Bài giảng Thiết kế Web Khai báo sử dụng style Khai báo sử dụng style Sử dụng lớp  Đặt thuộc tính class thẻ=“tên_lớp”: Định danh (id) 10  Tương tự 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 Style lực Tiêu đề

Đoạn màu đỏ

khơng có hiệu  Ví dụ: p#doan1{ color:red; } #loai2{ màu xanh 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 Khai báo sử dụng style Khai báo sử dụng style Sử dụng định danh  Mỗi định danh trang  Đặt thuộc tính id thẻ = định_danh  Ví dụ: Xét đoạn mã HTML sau :

Danh Sách Các Tỉnh, Thành Phố Của Việt Nam

Hà Nội
TP Hồ Chí Minh
Đà Nẵng
Thừa Thiên Huế
Khánh Hòa
Quãng Ninh
Tiền Giang

Đoạn màu đỏ

 Chú ý: Không nên đặt tên class, id với ký tự đầu chữ số, không làm việc Firefox 18/01/2019 Bài giảng Thiết kế Web 13  Làm để tên thành phố màu đỏ tên tỉnh màu xanh da trời  Dùng class để tạo thành nhóm 18/01/2019 Bài giảng Thiết kế Web Khai báo sử dụng style Khai báo sử dụng style  Ví dụ: … li.tp { color:#F00; } li.tinh { color:#00F; }  Ví dụ: 14 Với ví dụ bên yêu cầu Hà Nội có màu đỏ sậm, TP Hồ Chí Minh màu đỏ, Đà Nẵng màu đỏ tươi tên tỉnh màu xanh da trời  Dùng id để nhận dạng thành phố, class để nhóm 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 Khai báo sử dụng style Cách tạo loại style  Ví dụ: … #hanoi { color:#790000 } #hcmc { color:#FF0000 } #danang { color:#FF00FF } tinh { color:#00F; } Inline style 16  Là kiểu gán cho dòng đoạn văn bản, cách sử dụng thuộc tính style bên tag muốn định dạng  Cú pháp:

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 17 18/01/2019 Bài giảng Thiết kế Web 18 Cách tạo loại style Cách tạo 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

This paragraph has an inline style applied to it

This paragraph is displayed in the default style

Can you see the difference in this line

18/01/2019 Bài giảng Thiết kế Web 19  Cách tạo: Tạo style chung phần đầu trang cặp tag …  Cú pháp: selector {property1:value1;property2:value 2; …} 18/01/2019 20 Bài giảng Thiết kế Web Cách tạo loại style Cách tạo loại style Internal style External style  Ví dụ: h1,h2 { color: limegreen; font-family: Arial } This is the H1 element This is the H2 element This is the H3 element with its default style as displayed in the browser  Là style lưu trữ thành file bên liên kết với 18/01/2019 Bài giảng Thiết kế Web 21 Các thuộc tính định dạng backgroundattachment backgroundcolor backgroundimage 18/01/2019 giá trị  Tạo tập tin văn  Nhập tên selector theo mẫu: selector {property1: value1; property2:value2;…}  Lưu tập tin với định dạng Text Only có phần mở rộng css  Cách dùng: Liên kết tập tin css vào file html theo cú pháp: 18/01/2019 Thuộc tính Ví dụ Mơ tả Xác định thành phần cố định cuộn so với fixed background-attachment trang scroll :fixed; Được sử dụng kèm với giá trị backgroundimage background-color mã màu :#ff0000; Xác định màu cho tên màu background-color: red; thành phần Giá trị rgb background-color: rgb(255,0,0); url(đường dẫn background-image: Xác định hình ảnh hình) url(ico_arrow.gif); cho thành phần Bài giảng Thiết kế Web 22 Bài giảng Thiết kế Web Thuộc tính Background (tt) Thuộc tính Background Thuộc tính trang HTML Style áp dụng ảnh hưởng cho tất trang website  Cách tạo: 23 backgroundposition backgroundrepeat background 18/01/2019 giá trị left right top bottom px % repeat-x repeat-y repeat no-repeat Một nhiều giá trị thuộc tính Ví dụ Mơ tả Xác định vị trí hình ảnh backgroundnền cho thành phần position: left top; Được sử dụng kèm với giá trị background-image backgroundXác định hình ảnh repeat: repeat-x; lặp background: Có giá trị riêng lẻ url(ico_arrow.gif) tổng hợp thuộc tính repeat-x left top; Bài giảng Thiết kế Web 24 Box Model Thuộc tính Border  Box model (mơ hình hộp) mơ tả cách mà CSS định dạng khối không gian bao quanh thành phần Gồm padding (vùng đệm), border (viền) margin (canh lề) tùy chọn p{width:200px; margin:30px 20px; padding:20px 10px; border:1px solid #000; text-align:justify } Thuộc tính border-color border-style kiểu border border-width

Trong CSS, box model (mơ hình hộp) mơ tả cách mà CSS định dạng khối không gian bao quanh thành phần

18/01/2019 border 25 Bài giảng Thiết kế Web Thuộc tính Border (tt) Đường viền hiển thị border-top-style border-rightstyle kiểu border border-right 18/01/2019 Xác định bề dày đường viền border: #ff0000 solid 2px; Xác định tất đường viền xung quanh 26 Ví dụ border-topcolor: red; border-topcolor: rgb(255,0,0); Đường viền hiển thị border-top-width Đường viền hiển thị Đường viền hiển thị border-top 27 18/01/2019 Mô tả Xác định màu sắc cho đường viền bên Xác định hình border-top-style: dạng cho đường solid; viền bên kiểu border px thin medium thick Một nhiều giá trị thuộc tính định dạng border-topwidth: 5px; Xác định bề dày cho đường viền bên border-top: #ff0000 solid 2px; Xác định đường viền bên 28 Bài giảng Thiết kế Web Thuộc tính Border (tt) Giá trị border-rightcolor Giá trị Đường viền hiển thị Bài giảng Thiết kế Web mã màu tên màu Giá trị rgb border-width: 5px; Bài giảng Thiết kế Web Đường viền hiển thị Thuộc tính Border (tt) border-rightwidth 18/01/2019 mã màu border-top-color tên màu Giá trị rgb Hiển thị Mô tả Xác định thành phần khơng có none đường viền Giống giá trị none, hidden dùng cho table Xác định đường viền cho thành phần dotted dấu chấm (dotted) Xác định đường viền cho thành phần dashed gạch ngang (dashed) Xác định đường viền cho thành phần solid đường thẳng nét (solid) Xác định đường viền cho thành phần double đường thẳng nét (double) Thuộc tính px thin medium thick Một nhiều giá trị thuộc tính định dạng Thuộc tính 18/01/2019 Ví dụ Mơ tả border-color: #ff0000; Xác định màu sắc border-color: red; đường viền border-color: rgb(255,0,0); Xác định hình border-style: solid;dạng đường viền Thuộc tính Border (tt) Các kiểu border Giá trị giá trị mã màu tên màu Giá trị rgb Ví dụ border-rightcolor: #ff0000; border-rightcolor: red; px thin medium thick Một nhiều giá trị thuộc tính định dạng Mơ tả Thuộc tính Giá trị Xác định màu sắc cho đường viền bên phải border-bottomcolor mã màu tên màu Giá trị rgb border rightstyle: solid; Xác định hình dạng cho đường viền bên phải border-bottomstyle kiểu border border-rightwidth: 5px; Xác định bề dày cho đường viền bên phải border-bottomwidth border-right: #ff0000 solid 2px; Xác định đường viền bên phải border-bottom Bài giảng Thiết kế Web 29 18/01/2019 Ví dụ border-bottomcolor: #ff0000; border-bottomcolor: red; px thin medium thick Một nhiều giá trị thuộc tính định dạng Mơ tả Xác định màu sắc cho đường viền bên border-bottomstyle: solid; Xác định hình dạng cho đường viền bên border-bottomwidth: 5px; Xác định bề dày cho đường viền bên border-bottom: #ff0000 solid 2px; Xác định đường viền bên Bài giảng Thiết kế Web 30 Thuộc tính Border (tt) Thuộc tính Giá trị border-left-color mã màu tên màu Giá trị rgb border-left-style kiểu border border-left-width border-left Thuộc tính Border (tt) Ví dụ Mô tả border-left-color: Xác định màu sắc #ff0000; cho đường viền border-left-color: bên trái red; Xác định hình border-left-style: dạng cho đường solid; viền bên trái px thin medium thick Một nhiều giá trị thuộc tính định dạng 18/01/2019 border-leftwidth: 5px; Xác định bề dày cho đường viền bên trái border-left: #ff0000 solid 2px; Xác định đường viền bên trái Bài giảng Thiết kế Web 31 Thuộc tính Border (tt) Giá trị collapse bordercollapse Ví dụ bordercollapse: collapse; borderseparate collapse: separate; inherit bordercollapse: inherit; 18/01/2019 Bài giảng Thiết kế Web độ rộng border-spacing 18/01/2019 32  Thuộc tính border-spacing xác định khoảng cách đường viền table  Chú ý thuộc tính border-spacing sử dụng cho thành phần table có đường viền tách biệt (border-collapse: separate) 33 18/01/2019 Bài giảng Thiết kế Web 34 Thuộc tính Margin Thuộc tính Thuộc tính border-spacing Giá trị Bài giảng Thiết kế Web Thuộc tính border-spacing Mơ tả Khoảng trống đường viền (border) table bị loại bỏ, đường viền Khoảng trống đường viền (border) table giữ nguyên, dạng mặc định table Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngồi) Thuộc tính Border (tt) Thuộc tính 18/01/2019 Thuộc tính Border (tt) Thuộc tính border-collapse Thuộc tính Thuộc tính border-collapse  Thuộc tính border-collapse xác định đường viền table có tách biệt hay khơng  Chú ý thuộc tính border-collapse sử dụng cho thành phần table Ví dụ border-spacing: 10px; ngang dọc border-spacing: 10px 20px; inherit border-collapse: inherit; margin Mô tả Độ rộng đường viền (border) table Độ rộng đường viền (border) table với giá trị ngang dọc Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngồi) Bài giảng Thiết kế Web Giá trị đơn vị auto inherit đơn vị auto inherit đơn vị auto margin-right inherit đơn vị margin-bottom auto inherit đơn vị auto margin-left inherit margin-top 35 18/01/2019 Ví dụ Mơ tả Đây cách viết ngắn gọn margin: 5px 10px thuộc tính bên dưới, 3px 20px; đơn vị px, em, %, Canh lề bên cho margin-top: 5px; thành phần, đơn vị px, em, %, Canh lề bên phải cho margin-right: 5px; thành phần, đơn vị px, em, %, Canh lề bên cho margin-bottom: 5px; thành phần, đơn vị px, em, %, Canh lề bên trái cho thành phần, đơn vị margin-left: 5px; px, em, %, Bài giảng Thiết kế Web 36 Thuộc tính Padding Cách sử dụng thuộc tính margin Thuộc tính Thành phần thành phần thành phần margin thành phần thành phần Thể Ví dụ Mơ tả Thuộc tính margin-top: 5px; margin-right: 10px margin-bottom: 3px margin-left: 20px margin-top: 5px; top (right margin: 5px margin-right: 10px left) bottom 10px 15px; margin-left: 10px margin-bottom: 15px margin-top: 5px; (top margin: 5px margin-bottom: 5px bottom) 10px; margin-right: 10px (right left) margin-left: 10px margin-top: 10px; margin-right: 10px (top right margin: 10px; bottom left) margin-bottom: 10px margin-left: 10px margin: 5px top right 10px 3px bottom left 20px; 18/01/2019 37 Bài giảng Thiết kế Web thành phần thành phần padding thành phần thành phần Thể Ví dụ Mô tả padding-top: 5px; padding: 5px padding-right: 10px top right 10px 3px bottom left padding-bottom: 3px 20px; padding-left: 20px padding-top: 5px; top (right padding: 5px padding-right: 10px left) bottom 10px 15px; padding-left: 10px padding-bottom: 15px padding-top: 5px; (top padding: 5px padding-bottom: 5px bottom) 10px; padding-right: 10px (right left) padding-left: 10px padding-top: 10px; padding-right: 10px (top right padding: bottom left) 10px; padding-bottom: 10px padding-left: 10px 18/01/2019 Bài giảng Thiết kế Web 39 Thuộc tính List (tt) Thuộc tính list-styleposition 18/01/2019 Giá trị padding padding-top đơn vị inherit padding-right đơn vị inherit paddingbottom đơn vị inherit padding-left đơn vị inherit 18/01/2019 Ví dụ Mô tả Đây cách viết ngắn gọn padding: 5px thuộc tính bên dưới, đơn 10px 3px 20px; vị px, em, %, Thêm vào khoảng không bên padding-top: cho thành phần, đơn vị 5px; px, em, %, Thêm vào khoảng không bên padding-right: phải cho thành phần, đơn vị 5px; px, em, %, Thêm vào khoảng không bên padding-bottom: cho thành phần, đơn vị 5px; px, em, %, Thêm vào khoảng không bên padding-left: trái cho thành phần, đơn vị có 5px; thể px, em, %, 38 Bài giảng Thiết kế Web Thuộc tính List Cách sử dụng thuộc tính padding Thuộc tính Thành phần Giá trị đơn vị inherit Thuộc tính list-style Giá trị Ví dụ Một nhiều giá trị thuộc tính list-style: square; image, position, style bên list-style: URL url(images/list.gif); none list-style: none; inherit list-style: inherit; list-style-image 18/01/2019 Mô tả Đây dạng viết ngắn gọn, tổng hợp kiểu bên (image, position, type) Thay mục danh sách hình ảnh Khơng hiển thị image list, dạng mặc định Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài) Bài giảng Thiết kế Web 40 Thuộc tính List (tt) Ví dụ inside list-style: inside; outside list-style: outside; inherit list-style:inherit; Mô tả Xác định mục nằm bên nội dung Xác định mục nằm bên nội dung, dạng mặc định Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài) Bài giảng Thiết kế Web 41 Thuộc tính Giá trị Ví dụ Mơ tả list-style-type: Danh sách list-style-type 01 none; Danh sách list-style-type 02 list-style-type: • Danh sách list-style-type 01 disc circle; • Danh sách list-style-type 02 list-style-type: o Danh sách list-style-type 01 circle disc; o Danh sách list-style-type 02 list-style-type:  Danh sách list-style-type 01 square square;  Danh sách list-style-type 02 list-style-type: Danh sách list-style-type 01 decimal decimal; Danh sách list-style-type 02 decimal- list-style-type: 01 Danh sách list-style-type 01 leading- decimal02 Danh sách list-style-type 02 leading-zero; zero none list-style-type 18/01/2019 Bài giảng Thiết kế Web 42 Thuộc tính List (tt) Thuộc tính Giá trị loweralpha upperalpha lowerlist-style-type roman upperroman inherit Thuộc tính Font Ví dụ Mơ tả list-style-type: a Danh sách list-style-type 01 lower-alpha; b Danh sách list-style-type 02 list-style-type: A Danh sách list-style-type 01 upper-alpha; B Danh sách list-style-type 02 list-style-type: i Danh sách list-style-type 01 lower-roman; ii Danh sách list-style-type 02 list-style-type: I Danh sách list-style-type 01 upper-roman; II Danh sách list-style-type 02 Xác định thừa hưởng thuộc tính list-style-type: từ thành phần cha (thành phần inherit; bao ngoài) 18/01/2019 43 Bài giảng Thiết kế Web Thuộc tính Font (tt) Thuộc tính font-size font-family 18/01/2019 text-shadow Giá trị font-style font-variant font-weight font-size font-family Thiết lập chế độ in normal nghiêng, xiên hay italic bình thường oblique Thiết lập font bình normal thường hay smallsmall-caps caps Thiết lập in đậm, normal thường bold bolder lighter 100 – 900 font-style font-variant font-weight 18/01/2019 Mô tả Giá trị Thiết lập kích cỡ font xx-small x-small small medium large x-large xx-large smaller larger % Thiết lập loại font family-name hiển thị trang web/ generic-family đối tượng web 44 Bài giảng Thiết kế Web Bài giảng Thiết kế Web Thuộc tính color text-indent text-align letter-spacing text-decoration 45 Mô tả Thiết lập màu chữ Thiết lập khoảng thụt đầu dòng Thiết lập chế độ canh văn Giá trị % left right center justify Thiết lập khoảng normal cách ký tự Thêm hiệu ứng none đặc biệt cho văn underline overline line-through blink 18/01/2019 Bài giảng Thiết kế Web 46 Thuộc tính Layout Position Mơ tả Change case văn Thuộc tính Float Giá trị none upper lower capitalize none color length Thuộc tính float xác định có hay khơng thành phần float (trơi nổi) Thuộc tính float 18/01/2019 Mơ tả Thuộc tính ngắn cho tất thiết lập font Thuộc tính Text Thuộc tính Text (tt) Thuộc tính text-transform Thuộc tính font Bài giảng Thiết kế Web 47 18/01/2019 Giá trị Ví dụ left float: left; right float: right; none float: none; inherit float: inherit; Mô tả Thành phần trôi (float) qua bên trái Thành phần trôi (float) qua bên phải Thành phần không trôi (float) qua bên phải hay trái, dạng mặc định Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài) Bài giảng Thiết kế Web 48 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 đối tượng phía trước bị float để lại Thuộc tính clear Giá trị Ví dụ left clear: left; right clear: right; both clear: both; none clear: none; 18/01/2019 Mô tả Bên trái thành phần không float Bên phải thành phần không float Bên trái phải thành phần không float Đây mặc định thành phần clear, bên trái phải thành phần float 49 Bài giảng Thiết kế Web Thuộc tính Layout Position (tt) position Giá trị 18/01/2019 Các thuộc tính Top, Right, Bottom, Left Mơ tả Thành phần nằm theo thứ static position: static; tự văn bản, dạng mặc định Định vị trí tương đối cho relative position: relative; thành phần Định vị trí tuyệt đối cho thành phần theo thành phần bao position: absolute ngồi (thành phần định vị trí absolute; tương đối position: relative;) theo cửa sổ trình duyệt Ví dụ Các thuộc tính top, right, bottom, left dùng để định vị trí cho thành phần sử dụng thuộc tính position Chú ý: thuộc tính khơng có tác dụng position có giá trị static Thuộc Giá trị Ví dụ Mơ tả tính top right bottom left Minh họa 18/01/2019 51 Bài giảng Thiết kế Web Thuộc tính Layout Position (tt) auto z-index giá trị inherit 18/01/2019 Ví dụ Mơ tả z-index: auto; Tự động xếp thứ tự chồng cho thành phần, dạng mặc định z-index: 10; z-index: inherit; Sắp xếp thứ tự chồng cho thành phần theo giá trị Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài) Minh họa Khoảng cách Khoảng cách Khoảng cách Khoảng cách tính từ mép top: 20px; thành phần bao ngồi, đơn vị px, em, %, Khoảng cách tính từ mép phải ngồi thành phần bao ngồi bottom: Khoảng cách tính từ mép 20px; thành phần bao ngồi Khoảng cách tính từ mép trái left: 20px; thành phần bao right: 20px; 18/01/2019 Bài giảng Thiết kế Web Minh họa 52 Thuộc tính Display Thuộc tính z-index thiết lập thứ tự xếp chồng thành phần Thứ tự chồng xếp dựa theo giá trị số, thành phần HTML có số z-index cao nằm trên, giá trị mặc định Chú ý: z-index làm việc với thuộc tính position Giá trị Khoảng cách Thuộc tính Layout Position (tt) Thuộc tính Z-index Thuộc tính 50 Bài giảng Thiết kế Web Thuộc tính Layout Position (tt) Thuộc tính Position Thuộc tính position thường dùng kèm với thuộc tính định vị trí: left, right, bottom, top Thuộc tính Nguyên lý hoạt động position Cửa sổ trình duyệt giống hệ tọa độ với position đặt đối tượng web vị trí hệ tọa độ Minh họa Bài giảng Thiết kế Web 53 giá trị Mô tả Thành phần hiển thị khối, sử dụng giá trị block thành block phần đứng hàng độc lập so với thành phần trước sau dạng mặc định Thành phần hiển thị nội tuyến (inline, khơng ngắt inline dịng), inline-block Thành phần hiển thị khối, khối nội tuyến Thành phần hiển thị khối nội tuyến cho list-item điểm đánh dấu danh sách none Thành phần không hiển thị Thành phần hiển thị table, ngắt dòng trước sau table thành phần table-row Thành phần hiển thị row table table-cell Thành phần hiển thị cell table Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần inherit bao ngoài) 18/01/2019 Bài giảng Thiết kế Web Minh họa 54 Thuộc tính Layout Position (tt) Thiết lập thuộc tính cho liên kết Thuộc tính Visibility Thuộc tính giá trị collapse hidden visibility Visible Inherit 18/01/2019 Minh họa • Để thiết lập thuộc tính cho liên kết, thiết lập thuộc tính trạng thái: Mô tả Làm "sụp đổ" hàng cột thành phần table, giá trị sử dụng cho thành phần table Trạng thái Thành phần khơng nhìn thấy Hiển thị thành phần, dạng mặc định Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài) Bài giảng Thiết kế Web Minh họa pt pc px a:link { a:hover{ text-decoration:underline; border:#00F solid 1px; background-color:#399; } color:#F00; font-family:verdana; text-decoration:none; 18/01/2019 Bài giảng Thiết kế Web 56 Đơn vị CSS Đơn vị chiều dài em Giải thích Chung cho trạng thái Liên kết chưa thăm Khi rê chuột lên liên kết Khi liên kết thăm Đang nhấn giữ chuột } 55 Đơn vị CSS Đơn vị % in cm mm a a:link a:hover a:visited a:active Đơn vị màu sắc Mô tả Phần trăm Inch (1 inch = 2.54 cm) Centimeter Millimeter em tương đương kích thước font hành, font hành có kích cỡ 14px em = 14 px Đây đơn vị hữu ích việc hiển thị trang web Đơn vị Color-name RGB (r,g,b) RGB (%r,%g,%b) Hexadecimal RGB Mô tả Tên màu tiếng Anh Ví dụ: black, white, red, green, blue, cyan, magenta,… Màu RGB với giá trị R, G, B có trị từ – 255 kết hợp với tạo vô số màu Màu RGB với giá trị R, G, B có trị từ – 100% kết hợp Mã màu RGB dạng hệ thập lục Ví dụ: #FFFFFF: trắng, #000000: đen, #FF00FF: đỏ tươi Point (1 pt = 1/72 inch) Pica (1 pc = 12 pt) Pixels (điểm ảnh hình máy tính) 18/01/2019 Bài giảng Thiết kế Web 57 18/01/2019 Bài giảng Thiết kế Web Một số thuộc tính CSS3 Tổng quan CSS3  Làm việc với thuộc tính CSS3:  Một số module quan trọng CSS3:  Border-radius  Selectors  Border-image  Box Model  Gradient  Backgrounds and Borders 58  Text Effects  Transform, transition, animation  2D/3D Transformations  Chèn nhiều hình với CSS3  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 CSS3 Những thuộc tính CSS3 Thuộc tính  Border-radius: tạo góc bo trịn cho đường viền Ví dụ Mơ tả border-top-left-radius: 5px;  border-radius: 10px; border-top-left-radius  -webkit-border-radius: 10px; border-top-rightradius border-top-right-radius: 5px; border-bottom-leftradius border-bottom-left-radius: 5px; border-bottom-rightradius border-bottom-right-radius: 5px;  -moz-border-radius: 10px;  -ms-border-radius: 10px;  -o-border-radius: 10px; border-top-left-radius: 5px 10px; border-top-right-radius: 5px 10px; border-bottom-left-radius: 5px 10px; border-bottom-right-radius: 5px 10px; Góc - bên trái uốn cong Góc - bên phải uốn cong Góc - bên trái uốn cong Góc - bên phải uốn cong border-radius: 5px; -moz-animation hỗ trợ cho firefox -webkit-animation hỗ trợ cho Google Chrome Safari -ms-animation hỗ trợ cho Internet Explorer -o-animation hỗ trợ cho Opera 18/01/2019 border-radius: 5px 10px; border-radius Những thuộc tính CSS3  Border-radius: 18/01/2019 18/01/2019 62 Bài giảng Thiết kế Web Những thuộc tính CSS3 Tạo border: http://border-radius.com/  Border-image: -webkit-border-radius: 24px; -moz-border-radius: 24px; border-radius: 24px; -webkit-border-top-left-radius: 24px; -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; border-top-left-radius: 24px; border-top-right-radius: 23px; border-bottom-right-radius: 45px; border-bottom-left-radius: 10px; Cả góc uốn cong border-radius: 5px 10px 4px 8px; 61 Bài giảng Thiết kế Web border-radius: 5px 10px 4px; -webkit-border-image: url(border.png) 30 30 round; -o-border-image: url(border.png) 30 30 round; border-image: url(border.png) 30 30 round; -webkit-border-image: url(border.png) 30 30 stretch; -o-border-image: url(border.png) 30 30 stretch; border-image: url(border.png) 30 30 stretch; Minh họa Minh họa 63 Bài giảng Thiết kế Web 18/01/2019 Bài giảng Thiết kế Web Những thuộc tính CSS3 Những thuộc tính CSS3  CSS3 Shadow:  CSS3 Gradient: div { width: 300px; height: 100px; background-color: yellow; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow: 10px 10px 5px #888888; } 64  Gradient thành phần phổ biến trang web  Gradient thường bao gồm:  điểm dừng màu (color stop)  điểm chuyển màu  Với CSS3: sử dụng 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 CSS3 Những thuộc tính CSS3  CSS3 Gradient:  CSS3 Gradient: #grad1 { height: 200px; width:500px; background: -webkit-linear-gradient(left, red , blue); background: -o-linear-gradient(right, red, blue); background: -moz-linear-gradient(right, red, blue); background: linear-gradient(to right, red , blue); } #grad1 { height: 200px; width:500px; background: -webkit-linear-gradient(red, blue); /* For Safari 5.1 to 6.0 */ 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: linear-gradient(red, blue); /* Standard syntax (must be last) */ } Linear Gradient - Top to Bottom

This linear gradient starts at the top It starts red, transitioning to blue:

18/01/2019 67 Bài giảng Thiết kế Web 18/01/2019 Bài giảng Thiết kế Web Những thuộc tính CSS3 Những thuộc tính CSS3  CSS3 Gradient:  CSS3 Gradient: #grad1 { height: 200px; width:500px; background: -webkit-linear-gradient(left top, red , blue); background: -o-linear-gradient(bottom right, red, blue); background: -moz-linear-gradient(bottom right, red, blue); background: linear-gradient(to bottom right, red , blue); } 18/01/2019  Gradient với góc độ: #grad1 { height: 200px; width:500px; background: -webkit-linear-gradient(45deg, red, blue); background: -o-linear-gradient(45deg, red, blue); background: -moz-linear-gradient(45deg, red, blue); background: linear-gradient(45deg, red, blue); } 69 Bài giảng Thiết kế Web 68 18/01/2019 Bài giảng Thiết kế Web Những thuộc tính CSS3 Những thuộc tính CSS3  CSS3 Gradient:  Tạo CSS3 Gradient: www.Css3maker.com  Gradient với nhiều điểm màu: 70 #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:  Rotate(10deg)  Cho phép xoay, kéo dãn, kéo nghiêng thành phần trang transform: rotate(15deg) ; transform: scale(0.5,1); transform: skew(45deg, 5deg) ; 18/01/2019 Minh họa Bài giảng Thiết kế Web 73 18/01/2019 Bài giảng Thiết kế Web Transition Transform – Transition - Animation Thuộc tính  Transition  Sử dụng hành động (hover, click,…) để thực Transition transitionproperty transitionduration transition-property: xác định thuộc tính chuyển đổi giá trị transition-timing-function: xác định tốc độ hiệu ứng chuyển tiếp transitiontiming-function Ví dụ none transition-property: none; all transition-property: all; Thời gian transition-duration: 2s; ease transition-timing-function: ease; ease-in transition-timing-function: ease-in; ease-out transition-timing-function: ease-out; ease-in-out transition-timing-function: ease-in-out; linear transition-timing-function: linear; transition-duration: quy định thời gian chuyển đổi cubictransition-timing-function: bezier(n,n,n,n) cubic-bezier(0,1,0.35,0); 18/01/2019 74 75 Bài giảng Thiết kế Web 18/01/2019 Mô tả Hiệu ứng q trình chuyển đổi khơng hiển thị Xác định hiệu ứng trình chuyển đổi cho tất thuộc tính Q trình chuyển đổi thời gian Xác định hiệu ứng trình chuyển đổi với khởi đầu chậm, sau nhanh chóng, sau kết thúc chậm Xác định hiệu ứng trình chuyển đổi với khởi đầu chậm chạp Xác định hiệu ứng trình chuyển đổi với kết thúc chậm Xác định hiệu ứng trình chuyển đổi với khởi đầu kết thúc chậm Xác định hiệu ứng trình chuyển đổi với tốc độ từ đầu đến cuối Xác định giá trị cho hiệu ứng trình chuyển đổi theo giai đoạn, giá trị xác định từ tới Bài giảng Thiết kế Web 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; } 76 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); } 18/01/2019 Bài giảng Thiết kế Web Minh họa 77 18/01/2019 Bài giảng Thiết kế Web 78 13 Animation Transform – Transition - Animation Thuộc tính animationname animationduration animationtiming-function  CSS animation  Tạo hoạt hình  Thay ảnh động, hoạt hình Flash animation-name: xác định tên cho animation animationiterationcount animation-duration: quy định thời gian chuyển đổi animation-iteration-count: xác định số lần thực chuyển động animationdirection animation-timing-function: xác định tốc độ hiệu ứng chuyển tiếp animationplay-state giá trị tên animation Ví dụ animation-name: myAnimation; Mơ tả Xác định tên cho animation Tương tự transition-duration Tương tự transitoin-timing-function số tự nhiên infinite normal alternate paused running animation-iterationcount: 4; animation-iterationcount: infinite; animation-direction: normal; animation-direction: alternate; animation-play-state: paused; animation-play-state: running; Xác định số lần thực chuyển động Chuyển động thực không giới hạn số lần Chuyển động bình thường, dạng mặc định Chuyển động đảo ngược chu kỳ Xác định chuyển động dừng lại Xác định chuyển động chạy Minh họa 18/01/2019 Bài giảng Thiết kế Web 18/01/2019 79 Transform – Transition - Animation 80 Transform – Transition - Animation  CSS animation  CSS animation  keyframe  Hỗ trợ tạo hình ảnh dạng động/hoạt hình  Hình ảnh động tạo cách thay đổi thuộc tính từ tập hợp style sang style khác .sanphammoi{ background-color:#93F; animation: myfirst 5s infinite; -webkit-animation: myfirst 5s infinite;} @-webkit-keyframes myfirst { 0% {background:#93F;} 25% {background:#939;} 50% {background:#933;} 100% {background:#903;} } @keyframe animationname { keyfarmes-selector { css-styles;} } @keyframes myfirst { 0% {background:#93F;} 25% {background:#939;} 50% {background:#933;} 100% {background:#903;} }  Animationname: tên animation  Keyframes-selector: tỷ lệ phần trăm thời gian chuyển động  Css-styles: nhiều thuộc tính css quy định 18/01/2019 Bài giảng Thiết kế Web Bài giảng Thiết kế Web Minh họa 81 18/01/2019 Bài giảng Thiết kế Web Hình với CSS3 Hình với CSS3  Thực chèn hình ảnh làm cho web  Chèn nhiều hình với vị trí xác: 82 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, -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 ... css quy định 18/01/2019 Bài giảng Thiết kế Web Bài giảng Thiết kế Web Minh họa 81 18/01/2019 Bài giảng Thiết kế Web Hình với CSS3 Hình với CSS3  Thực chèn hình ảnh làm cho web  Chèn nhiều hình... 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 38 34 930 Website: http://et.tdmu.edu.vn 15 ... 67 Bài giảng Thiết kế Web 18/01/2019 Bài giảng Thiết kế Web Những thuộc tính CSS3 Những thuộc tính CSS3  CSS3 Gradient:  CSS3 Gradient: #grad1 { height: 200px; width:500px; background: -webkit-linear-gradient(left

Ngày đăng: 24/02/2023, 09:42

Xem thêm: