CSS nâng cao - Phan Tiến

CSS nâng caoBỞI PHAN TIẾNNgà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 trình bày trong bài này và các bài thực hành sử dụng 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.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.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.3. Căn chỉnh vào giữa Thẻ  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).Để 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--*/ }4. Các kiểu danh sách (list) Một danh sách có thứ tự (Ordered), , 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), , 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--*/ }SỬ DỤNG DANH SÁCH KHÔNG SẮP XẾP CHO MENU ĐIỀU HƯỚNGHầ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. Home Services Portfolio About Contact 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.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 đề.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ó.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 PositioningCSS-Tricks: Absolute, Relative, Fixed PositioningStopping the CSS Positioning PanicLearn CSS Positioning in Ten StepsIn-Depth Coverage of CSS Layers, Z-Index, Relative and Absolute PositioningMỘ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ỚNVớ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ẢNBạ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.Các bài viết nói về thay thế văn bản:Nine Techniques for CSS Image ReplacementUsing background-image to Replace TextImage Placement vs. Image ReplacementRevised Image ReplacementCSS SPRITESCSS 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 TutorialsAdvanced CSS MenuCSS Sprite Navigation TutorialCreating Easy and Useful CSS SpritesBuilding Faster Websites with CSS SpritesCSS Sprites: Image Slicing’s Kiss of DeathCSS Sprites: How Yahoo.com and AOL.com Improve Web PerformanceWhat 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.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.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.