CSS Note 2

11. RESET CSS LÀ GÌ VÀ VÌ SAO NÊN RESET CSS

Bạn học HTML thì chắc cũng thừa biết là mặc định trình duyệt đã tự mặc định hiển thị một số thẻ HTML thành một đoạn văn bản đã được markup đầy đủ, ngoài ra thì nó cũng mặc định thêm một số quy tắc trên trang tài liệu web HTML như có chứa padding, margin,…và một cái quan trọng là mỗi loại trình duyệt đều có những quy tắc riêng nên việc hiển thị mặc định sẽ không giống nhau.

Do vậy khi viết CSS cho website, bạn nên đưa tất cả các giá trị của các phần tử trên website về bằng 0 hết và xóa một số định dạng có sẵn để khi cần chúng ta sẽ dùng CSS viết lại theo ý của mình để đảm bảo nó hiển thị tốt trên tất cả các trình duyệt. Việc làm này người ta gọi là Reset CSS.

Reset CSS như thế nào?

Nếu bạn muốn tự reset CSS đơn giản nhất thì hãy viết đoạn sau vào tập tin CSS là có thể đưa toàn bộ giá trị liên quan tới Box Model về 0.

* {</p>

<p>padding: 0;</p>

<p>margin: 0;</p>

<p>border: none;</p>

<p>}

Chỉ chữ có màu có trong code

Nhưng như vậy có vẻ không tối ưu cho lắm, thay vì reset CSS như vậy thì chúng ta sẽ dùng các bộ Reset CSS có sẵn mà nhiều designer/developer chuyên nghiệp thường sử dụng.

Một số bộ Reset CSS thông dụng

Bạn có thể sử dụng các bộ reset CSS thông dụng dưới đây để tiết kiệm thời gian và tối ưu hơn. Cách sử dụng là copy code bỏ vào đầu file CSS của bạn.

normalize.css

Đây là bộ reset CSS thông dụng nhất hiện tại, phù hợp với cả HTML5 và CSS3. Đặc điểm của bộ này là sẽ điều chỉnh các phần tử trong website hiển thị phù hợp với tất cả các trình duyệt thông dụng, xóa bỏ toàn bộ margin và padding mặc định, có sẵn style cho các thẻ khá có ích như <sub>, <sup>, <code>,….Bạn có thể xem thêm các lý do nên sử dụng normalize.css tại http://stackoverflow.com/a/8357635.

Reset CSS 2.0 by Eric Meyer

Nếu bạn cần một đoạn reset CSS đưa toàn bộ các phần tử website về “thời đồ đá”, không có bất cứ một định dạng gì thì có thể sử dụng bộ này. Bộ reset CSS này thích hợp cho những ai muốn tự mình viết lại CSS cho toàn bộ các thành phần trong website, kể cả việc thiết lập kích thước chữ cho các thẻ tiêu đề.

Lời kết

Cuối bài này, mình chỉ xin tóm gọn lại với bạn là khi viết CSS cho website thì nhớ sử dụng các bộ reset CSS để bạn thuận tiện hơn cho việc xây dựng giao diện như đúng ý của mình, mình khuyến khích bạn sử dụng bộ normalize.css vì nó vừa gọn nhẹ mà lại đỡ tốn công viết CSS cho các thành phần không cần thiết để bạn viết thủ công.

12. Tùy biến hiển thị danh sách LIST

Mặc định các thẻ list (danh sách) trong HTML sẽ được hiển thị dựa trên quy tắt hiển thị ở các trình duyệt cho các thẻ đó. Ví dụ khi bạn sử dụng <ol> thì sẽ hiển thị danh sách có đánh số, thẻ <ul> sẽ hiển thị dấu chấm tròn cho mỗi mục con bên trong. Nhưng với CSS, bạn có thể tùy biến lại được cách hiển thị của nó, chẳng hạn như bạn muốn dùng hình ảnh thay cho dấu chấm tròn ở thẻ <ul> chẳng hạn.

Và để tùy biến danh sách trong CSS, chúng ta sẽ sử dụng thuộc tính list-style để làm.

Quy tắt viết thuộc tính list-style

Ở thuộc tính này, bạn có thể viết giá trị theo thứ tự như sau:

list-style: <list-style-type> <list-style-position> <list-style-image>;

rong đó, 3 giá trị mình ghi bên trong kia là 3 thuộc tính con của list-style nhưng bạn có thể viết vào thẻ này cùng lúc mà không cần viết từng thuộc tính. Cụ thể:

• list-style-type: Thay đổi loại hiển thị của danh sách.
• list-style-position: Tùy chỉnh vị trí hiển thị các dấu đầu dòng của mục con nằm bên trong danh sách hoặc bên ngoài danh sách.
• list-style-image: Sử dụng hình ảnh làm các dấu đầu dòng cho danh sách.

Khi biết cách sử dụng 3 thuộc tính con ở trên thì bạn có thể viết nó vào thuộc tính list-style cho gọn nhé.

Sử dụng thuộc tính này cho phần tử nào?

