Tìm hiểu về HTML5 và CSS3
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (552.18 KB, 27 trang )
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
LỜI MỞ ĐẦU
Hiện nay, công nghệ dành cho thiết bị di động ngày càng phát triển. Nếu như
trước đây, bạn phải dùng chiếc máy tính để bàn (MTĐB) cồng kềnh cùng trình
duyệt web IE (Internet Explorer) để lướt web, thì giờ đây với máy tính xách tay
(MTXT), điện thoại thông minh (ĐTTM) cùng rất nhiều trình duyệt khác (Firefox,
Opera…) bạn có thể dễ dàng lướt “net” ở bất kỳ đâu. Tuy nhiên với các thiết bị,
trình duyệt web khác nhau, nội dung hiển thị trên màn hình sẽ khác nhau. Chẳng
hạn, trên máy tính bạn xem trang web này rất tốt, nhưng trên ĐTTM thì giao diện
và cấu trúc trang bị xáo trộn. Hay bạn có thể xem phim rất tốt với IE nhưng với
Firefox thì không.
Vậy giải pháp nào để người dùng có thể sử dụng bất kỳ trình duyệt
trên bất kỳ thiết bị nào cũng có thể xem được đầy đủ, trọn vẹn nội dung,
thông tin trên internet.
HTML5 cho phép nhà phát triển, lập trình web tạo ra các trang web có những
tính năng ưu việt hơn. Không những vậy, HTML5 còn đem đến cho người dùng
những trải nghiệm về tốc độ truy cập web nhanh hơn, tốt hơn, tài nguyên phong phú
hơn. HTML5 và CSS3 cũng làm cho các ứng dụng web và các trang web hấp dẫn
hơn. HTML5 có các tính năng mới được thêm vào giúp cho việc xây dựng ứng dụn
g web dễ dàng hơn rất nhiều. Ví dụ như nhiều màu sắc hơn và hỗ trợ đường cong,
việc làm mờ, góc tròn (thay vì ép buộc các nhà thiết kế web sử dụng các hình ảnh
để tạo ra các góc tròn), và dĩ nhiên là cả việc lưu trữ offline. Tất cả những điều này
làm một trang Web trở nên dễ nhìn hơn, bắt mắt hơn. Vì vậy nhóm chúng dem đã
chọn đề tài tài: “Tìm hiểu về HTML5 và CSS3”.
Hưng Yên, ngày tháng năm 2013
Nhóm sinh viên thực hiện
Nguyễn Thế Anh
Đỗ Thị Giang
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 1
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
I.
Tổng quan về HTML5 và CSS3
1. HTML5 và CSS3 là gì?
HTML5 và CSS3 là các version mới hơn của HTML và CSS. Nó được bổ sung
thêm các đặc tính mới để giúp cho việc thiết kế web dễ dàng hơn, đồng thời
làm cho trang web hiển thị sinh động hơn với người xem.
2. Vài đặc điểm mới
a. Video:
HTML5 giúp người thiết kế nhũng một video vào trang web đơn giản. Còn với
người xem, HTML5 cho phép họ xem video mà không cần phải thêm một plugin
như Flash hoặc Silverligh vào trình duyệt. Tính năng video mới này sẽ là một sự
trợ giúp tuyệt vời cho những người sử dụng các thiết bị di động để duyệt web. Hiện
tại trình duyệt Safari, Chrome và Internet Exporer 9 hỗ trợ HTML5 video định
dạng H.264. CÒn Firefox hiên thời chỉ hỗ trợ HTML5 video định dạng OggVorbis
b. Các hiệu ứng động và trò chơi
HTML5 và CSS3 phối hợp với nhau giúp người thiết kế web dễ dàng hơn trong
việc tạo ra các hiệu ứng động và các trò chơi tương tác mà không cần dùng đến
Flash
c. Làm cho trang web hấp hẫn hơn:
HTML5 và CSS3 cũng làm cho các ứng dụng trong web và các trang web hấp
hẫn hơn. Nhiều màu sắc hơn, hỗ trợ đường cong, làm mờ, góc tròn (bo tròn góc
các đối tượng trong trang), lưu offline… Những điều này làm cho một trang
web đẹp hơn, bắt mắt hơn và làm cho việc hiển thị thông tin trong trang sát với
những gì mà người thiết kế tưởng tượng trong đầu.
3. Khả năng tương thích:
HTML5 và CSS3 vẫn chưa được hoàn tát, nhưng chúng đã làm thay đổi bộ mặt của
trang web. Một số trình duyệt như các phiên bản hiên hành của Safari và chrome đã
thực hiện được một số tính năng từ các phiên bản dự thảo của HTML5 và CSS3. Và
với việc sử dụng những trình duyệt này bạn có thể xem nhiều trang web mà trong đó
cũng sử dụng HTML5 và CSS3 như CNN.com, The NewYork
-
Phiên bàn IE8 hỗ trợ HTML5 rất hạn chế,còn IE9 sẽ hỗ trợ H264 video, âm
thanh nhùng, đồ họa vector tỷ lệ và CSS3
-
HTML5 và CSS3 được kết hợp với các công nghệ khác như JavaScrip có thể
rất hữu ích cho phong cách, định dạng và tốc độ hoạt động của bất kỳ trang web
nào nếu được sử dụng đúng. Hai ngôn ngữ sẽ cách mạng hóa cách chúng ta lập
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 2
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
trình và xem Internet với các tính năng cải tiền all-in-one, có thể loại bỏ việc
phải sử dụng nhiều ứng dụng của bên thứ ba (ví dụ như Flash)
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 3
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
I.
Tìm hiểu về HTML5
1. Lịch sử hình thành và phát triển của HTML5
-
Năm 2004 “WHAT” với những thành viên đến từ Apple, Mozilla
Foundation, và Opera Software được lập ra với nhiệm vụ phát triển
HTML5.
-
Tháng 10-2006 W3C (world wide web Consortium) thống báo họ sẽ hợp tác
với “WHAT”. W3C quyết định sẽ không phát triển XHTML nữa và thay vào
đó sẽ hợp tác với WHAT để phát triển HTML5.
-
Năm 2008 phiên bản đầu tiên HTML5 ra mắt. Phiên bản thử nghiệm đầu
tiên của HTML5 được viết bới Ian Hickson được giới thiệu. HTML5 vẫn
đang trong quá trình phát triển công nghệ.
-
Năm 2008 Firefox 3 tương thích với HTML5 trên trình duyệt. Chrome
Safari và tất nhiên là IE cũng bắt đầu tương thích.
-
Tháng 1 -2010 YouTobe ra mắt trình chơi video bằng HTML5
-
Tháng 4 -2010 Steve Jobs tuyên bố không với Flash qua 1 bức thư. Jobs lí
giải sap flash không được sử dụng trên các thiết bị của Apple, mà thay vào
đó là HTML5.
-
Tháng 5-2010 trang chia sẻ tài liệu Scribd chuyển sang sử dụng HTML5,
tọa lên giao diện người dung tốt hơn cho những người sử dụng dịch vụ của
họ trên các thiết bị máy tính bảng.
-
Tháng 12 -2010 Chrome web Store mở cửa được xây dựng trên nền
HTML5. Điều này giúp cho các thiết bị tablets mua phần mềm dễ dàng hơn.
-
Tháng 7-2011 Pandora.com sử dụng HTML5. Trang nghe nhạc online nổi
tiếng Pandora bắt đấu sử dụng trình chơi nhạc bằng HTML5. Nó được đánh
giá là nhanh và nhẹ hơn Flash.
-
Tháng 9-2011 34% trong top 100 websites sử dụng HTML5
2. Định nghĩa về HTML5
HTML5 là sự phát triển mạnh mẽ đột biến của HTML, viết tắt của cụm từ Hyper
Text Markup Language. Đây là hình thức định dạng cốt lõi của hầu hết các website
trên internet. HTML5 với phiên bản đầu tiên được hình thành trong năm 2008 nhưng
mãi tới năm 2011 mới chính thức được ra mắt với một ánh hào nhoáng của công nghệ
hiện đại. Tuy nhiên, trong thời điểm đó rất nhiều trình duyệt chưa kịp thay đổi để hỗ
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 4
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
trợ nó. Đến ngày nay, hầu hết các trình duyệt phổ biến như Chrome, Safari, Firefox,
Opera, IE đều hỗ trợ HTML5. Điều đó đã tạo ra một cuộc cách mạng lớn cho nền công
nghệ web.
HTML5 là sự kế thừa của HTML 4.01, được phát hành đầu tiên vào năm 1999.
Việc tạo ra một ngôn ngữ mới dựa theo các tiêu chuẩn như:
- Các tính năng mới phải dựa trên HTML, CSS, DOM, và JavaScript.
- Làm giảm nhu cầu cho các plugins bên ngoài (như Flash).
- Xử lý lỗi tốt hơn.
- Đánh dấu để thay thế kịch bản.
- HTML5 nên phát triển cho các thiết bị độc lập.
- Quá trình phát triển nên được công khai nhằm cho các tổ chức khác có thể lấy làm cơ
sở phát triển.
3. Tổng quan về cú pháp HTML5
a. Cấu trúc file mã HTML5
- Khai báo DOCTYPE
Được sử dụng để kiểm tra hợp lệ các tài khoảnn <!Doctype html>
- Vung nội dung Metadata:
Là phần mềm nội dung thiết lập cách trình bày hoặc hành vi của các nội dung
còn lại trên trang
Có thể sử dụng nội dung metadata để thiết lập quan hệ giữa các tài liệu HTML
Thường xuyên chứa các từ khóa hoặc mô ta cho trong web, và được các bộ máy
tìm kiếm sử dụng để phân loại trang web
Được đặt trong thành phần của <Head>
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 5
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
- Vùng flow
Đại diện cho các phần tử được coi là nội dung của trang web.
Các thẻ đánh dấu nội dung đều thuộc vùng này.
Những phần tử được thêm mới trong HTML5 : <Article>, <Aside>, <Audio>,
<Canvas>, <Hgroup>,…
- Vùng Sectioning
Là vùng nội dung mới của HTML5
Bao gồm 4 phần từ: <article>, <aside>, <nav>, và <section>
- Vùng Heading
Chứa tất cả các phần tử tiêu đề chuẩn hiện đang được sử dụng trong HTML 4.0
bao gồm :
, ,…
Với HTML5: bổ sung thêm <hgroup>
-
Vùng phrasing:
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 6
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Là văn bản của tài liệu bao gồm các phần tử đánh dấu văn bản bên trong một
đoạn văn
Là tập con của vùng Flow
- Vùng Embedded
Là nội dung nhập một tài nguyên khác như hình ảnh hay video vào trong tài liệu.
- Vùng Interactive
Là những phần tử được sử dụng để tương tác người dung
b. Các phần tử mới trong HTML5
- Phần tử header
Vùng Header chứa tiêu đề và phụ đề trang. Bạn sử dụng thẻ <header> để tạo ra
nội dung cho vùng Header của trang. Thẻ<header> có thể chứa thông tin mở về
một <section> và <article> ngoài chính trang web đó. Trang web được tạo ra ở đây có
một vùng Header cho trang này, được hiển thị trong thiết kế cao cấp, cũng như
vùng Header ở bên trong vùng Article và Section. Hình 1 đưa ra một ví dụ đánh dấu
thẻ <header>.
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 7
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Hình 1
Thẻ <header> cũng có thể chứa một thẻ <hgroup>, như trong hình 2.
Thẻ <hgroup> tạo nhóm các tiêu đề với nhau, bằng cách sử dụng các mức tiêu
đề đến được hiển thị ở đây có một tiêu đề chính (Tiêu đề) và một phụ đề
(Nội dung).
`Hình 2
- Phần tử Navigation
Bạn tạo vùng Navigation (Chuyển hướng) của trang bằng cách sử dụng
thẻ <nav>. Phần tử <nav> định nghĩa một vùng đặc biệt dành cho việc chuyển hướng.
Thẻ <nav> nên được sử dụng để chuyển hướng trang web chính, không dùng để thiết
lập các liên kết có chứa trong các vùng khác của trang. Vùng Navigation này có thể
chứa mã như được hiển thị trong hình 3.
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 8
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Hình 3
-
Phần tử Article và section
Trang web mà bạn đang thiết kế có chứa một phần Article, giữ nội dung thực sự
của trang. Bạn sử dụng thẻ <article> để tạo vùng này, và thẻ đó định nghĩa nội dung có
thể được sử dụng độc lập với các nội dung khác được tìm thấy trên trang này. Ví dụ,
nếu bạn muốn tạo ra một nguồn cấp dữ liệu RSS, bạn có thể sử dụng <article> để xác
định nội dung duy nhất. Thẻ<article> xác định nội dung có thể được gỡ bỏ và được đặt
trong ngữ cảnh khác và có thể hoàn toàn dễ hiểu.
Vùng Article trong kế hoạch của Acme United có chứa ba vùng Section. Bạn
tạo ra các vùng này bằng cách sử dụng thẻ<section>. Một <section> chứa các vùng
thành phần của nội dung trang web có liên quan . Thẻ <section> — và
thẻ<article> nữa — có thể chứa các header (tiêu đề), các footer (chân trang), hoặc bất
kỳ các thành phần nào khác cần thiết để hoàn thành phần này. Thẻ <section> dùng cho
nội dung tạo nhóm. Nội dung cho cả hai thẻ <section> và thẻ <article>thường bắt đầu
bằng một <header> và kết thúc bằng một <footer>, với nội dung cho thẻ này ở giữa.
Thẻ <section> cũng có thể chứa các thẻ <article>, cũng giống như
thẻ <article> có thể chứa các thẻ <section>. Thẻ<section> nên được dùng để tạo nhóm
các thông tin giống nhau, và thẻ <article> nên được sử dụng cho các thông tin như một
bài viết hoặc một blog mà chúng có thể bị gỡ bỏ và được đặt trong một ngữ cảnh mới
mà không ảnh hưởng đến ý nghĩa của nội dung. Thẻ <article> như tên gọi của nó, cung
cấp một gói thông tin đầy đủ. Ngược lại, thẻ <section> chứa thông tin liên quan, trừ
thông tin không thể được đặt trong một ngữ cảnh khác với chính nó, do nghĩa của nó
sẽ bị mất.
4 với một ví dụ về cách sử dụng thẻ <article> và <section>.
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 9
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Hình 4
- Phần tử Aside
Bạn tạo vùng Aside theo kế hoạch Acme United bằng cách sử dụng thẻ <aside>.
Hãy sử dụng thẻ này khi bạn muốn tạo nội dung bổ sung mà không còn chỗ nào để
thêm vào bài viết. Trong các tạp chí, các vùng nhận xét thường được sử dụng để làm
nổi bật một điểm nào đó và được thực hiện trong chính bài viết đó. Thẻ <aside> chứa
nội dung có thể được loại bỏ mà không ảnh hưởng đến các thông tin được truyền đạt
bởi bài viết, phân đoạn, hoặc trang chứa nó.
Hình 5 đưa ra một ví dụ về cách sử dụng thẻ <aside>.
Hình 5
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 10
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
-
Phần tử Footer
Phần tử <footer> chứa thông tin về một trang, bài viết, hoặc một phần, chẳng
hạn như tác giả hoặc ngày viết bài. Là phần cuối trang, nó có thể chứa bản quyền hoặc
các thông tin pháp lý quan trọng khác, như trong hình 6
.
Hình 6
Thẻ Video
Thẻ <video> được dùng để xác định các video trong tài liệu HTML, như là các
movie clip, video stream v..v..
Hiện tại có 3 định dạng video được hỗ trợ cho phần tử <video>, đó là: MP4,
WebM và Ogg.
Cấu trúc:
báo</video>
src=”Đường
dẫn”
controls=”controls”>Dòng
thông
Thuộc tính tùy chọn
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 11
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Mã html
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 12
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Hình minh họa
Thẻ Audio
Tag <audio> định nghĩa âm thanh, như nhạc hay trường audio khác.
Thường dùng kèm với tag <source> để hiện thị được nhiều nội dung hơn
Cấu trúc:
<audio src=” đường dẫn file” controls=”controls”>dòng thông báo</audio>
Thuộc tính tùy chọn
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 13
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Mã html
Hình minh họa
Thẻ Canvas
Tag <canvas> được dùng để hiển thị đồ họa.
Tag <canvas> sử dụng như vùng chứa đồ họa, việc vẽ đồ họa sẽ do script thực hiện.
Cấu trúc:
<canvas></canvas>
Thuộc tính
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 14
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Mã html
Hình minh họa
Tác dụng của các thành phần mới trong HTML5:
- Giảm bớt sự phụ thuộc vào thẻ <div>
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 15
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
- Thay thế bởi một cấu trúc trang web thống nhất, dễ đọc hơn
HTML5 không thay thế bất kỳ cú pháp HTML nào, mà chỉ bổ sung thêm các thành
phần (thẻ) mới vào danh sách hiện có.
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 16
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
II.
Tìm hiểu về CSS3
1. Tổng quan về CSS3.
Là tiêu chuẩn mới nhất của CSS. CSS3 tuy chưa được chính thức sử dụng
rộng rãi nhưng những gì mà nó có thể làm được quả là rất đáng mong đợi. Về
mặt nguyên lý thì có vẻ sự ra đời của CSS3 đã phần nào lấn sân của Javascript.
Bởi vì người ta nói rằng HTML dùng để thể hiện nội dung, CSS dùng để trình
bày cấu trúc và Javascript thì tương tác với người dùng. Nhưng những tính năng
mới của CSS3 như transition và animation phần nào đã làm thay đổi nguyên lý
này.
Hiện tại khi sử dụng Javscript người lập trình bao giờ cũng phải tính đến
điều kiện trình duyệt của người dùng không bật Javascript. Nhưng nếu trong
tương lai (hy vọng không xa) chúng ta có thể tạo ra những hiệu ứng động đơn
giản mà không cần sự hỗ trợ của Javascript thì cũng rất tiện chứ sao. Trong bài
này tôi sẽ cùng bạn khám phá một vài trong rất nhiều những cách sử dụng
transition khác nhau của CSS3.
2. Làm việc với các thuộc tính mới trong CSS3.
Border-radius:
Thuộc tính border trong css3 dùng để định dạng các dạng bo góc
- Thuộc tính
+ Boder-top-left-radius: 5px: Góc trên bên trái sẽ được uốn cong
+ Boder-top-right-radius: 5px : Góc trên bên phải sẽ được uốn cong
+ border-bottom-left-radius: 5px: Góc dưới - bên trái sẽ được uốn cong
+ border-bottom-right-radius: 5px: Góc dưới - bên phải sẽ được uốn cong.
+ border-radius: 5px 10px 4px 8px: Cả 4 góc đều được uốn cong.
VÍ dụ:
.Specialsale{
Width: 400px;
Background-color:#D67E5C;
Border: 2px #773636 solid;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
Border-radius: 24px; }
-
Border-images:
Dùng để định dạng các dạng border bằng hình ảnh.
- Cú pháp: border-image: source slice width outset repeat;
+ Slice: Phần bù bên trong của hình border
+ Outset: Số lượng diện tích mà hình nền border mở rộng
Thuộc tính:
+ Border-image-source: Đường dẫn đến image dùng làm border
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 17
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
+ border-image-slice 1 giá trị: Phần lát cắt image với 4 thành phần của border
như nhau.
+ border-image-slice 2 giá trị: Phần lát cắt image với 2 thành phần ngang của
border như nhau và 2 thành phần dọc cũng như nhau.
+ border-image-slice 3 giá trị: Phần lát cắt image với thành phần dọc của
border như nhau.
+ border-image-slice 4 giá trị: Phần lát cắt image với 4 thành phần của border
khác nhau.
+ border-image-width 1 giá trị : Bề rộng image với 4 thành phần của border
như nhau
+ border-image-width 2 giá trị : Bề rộng image với 2 thành phần ngang của
border như nhau và 2 thành phần dọc cũng như nhau.
+ border-image-width 3 giá trị : Bề rộng image của thành phần trái và phải
bằng nhau.
+ border-image-width 4 giá trị : Bề rộng image của 4 thành phần khác nhau
+ border-image-outset 1 giá trị : Xác định giá trị image vượt ra ngoài vùng
giới hạn của vùng bao, với 4 thành phần của border vượt ra ngoài như nhau.
+ border-image-outset 2 giá trị : Xác định giá trị image vượt ra ngoài vùng
giới hạn của vùng bao, với 2 thành phần trái và phải bằng nhau và 2 thành phần
trên dưới bằng nhau.
+ border-image-outset 3 giá trị : Xác định giá trị image vượt ra ngoài vùng
giới hạn của vùng bao, với 2 thành phần trái và phải bằng nhau.
+ border-image-outset 4 giá trị : Xác định giá trị image vượt ra ngoài vùng giới
hạn của vùng bao, với 4 thành phần khác nhau.
+ border-image-repeat với giá trị repeat : Image của border sẽ được lặp lại, cả
phần nội dung và phần border.
+ border-image-repeat với giá trị round : Image của border sẽ được lặp lại, cả
phần nội dung và phần border, tuy nhiên vùng lặp sẽ tự động tỷ lệ cho phù hợp
với vùng bao
+ border-image-repeat với giá trị stretch : Image của border sẽ được kéo dài,
nếu border-image-repeat không khai báo thì border image sẽ có dạng stretch.
+ border-image-repeat với 2 giá trị : Image của border sẽ được lặp lại với 2
thành phần trên và dưới giống nhau, trái và phải giống nhau.
+ border-image : Tổng hợp của các dạng border-image trên.
Ví dụ:
Border: 20px #773636 solid;
-webkit-border-image: url(“images/border-bg.png”)33% repeat;
-moz-border-image: url(“images/boder-bg.png”)33%repeat;
Border-image: url(“images/boder-bg.png”)33% repeat;
Gradient:
Thông thường, để tạo hình nền đổ bóng bạn sẽ phải dùng một image làm
background, tuy nhiên có cách khác đó là dùng CSS với các thuộc tính linearGVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 18
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
gradient, o-linear-gradient, moz-linear-gradient, webkit-linear-gradient, mslinear-gradient và webkit-gradient. Cách này giúp hình đổ bóng được đẹp hơn,
linh động hơn và tiết kiệm băng thông cũng như tăng tốc độ tải cho trang
Ví dụ:
.gradient{
Width: 450px;
Border: #000 4px solid;
Background-color:#fff;
Background-image: -moz-linear-gradient (white, black) ;
Background-image: -webkit-gradient (linear, 0 0, 0 100%, from (white), to (black));
}
- Thuộc tính:
+ Thêm góc độ và nhiều điểm dừng:
+ Tăng thêm sự đa dạng của gradient
+ Kiểm soát tốt hơn
Ví dụ: Background-image: -moz-linear-gradient (45deg, white, green, black);
Background-image: -moz-radial-gradient(60% 60%, circle closest-comer, white,
black);
+ Lặp lại gradient:
Background-image: -moz-repeating-linear-gradient(left, white 80%, black, white);
+ Sử dụng hệ màu RGBA để định nghĩa gradient
.gradient h1{
Margin:0; font-weight:bold; font-size:48px; color:#c33; text-align:center,
Background-image: -moz-linear-gradient(rgba(174, 185, 196, 0.9), rgba(110,
124,140, 0.9));}
Transform:
Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên trang
Ví dụ:
.transform {
margin-top:2em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(-45deg);
Transform: rotate(-45deg);
}
Transition:
Sử dụng link để thực hiện Transition
- Thuộc tính
+ Transition-duration: Quy định thời gian chuyển đổi
+ Transition-timing-function: Xác định tốc độ đường cong của hiệu ứng chuyển
tiếp.
+ Một số giá trị của transition-timing-function
+ Linear: Chỉ định một hiệu ứng chuyển tiếp với cùng một tốc độ từ đầu đến
cuối (tương đương với kiểu cublic-bezier(0,0,1,1))
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 19
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
+ Ease: Chỉ định một hiệu ứng chuyển tiếp với một sự khởi đầu chậm, sau đó
nhanh chóng, sau đó kết thúc chậm
+ Ease-in: Chỉ định một hiệu ứng chuyển tiếp với một khởi đầu chậm
+ Ease-uot: Chỉ định một hiệu ứng chuyển tiếp với một kết thúc chậm (tương
đương với cubic-bezier (0,0,0.58,1))
+ Ease-in-uot: Chỉ định một hiệu ứng chuyển tiếp với một sự khởi đầu chậm và
kết thúc
+ cubic-bezier(n,n,n,n): Xác định giá trị của riêng bạn trong cách chức năng
khối bezier. Các giá trị có thể là giá trị số 0-1
Ví dụ:
.transition {
Padding: 5px 0px;
Background:#C9C;
-webkit-transition-property: background;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-uot;
}
Nimation trong CSS3:
Thuộc tính animation xác định một chuyển động của một tag hay một hình
ảnh, là sự tổng hợp của các thuộc tính: animation-name, animation-duration,
animation-timing-function, animation-delay, animation-iteration-count, animationdirection.
- Thuộc tính:
+ animation-name: Xác định tên cho một animation.
+ animation-duration: Xác định thời gian để hoàn thành một chuyển động, mặc
định là 0s.
+ animation-timing-function: tốc độ chuyển động
+ animation-delay: Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định
sẽ là 0
+ animation-iteration-count: Số lần thực hiện
+animation-play-state: Xác định chuyển động dừng lại hay chuyển động chạy
+ animation: Đây là dạng tổng hợp của các thuộc tính trên, ngoại trừ thuộc tính
animation-play-state.
Ví dụ:
#Spin{
Margin-top:2em;
-webkit-animation-name: imageRotate
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:2;
-webkit-animation-timing-function:ease-in-out;
}
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 20
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
@--webkit-keyframes imageRotate{
From{
-webkit-transform:rotate(0deg);
}
To{
-webkit-transfrom:rotate(360deg);
}
}
3. Làm việc với font Wed.
- @font-face:
+ Cho phép những font chữ vào trang bằng cách khai báo font đó và đặt font
chữ trên web server
+ Là giải pháp khắc phục việc phải cài đặt font chữ trên máy tính
Ví dụ:
@font-face{
Font-family: Sigmar;
Src: url (Sigmarone.otf);
}
H2 {
Font-size:1.125em;
Letter-spacing:0.2em;
Font-weight:lighter;
Text-transform:uppercase;
Font-family: Sigmar, Georgia, Palatino, Times New Roman, serif;
}
- Kiểu định dạng font chữ:
+Open Type(OTF): Định dạng phổ biến hỗ trợ glyph
+TrueType(TTF): Nền tảng tương thích và cung cấp các điều khiển tinh vi sắp
chữ
+SVG : Định dạng vector dựa trên hiện nay chỉ hỗ trợ IOS của Apple IPod
+Web open font format (WOFF): Bao gồm nhiều khả năng nén các tập tin font
chữ và tối ưu hóa.
+Embedded OpenType (EOT)
- Sử dụng dịch vụ web để tạo nhiều font
@font-face Ơ
Font-family: ‘SigmarRegular’;
Src: url(‘fonts/sigmarone-webfont.eot’);
Src: url(‘fonts/sigmarone-webfont.eot?#iefix’) format(‘embedded-opentype’),
Src: url(‘fonts/sigmarone-webfont.woff) format (truetype),
Src: url(‘fonts/sigmarone-webfont.svg#SigmarRegular’) format (‘svg’);
Font-weight: nomal;
Font-style: nomal;
}
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 21
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
4. Chèn nhiều hình nền với CSS3
Cách sử dụng nhiều hình nền (Multiple Backgrounds) bằng CSS3
Có lẽ đối với nhiều bạn thì việc chèn hình nền vào web đã không còn gì xa lạ.
Nhưng chúng ta lại bị giới hạn chỉ có thể chèn một hình nền (background) ở phần
khai báo. Bây giờ, với sự hỗ trợ của CSS3, chúng ta đã có thể cho hiển thị nhiều
hình nền chỉ với 1 khai báo.
Để các bạn dễ hiểu, chúng ta hãy xem lại cách mà chúng ta muốn hiển thị nhiều
hình nền trong web của mình.
.overcast1 {
background-image:
url("images/overcast.png");
background-position: 150px 25px;
}
.rainbow {
background-image: url("images/rainbow.png");
background-position: 200px 10px;
}
.overcast2 {
background-image:
url("images/overcast.png");
background-position: 250px 25px;
}
.sunny {
background-image: url("images/sunny.png");
background-position: 100px 10px;
}
Trong đoạn code trên , để hiển thị nhiều ảnh nền (background) chúng ta phải
tạo nhiều thẻ với các lớp (class) khác nhau để hiển thị cho từng ảnh. Nhưng với
CSS3 , các bạn có thể gom nó thành một lớp duy nhất.
.weather {
width: 500px;
height: 280px;
margin: 50px auto;
background-image: url("images/overcast.png"),
url("images/rainbow.png"),
url("images/overcast.png"),
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 22
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
url("images/sunny.png");
background-position: 150px 25px,
200px 10px,
250px 25px,
100px 10px;
background-repeat: no-repeat;
}
Trong đoạn code trên, chúng ta chèn 4 hình nền với các vị trí khác nhau, kết quả
hiển thị giống như hình bên dưới :
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 23
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
-
Ghi chú:
+ Không nên sử dụng kết hợp thuộc tính border-image và thuộc tính borderradius
+ Gradient trong css giống với gradient được tạo ra trong các chương trình đồ
họa: có điểm dừng màu và điểm chuyển màu.
+ Có thể tạo được nhiều điểm dừng màu và điểm chuyển màu để gradient
phong phú hơn
+ Sử dụng giá trị vị trí: top, left, right, bottoom để điều chỉnh chính xác nhiều
hình nền trong CSS
5. Giới thiệu CSS3 Media Queries.
- Media Query là một bước cải tiến của luật @media bằng cách kết hợp Media
Type và các thông số khác như độ phân giải, kích thước, màu sắc,… để tăng
thêm tính chặt chẽ và linh hoạt của các luật này. Mỗi luật của Media Query là
một biểu thức logic và chỉ được áp dụng khi nó có giá trị true.
- Các Media Query có thể được sử dụng bằng các cách dùng thẻ <link> trong
HTML hoặc thẻ <?xml-stylesheet> trong XML, ngoài ra thì trong HTML bạn
có thể dùng các luật @import và @media. Các ví dụ sau sẽ áp dụng style css
cho các loại máy vi tính và hỗ trợ màu:
-
Đối với các trình duyệt, thiết bị giao tiếp với máy chủ lưu trữ website và tự
được định dạng với user agent string
- CSS3 media queries:
+ Hình thức nhận biết thiết bị
+ Kiểm tra khả năng của người dùng truy cập vào trang web
+ Nhận biết (phát hiện) được: chiều cao, chiều rộng của trình duyệt, thiết bị,
thiết bị định hướng (phong cảnh/ chân dung), độ phân giải
- Sử dụng CSS3 media queries để cung cấp layout phù hợp với cho layout mobile
Ví dụ:
@media only screen and (max-width: 480px) {
Body
{padding:
5px;
background-color:#FFF;
background-image:url
(images/smoothieworld_logo_mobile.jpg); background-repeat:no-repeat;
}
- Quy định chiều rộng của trang được hiển thị trên thiết bị
@media only scrceen and (max-device-width:480px)
- Điều hướng trên thiết bị di động:
+ Nên thiết kế vị trí điều hướng đơn giản hơn khi hiển thị trên trình duyệt máy
tính
+ Gợi ý:
Nên có, nên để gần đầu màn hình để dễ truy cập
Lặp lại điều hướng ở phía trước trang
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 24
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Với thiết bị cảm ứng, sử dụng kích thước lớn cho link của điều hướng
Tránh điều hướng từ hình ảnh, nên dựa trên danh sách chuyển hướng dạng CSS
Ví dụ:
#mainnav {height: auto;}
#mainnav li {
Float:none;
Width: auto;
Text-align:left;
Border-top: 1px grey solid;
Border-bottom:1px grey solid;
}
6. Làm việc với CSS3 layout dạng nhiều cột và cấu trúc hộp Flex.
- CSS cung cấp các thuộc tính để thuận tiện cho việc thiết kế layout dạng nhiều
cột:
+ column-count: Quy định cụ thể số lượng các cột một phần tử được chia thành
+ Column-width: Quy định cụ thể chiều rộng của các cột
+ Column-grap: Quy định khoảng cách giữa các cột
+ Column-rule: Là thuộc tính viết tắt, cho phép thiết lập tất cả các thuộc tính:
chiều rộng, style, màu sắc giữa các cột
- Cách thiết lập:
#introduction-content
{
Width: 600px;
-moz-column-count:3;
-webkit-column-count: 3;
Colimn-count: 3;
}
- Thiết lập layout dạng hộp Flexible (Hộp linh hoạt):
+ Là dạng bố cục mới trong CSS3
+ Đại diện cho một trong bốn dạng layout đang được hỗ trợ bởi CSS2.1
Ví dụ:
#introduction-content { width: 600px; height: 150px; border: 1px solid
#821738; display: -webkit-box; -webkit-box-orient: horizontal; display: -moz-box;
-moz-box-orient: horizontal;
}
7. CSS3 user interface.
- CSS3 cung cấp một số tính năng về phía người dùng:
+ Thay đổi kích thước thành phần trên trang
+ Thay đổi kích thước hộp
+ Phác thảo
- Các thuộc tính quy định
+ Resize
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 25
Với HTML5: bổ sung thêm <hgroup>
-
Vùng phrasing:
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 6
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Là văn bản của tài liệu bao gồm các phần tử đánh dấu văn bản bên trong một
đoạn văn
Là tập con của vùng Flow
- Vùng Embedded
Là nội dung nhập một tài nguyên khác như hình ảnh hay video vào trong tài liệu.
- Vùng Interactive
Là những phần tử được sử dụng để tương tác người dung
b. Các phần tử mới trong HTML5
- Phần tử header
Vùng Header chứa tiêu đề và phụ đề trang. Bạn sử dụng thẻ <header> để tạo ra
nội dung cho vùng Header của trang. Thẻ<header> có thể chứa thông tin mở về
một <section> và <article> ngoài chính trang web đó. Trang web được tạo ra ở đây có
một vùng Header cho trang này, được hiển thị trong thiết kế cao cấp, cũng như
vùng Header ở bên trong vùng Article và Section. Hình 1 đưa ra một ví dụ đánh dấu
thẻ <header>.
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 7
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Hình 1
Thẻ <header> cũng có thể chứa một thẻ <hgroup>, như trong hình 2.
Thẻ <hgroup> tạo nhóm các tiêu đề với nhau, bằng cách sử dụng các mức tiêu
đề
đến được hiển thị ở đây có một tiêu đề chính (Tiêu đề) và một phụ đề
(Nội dung).
`Hình 2
- Phần tử Navigation
Bạn tạo vùng Navigation (Chuyển hướng) của trang bằng cách sử dụng
thẻ <nav>. Phần tử <nav> định nghĩa một vùng đặc biệt dành cho việc chuyển hướng.
Thẻ <nav> nên được sử dụng để chuyển hướng trang web chính, không dùng để thiết
lập các liên kết có chứa trong các vùng khác của trang. Vùng Navigation này có thể
chứa mã như được hiển thị trong hình 3.
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 8
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Hình 3
-
Phần tử Article và section
Trang web mà bạn đang thiết kế có chứa một phần Article, giữ nội dung thực sự
của trang. Bạn sử dụng thẻ <article> để tạo vùng này, và thẻ đó định nghĩa nội dung có
thể được sử dụng độc lập với các nội dung khác được tìm thấy trên trang này. Ví dụ,
nếu bạn muốn tạo ra một nguồn cấp dữ liệu RSS, bạn có thể sử dụng <article> để xác
định nội dung duy nhất. Thẻ<article> xác định nội dung có thể được gỡ bỏ và được đặt
trong ngữ cảnh khác và có thể hoàn toàn dễ hiểu.
Vùng Article trong kế hoạch của Acme United có chứa ba vùng Section. Bạn
tạo ra các vùng này bằng cách sử dụng thẻ<section>. Một <section> chứa các vùng
thành phần của nội dung trang web có liên quan . Thẻ <section> — và
thẻ<article> nữa — có thể chứa các header (tiêu đề), các footer (chân trang), hoặc bất
kỳ các thành phần nào khác cần thiết để hoàn thành phần này. Thẻ <section> dùng cho
nội dung tạo nhóm. Nội dung cho cả hai thẻ <section> và thẻ <article>thường bắt đầu
bằng một <header> và kết thúc bằng một <footer>, với nội dung cho thẻ này ở giữa.
Thẻ <section> cũng có thể chứa các thẻ <article>, cũng giống như
thẻ <article> có thể chứa các thẻ <section>. Thẻ<section> nên được dùng để tạo nhóm
các thông tin giống nhau, và thẻ <article> nên được sử dụng cho các thông tin như một
bài viết hoặc một blog mà chúng có thể bị gỡ bỏ và được đặt trong một ngữ cảnh mới
mà không ảnh hưởng đến ý nghĩa của nội dung. Thẻ <article> như tên gọi của nó, cung
cấp một gói thông tin đầy đủ. Ngược lại, thẻ <section> chứa thông tin liên quan, trừ
thông tin không thể được đặt trong một ngữ cảnh khác với chính nó, do nghĩa của nó
sẽ bị mất.
4 với một ví dụ về cách sử dụng thẻ <article> và <section>.
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 9
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Hình 4
- Phần tử Aside
Bạn tạo vùng Aside theo kế hoạch Acme United bằng cách sử dụng thẻ <aside>.
Hãy sử dụng thẻ này khi bạn muốn tạo nội dung bổ sung mà không còn chỗ nào để
thêm vào bài viết. Trong các tạp chí, các vùng nhận xét thường được sử dụng để làm
nổi bật một điểm nào đó và được thực hiện trong chính bài viết đó. Thẻ <aside> chứa
nội dung có thể được loại bỏ mà không ảnh hưởng đến các thông tin được truyền đạt
bởi bài viết, phân đoạn, hoặc trang chứa nó.
Hình 5 đưa ra một ví dụ về cách sử dụng thẻ <aside>.
Hình 5
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 10
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
-
Phần tử Footer
Phần tử <footer> chứa thông tin về một trang, bài viết, hoặc một phần, chẳng
hạn như tác giả hoặc ngày viết bài. Là phần cuối trang, nó có thể chứa bản quyền hoặc
các thông tin pháp lý quan trọng khác, như trong hình 6
.
Hình 6
Thẻ Video
Thẻ <video> được dùng để xác định các video trong tài liệu HTML, như là các
movie clip, video stream v..v..
Hiện tại có 3 định dạng video được hỗ trợ cho phần tử <video>, đó là: MP4,
WebM và Ogg.
Cấu trúc:
báo</video>
src=”Đường
dẫn”
controls=”controls”>Dòng
thông
Thuộc tính tùy chọn
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 11
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Mã html
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 12
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Hình minh họa
Thẻ Audio
Tag <audio> định nghĩa âm thanh, như nhạc hay trường audio khác.
Thường dùng kèm với tag <source> để hiện thị được nhiều nội dung hơn
Cấu trúc:
<audio src=” đường dẫn file” controls=”controls”>dòng thông báo</audio>
Thuộc tính tùy chọn
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 13
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Mã html
Hình minh họa
Thẻ Canvas
Tag <canvas> được dùng để hiển thị đồ họa.
Tag <canvas> sử dụng như vùng chứa đồ họa, việc vẽ đồ họa sẽ do script thực hiện.
Cấu trúc:
<canvas></canvas>
Thuộc tính
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 14
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Mã html
Hình minh họa
Tác dụng của các thành phần mới trong HTML5:
- Giảm bớt sự phụ thuộc vào thẻ <div>
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 15
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
- Thay thế bởi một cấu trúc trang web thống nhất, dễ đọc hơn
HTML5 không thay thế bất kỳ cú pháp HTML nào, mà chỉ bổ sung thêm các thành
phần (thẻ) mới vào danh sách hiện có.
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 16
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
II.
Tìm hiểu về CSS3
1. Tổng quan về CSS3.
Là tiêu chuẩn mới nhất của CSS. CSS3 tuy chưa được chính thức sử dụng
rộng rãi nhưng những gì mà nó có thể làm được quả là rất đáng mong đợi. Về
mặt nguyên lý thì có vẻ sự ra đời của CSS3 đã phần nào lấn sân của Javascript.
Bởi vì người ta nói rằng HTML dùng để thể hiện nội dung, CSS dùng để trình
bày cấu trúc và Javascript thì tương tác với người dùng. Nhưng những tính năng
mới của CSS3 như transition và animation phần nào đã làm thay đổi nguyên lý
này.
Hiện tại khi sử dụng Javscript người lập trình bao giờ cũng phải tính đến
điều kiện trình duyệt của người dùng không bật Javascript. Nhưng nếu trong
tương lai (hy vọng không xa) chúng ta có thể tạo ra những hiệu ứng động đơn
giản mà không cần sự hỗ trợ của Javascript thì cũng rất tiện chứ sao. Trong bài
này tôi sẽ cùng bạn khám phá một vài trong rất nhiều những cách sử dụng
transition khác nhau của CSS3.
2. Làm việc với các thuộc tính mới trong CSS3.
Border-radius:
Thuộc tính border trong css3 dùng để định dạng các dạng bo góc
- Thuộc tính
+ Boder-top-left-radius: 5px: Góc trên bên trái sẽ được uốn cong
+ Boder-top-right-radius: 5px : Góc trên bên phải sẽ được uốn cong
+ border-bottom-left-radius: 5px: Góc dưới - bên trái sẽ được uốn cong
+ border-bottom-right-radius: 5px: Góc dưới - bên phải sẽ được uốn cong.
+ border-radius: 5px 10px 4px 8px: Cả 4 góc đều được uốn cong.
VÍ dụ:
.Specialsale{
Width: 400px;
Background-color:#D67E5C;
Border: 2px #773636 solid;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
Border-radius: 24px; }
-
Border-images:
Dùng để định dạng các dạng border bằng hình ảnh.
- Cú pháp: border-image: source slice width outset repeat;
+ Slice: Phần bù bên trong của hình border
+ Outset: Số lượng diện tích mà hình nền border mở rộng
Thuộc tính:
+ Border-image-source: Đường dẫn đến image dùng làm border
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 17
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
+ border-image-slice 1 giá trị: Phần lát cắt image với 4 thành phần của border
như nhau.
+ border-image-slice 2 giá trị: Phần lát cắt image với 2 thành phần ngang của
border như nhau và 2 thành phần dọc cũng như nhau.
+ border-image-slice 3 giá trị: Phần lát cắt image với thành phần dọc của
border như nhau.
+ border-image-slice 4 giá trị: Phần lát cắt image với 4 thành phần của border
khác nhau.
+ border-image-width 1 giá trị : Bề rộng image với 4 thành phần của border
như nhau
+ border-image-width 2 giá trị : Bề rộng image với 2 thành phần ngang của
border như nhau và 2 thành phần dọc cũng như nhau.
+ border-image-width 3 giá trị : Bề rộng image của thành phần trái và phải
bằng nhau.
+ border-image-width 4 giá trị : Bề rộng image của 4 thành phần khác nhau
+ border-image-outset 1 giá trị : Xác định giá trị image vượt ra ngoài vùng
giới hạn của vùng bao, với 4 thành phần của border vượt ra ngoài như nhau.
+ border-image-outset 2 giá trị : Xác định giá trị image vượt ra ngoài vùng
giới hạn của vùng bao, với 2 thành phần trái và phải bằng nhau và 2 thành phần
trên dưới bằng nhau.
+ border-image-outset 3 giá trị : Xác định giá trị image vượt ra ngoài vùng
giới hạn của vùng bao, với 2 thành phần trái và phải bằng nhau.
+ border-image-outset 4 giá trị : Xác định giá trị image vượt ra ngoài vùng giới
hạn của vùng bao, với 4 thành phần khác nhau.
+ border-image-repeat với giá trị repeat : Image của border sẽ được lặp lại, cả
phần nội dung và phần border.
+ border-image-repeat với giá trị round : Image của border sẽ được lặp lại, cả
phần nội dung và phần border, tuy nhiên vùng lặp sẽ tự động tỷ lệ cho phù hợp
với vùng bao
+ border-image-repeat với giá trị stretch : Image của border sẽ được kéo dài,
nếu border-image-repeat không khai báo thì border image sẽ có dạng stretch.
+ border-image-repeat với 2 giá trị : Image của border sẽ được lặp lại với 2
thành phần trên và dưới giống nhau, trái và phải giống nhau.
+ border-image : Tổng hợp của các dạng border-image trên.
Ví dụ:
Border: 20px #773636 solid;
-webkit-border-image: url(“images/border-bg.png”)33% repeat;
-moz-border-image: url(“images/boder-bg.png”)33%repeat;
Border-image: url(“images/boder-bg.png”)33% repeat;
Gradient:
Thông thường, để tạo hình nền đổ bóng bạn sẽ phải dùng một image làm
background, tuy nhiên có cách khác đó là dùng CSS với các thuộc tính linearGVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 18
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
gradient, o-linear-gradient, moz-linear-gradient, webkit-linear-gradient, mslinear-gradient và webkit-gradient. Cách này giúp hình đổ bóng được đẹp hơn,
linh động hơn và tiết kiệm băng thông cũng như tăng tốc độ tải cho trang
Ví dụ:
.gradient{
Width: 450px;
Border: #000 4px solid;
Background-color:#fff;
Background-image: -moz-linear-gradient (white, black) ;
Background-image: -webkit-gradient (linear, 0 0, 0 100%, from (white), to (black));
}
- Thuộc tính:
+ Thêm góc độ và nhiều điểm dừng:
+ Tăng thêm sự đa dạng của gradient
+ Kiểm soát tốt hơn
Ví dụ: Background-image: -moz-linear-gradient (45deg, white, green, black);
Background-image: -moz-radial-gradient(60% 60%, circle closest-comer, white,
black);
+ Lặp lại gradient:
Background-image: -moz-repeating-linear-gradient(left, white 80%, black, white);
+ Sử dụng hệ màu RGBA để định nghĩa gradient
.gradient h1{
Margin:0; font-weight:bold; font-size:48px; color:#c33; text-align:center,
Background-image: -moz-linear-gradient(rgba(174, 185, 196, 0.9), rgba(110,
124,140, 0.9));}
Transform:
Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên trang
Ví dụ:
.transform {
margin-top:2em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(-45deg);
Transform: rotate(-45deg);
}
Transition:
Sử dụng link để thực hiện Transition
- Thuộc tính
+ Transition-duration: Quy định thời gian chuyển đổi
+ Transition-timing-function: Xác định tốc độ đường cong của hiệu ứng chuyển
tiếp.
+ Một số giá trị của transition-timing-function
+ Linear: Chỉ định một hiệu ứng chuyển tiếp với cùng một tốc độ từ đầu đến
cuối (tương đương với kiểu cublic-bezier(0,0,1,1))
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 19
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
+ Ease: Chỉ định một hiệu ứng chuyển tiếp với một sự khởi đầu chậm, sau đó
nhanh chóng, sau đó kết thúc chậm
+ Ease-in: Chỉ định một hiệu ứng chuyển tiếp với một khởi đầu chậm
+ Ease-uot: Chỉ định một hiệu ứng chuyển tiếp với một kết thúc chậm (tương
đương với cubic-bezier (0,0,0.58,1))
+ Ease-in-uot: Chỉ định một hiệu ứng chuyển tiếp với một sự khởi đầu chậm và
kết thúc
+ cubic-bezier(n,n,n,n): Xác định giá trị của riêng bạn trong cách chức năng
khối bezier. Các giá trị có thể là giá trị số 0-1
Ví dụ:
.transition {
Padding: 5px 0px;
Background:#C9C;
-webkit-transition-property: background;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-uot;
}
Nimation trong CSS3:
Thuộc tính animation xác định một chuyển động của một tag hay một hình
ảnh, là sự tổng hợp của các thuộc tính: animation-name, animation-duration,
animation-timing-function, animation-delay, animation-iteration-count, animationdirection.
- Thuộc tính:
+ animation-name: Xác định tên cho một animation.
+ animation-duration: Xác định thời gian để hoàn thành một chuyển động, mặc
định là 0s.
+ animation-timing-function: tốc độ chuyển động
+ animation-delay: Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định
sẽ là 0
+ animation-iteration-count: Số lần thực hiện
+animation-play-state: Xác định chuyển động dừng lại hay chuyển động chạy
+ animation: Đây là dạng tổng hợp của các thuộc tính trên, ngoại trừ thuộc tính
animation-play-state.
Ví dụ:
#Spin{
Margin-top:2em;
-webkit-animation-name: imageRotate
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:2;
-webkit-animation-timing-function:ease-in-out;
}
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 20
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
@--webkit-keyframes imageRotate{
From{
-webkit-transform:rotate(0deg);
}
To{
-webkit-transfrom:rotate(360deg);
}
}
3. Làm việc với font Wed.
- @font-face:
+ Cho phép những font chữ vào trang bằng cách khai báo font đó và đặt font
chữ trên web server
+ Là giải pháp khắc phục việc phải cài đặt font chữ trên máy tính
Ví dụ:
@font-face{
Font-family: Sigmar;
Src: url (Sigmarone.otf);
}
H2 {
Font-size:1.125em;
Letter-spacing:0.2em;
Font-weight:lighter;
Text-transform:uppercase;
Font-family: Sigmar, Georgia, Palatino, Times New Roman, serif;
}
- Kiểu định dạng font chữ:
+Open Type(OTF): Định dạng phổ biến hỗ trợ glyph
+TrueType(TTF): Nền tảng tương thích và cung cấp các điều khiển tinh vi sắp
chữ
+SVG : Định dạng vector dựa trên hiện nay chỉ hỗ trợ IOS của Apple IPod
+Web open font format (WOFF): Bao gồm nhiều khả năng nén các tập tin font
chữ và tối ưu hóa.
+Embedded OpenType (EOT)
- Sử dụng dịch vụ web để tạo nhiều font
@font-face Ơ
Font-family: ‘SigmarRegular’;
Src: url(‘fonts/sigmarone-webfont.eot’);
Src: url(‘fonts/sigmarone-webfont.eot?#iefix’) format(‘embedded-opentype’),
Src: url(‘fonts/sigmarone-webfont.woff) format (truetype),
Src: url(‘fonts/sigmarone-webfont.svg#SigmarRegular’) format (‘svg’);
Font-weight: nomal;
Font-style: nomal;
}
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 21
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
4. Chèn nhiều hình nền với CSS3
Cách sử dụng nhiều hình nền (Multiple Backgrounds) bằng CSS3
Có lẽ đối với nhiều bạn thì việc chèn hình nền vào web đã không còn gì xa lạ.
Nhưng chúng ta lại bị giới hạn chỉ có thể chèn một hình nền (background) ở phần
khai báo. Bây giờ, với sự hỗ trợ của CSS3, chúng ta đã có thể cho hiển thị nhiều
hình nền chỉ với 1 khai báo.
Để các bạn dễ hiểu, chúng ta hãy xem lại cách mà chúng ta muốn hiển thị nhiều
hình nền trong web của mình.
.overcast1 {
background-image:
url("images/overcast.png");
background-position: 150px 25px;
}
.rainbow {
background-image: url("images/rainbow.png");
background-position: 200px 10px;
}
.overcast2 {
background-image:
url("images/overcast.png");
background-position: 250px 25px;
}
.sunny {
background-image: url("images/sunny.png");
background-position: 100px 10px;
}
Trong đoạn code trên , để hiển thị nhiều ảnh nền (background) chúng ta phải
tạo nhiều thẻ với các lớp (class) khác nhau để hiển thị cho từng ảnh. Nhưng với
CSS3 , các bạn có thể gom nó thành một lớp duy nhất.
.weather {
width: 500px;
height: 280px;
margin: 50px auto;
background-image: url("images/overcast.png"),
url("images/rainbow.png"),
url("images/overcast.png"),
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 22
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
url("images/sunny.png");
background-position: 150px 25px,
200px 10px,
250px 25px,
100px 10px;
background-repeat: no-repeat;
}
Trong đoạn code trên, chúng ta chèn 4 hình nền với các vị trí khác nhau, kết quả
hiển thị giống như hình bên dưới :
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 23
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
-
Ghi chú:
+ Không nên sử dụng kết hợp thuộc tính border-image và thuộc tính borderradius
+ Gradient trong css giống với gradient được tạo ra trong các chương trình đồ
họa: có điểm dừng màu và điểm chuyển màu.
+ Có thể tạo được nhiều điểm dừng màu và điểm chuyển màu để gradient
phong phú hơn
+ Sử dụng giá trị vị trí: top, left, right, bottoom để điều chỉnh chính xác nhiều
hình nền trong CSS
5. Giới thiệu CSS3 Media Queries.
- Media Query là một bước cải tiến của luật @media bằng cách kết hợp Media
Type và các thông số khác như độ phân giải, kích thước, màu sắc,… để tăng
thêm tính chặt chẽ và linh hoạt của các luật này. Mỗi luật của Media Query là
một biểu thức logic và chỉ được áp dụng khi nó có giá trị true.
- Các Media Query có thể được sử dụng bằng các cách dùng thẻ <link> trong
HTML hoặc thẻ <?xml-stylesheet> trong XML, ngoài ra thì trong HTML bạn
có thể dùng các luật @import và @media. Các ví dụ sau sẽ áp dụng style css
cho các loại máy vi tính và hỗ trợ màu:
-
Đối với các trình duyệt, thiết bị giao tiếp với máy chủ lưu trữ website và tự
được định dạng với user agent string
- CSS3 media queries:
+ Hình thức nhận biết thiết bị
+ Kiểm tra khả năng của người dùng truy cập vào trang web
+ Nhận biết (phát hiện) được: chiều cao, chiều rộng của trình duyệt, thiết bị,
thiết bị định hướng (phong cảnh/ chân dung), độ phân giải
- Sử dụng CSS3 media queries để cung cấp layout phù hợp với cho layout mobile
Ví dụ:
@media only screen and (max-width: 480px) {
Body
{padding:
5px;
background-color:#FFF;
background-image:url
(images/smoothieworld_logo_mobile.jpg); background-repeat:no-repeat;
}
- Quy định chiều rộng của trang được hiển thị trên thiết bị
@media only scrceen and (max-device-width:480px)
- Điều hướng trên thiết bị di động:
+ Nên thiết kế vị trí điều hướng đơn giản hơn khi hiển thị trên trình duyệt máy
tính
+ Gợi ý:
Nên có, nên để gần đầu màn hình để dễ truy cập
Lặp lại điều hướng ở phía trước trang
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 24
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Với thiết bị cảm ứng, sử dụng kích thước lớn cho link của điều hướng
Tránh điều hướng từ hình ảnh, nên dựa trên danh sách chuyển hướng dạng CSS
Ví dụ:
#mainnav {height: auto;}
#mainnav li {
Float:none;
Width: auto;
Text-align:left;
Border-top: 1px grey solid;
Border-bottom:1px grey solid;
}
6. Làm việc với CSS3 layout dạng nhiều cột và cấu trúc hộp Flex.
- CSS cung cấp các thuộc tính để thuận tiện cho việc thiết kế layout dạng nhiều
cột:
+ column-count: Quy định cụ thể số lượng các cột một phần tử được chia thành
+ Column-width: Quy định cụ thể chiều rộng của các cột
+ Column-grap: Quy định khoảng cách giữa các cột
+ Column-rule: Là thuộc tính viết tắt, cho phép thiết lập tất cả các thuộc tính:
chiều rộng, style, màu sắc giữa các cột
- Cách thiết lập:
#introduction-content
{
Width: 600px;
-moz-column-count:3;
-webkit-column-count: 3;
Colimn-count: 3;
}
- Thiết lập layout dạng hộp Flexible (Hộp linh hoạt):
+ Là dạng bố cục mới trong CSS3
+ Đại diện cho một trong bốn dạng layout đang được hỗ trợ bởi CSS2.1
Ví dụ:
#introduction-content { width: 600px; height: 150px; border: 1px solid
#821738; display: -webkit-box; -webkit-box-orient: horizontal; display: -moz-box;
-moz-box-orient: horizontal;
}
7. CSS3 user interface.
- CSS3 cung cấp một số tính năng về phía người dùng:
+ Thay đổi kích thước thành phần trên trang
+ Thay đổi kích thước hộp
+ Phác thảo
- Các thuộc tính quy định
+ Resize
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 25
(Nội dung).
`Hình 2
- Phần tử Navigation
Bạn tạo vùng Navigation (Chuyển hướng) của trang bằng cách sử dụng
thẻ <nav>. Phần tử <nav> định nghĩa một vùng đặc biệt dành cho việc chuyển hướng.
Thẻ <nav> nên được sử dụng để chuyển hướng trang web chính, không dùng để thiết
lập các liên kết có chứa trong các vùng khác của trang. Vùng Navigation này có thể
chứa mã như được hiển thị trong hình 3.
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 8
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Hình 3
-
Phần tử Article và section
Trang web mà bạn đang thiết kế có chứa một phần Article, giữ nội dung thực sự
của trang. Bạn sử dụng thẻ <article> để tạo vùng này, và thẻ đó định nghĩa nội dung có
thể được sử dụng độc lập với các nội dung khác được tìm thấy trên trang này. Ví dụ,
nếu bạn muốn tạo ra một nguồn cấp dữ liệu RSS, bạn có thể sử dụng <article> để xác
định nội dung duy nhất. Thẻ<article> xác định nội dung có thể được gỡ bỏ và được đặt
trong ngữ cảnh khác và có thể hoàn toàn dễ hiểu.
Vùng Article trong kế hoạch của Acme United có chứa ba vùng Section. Bạn
tạo ra các vùng này bằng cách sử dụng thẻ<section>. Một <section> chứa các vùng
thành phần của nội dung trang web có liên quan . Thẻ <section> — và
thẻ<article> nữa — có thể chứa các header (tiêu đề), các footer (chân trang), hoặc bất
kỳ các thành phần nào khác cần thiết để hoàn thành phần này. Thẻ <section> dùng cho
nội dung tạo nhóm. Nội dung cho cả hai thẻ <section> và thẻ <article>thường bắt đầu
bằng một <header> và kết thúc bằng một <footer>, với nội dung cho thẻ này ở giữa.
Thẻ <section> cũng có thể chứa các thẻ <article>, cũng giống như
thẻ <article> có thể chứa các thẻ <section>. Thẻ<section> nên được dùng để tạo nhóm
các thông tin giống nhau, và thẻ <article> nên được sử dụng cho các thông tin như một
bài viết hoặc một blog mà chúng có thể bị gỡ bỏ và được đặt trong một ngữ cảnh mới
mà không ảnh hưởng đến ý nghĩa của nội dung. Thẻ <article> như tên gọi của nó, cung
cấp một gói thông tin đầy đủ. Ngược lại, thẻ <section> chứa thông tin liên quan, trừ
thông tin không thể được đặt trong một ngữ cảnh khác với chính nó, do nghĩa của nó
sẽ bị mất.
4 với một ví dụ về cách sử dụng thẻ <article> và <section>.
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 9
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Hình 4
- Phần tử Aside
Bạn tạo vùng Aside theo kế hoạch Acme United bằng cách sử dụng thẻ <aside>.
Hãy sử dụng thẻ này khi bạn muốn tạo nội dung bổ sung mà không còn chỗ nào để
thêm vào bài viết. Trong các tạp chí, các vùng nhận xét thường được sử dụng để làm
nổi bật một điểm nào đó và được thực hiện trong chính bài viết đó. Thẻ <aside> chứa
nội dung có thể được loại bỏ mà không ảnh hưởng đến các thông tin được truyền đạt
bởi bài viết, phân đoạn, hoặc trang chứa nó.
Hình 5 đưa ra một ví dụ về cách sử dụng thẻ <aside>.
Hình 5
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 10
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
-
Phần tử Footer
Phần tử <footer> chứa thông tin về một trang, bài viết, hoặc một phần, chẳng
hạn như tác giả hoặc ngày viết bài. Là phần cuối trang, nó có thể chứa bản quyền hoặc
các thông tin pháp lý quan trọng khác, như trong hình 6
.
Hình 6
Thẻ Video
Thẻ <video> được dùng để xác định các video trong tài liệu HTML, như là các
movie clip, video stream v..v..
Hiện tại có 3 định dạng video được hỗ trợ cho phần tử <video>, đó là: MP4,
WebM và Ogg.
Cấu trúc:
báo</video>
src=”Đường
dẫn”
controls=”controls”>Dòng
thông
Thuộc tính tùy chọn
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 11
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Mã html
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 12
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Hình minh họa
Thẻ Audio
Tag <audio> định nghĩa âm thanh, như nhạc hay trường audio khác.
Thường dùng kèm với tag <source> để hiện thị được nhiều nội dung hơn
Cấu trúc:
<audio src=” đường dẫn file” controls=”controls”>dòng thông báo</audio>
Thuộc tính tùy chọn
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 13
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Mã html
Hình minh họa
Thẻ Canvas
Tag <canvas> được dùng để hiển thị đồ họa.
Tag <canvas> sử dụng như vùng chứa đồ họa, việc vẽ đồ họa sẽ do script thực hiện.
Cấu trúc:
<canvas></canvas>
Thuộc tính
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 14
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Mã html
Hình minh họa
Tác dụng của các thành phần mới trong HTML5:
- Giảm bớt sự phụ thuộc vào thẻ <div>
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 15
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
- Thay thế bởi một cấu trúc trang web thống nhất, dễ đọc hơn
HTML5 không thay thế bất kỳ cú pháp HTML nào, mà chỉ bổ sung thêm các thành
phần (thẻ) mới vào danh sách hiện có.
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 16
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
II.
Tìm hiểu về CSS3
1. Tổng quan về CSS3.
Là tiêu chuẩn mới nhất của CSS. CSS3 tuy chưa được chính thức sử dụng
rộng rãi nhưng những gì mà nó có thể làm được quả là rất đáng mong đợi. Về
mặt nguyên lý thì có vẻ sự ra đời của CSS3 đã phần nào lấn sân của Javascript.
Bởi vì người ta nói rằng HTML dùng để thể hiện nội dung, CSS dùng để trình
bày cấu trúc và Javascript thì tương tác với người dùng. Nhưng những tính năng
mới của CSS3 như transition và animation phần nào đã làm thay đổi nguyên lý
này.
Hiện tại khi sử dụng Javscript người lập trình bao giờ cũng phải tính đến
điều kiện trình duyệt của người dùng không bật Javascript. Nhưng nếu trong
tương lai (hy vọng không xa) chúng ta có thể tạo ra những hiệu ứng động đơn
giản mà không cần sự hỗ trợ của Javascript thì cũng rất tiện chứ sao. Trong bài
này tôi sẽ cùng bạn khám phá một vài trong rất nhiều những cách sử dụng
transition khác nhau của CSS3.
2. Làm việc với các thuộc tính mới trong CSS3.
Border-radius:
Thuộc tính border trong css3 dùng để định dạng các dạng bo góc
- Thuộc tính
+ Boder-top-left-radius: 5px: Góc trên bên trái sẽ được uốn cong
+ Boder-top-right-radius: 5px : Góc trên bên phải sẽ được uốn cong
+ border-bottom-left-radius: 5px: Góc dưới - bên trái sẽ được uốn cong
+ border-bottom-right-radius: 5px: Góc dưới - bên phải sẽ được uốn cong.
+ border-radius: 5px 10px 4px 8px: Cả 4 góc đều được uốn cong.
VÍ dụ:
.Specialsale{
Width: 400px;
Background-color:#D67E5C;
Border: 2px #773636 solid;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
Border-radius: 24px; }
-
Border-images:
Dùng để định dạng các dạng border bằng hình ảnh.
- Cú pháp: border-image: source slice width outset repeat;
+ Slice: Phần bù bên trong của hình border
+ Outset: Số lượng diện tích mà hình nền border mở rộng
Thuộc tính:
+ Border-image-source: Đường dẫn đến image dùng làm border
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 17
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
+ border-image-slice 1 giá trị: Phần lát cắt image với 4 thành phần của border
như nhau.
+ border-image-slice 2 giá trị: Phần lát cắt image với 2 thành phần ngang của
border như nhau và 2 thành phần dọc cũng như nhau.
+ border-image-slice 3 giá trị: Phần lát cắt image với thành phần dọc của
border như nhau.
+ border-image-slice 4 giá trị: Phần lát cắt image với 4 thành phần của border
khác nhau.
+ border-image-width 1 giá trị : Bề rộng image với 4 thành phần của border
như nhau
+ border-image-width 2 giá trị : Bề rộng image với 2 thành phần ngang của
border như nhau và 2 thành phần dọc cũng như nhau.
+ border-image-width 3 giá trị : Bề rộng image của thành phần trái và phải
bằng nhau.
+ border-image-width 4 giá trị : Bề rộng image của 4 thành phần khác nhau
+ border-image-outset 1 giá trị : Xác định giá trị image vượt ra ngoài vùng
giới hạn của vùng bao, với 4 thành phần của border vượt ra ngoài như nhau.
+ border-image-outset 2 giá trị : Xác định giá trị image vượt ra ngoài vùng
giới hạn của vùng bao, với 2 thành phần trái và phải bằng nhau và 2 thành phần
trên dưới bằng nhau.
+ border-image-outset 3 giá trị : Xác định giá trị image vượt ra ngoài vùng
giới hạn của vùng bao, với 2 thành phần trái và phải bằng nhau.
+ border-image-outset 4 giá trị : Xác định giá trị image vượt ra ngoài vùng giới
hạn của vùng bao, với 4 thành phần khác nhau.
+ border-image-repeat với giá trị repeat : Image của border sẽ được lặp lại, cả
phần nội dung và phần border.
+ border-image-repeat với giá trị round : Image của border sẽ được lặp lại, cả
phần nội dung và phần border, tuy nhiên vùng lặp sẽ tự động tỷ lệ cho phù hợp
với vùng bao
+ border-image-repeat với giá trị stretch : Image của border sẽ được kéo dài,
nếu border-image-repeat không khai báo thì border image sẽ có dạng stretch.
+ border-image-repeat với 2 giá trị : Image của border sẽ được lặp lại với 2
thành phần trên và dưới giống nhau, trái và phải giống nhau.
+ border-image : Tổng hợp của các dạng border-image trên.
Ví dụ:
Border: 20px #773636 solid;
-webkit-border-image: url(“images/border-bg.png”)33% repeat;
-moz-border-image: url(“images/boder-bg.png”)33%repeat;
Border-image: url(“images/boder-bg.png”)33% repeat;
Gradient:
Thông thường, để tạo hình nền đổ bóng bạn sẽ phải dùng một image làm
background, tuy nhiên có cách khác đó là dùng CSS với các thuộc tính linearGVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 18
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
gradient, o-linear-gradient, moz-linear-gradient, webkit-linear-gradient, mslinear-gradient và webkit-gradient. Cách này giúp hình đổ bóng được đẹp hơn,
linh động hơn và tiết kiệm băng thông cũng như tăng tốc độ tải cho trang
Ví dụ:
.gradient{
Width: 450px;
Border: #000 4px solid;
Background-color:#fff;
Background-image: -moz-linear-gradient (white, black) ;
Background-image: -webkit-gradient (linear, 0 0, 0 100%, from (white), to (black));
}
- Thuộc tính:
+ Thêm góc độ và nhiều điểm dừng:
+ Tăng thêm sự đa dạng của gradient
+ Kiểm soát tốt hơn
Ví dụ: Background-image: -moz-linear-gradient (45deg, white, green, black);
Background-image: -moz-radial-gradient(60% 60%, circle closest-comer, white,
black);
+ Lặp lại gradient:
Background-image: -moz-repeating-linear-gradient(left, white 80%, black, white);
+ Sử dụng hệ màu RGBA để định nghĩa gradient
.gradient h1{
Margin:0; font-weight:bold; font-size:48px; color:#c33; text-align:center,
Background-image: -moz-linear-gradient(rgba(174, 185, 196, 0.9), rgba(110,
124,140, 0.9));}
Transform:
Cho phép xoay, kéo dãn, kéo nghiêng thành phần trên trang
Ví dụ:
.transform {
margin-top:2em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(-45deg);
Transform: rotate(-45deg);
}
Transition:
Sử dụng link để thực hiện Transition
- Thuộc tính
+ Transition-duration: Quy định thời gian chuyển đổi
+ Transition-timing-function: Xác định tốc độ đường cong của hiệu ứng chuyển
tiếp.
+ Một số giá trị của transition-timing-function
+ Linear: Chỉ định một hiệu ứng chuyển tiếp với cùng một tốc độ từ đầu đến
cuối (tương đương với kiểu cublic-bezier(0,0,1,1))
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 19
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
+ Ease: Chỉ định một hiệu ứng chuyển tiếp với một sự khởi đầu chậm, sau đó
nhanh chóng, sau đó kết thúc chậm
+ Ease-in: Chỉ định một hiệu ứng chuyển tiếp với một khởi đầu chậm
+ Ease-uot: Chỉ định một hiệu ứng chuyển tiếp với một kết thúc chậm (tương
đương với cubic-bezier (0,0,0.58,1))
+ Ease-in-uot: Chỉ định một hiệu ứng chuyển tiếp với một sự khởi đầu chậm và
kết thúc
+ cubic-bezier(n,n,n,n): Xác định giá trị của riêng bạn trong cách chức năng
khối bezier. Các giá trị có thể là giá trị số 0-1
Ví dụ:
.transition {
Padding: 5px 0px;
Background:#C9C;
-webkit-transition-property: background;
-webkit-transition-duration: 1s;
-webkit-transition-timing-function: ease-uot;
}
Nimation trong CSS3:
Thuộc tính animation xác định một chuyển động của một tag hay một hình
ảnh, là sự tổng hợp của các thuộc tính: animation-name, animation-duration,
animation-timing-function, animation-delay, animation-iteration-count, animationdirection.
- Thuộc tính:
+ animation-name: Xác định tên cho một animation.
+ animation-duration: Xác định thời gian để hoàn thành một chuyển động, mặc
định là 0s.
+ animation-timing-function: tốc độ chuyển động
+ animation-delay: Xác định sau bao lâu thì chuyển động sẽ bắt đầu, mặc định
sẽ là 0
+ animation-iteration-count: Số lần thực hiện
+animation-play-state: Xác định chuyển động dừng lại hay chuyển động chạy
+ animation: Đây là dạng tổng hợp của các thuộc tính trên, ngoại trừ thuộc tính
animation-play-state.
Ví dụ:
#Spin{
Margin-top:2em;
-webkit-animation-name: imageRotate
-webkit-animation-duration:5s;
-webkit-animation-iteration-count:2;
-webkit-animation-timing-function:ease-in-out;
}
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 20
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
@--webkit-keyframes imageRotate{
From{
-webkit-transform:rotate(0deg);
}
To{
-webkit-transfrom:rotate(360deg);
}
}
3. Làm việc với font Wed.
- @font-face:
+ Cho phép những font chữ vào trang bằng cách khai báo font đó và đặt font
chữ trên web server
+ Là giải pháp khắc phục việc phải cài đặt font chữ trên máy tính
Ví dụ:
@font-face{
Font-family: Sigmar;
Src: url (Sigmarone.otf);
}
H2 {
Font-size:1.125em;
Letter-spacing:0.2em;
Font-weight:lighter;
Text-transform:uppercase;
Font-family: Sigmar, Georgia, Palatino, Times New Roman, serif;
}
- Kiểu định dạng font chữ:
+Open Type(OTF): Định dạng phổ biến hỗ trợ glyph
+TrueType(TTF): Nền tảng tương thích và cung cấp các điều khiển tinh vi sắp
chữ
+SVG : Định dạng vector dựa trên hiện nay chỉ hỗ trợ IOS của Apple IPod
+Web open font format (WOFF): Bao gồm nhiều khả năng nén các tập tin font
chữ và tối ưu hóa.
+Embedded OpenType (EOT)
- Sử dụng dịch vụ web để tạo nhiều font
@font-face Ơ
Font-family: ‘SigmarRegular’;
Src: url(‘fonts/sigmarone-webfont.eot’);
Src: url(‘fonts/sigmarone-webfont.eot?#iefix’) format(‘embedded-opentype’),
Src: url(‘fonts/sigmarone-webfont.woff) format (truetype),
Src: url(‘fonts/sigmarone-webfont.svg#SigmarRegular’) format (‘svg’);
Font-weight: nomal;
Font-style: nomal;
}
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 21
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
4. Chèn nhiều hình nền với CSS3
Cách sử dụng nhiều hình nền (Multiple Backgrounds) bằng CSS3
Có lẽ đối với nhiều bạn thì việc chèn hình nền vào web đã không còn gì xa lạ.
Nhưng chúng ta lại bị giới hạn chỉ có thể chèn một hình nền (background) ở phần
khai báo. Bây giờ, với sự hỗ trợ của CSS3, chúng ta đã có thể cho hiển thị nhiều
hình nền chỉ với 1 khai báo.
Để các bạn dễ hiểu, chúng ta hãy xem lại cách mà chúng ta muốn hiển thị nhiều
hình nền trong web của mình.
.overcast1 {
background-image:
url("images/overcast.png");
background-position: 150px 25px;
}
.rainbow {
background-image: url("images/rainbow.png");
background-position: 200px 10px;
}
.overcast2 {
background-image:
url("images/overcast.png");
background-position: 250px 25px;
}
.sunny {
background-image: url("images/sunny.png");
background-position: 100px 10px;
}
Trong đoạn code trên , để hiển thị nhiều ảnh nền (background) chúng ta phải
tạo nhiều thẻ với các lớp (class) khác nhau để hiển thị cho từng ảnh. Nhưng với
CSS3 , các bạn có thể gom nó thành một lớp duy nhất.
.weather {
width: 500px;
height: 280px;
margin: 50px auto;
background-image: url("images/overcast.png"),
url("images/rainbow.png"),
url("images/overcast.png"),
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 22
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
url("images/sunny.png");
background-position: 150px 25px,
200px 10px,
250px 25px,
100px 10px;
background-repeat: no-repeat;
}
Trong đoạn code trên, chúng ta chèn 4 hình nền với các vị trí khác nhau, kết quả
hiển thị giống như hình bên dưới :
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 23
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
-
Ghi chú:
+ Không nên sử dụng kết hợp thuộc tính border-image và thuộc tính borderradius
+ Gradient trong css giống với gradient được tạo ra trong các chương trình đồ
họa: có điểm dừng màu và điểm chuyển màu.
+ Có thể tạo được nhiều điểm dừng màu và điểm chuyển màu để gradient
phong phú hơn
+ Sử dụng giá trị vị trí: top, left, right, bottoom để điều chỉnh chính xác nhiều
hình nền trong CSS
5. Giới thiệu CSS3 Media Queries.
- Media Query là một bước cải tiến của luật @media bằng cách kết hợp Media
Type và các thông số khác như độ phân giải, kích thước, màu sắc,… để tăng
thêm tính chặt chẽ và linh hoạt của các luật này. Mỗi luật của Media Query là
một biểu thức logic và chỉ được áp dụng khi nó có giá trị true.
- Các Media Query có thể được sử dụng bằng các cách dùng thẻ <link> trong
HTML hoặc thẻ <?xml-stylesheet> trong XML, ngoài ra thì trong HTML bạn
có thể dùng các luật @import và @media. Các ví dụ sau sẽ áp dụng style css
cho các loại máy vi tính và hỗ trợ màu:
-
Đối với các trình duyệt, thiết bị giao tiếp với máy chủ lưu trữ website và tự
được định dạng với user agent string
- CSS3 media queries:
+ Hình thức nhận biết thiết bị
+ Kiểm tra khả năng của người dùng truy cập vào trang web
+ Nhận biết (phát hiện) được: chiều cao, chiều rộng của trình duyệt, thiết bị,
thiết bị định hướng (phong cảnh/ chân dung), độ phân giải
- Sử dụng CSS3 media queries để cung cấp layout phù hợp với cho layout mobile
Ví dụ:
@media only screen and (max-width: 480px) {
Body
{padding:
5px;
background-color:#FFF;
background-image:url
(images/smoothieworld_logo_mobile.jpg); background-repeat:no-repeat;
}
- Quy định chiều rộng của trang được hiển thị trên thiết bị
@media only scrceen and (max-device-width:480px)
- Điều hướng trên thiết bị di động:
+ Nên thiết kế vị trí điều hướng đơn giản hơn khi hiển thị trên trình duyệt máy
tính
+ Gợi ý:
Nên có, nên để gần đầu màn hình để dễ truy cập
Lặp lại điều hướng ở phía trước trang
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 24
Trường ĐH SPKT Hưng Yên
Khoa: Công nghệ Thông tin
Với thiết bị cảm ứng, sử dụng kích thước lớn cho link của điều hướng
Tránh điều hướng từ hình ảnh, nên dựa trên danh sách chuyển hướng dạng CSS
Ví dụ:
#mainnav {height: auto;}
#mainnav li {
Float:none;
Width: auto;
Text-align:left;
Border-top: 1px grey solid;
Border-bottom:1px grey solid;
}
6. Làm việc với CSS3 layout dạng nhiều cột và cấu trúc hộp Flex.
- CSS cung cấp các thuộc tính để thuận tiện cho việc thiết kế layout dạng nhiều
cột:
+ column-count: Quy định cụ thể số lượng các cột một phần tử được chia thành
+ Column-width: Quy định cụ thể chiều rộng của các cột
+ Column-grap: Quy định khoảng cách giữa các cột
+ Column-rule: Là thuộc tính viết tắt, cho phép thiết lập tất cả các thuộc tính:
chiều rộng, style, màu sắc giữa các cột
- Cách thiết lập:
#introduction-content
{
Width: 600px;
-moz-column-count:3;
-webkit-column-count: 3;
Colimn-count: 3;
}
- Thiết lập layout dạng hộp Flexible (Hộp linh hoạt):
+ Là dạng bố cục mới trong CSS3
+ Đại diện cho một trong bốn dạng layout đang được hỗ trợ bởi CSS2.1
Ví dụ:
#introduction-content { width: 600px; height: 150px; border: 1px solid
#821738; display: -webkit-box; -webkit-box-orient: horizontal; display: -moz-box;
-moz-box-orient: horizontal;
}
7. CSS3 user interface.
- CSS3 cung cấp một số tính năng về phía người dùng:
+ Thay đổi kích thước thành phần trên trang
+ Thay đổi kích thước hộp
+ Phác thảo
- Các thuộc tính quy định
+ Resize
GVGD: Hoàng Văn Quyết
Nhóm SVTH: Nguyễn Thế Anh – Đỗ Thị Giang
Page 25
