Your SlideShare is downloading. ×
Tìm hiểu các thuộc tính mới trong CSS 3I/Các Thuộc tính mới trong CSS31/Bộ chọn lọc:Có chức năng hiển thị chia theo dòng c...
b/Độ trong suốt của nền và chữ : Code: color: rgba(255,0,0,0.5);blackground:rgba(0,0,255,0.5);c/ Đường viền có góc tròn (R...
Trên mạng các bạn thấy trước thuộc tính này có thêm thuộc tính khác (-moz, -webkit) là để thông báocho trình duyệt tương ứ...
g/Animations:Thuộc tính này giúp tạo hiệu ứng phóng to thu nhỏ chữ.Code:@-webkit-keyframes pulse{ from {opacity: 0.0; font...
i/ Border ImagesBorder images là một trong những hiệu ứng hay nhất. CSS có thể lặp hoặc kéo dãn hình ảnh bạn chọnlàm đường...
}l/Chia nội dung thành nhiều cột :Chia cột là một công việc khó khăn. Trước đây, các lập trình viên thường sử dụng bảng ho...
style="-moz-transform: rotate(7deg); -webkit-transform: rotate(7deg);" />n/Co Giãn hình ảnh:Để co giãn đối tượng CSS3 có h...
o/Bóp méo hình ảnh:VÍ DỤ 1: Bóp méo đối tượng với hệ số góc âm.1.<img src="http://www.cssyeah.com/images/stories/contents/...
5. Tạo hiệu ứng chuyển động:Đây có lẽ là một trong những bổ sung hấp dẫn nhất của CSS3, cho phép áp dụng các hiệu ứngchuyể...
Css3
Upcoming SlideShare
Loading in...5
×

Css3

363

Published on

style css3

Published in: Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
363
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
28
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "Css3"

  1. 1. Tìm hiểu các thuộc tính mới trong CSS 3I/Các Thuộc tính mới trong CSS31/Bộ chọn lọc:Có chức năng hiển thị chia theo dòng chẳn dòng lẻ.Code:.row:nth-child(even){ background: #dde;}.row:nth-child(odd){ background: white;}2/Hỗ trợ font:Một trong những thao tác phổ biến nhất với CSS là định dạng font chữ. CSS cung cấp thuộc tính font-family để xác định kiểu font hiển thị:font-family: Times New RomanThật không may là việc lựa chọn font chữ gặp rất nhiều hạn chế do bị phụ thuộc vào số font được càiđặt trên máy người dùng. Điều này có nghĩa là chúng ta phải hạn chế sử dụng các loại font “hiếm” vìnhiều khả năng chúng sẽ không hiển thị đúng trên các máy tính không có font đó. Tuy nhiên, ngay cảcác font phổ biến đôi khi cũng gặp rắc rối, vì chúng có những tên khác nhau trên khác hệ điều hành khácnhau. Chẳng hạn như font Arial còn được gọi là Helvetica hay Sans Serif. Kết quả là chúng ta thườngthấy các khai báo kiểu như sau:font-family: Arial, Helvetica, sans serifCách viết này sẽ đảm bảo rằng font được hiển thị đúng: hệ thống chỉ việc lựa chọn loại font phù hợpnhất. Nhưng còn có một cách giải quyết tốt hơn: nhúng trực tiếp kiểu font vào file CSS. Với CSS3, việcnày trở nên rất đơn giản, đoạn code sau minh họa cách nhúng một font TrueType vào CSS:@font-face{font-family: ‘<tên font>’;src: url(‘<đường dẫn tới file font>’) format(‘truetype’);}3. Hiệu ứng cho văn bản-hình ảnh:a/ Viền chữ:Thuộc tính này giúp bạn tao đường viền bên ngoài chữ :Code:div{ -webkit-text-fill-color:black; -webkit-text-stroke-color:red; -webkit-text-stroke-width: 3px; }
  2. 2. b/Độ trong suốt của nền và chữ : Code: color: rgba(255,0,0,0.5);blackground:rgba(0,0,255,0.5);c/ Đường viền có góc tròn (Rounded Borders)Khó vận dụng CSS để làm được rounded border – Đã có nhiều cách nhưng nó chưa phải là tốt nhất. Rấtdễ khi làm việc này với CSS3. Nó có thể được áp dụng cho từng góc, và dễ dàng thay đổi thông số vềchiều rộng và màu sắc. Ví dụ: .roundedCorner { -webkit-border-radius: 10px; border: 4px solid #FF0000; }Khai báo này sẽ tạo một đường viền với bốn góc được bo tròn. Tuy nhiên, có những trường hợp mà tachỉ muốn áp dụng hiệu ứng này cho một góc cụ thể nào đó, may mắn là CSS3 cũng cho ta khả năng nàyvới các thuộc tính:-webkit-border-radius-topleft-webkit-border-radius-topright-webkit-border-radius-bottomleft-webkit-border-radius-bottomright
  3. 3. Trên mạng các bạn thấy trước thuộc tính này có thêm thuộc tính khác (-moz, -webkit) là để thông báocho trình duyệt tương ứng với nó hiểu được. Vì các thuộc tính CSS 3 hiện nay còn rất ít trình duyệt hỗtrợ, nên hầu hết các thuộc tính CSS 3 đểu phải thêm vào các thuộc tính trình duyệt vào trước nó.d/Kích thước hình nền: Ta có thể thay đổi kích thước hình nền để phù hợp với giao diện web của mình. Ví dụ 1: Khi ta để auto #logo{background: url(logo.gif) center center no-repeat; Background-size:auto; }Ví dụ 2: khi ta chỉnh về 100% thì hình ảnh sẽ được chỉnh sửa phù hợp với khung. #logo{background: url(logo.gif) center center no-repeat; Background-size:100%; }e/Transitions Thuộc tính này giúp ta di chuyển box về bên trái,bên phải hoặc giữa giao diện web của mình.Code: #box.left{margin-left:0;} #box.right{margin-right:0;} Document.getElementById(“box”).classname=’left’; Document.getElementById(“box”).classname=’right’;f/Transforms: Tạo hiệu ứng cân băng cho 1 box.Code:-webkit-transform:rotateY(45deg);-webkit-transform:scalex(25deg);-webkit-transform:translate3d(0,0,90deg);-webkit-transform:perspective(500px);#threed-example { -webkit-transform: rotateZ(5deg); -webkit-transition: -webkit-transform 2s ease-in-out;}#threed-example:hover { -webkit-transform: rotateZ(-5deg);}
  4. 4. g/Animations:Thuộc tính này giúp tạo hiệu ứng phóng to thu nhỏ chữ.Code:@-webkit-keyframes pulse{ from {opacity: 0.0; font-size: 100%; } to { opacity: 1.0; font-size: 200%; }}div { -webkit-animation-name: pulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: ease-in-out; -webkit-animation-direction: alternate;}h/ Box ShadowsThuộc tính mới "box-shadow" của CSS3 là một trong những thuộc tính khá hữu dụng và được sử dụngnhiều trong quá trình viết CSS. Với thuộc tính này bạn có thể tạo cho các thành phần trong website củamình hiệu ứng bóng đổ đẹp mắt. Tuy nhiên thuộc tính này không được hỗ trợ trên toàn bộ các trìnhduyệt hiện tại, thuộc tính này chỉ được hỗ trợ từ Safari 3+, Firefox 3.1 (Alpha), Chrome, Opera và IE9+. Ví dụ:.border_shadow{-webkit-box-shadow:10px10px5px#888;padding:5px5px5px15px;width:300px;}
  5. 5. i/ Border ImagesBorder images là một trong những hiệu ứng hay nhất. CSS có thể lặp hoặc kéo dãn hình ảnh bạn chọnlàm đường viền.Ví dụ CSS:.border_image{-webkit-border-image:url(border.png)27272727 round round;}j/ Text ShadowBóng dành cho văn bản nghe như một hiệu ứng rườm rà, nhưng tất cả phụ thuộc vào cách chúng đượcsử dụng. Đổ bóng chắc chắn có thể được đưa vào sử dụng tốt trong đầu đề và tiêu đề.Ví dụ:.shadowedText {font-family: Arial, Helvetica, sans serif;font-size: medium;color: #FF0000;text-shadow: 0.25em 0.25em 2px #999;}Thuộc tính text-shadow trong khai báo trên cho phép kiểm soát hiệu ứng đổ bóng.Ngoài ra,thuộc tínhnày có bốn tham số:horizontal-offset: tọa độ X tương đối của bóng (so với text)vertical-offset: tọa độ Y tương đối của bóng (so với text)blur-radius: bán kính mờ của bóng. Tắt hiệu ứng mờ bằng cách truyền giá trị 0shadow-color: màu sắc của bóngk/Word WrappingKhi trình bày, nếu một từ quá dài so với vùng trình bày, nó sẽ bị tràn ra bên ngoài. Tính năng mới sẽgiúp bạn khắc phục được điều này..text_wrap {word-wrap: break-word;
  6. 6. }l/Chia nội dung thành nhiều cột :Chia cột là một công việc khó khăn. Trước đây, các lập trình viên thường sử dụng bảng hoặc các tag<div> phức tạp để đạt được mục tiêu này. Nhưng nay thì CSS3 cũng đã hỗ trợ sẵn. Sau đây là cách chianội dung thành hai cột trong CSS3:.columns {font-family: Arial, Helvetica, sans serif;font-size: 10px;color: #444;text-align: justify;-webkit-column-count: 2;-webkit-column-gap: 1em;}Một lưu ý nhỏ là hai thuộc tính column-count và column-gap có thêm tiền tố -webkit-. Các thuộc tínhthử nghiệm của CSS3 được đặt tên theo kiểu này nhằm tránh xung đột trong trường hợp đặc tả thay đổi.Do đó hiện nay, cần sử dụng các tiền tố -moz- (cho Mozilla), -0- (cho Opera) và -webkit- (cho Safari vàChrome).m/Xoay hình ảnh:Để xoay một đối tượng nào đó chúng ta sẽ dùng 2 thuộc tính -moz-transform: rotate(góc xoay); và -webkit-transform: rotate(góc xoay);. Ban đầu chúng ta có một đối tượng ảnh như sau:Sau khi thêm style vào cho đối tượng:<img src="http://www.cssyeah.com/images/stories/contents/rotate.jpg" alt="Rotate"
  7. 7. style="-moz-transform: rotate(7deg); -webkit-transform: rotate(7deg);" />n/Co Giãn hình ảnh:Để co giãn đối tượng CSS3 có hỗ trợ 2 thuộc tính để thao tác trên đối tượng -moz-transform: scale(xx%); -webkit-transform: scale(xx%). Thuộc tính này sẽ có hoặc giãn đỗi tượng tùy theo tỉ lệ %.Ví dụ: +Khi chưa co giãn:+Phóng to 1.5 lần:<img src="http://www.cssyeah.com/images/stories/contents/rotate.jpg" alt="Rotate"style="-moz-transform: scale(1.5); -webkit-transform: scale(1.5);" />
  8. 8. o/Bóp méo hình ảnh:VÍ DỤ 1: Bóp méo đối tượng với hệ số góc âm.1.<img src="http://www.cssyeah.com/images/stories/contents/rotate.jpg" alt="Rotate" style="-moz-transform: skew(-45deg); -webkit-transform: skew(-45deg);" />VÍ DỤ 2: Bóp méo đối tượng với hệ số góc dương.<img src="http://www.cssyeah.com/images/stories/contents/rotate.jpg" alt="Rotate"style="-moz-transform: skew(45deg); -webkit-transform: skew(45deg);" />
  9. 9. 5. Tạo hiệu ứng chuyển động:Đây có lẽ là một trong những bổ sung hấp dẫn nhất của CSS3, cho phép áp dụng các hiệu ứngchuyển động để làm tăng tính bắt mắt cho trang web. Sau đây là một ví dụ căn bản về tạo chuyển động:@-webkit-keyframes topdown {from {top: 0px;}to {top: 300px;}}.animation {-webkit-animation-name: topdown;-webkit-animation-direction: alternate;-webkit-animation-duration: 2s;-webkit-animation-iteration-count: 5;position: relative;left: 0px;}Có thể thấy rằng đoạn CSS trên chia làm hai phần: phần đầu định nghĩa hiệu ứng chuyển động theo nhucầu sử dụng (ví dụ trên định nghĩa một chuyển động theo phương thẳng đứng đi từ tọa độ 0 tới tọa độ300px). Phần tiếp theo gán chuyển động này cho class .animation, trong đó có các thuộc tính quan trọngnhư: thời lượng (duration), số lần thực hiện chuyển động (count), chiều của chuyển động (direction – vídụ trên sử dụng giá trị alternate để chuyển động tự động đổi chiều sau mỗi lần thực hiện)Trên đây chỉ là vài nét mới nổi bật của CSS3, nhưng bấy nhiêu cũng đủ để chứng minh rằng đây là mộtcông nghệ đầy tiềm năng. Không chỉ góp phần hoàn thiện HTML5, CSS3 còn đơn giản hóa đáng kểcông việc của các nhà phát triển web. Đây thực sự là sự kế thừa xứng đáng của CSS. Và với sự hỗ trợngày càng mạnh của các trình duyệt, có thể tin rằng CSS3 sẽ nhanh chóng trở nên phổ biến vào mộtngày không xa.http://www.w3schools.com/cssref/default.asphttp://www.w3schools.com/css3/default.asp

×