Cơ bản về CSS

Chắc có lẽ mình không cần phải giới thiệu nhiều về CSS (cascading style sheet) vì các bạn đã quá biết nó là gì và tác dụng của nó ra sao trong việc thiết kế website.

CSS và Web standard đang ngày càng xuất hiện nhiều hơn trong cộng đồng thiết kế web tại Việt nam, đó là một tín hiệu đáng mừng, nhưng cũng dần trở thành mối lo âu vì càng ngày mình càng thấy các bạn thiết kế web ở Việt nam làm đẹp hơn, tốt hơn. Và có lẽ hậu quả là mình sắp thất nghiệp đến nơi. :D

Nói vui vậy chứ thời gian vừa rồi mình có xem nhiều website thành phẩm có, layout có, hay một sản phẩm chưa hoàn thiện gửi đến cho mình cũng có luôn. Thì mình nhận thấy có một số những bạn sử dụng CSS mà không khai thác hết đặc tính của nó hay là viết một cách máy móc, rườm rà.

Vì thế mình sẽ bắt đầu series bài viết về CSS bằng một bài viết về cơ bản. Cơ bản từ cách sắp xếp, suy luận và từ cách khai thác để mong rằng các bạn trẻ mới học sẽ không bị vướng mắc và để không còn những câu lệnh CSS ngô nghê vô dụng nữa.

Đầu tiên là vị trí chúng ta đặt CSS trong thư mục chứa file nội dung của website

Đặt CSS bên trong file (X)HTML mà bạn cần style (Internal Stylesheet)

Ta đặt vào giữa 2 thẻ <HEAD></HEAD>. Khi đó file (X)HTML trông sẽ như thế này:

Với cách đặt CSS bên trong thì bạn không sử dụng được tính kế thừa của nó, và mỗi khi style cho một file khác thì bạn buộc phải viết lại hoặc viết riêng cho từng file X(HTML)

Vì hạn chế đó nên ta có một cách đặt CSS khác nữa là

Đặt CSS bên ngoài file (X)HTML mà bạn cần style (External Stylesheet)

Với cách này, file CSS sẽ được viết riêng bằng Notepad, Dreamweaver, Top Style hay một trình Editor nào đấy và được save lại với tên file có phần mở rộng là .css

Khi đó trong file (X)HTML mà bạn cần style sẽ có thêm một đoạn code trỏ đến file CSS mà bạn style

Hoặc bạn có thể thêm đoạn code sau

Và đây là đoạn code trên file (X)HTML

<head>
<title><title>
<link rel="stylesheet" type="text/css"href="/style.css" />
</head>
<body>

hoặc

<head>
<title><title>
<style type="text/css"> @import url("đường dẫn đến file css") </style>
</head>
<body>

Với file CSS đặt bên ngoài, bạn có thể dùng 1 file CSS mà có thể style cho nhiều file (X)HTML mà không cần phải viết đi viết lại. Đồng nghĩa với việc bạn thu gọn dung lượng file một cách đáng kể vì tận dụng tính kế thừa của CSS

Đặt CSS đặt ngay bên trong dòng code (Inline Stylesheet)

Kết quả là: Blue text

Như vậy là các bạn đã biết được chính xác các vị trí mà ta có thể đặt CSS. Đó cũng là bước cơ bản đầu tiên để ta tiếp cận CSS, hiểu nó và kiểm soát nó. Và chúng ta sẽ chuyển qua phần tiếp theo nhé

(Phần tiếp theo: Các thuộc tính cơ bản của CSS)

Set as favorite

Bookmark

Comments (2) Add Comment