Các thuộc tính mà mình đề cập trong bài này đều sẽ sử dụng để tùy biến hiển thị cho các phần tử <li> trên website. Tuy nhiên bạn có thể sử dụng cho bất kỳ phần tử nào khác nếu phần tử đó có thêm thuộc tính display: list-item.

list-style-type

Ở giá trị này bạn sẽ thiết lập kiểu hiển thị cho các dấu đầu dòng trên mỗi thẻ <li>, bạn có thể thiết lập nó hiển thị thành số hay chữ cái hoặc ký tự tùy thích. Nó có một số thuộc tính thông dụng như sau:

• disc: Kiểu nút tròn có nền bên trong,
• circle: Kiểu nút tròn nhưng có viền nhưng không có nền.
• squre: Kiểu ô vuông có nền.
• decimal: Kiểu số thứ tự.
• lower-roman: Kiểu số La Mã in thường.
• upper-roman: Kiểu số La Mã in hoa.
• none: Xóa các dấu đầu dòng.

Ngoài ra nó còn rất nhiều các giá trị khác, bao gồm các giá trị đang thử nghiệm tại đây. Cũng nói thêm rằng tính năng list-style-type này ở CSS3 rất linh hoạt và có độ tùy biến cao, đặc biệt là với giá trị custom-counter-style nhưng cái này hơi nâng cao nên mình sẽ nói ở serie CSS3.

list-style-position

Với thuộc tính này chúng ta chỉ có duy nhất hai giá trị là:

• inside: Hiển thị dấu đầu dòng bên trong block.
• outside: Hiển thị dấu đầu dòng bên ngoài block.

list-style-image

Nếu bạn chán với kiểu hiển thị các dấu đầu dòng là ký tự thì có thể chuyển sang sử dụng hình ảnh (tốt nhất là một icon nhỏ) với thuộc tính list-style-image này. Cách dùng rất đơn giản như sau:

list-style-image: url('link ảnh');

Viết ngắn gọn vào list-style

Bạn đã biết cách sử dụng ba thuộc tính ở trên rồi, bây giờ chúng ta có thể viết tất cả giá trị đó vào thuộc tính list-style để đỡ phải mất công viết nhiều hàng như sau:

01	list-style: square inside;

Hoặc nếu sử dụng ảnh thì không thể viết cùng với list-style-type được mà chỉ có hai giá trị như sau:

01	list-style: url('hình ảnh') outside;

Ví dụ sử dụng list-style cho các phần tử khác

Ở đầu bài mình có nói là các thuộc tính list-style này chỉ có thể áp dụng cho các phần tử <li> vì mặc định các phần tử này sẽ hiển thị theo kiểu list item (tức là mục danh sách). Nếu bạn muốn sử dụng cho các phần tử khác thì bắt buộc phải cần chuyển nó về kiểu hiển thị list item này. Bạn có thể chuyển kiểu hiển thị của nó với thuộc tính display: list-item. Dưới đây là một ví dụ về hiển thị danh sách với thẻ <p>.

Và nếu bạn có tò mò về thuộc tính display thì mình sẽ giải thích về nó ở ngay bài tiếp theo đây.

13. Tuỳ biến loại phần tử với Display

• Block: Các phần tử block nó sẽ được nằm một hàng riêng biệt khi hiển thị. Ví dụ như các thẻ <div>, <li>, <ul>, <h1>,..là các block.
• Inline: Các phần tử này sẽ hiển thị trên cùng một hàng trên nội dung khác. Ví dụ như các thẻ <span>, <strong>, <a>,..là các phần tử inline.

Vậy thì câu hỏi được đặt ra, làm thế nào để chuyển một phần tử inline sang block và ngược lại? Giải pháp trong CSS đó là sẽ sử dụng thuộc tínhdisplay.

Thuộc tính display có một số giá trị cơ bản như:

• inline: Chuyển phần tử về hiển thị trên cùng một hàng.
• inline-block: Chuyển phần tử về hiển thị trên cùng một hàng nhưng nó vẫn thừa hưởng các đặc tính của block như có thể tùy chỉnh kích thước, thêm background,…
• block: Chuyển phần tử về hiển thị kiểu block, sở hữu một hàng riêng.
• list-item: Chuyển phần tử về hiển thị như một mục danh sách, để có thể sử dụng thuộc tính list-style.
• none: Đơn giản là ẩn phần tử đó đi không cho hiển thị nữa, nó cũng sẽ ẩn luôn toàn bộ các khoảng trống mà nó sở hữu. Nếu bạn muốn ẩn đi mà vẫn đề lại “dấu vết” thì có thể sử dụng visibility: hidden.

Một vài ví dụ về thuộc tính display:

Chỉ vậy thôi, bạn nên nhớ là CSS luôn tồn tại một thuộc tính tên là display để đổi kiểu hiển thị cho phần tử là được vì chắc chắn sau này bạn sẽ sử dụng rất nhiều khi thực hành thực tế.

15. Position: Absolute và Relative

