C S S & The Modern Web Design

1,753 views

Published on

CSS

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,753
On SlideShare
0
From Embeds
0
Number of Embeds
36
Actions
Shares
0
Downloads
64
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

C S S & The Modern Web Design

  1. 1. Vega Technology Group
  2. 2. What is CSS? <ul><li>Trong tin học, các tập tin định kiểu theo tầng – dịch từ tiếng Anh là Cascading Style Sheets (CSS) – được dùng để miêu tả cách trình bày các tài liệu viết bằng ngôn ngữ HTML và XHTML . Ngoài ra ngôn ngữ định kiểu theo tầng cũng có thể dùng cho XML, SVG, XUL v.v... (Theo Wikipedia) </li></ul><ul><li>Có 3 cách để sử dụng CSS. (Theo Wikipedia) </li></ul><ul><li>Áp dụng trực tiếp trên một đối tượng nhất định bằng thuộc tính style <span style=&quot;font-weight:bold;text-decoration:underline;color:#FF0000;&quot;>Đoạn text cần in đậm, gạch chân, màu đỏ</span> </li></ul><ul><li>Đặt CSS ở đầu trang web để áp dụng kiểu dáng cho một mình trang ấy </li></ul><ul><ul><li>Đặt đoạn CSS trong header của web (giữa <head> và </head>): <style type=&quot;text/css&quot;> </li></ul></ul><ul><ul><li>body {font-family:verdana;color:#0000FF;} // Kiểu chữ trong trang web là &quot;Verdana&quot;, màu chữ thông thường là màu đỏ </li></ul></ul><ul><ul><li></style> </li></ul></ul><ul><li>Đặt các thuộc tính CSS vào một tệp riêng biệt (*.css), có thể đưa vào nhiều trang khác nhau </li></ul><ul><ul><li>Nội dung tệp style.css : body {font-family:verdana;color:#0000FF;} </li></ul></ul>
  3. 3. Advantages and disadvantages of CSS <ul><li>Advantages </li></ul><ul><li>Dễ dàng thay đổi, quản lí giao diện </li></ul><ul><li>Giảm dung lượng trang web từ đó tăng tốc độ tải web site. </li></ul><ul><li>Tiết kiệm chi phí cho bảo trì cũng như băng thông của website. </li></ul><ul><li>Làm việc tốt với các trang tìm kiếm. </li></ul><ul><li>Thân thiện hơn với người dùng </li></ul><ul><li>Disadvantages </li></ul><ul><li>Các trình duyệt thường hiển thị không giống nhau. </li></ul>
  4. 4. CSS Syntax <ul><li>Kế thừa Ví dụ: body {font-family: Verdana, serif;} </li></ul><ul><li>Kết hợp h1, h2, h3, h4, h5, h6 { color: #009900; font-family: Georgia, sans-serif; } </li></ul><ul><li>Chú thích /* This is a comment */ </li></ul>
  5. 5. CSS Classes & ID <ul><li>Thiết lập class trong CSS như sau: .greenboldtext{   font-size: small;   color: #008080;   font-weight: bold; } </li></ul><ul><li>Sử dụng: <p> To put it more simply, this <span class=&quot;greenboldtext&quot;>sentence</span> you are reading is styled in my CSS file by the following. </p> </li></ul><ul><li>Chú ý: có thể dùng một class nhiều lần </li></ul><ul><li>Thiết lập ID trong CSS như sau: #container{ width: 80%; margin: auto; padding: 20px; border: 1px solid #666; background: #ffffff; } </li></ul><ul><li>Sử dụng: <div id=&quot;container“> Everything within my document is inside this division. </div> </li></ul><ul><li>Chú ý: Mỗi ID chỉ được phép sử dụng 1 lần </li></ul>
  6. 6. CSS Margin & Padding <ul><li>Giá trị: margin-top: length percentage or auto; margin-left: length percentage or auto; margin-right: length percentage or auto; margin-bottom: length percentage or auto; </li></ul><ul><li>margin: top right bottom left; margin: 10px 10px 10px 10px; </li></ul><ul><li>margin: top left/right bottom; margin: 10px 10px 10px; </li></ul><ul><li>margin: top/ bottom left/right; margin: 10px 10px ; </li></ul><ul><li>Các giá trị cũng như công thức trên cũng được áp dụng với padding </li></ul>
  7. 7. CSS Position <ul><li>Position: value; </li></ul><ul><ul><li>static </li></ul></ul><ul><ul><li>relative </li></ul></ul><ul><ul><li>absolute </li></ul></ul><ul><ul><li>fixed </li></ul></ul><ul><li>Static: Đây vốn là giá trị mặc định khi hiển thị vị trí của một đối tượng nên việc dùng position: static; không gây nên sự khác biệt. </li></ul><ul><li>Relative: giá trị này cho phép định vị trí của một đối tượng so với vị trí thường có của đối tượng đó. </li></ul><ul><li>Absolute: giá trị này cho phép định vị trí của một đối tượng so với vị trí có của đối tượng bao quanh nó. </li></ul><ul><li>Fixed: giá trị này cho phép định vị trí của một đối tượng so với vị trí của cửa sổ trình duyệt. </li></ul>
  8. 8. Organize CSS Code <ul><li>Ghi chú Version cũng như thông tin của file CSS đó (Tác giả, ngày tháng,….) </li></ul><ul><li>Sau đó, tiếp tục Style chủ đạo (Master Style) đã bao gồm những đối tượng cần thiết như reset.css, global.css, structures.css (sử dụng @import) </li></ul><ul><li>Chia nhóm đối tượng thành các mảng. Ví dụ: /* Typography */, /* Structure */ </li></ul><ul><li>Chú thích đầy đủ nhóm đối tượng </li></ul><ul><li>Sắp xếp các đối tượng cùng cấp theo Alphabet. </li></ul>
  9. 9. CSS Framework <ul><li>Blueprint (http://code.google.com/p/blueprintcss/) </li></ul><ul><ul><li>Reset CSS </li></ul></ul><ul><ul><li>Typography </li></ul></ul><ul><ul><li>Grid CSS </li></ul></ul><ul><li>Yahoo! UI Library CSS Foundation (http://developer.yahoo.com/yui/grids/) </li></ul><ul><ul><li>Reset CSS </li></ul></ul><ul><ul><li>Font CSS </li></ul></ul><ul><ul><li>Base CSS </li></ul></ul><ul><ul><li>Grid CSS </li></ul></ul>
  10. 10. CSS Resources <ul><li>Book: CSS Mastery (Recommended). </li></ul><ul><li>Website: </li></ul><ul><ul><li>W3Schools ( www.w3schools.com/css/ ) </li></ul></ul><ul><ul><li>Alistapart ( www.alistapart.com ) </li></ul></ul><ul><ul><li>Sitepoints ( www.sitepoint.com ) </li></ul></ul><ul><ul><li>Smashing Magazine ( www.smashingmagazine.com/category/css/ ) </li></ul></ul><ul><ul><li>Position Is Everything ( www.positioniseverything.net ) </li></ul></ul><ul><ul><li>CSS MaxDesign ( css.maxdesign.com.au ) </li></ul></ul><ul><ul><li>CSS Gallery (Google) </li></ul></ul>
  11. 11. Will be Continue… <ul><li>CSS chuyên sâu. </li></ul><ul><li>Kinh nghiệm làm việc với CSS. </li></ul><ul><li>Khắc phục các lỗi với CSS. </li></ul><ul><li>Các công nghệ CSS hiện có. </li></ul>

×