CSS nâng cao
Ngày nay CSS đã trở thành một chuẩn công nghiệp cho xây dựng các website. Dù bạn là một nhà phát triển hay nhà thiết kế web, bạn nên biết cơ bản về nó. CSS là cầu nối giữa lập trình và thiết kế, và bất kỳ ai làm về Web cũng phải có kiến thức chung về CSS. Nếu bạn mới bắt đầu làm việc với CSS, hãy bắt đầu với một trình soạn thảo yêu thích và làm theo các hướng dẫn mà chúng tôi trình bày trong bài này và các bài thực hành sử dụng CSS.
TỔNG QUAN: NHỮNG VẤN ĐỀ SẼ ĐƯỢC TRÌNH BÀY
Chúng ta sẽ bắt đầu với những vấn đề cơ bản và tiềm năng của CSS, một trong những vấn đề về CSS mà chúng tôi đề cập thường hay gặp và hay sử dụng trong xây dựng các website:
- Padding và margin
- Floats
- Căn chỉnh vào giữa
- Các kiểu danh sách (list)
- Tạo kiểu cho các tiêu đề (heading)
- Overflow
- Position
MỘT SỐ ỨNG DỤNG VỚI CSS
1. Padding và Margin 
Hầu hết những người mới bắt đầu thường lẫn lộn giữa padding và margin và sử dụng chúng không đúng cách. Các bài thực hành sử dụng thuộc tính height để tạo padding hoặc margin cũng dẫn đến các lỗi hoặc không thống nhất trong ứng dụng. Hiểu về padding và margins là tiền đề để sử dụng CSS.
PADDING VÀ MARGIN LÀ GÌ?
Padding là phần không gian bên trong của một phần tử, và margin là phần không gian bên ngoài của một phần tử.
Sự khác biệt trở nên rõ ràng khi bạn áp dụng các màu nền (background) và đường biên (border) tới một phần tử. Không giống như padding, margin không bao phủ bởi cả hai loại màu nền hoặc đường biên bởi vì chúng là khoảng không gian bên ngoài của phần tử hiện tại.
Nhìn vào hình trực quan bên dưới:
Các giá trị của margin và padding được thiết lập theo chiều kim đồng hồ, bắt đầu từ đỉnh.
Ví dụ thực tế: Đây là một thẻ tiêu đề <h2> nằm giữa hai đoạn văn. Như bạn có thể thấy, magin tạo khoảng trắng giữa các đoạn văn và padding (nơi bạn nhìn thấy màu nền xám) cung cấp cho một không gian trống cho thẻ này.
CÁC GIÁ TRỊ CHO MARGIN VÀ PADDING
Ví dụ ở trên của thẻ tiêu đề <h2>, các giá trị cho margin và padding là:
margin: 15px 0 15px 0;
padding: 15px 15px 15px 15px;Để tối ưu hoá các dòng code, chúng ta có thể dùng một kỹ thuật tối ưu gọi là “shorthand”, mà sẽ giảm đi những dòng code lặp lại. Áp dụng kỹ thuật này đoạn code ở trên sẽ được viết ngắn lại như sau:
margin: 15px 0; /*--top and bottom = 15px | right and left = 0 --*/
padding: 15px; /*--top, right, bottom and left = 15px --*/Đây là một CSS hoàn chỉnh cho thẻ thiêu đề ở trên:
h2 {
background: #f0f0f0;
border: 1px solid #ddd;
margin: 15px 0;
padding: 15px;
}MÁCH NHỎ
Hãy nhớ rằng padding sẽ thêm tổng chiều rộng vào phần tử của bạn. Ví dụ, nếu bạn chỉ định độ rộng phần tử là 100 pixels, và bạn đặt padding bên trái và bên phải là 10 pixels thì bạn sẽ dành tổng cộng 120 pixels cho phản tử này.
100px (nội dung) + 10px (padding bên trái) + 10px (padding bên phải) = 120px (tổng độ rộng phần tử)
Tuy nhiên margin sẽ mở rộng khung xung quanh nhưng không trực tiếp ảnh hưởng tới chính phần tử đó. Mẹo này đặc biệt hữu ích khi bán bố trí các cột trong một layout.
Xem thêm các bài viết:
- Box Model
- Margins and Padding
- The Definitive Guide to Using Negative Margins
- CSS Shorthand Guide
- CSS Margin
- CSS Padding
2. Floats
Floats là phần tử nền tảng cơ bản CSS trong xây dựng các website và có thể được dụng để căn chỉnh ảnh và bố trí các layout và các cột. Bạn đã từng căn chỉnh các phần tử bên trái và bên phải trong HTML, thì float cũng làm việc tương tự như vậy.
Theo HTML Dog, thuộc tính float “xác định độ rộng cố định của hộp được thả nổi, dịch chuyển nó về bên phải hoặc bên trái, với xung quanh là nội dung.
Giá trị float: left căn chỉnh các phần tử về bên trái và cũng có thể được sử dụng như một container đặc để bố trí các layout và các cột. Chúng ta hãy nhìn vào một ví dụ thực tế bên dưới sử dụng float: left.
Giá trị float: right căn chỉnh các phần tử về bên phải, các phần tử xung quanh sẽ đặt bên trái.
Mẹo nhỏ: Bởi vì một khối các phần tử thường trải dài theo 100% độ rộng của container cha, float một phần tử về bên phải sẽ đẩy nó xuống một dòng mới. Điều này cũng xảy ra với dữ liệu là văn bản vì vậy float phần tử này sẽ không thể ép nó nằm trên cùng một dùng như ví dụ dưới.
Bạn có thể sửa lỗi này theo một trong hai cách sau:
- Đảo ngược thứ tự của thẻ đánh dấu HTML, tức là bạn gọi phần tử float đầu tiền rồi sau đó gọi phần tử nằm bên cạnh.
- Chỉ định độ rộng chính xác cho phần tử bên cạnh rồi đặt phần tử thứ hai, chú ý độ rộng kết hợp của cả hai phải nhỏ hơn hoặc bằng độ rộng của container chứa nó.
Chú ý: với Internet Explorer 6 (IE6) gấp đôi margin của các phần tử sử dụng float. Vì vậy nếu bạn đặt margin là 5 pixels thì nó sẽ trở thành 10 pixels trong IE6.
Một thủ thuật đơn giản để tránh được lỗi này là thêm thuộc tính display: inline tới phần tử gắn float, như sau:
.floated_element {
float: left;
width: 200px;
margin: 5px;
display: inline; /*--Khắc phụ trong IE6--*/
}Xem thêm các viết:
- Floatutorial
- Clearing Floats
- CSS Float Theory: Things You Should Know
- CSS-Tricks: All About Floats
- Containing Floats
- W3Schools: Clear
- W3Schools: Float
3. Căn chỉnh vào giữa
Thẻ <center> của HTML đã lâu không còn được sử dụng. Chúng ta có những cách khác nhau để căn chỉnh vào giữa của một phần tử.
CĂN CHỈNH THEO CHIỀU NGANG (HORIZONTAL)
Bạn có thể căn chỉnh theo chiều ngang của text trong các thẻ HTML sử dụng thuộc tính text-align. Đây là cách làm khá đơn giản, nhưng hãy nhớ khi bạn muốn căn chỉnh vào giữa của các phần tử inline thì bạn phải thêm display: block. Điều này cho phép trình duyệt xác định ranh giới để làm cơ sở căn chỉnh phần tử của bạn.
.center {
text-align: center;
display: block; /*--Chỉ cho các phần tử inline--*/
}Để căn chỉnh theo chiều ngang của các phần tử không chứa text, sử dụng thuộc tính margin.
W3C nói rằng, “Nếu cả hai margin trái and margin phải là auto, chúng sử dụng giá trị bằng nhau. Căn chỉnh theo chiều ngang này sẽ vào giữa của phần tử với liên quan các cung cở khối chứa nó.”
Căn chỉnh theo chiều ngang có thể đạt được thì với việc thiết lập margin trái và margin phải là auto. Đây là một phương pháp lý tưởng để sắp xếp theo chiều ngang các phần tử không phải là text như các layout và các ảnh. Nhưng khi căn chỉnh giữa của một layout hoặc phần tử không chỉ định độ rộng, bạn phải đặt độ rộng theo thứ tự để nó làm việc đúng.
Để căn chỉnh giữa một layout:
.layout_container {
margin: 0 auto;
width: 960px;
}Để căn chỉnh giữa một ảnh:
img.center {
margin: 0 auto;
display: block; /*--Khi IMG là một phần tử inline--*/
}CĂN CHỈNH THEO CHIỀU DỌC (VERTICAL)
Bạn có thể căn chỉnh theo chiều dọc dữ liệu văn bản của các phần tử sử dụng thuộc tính line-height, trong đó quy định khoảng không gian gữa các dòng văn bản. Điều này là lý tưởng cho căn chỉnh các tiêu đề và các dạng dữ liệu văn bản của các các phần tử. Đơn giản chỉ cần phù hợp chiều cao dòng (line-height) với chiều cao của phần tử (element height).
h1 {
font-size: 3em;
height: 100px;
line-height: 100px;
}Để căn chỉnh theo chiều dọc các phần tử không phải là văn bản, sử dụng đặt vị trí tuyệt đối.
Thủ thuật với kỹ thuật này là bạn phải xác định chính xác chiều cao và độ rộng trung tâm của phần tử.
Với thuộc tính position: absolute, một phần tử được đặt theo vị trí cơ sở của nó(0,0: góc trên bên trái). Trong ảnh bên dưới, điểm màu đỏ chỉ gốc 0,0 của phần tử, trước khi các margin âm được được áp dụng.
Với việc áp dụng các magin âm ở top và left, chúng ta có thể căn chỉnh toàn bộ phần tử này theo cả hai chiều ngang và dọc.
Đây là CSS hoàn chỉnh cho căn chỉnh theo chiều ngang và chiều dọc:
.vertical {
width: 600px; /*--Chỉ định chiều rộng--*/
height: 300px; /*--Chỉ định chiều cao--*/
position: absolute; /*--thiết lập vị trí tuyệt đối--*/
top: 50%; /*--thiết lập toạ độ top 50%--*/
left: 50%; /*--thiết lập toạ độ left 50%--*/
margin: -150px 0 0 -300px; /*--thiết lập chiều âm top/left của margin--*/
}Bài viết liên quan:
- Vertical Centering With CSS
- Centering Things
- CSS Centering 101
- CSS Centering: Fun for All!
- Two Simple Ways to Vertically Align with CSS
4. Các kiểu danh sách (list)
Một danh sách có thứ tự (Ordered), <ol>, là một danh sách các mục được đánh dấu bằng các số.
Một danh sách không có thứ tự (Unordered), <ul>, là một danh sách các mục được đánh dấu bằng các dấu đầu dòng (bullet).
Mặc định, cả hai lại danh sách các mục này là đầu mục dạng đơn giản. Với trợ giúp của CSS, bạn có thể dễ dàng tinh chỉnh chúng.
Về mặt ngữ nghĩa của code, danh sách nên chỉ nên sử dụng cho những nội dung đã được chia thành từng nhóm theo một kiểu danh sách. Nhưng chúng có thể được mở rộng cho nhiều cột hoặc các menu điều hướng.
TINH CHỈNH DANH SÁCH KHÔNG CÓ THỨ TỰ
Các đầu mục mặc định là đơn giản và có thể không thu hút sự chú ý với nội dung đi kèm. Bạn có thể giải quết vấn đề này bằng một kỹ thuật đơn giản nhưng hiệu quả: loại bỏ các đầu mục mặc định và thay thế bằng một ảnh nên cho mỗi mục trong danh sách.
Đây là CSS tinh chỉnh các đầu mục:
ul.product_checklist {
list-style: none; /*--Loại bỏ đầu mục mặc định--*/
margin: 0;
padding: 0;
}
ul.product_checklist li {
padding: 5px 5px 5px 25px; /*--Thêm padding xung quanh mỗi mục--*/
margin: 0;
background: url(icon_checklist.gif) no-repeat left center; /*--Thêm icon như một ảnh nền--*/
}
Các bài viết liên quan:
- CSS-Styled Lists: 20+ Demos, Tutorials and Best Practices
- Style Your Ordered List
- CSS Design: Taming Lists
SỬ DỤNG DANH SÁCH KHÔNG SẮP XẾP CHO MENU ĐIỀU HƯỚNG
Hầu hết các menu điều hướng được xây dựng như một danh sách kết hợp với CSS. Dưới đây là phân tích cách biến một danh sách thông thường thành một menu điều hướng theo chiều ngang.
HTML: bắt đầu với một danh sách không sắp xếp đơn giản với các liên kết cho mỗi mục trong danh sách.
<ul id="topnav">
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>CSS: chúng ta loại bỏ đi các đầu mục mặc định (như chúng ta đã làm phần tinh chỉnh đầu mục) bằng đặt list-style: none. Rồi chúng ta đặt mỗi mục của danh sách tới bên trái, do đó menu điều hướng sẽ xuất hiện theo chiều ngang, chạy từ trái sang phải.
ul#topnav {
list-style: none;
float: left;
width: 960px;
margin: 0; padding: 0;
background: #f0f0f0;
border: 1px solid #ddd;
}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 1px solid #ddd;
}
ul#topnav li a {
float: left;
display: block;
padding: 10px;
color: #333;
text-decoration: none;
}
ul#topnav li a:hover {
background: #fff;
}Tham khảo thêm các bài viết:
- CSS-Based Navigation Menus: Modern Solutions
- 30 Exceptional CSS Navigation Techniques
- Using CSS and Unordered List Items to Do Just About Anything
- Nifty Navigation Tricks Using CSS
- Centering List Items Horizontally
- Digg-Like Navigation Bar Using CSS
5. Tạo kiểu cho các tiêu đề (Heading)
Thẻ tiêu đề trong HTML là quan trọng cho SEO. Nhưng các tiêu đề có thể nhìn không nổi bật. Tại sao chúng ta không tinh chỉnh chúng với CSS và thưởng thức chúng?
Một khi bạn có các thuộc tính định kiểu chính thiết lập cho các tiêu đề, bạn có thể đặt nó inline trong các phần tử này để mở rộng định kiểu cho phần văn bản trong thẻ tiêu đề.
HTML của bạn có thể giống như sau:
<h1><span>CSS</span> Back to Basics <small>Tips, Tricks, & Practical Uses of CSS</small></h1>Và CSS của bạn:
h1 {
font: normal 5.2em Georgia, "Times New Roman", Times, serif;
margin: 0 0 20px;
padding: 10px 0;
font-weight: normal;
text-align: center;
text-shadow: 1px 1px 1px #ccc; /*--Not supported by IE--*/
}
h1 span {
color: #cc0000;
font-weight: bold;
}
h1 small {
font-size: 0.35em;
text-transform: uppercase;
color: #999;
font-family: Arial, Helvetica, sans-serif;
text-shadow: none;
display: block; /*--Keeps the small tag on its own line--*/
}Các bài viết khác liên quan:
- 10 Examples of Beautiful CSS Typography, and How They Did It
- 12 CSS Tools and Tutorials for Beautiful Web Typography
- CSS Gradient Text Effect
- 50 Useful Design Tools For Beautiful Web Typography
- 6 Ways to Improve Your Web Typography
- CSS Typography: Contrast Techniques, Tutorials and Best Practices
- 8 Simple Ways to Improve Typography in Your Designs
- How to Size Text in CSS
6. Overflow
Thuộc tính overflow có thể được sử dụng theo các cách khác nhau và là một trong các thuộc tính rất hữu ích trong kho CSS.
OVERFLOW LÀ GÌ?
Theo W3Schools.com, thuộc tính overflow định nghĩa cách thực hiện nếu nội dung không thể chứa gọn trong hộp của một phần tử (bị tràn).
Hãy xem các ví dụ dưới đây để hiểu cách làm việc của chúng.
Về mặt trực quan, overflow: auto nhìn giống như một iframe nhưng nó hữu ích hơn và thân thiện cho SEO. Nó tự động thêm thanh cuộn (thanh nganh, thanh dọc hoặc cả hai) khi nội dung của một phần từ vượt quá kích thước hay đường biên của phần tử.
Thuộc tính overflow: scroll làm việc tương tự như trên nhưng chúng luôn xuất hiện bất kể nội dung có vượt quá đường biên của phần tử hay không.
Và thuộc tính overflow: hidden property che hhay ẩn đi nội dung của phần tử nếu nó vượt quá đường biên của phần tử.
Mách nhỏ: Có bao giờ bạn có một phần tử cha mà không chứa được toàn bộ phần tử con của nó? Bạn có thể khắc phục bằng việc đặt thuộc tính float của phần tử chứa cha.
Tuy nhiên, trong một vài trường hợp việc đặt float bên trái hoặc bên phải không phải là giải pháp khả thi. Ví dụ, nếu bạn muốn căn giữa container hoặc không muốn chỉ rõ độ rộng chính xác. Trong thường hợp này, sử dụng overflow: hidden trên container cha để chứa toàn bộ các phần tử con ở trong nó.
Đọc thêm các bài:
- HTML Dog: Overflow
- W3Schools: Overflow
- CSS Globe: Create Resizing Thumbnails
- CSS-Tricks: CSS Overflow Breakdown
7. Position
Định vị trí (tương đối, tuyệt đối hay cố định – relative, absolute và fixed) là một trong các thuộc tính hữu ích nhất trong CSS. Nó cho phép bạn đặt vị trí một phần tử sử dụng toạ độ chính xác, đem lại cho bạn sự tự do và sáng tạo để thiết kết bên ngoài phạm vi của phần tử.
Bạn phải làm ba việc cơ bản khi sử dụng định vị:
- Thiết lập toạ độ (ví dụ như xác định toạ độ x và y).
- Chọn giá trị đúng cho mỗi tình huống: relative, absolute, fixed hay static.
- Thiết lập thuộc tính z-index : để tạo lớp các phần tử (tuỳ chọn).
Với position: relative, một phần tử được đặt ở vị trí tự nhiên của nó. Ví dụ, nếu vị trí tương đối của phần tử đặt bên trái của một ảnh, thiết lập toạ độ trên bên trái là 10px thì sẽ di chuyển phần tử này chỉ 10 pixel ở trên và 10 pixel từ bên trái của điểm gốc này.
Vị trí tương đối cũng thường được sử dụng để xác định điểm gốc mới (toạ độ x và y) của các phần tử cư trú bên trong với vị trí tuyệt đối. Mặc định, vị trí cơ sở của mỗi phần tử là ở góc trên bên trái (0,0) của khung nhìn trình duyệt. Khi bạn đặt một phần tử với vị trí tương đối thì vị trí sẽ được đặt tương đối theo phần tử cha. Ví dụ ở dưới toạ độ 0,0 của phần tử con bây giờ là toạ độ góc trên bên trái của phần tử cha, không phải là toạ độ của khung nhìn của trình duyệt.
Một phần tử với giá trị position: absolute có thể đặt ở bất kỳ đâu sử dụng toạ độ x và y. Mặc định, vị trí cơ sở (0,0) là ở góc trên bên trái của khung nhìn trình duyệt. Nó bỏ qua tất cả các quy tắc dòng chảy tự nhiên và không ảnh hưởng bởi các phần tử xung quoanh.
Vị trí của một phần tử với giá trị position: fixed là góc trên bên trái của khung nhìn trình duyệt. Sự khác biệt với vị trí cố định là phần tử này sẽ được cố định tại vị trí của nó và nằm trong khung nhìn thậm trí ngay cả khi người sử dụng cuộn thanh cuộn lên hoặc xuống. này value is also the top-left corner of the browser’s view port. The difference with fixed positioning is that the element will be fixed to its location and remain in view even when the user scrolls up or down.
Thuộc tính z-index xác định thứ tự stack của một phần tử.property specifies the stack order of an element. Phần tử có giá trị cao hơn sẽ xuất hiện.
Để dễ hình dung việc chồng xếp các lớp với z-index. Xem ví dụ bên dưới:
Xem thêm bài viết:
- W3Schools: CSS Positioning
- CSS-Tricks: Absolute, Relative, Fixed Positioning
- Stopping the CSS Positioning Panic
- Learn CSS Positioning in Ten Steps
- In-Depth Coverage of CSS Layers, Z-Index, Relative and Absolute Positioning
MỘT SỐ ỨNG DỤNG VỚI CSS
Bây giờ bạn đã hiểu những kiến thưc cơ bản, bước tiếp theo là thêm một chút hương vị với CSS của bạn. Bên dưới là một số kỹ thuật cơ bản cho cải thiện và đánh bóng bố cục và các ảnh của Website. Chúng cũng sẽ là thách thức với bạn để tạo ra các website riêng của bạn từ việc sử dụng các CSS từ đầu.
1. Ảnh nền
Các ảnh nền có rất nhiều hữu ích cho nhiều hiệu ứng hình ảnh. Mặc dù bạn thêm các ảnh được lặp lại để bao phủ toàn một diện tích rộng hoặc thêm các kiểu icon tới menu điều hướng, những hình ảnh này làm trang web của bạn sinh động hơn.
Chú ý mặc dù mặc định thiết lập mặc định in ấn loại bỏ các thuộc tính nền. Vì vậy khi tạo các trang in, lưu tâm đến các phần tử có ảnh nền và bao gồm cả các thẻ ảnh.
SỬ DỤNG CÁC ẢNH NỀN LỚN
Với kích thước màn hình ngày càng trở nên lớn hơn, các ảnh nền lớn cho các website ngày càng phổ biến.
Xem chi tiết tài liệu hướng dẫn bởi Nick La của WebDesigner Wall để biết cách đạt được hiệu ứng này:
Ngoài ra bạn có thể đọc bài viết trên Webdesigner Depot về chủ đề “Do’s and Don’ts of Large Website Backgrounds.”
THAY THẾ VĂN BẢN
Bạn có thể thấy rằng hầu hết các trình duyệt chuẩn đều hỗ trợ các Font đã tinh chỉnh trên các Website. Nhưng bản có thể thay thế phần văn bản bởi một ảnh theo các cách khác nhau. Một kỹ thuật khá đơn giản là sử dụng thuộc tính text-indent.
Thường gặp với các tiêu đề, kỹ thuật này thay thế cấu trúc văn bản HTML bởi một ảnh.
h1 {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
}Đôi khi bạn có thể cần chỉ định chiều rộng và chiều cao (như display: block nếu phân tử là inline).
.replacethis {
background: url(home_h1.gif) no-repeat;
text-indent: -99999px;
width: 100%;
height: 60px;
display: block; /*--Chỉ dùng cho các phần tử inline--*/
}Các bài viết nói về thay thế văn bản:
- Nine Techniques for CSS Image Replacement
- Using background-image to Replace Text
- Image Placement vs. Image Replacement
- Revised Image Replacement
CSS SPRITES
CSS Sprites là một kỹ thuật mà bạn sử dụng để định vị ảnh nền để có thể hiển thị trên một phần diện tích nhỏ với một ảnh nền lớn hơn (ảnh lớn hơn này thực tế là nhiều ảnh được đặt trên một lưới và được gộp chung vào thành một file).
CSS Sprites thường được sử dụng với các icon và các biểu tượng chuột và ảnh của các quốc giả mà dùng để thay tthees các liên kết hoặc các mục điều hướng.
Tại sao sử dụng CSS Sprites? CSS Sprites tiết kiệm thời gian tải về và cắt giảm CSS và các truy vấn HTTP. Để biết nhiều hơn về CSS Sprites, xem thêm những tài nguyên bên dưới!
Các bài viết về CSS Sprites:
- The Mystery Of CSS Sprites: Techniques, Tools and Tutorials
- Advanced CSS Menu
- CSS Sprite Navigation Tutorial
- Creating Easy and Useful CSS Sprites
- Building Faster Websites with CSS Sprites
- CSS Sprites: Image Slicing’s Kiss of Death
- CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance
- What Are CSS Sprites?
2. Tuỳ biến ảnh
Bạn có thể định kiểu các ảnh với CSS theo các cách khác nhau, và một số người thiết kế phải bỏ ra rất nhiều công sức để tạo ra rất nhiều khuân mẫu (template) của ảnh.
Một thủ thuật đơn giản là kỹ thuật double-border mà không yêu cầu bất kỳ ảnh nào thêm và là thuần CSS.
HTML của bạn giống như sau:
<img class="double_border" src="sample.jpg" alt="" />Và CSS của bạn:
img.double_border {
border: 1px solid #bbb;
padding: 5px; /*Inner border size*/
background: #ddd; /*Inner border color*/
}WebDesigner Wall có một bài hướng dẫn rất hay về các thủ thuật thông minh để cải thiện các ảnh của bạn. Hãy thử xem qua nó.
3. PSD tới HTML
Bây giờ bạn đã học được những nguyên tắc cơ bản của CSS, giờ là lúc kiểm tra kỹ năng của bạn và xây dựng website của riêng bạn từ đầu! Dưới đây là một vài bài hướng dẫn được lựa chọn từ các Web tốt nhất.
- Coding a Clean and Illustrative Web Design from Scratch
- Build a Sleek Portfolio Site from Scratch
- How To Build Your Own Single Page Portfolio Website
- Converting a Photoshop Mockup: Part Two, Episode One
Kết luận
Xây dựng một nền tảng vững chắc là rất quan trọng để làm chủ CSS. Với sự phát triển nhanh các công nghệ tiên tiến Web, không có gì là xu hướng và chuẩn cuối cùng.
Hy vọng những kỹ thuật mà chúng tôi thu thập ở đây sẽ giúp bạn có một điểm bắt đầu để trở nên thành thạo với CSS. Chúc may mắn, giữ đam mê và duy trì việc học liên tục!