Trong CSS, khi bạn di chuyển bất cứ một phần tử nào bằng các thuộc tính về Box Model như margin hoặc float thì các phần từ bên cạnh nó đều sẽ bị ảnh hưởng. Ví dụ bạn sử dụng margin để chuyển phần tử A thì cái thằng bên cạnh nó cũng sẽ di chuyển theo và tất cả các phần tử khác đều sẽ bị ảnh hưởng theo.

Vậy nếu như bạn muốn di chuyển một phần tử nào đó mà không ảnh hưởng đến bố cục của website thì sẽ có một giải pháp đó là sử dụng thuộc tính position. Cái tên nói lên tất cả, position là thuộc tính giúp bạn tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không hề làm ảnh hưởng đến các phần tử khác.

Các giá trị của thuộc tính position

Hiện tại position hỗ trợ cho một số giá trị như sau:

• relative: Dùng để thiết lập một phần tử sử dụng các thuộc tính position (xem ở dưới) mà không làm ảnh hưởng đến việc hiển thị ban đầu.
• absolute: Dùng để thiết lập vị trí của một phần tử nhưng nó sẽ luôn nằm trong một phần tử mẹ đang là relative.
• fixed: Hiển thị luôn đi theo trình duyệt khi cuộn trang.
• static: Đưa phần tử về hiển thị theo kiểu mặc định.

Sau khi thiết lập một phần tử sử dụng position, chúng ta sẽ sử dụng thêm một số thuộc tính position để căn chỉnh vị trí của nó và giá trị là số kèm theo đơn vị, có 4 thuộc tính position là:

• top: Căn vị trí hiển thị của phần tử theo hướng từ trên xuống dưới. Giá trị càng cao thì phần tử càng thụt xuống dưới.
• bottom: Căn vị trí hiển thị của phần tử theo hướng từ dưới lên trên. Giá trị càng cao thì phần tử càng hiển thị lên cao.
• left: Căn vị trí hiển thị từ trái sang phải. Giá trị càng cao thì phần tử sẽ càng thụt về bên phải.
• right: Căn vị trí hiển thị từ phải sang trái. Giá trị càng cao thì phần tử sẽ càng thụ về bên trái.

Ví dụ về kiểu relative

Ở ví dụ này, mình sẽ cho cái hình ảnh hiển thị theo kiểu relative và dùng thuộc tính position để nó hiển thị đè lên văn bản.

Ví dụ về kiểu absolute

Với absolute, mình phải có một phần tử mẹ là kiểu relative. Lúc này giá trị thấp nhất của nó sẽ tính từ lề của phần tử mẹ. Ví dụ như ở dưới, vùng màu đỏ là vùng được thiết lập kiểu relative, còn hình ảnh sẽ là kiểu absolute. Khi mình đưa các thuộc tính position về giá trị là 0 thì nó vẫn nằm trong phần tử mẹ.

Ví dụ về kiểu fixed

Ở ví dụ này, mình sẽ tạo ra một cái danh sách, sau đó đưa các mục con bên trong thành kiểu inline và position kiểu fixed để nó luôn đi theo trình duyệt khi kéo thanh cuộn.

Lời kết

Thế tại sao mình lại giải thích cặn kẽ về position như vậy, nó quan trọng lắm sao? Khá là quan trọng sau  này, mà cụ thể là trước mắt ở phần sau mình sẽ bày cho bạn một vài kỹ thuật làm menu đổ xuống có phân cấp và trong đó sẽ sử dụng thuộc tính position rất nhiều và nó hiển thị tốt hay không là quan trọng bạn có thiết lập đúng kiểu position hay không. Và tương lai bạn còn dùng nhiều nữa nên hãy nắm rõ ngay từ bây giờ.

14. Pseudo Class Đơn giản

Pseudo Class trong CSS là gì?

Pseudo Class trong CSS được sử dụng để viết CSS cho một trạng thái nào đó của một phần tử. Ví dụ viết CSS đổi màu các liên kết khi rê chuột vào, đổi thuộc tính một phần tử khi nhấp vào,….Các pseudo class được khai báo tại vùng chọn, đặt đằng sau vùng chọn và có dấu hai chấm (:) ngăn cách. Ví dụ: #link:hover (vùng chọn của #link khi rê chuột vào).

Trong bài viết này, vì nó thuộc CSS căn bản nên mình chỉ nói qua một số pseudo class đơn giản nhất mà cũng thường gặp nhất khi viết CSS cho website

Một số Pseudo Class thông dụng

• :hover – Chọn trạng thái khi rê chuột vào một phần tử.
• :visited – Được sử dụng cho liên kết, chọn liên kết khi đã được truy cập (dựa vào History trên trình duyệt).
• :link – Được sử dụng cho liên kết, chọn liên kết khi chưa nhấp vào.
• :active – Chọn phần tử khi họ chọn/nhấp vào.

Một số ví dụ về pseudo class đơn giản

Dưới đây là một số ví dụ cách sử dụng pseudo class trong CSS3, trong đó mình có ngứa tay làm thêm phần chuyển động với transition, nếu bạn chưa hiểu thì ở gần cuối serie mình có giải thích.

Rất hay và thiết thực phải không nào?