Đây là cuốn tài liệu giới thiệu các thuộc tính cơ bản thường dùng nhất của CSS dành cho người mới bắt đầu học CSS.

Đang xem: Tài liệu học css tiếng việt

*

Mục Lục

Lời mở đầu

Bài 1: Giới thiệu

1.1. CSS là gì?1.2. Tại sao CSS?1.3. Học CSS cần những gì?

Bài 2: Một số quy ước về cách viết CSS

2.1. Cú pháp CSS2.2. Đơn vị CSS2.3. Vị trí đặt CSS2.4. Sự ưu tiên

Bài 3: Màu chữ và màu nền

3.1. Thuộc tính background-color3.2. Thuộc tính background-image3.3. Thuộc tính background-repeat3.4. Thuộc tính background-attachment3.5. Thuộc tính background-position

Bài 4: Font chữ

4.1. Thuộc tính font-family4.2. Thuộc tính font-style4.3. Thuộc tính font-variant4.4. Thuộc tính font-weight4.5. Thuộc tính font-size

Bài 5: Text

5.1. Thuộc tính color5.2. Thuộc tính text-indent5.3. Thuộc tính text-align5.4. Thuộc tính letter-spacing5.5. Thuộc tính text-decoration5.6. Thuộc tính text-transform

Bài 6: Pseudo-classes for Links

Bài 7: Class & id

7.1. Nhóm phần tử với class7.2. Nhận dạng phần tử với id

Bài 8: Span & div

8.1. Nhóm phần tử với8.2. Nhóm phần tử với

Bài 9: Box Model

Bài 10: Margin & padding

10.1. Thuộc tính margin10.2. Thuộc tính padding

Bài 11: Border

11.1. Thuộc tính border-width11.2. Thuộc tính border-color11.3. Thuộc tính border-style

Bài 12: Height & width

12.1. Thuộc tính width12.2. Thuộc tính max-width12.3. Thuộc tính min-width12.4. Thuộc tính height12.5. Thuộc tính max-height12.6. Thuộc tính min-height

Bài 13: Float & clear

13.1. Thuộc tính float13.2. Thuộc tính clear

Bài 14: Position

14.1. Absolute position14.2. Relative position

Bài 15: Layers

Bài 16: Web standard

Bài 1: Giới Thiệu

1.1. CSS là gì?

Trong lĩnh vực xây dựng, chúng ta có trang trí nội thất; trong lĩnh vực thẩm mỹ – làm đẹp, chúng ta có kỹ thuật make-up; còn trong lĩnh vực thiết kế web chúng ta có CSS. Đây chỉ là một định nghĩa giàu hình ảnh của mình thôi (nhưng cũng thực tế nhỉ (smile). Còn CSS (Cascading Style Sheets mà Pearl tạm dịch là tờ mẫu theo Style Sheets) là một ngôn ngữ quy định cách trình bày cho các tài liệu viết bằng HTML, XHTML, XML, SVG, hay UML,…

1.2. Tại sao lại là CSS?

Nếu bạn đã từng học qua HTML thì cũng biết HTML cũng hỗ trợ một số thuộc tính định dạng cơ bản cho text, picture, table, … nhưng nó không thật sự phong phú và chính xác như nhau trên mọi hệ thống. CSS cung cấp cho bạn hàng trăm thuộc tính trình bày dành cho các đối tượng với sự sáng tạo cao trong kết hợp các thuộc tính giúp mang lại hiệu quả. Ngoài ra, hiện tại CSS đã được hỗ trợ bởi tất cả các trình duyệt, nên bạn hoàn toàn có thể tự tin trang web của mình có thể hiển thị hầu như “như nhau” dù trên một hệ thống sử dụng Windows, Linux hay trên một máy Mac miễn là bạn đang sử dụng một phiên bản trình duyệt mới nhất.

Sử dụng các mã định dạng trực tiếp trong HTML tốn hao nhiều thời gian thiết kế cũng như dung lượng lưu trữ trên đĩa cứng. Trong khi đó CSS đưa ra phương thức “tờ mẫu ngoại” giúp áp dụng một khuôn mẫu chuẩn từ một file CSS ở ngoài. Nó thật sự có hiệu quả đồng bộ khi bạn tạo một website có hàng trăm trang hay cả khi bạn muốn thay đổi một thuộc tính trình bày nào đó. Hãy thử tưởng tượng bạn có một website với hàng trăm trang và bạn muốn thay đổi font chữ hay màu chữ cho một thành phần nào đó. Đó thật sự sẽ là một công việc buồn chán và tốn nhiều thời gian. Nhưng với việc sử dụng CSS việc đó là hoàn toàn đơn giản cũng như là bạn có một trò ma thuật nào đó.

Ngoài ra, CSS còn cho phép bạn áp đặt những kiểu trình bày thích hợp hơn cho các phương tiện khác nhau như màn hình máy tính, máy in, điện thoại,…

CSS được cập nhật liên tục mang lại các trình bày phức tạp và tinh vi hơn.

1.3. Học CSS cần những gì?

Thật sự không có một điều kiện gì được quy định khi học CSS. Nhưng ở một khía cạnh nào đó thì một sự chuẩn bị cho một cuộc hành trình dù là dễ nhất vẫn không thừa vì ít nhất nó sẽ giúp bạn làm tốt hơn.

Xem thêm: Bí Quyết Rèn Luyện Thể Lực, Cách Rèn Luyện Thể Lực Mỗi Ngày Tốt Nhất !

Hành trang thứ nhất mà bạn nên có là một kiến thức về HTML, nó không thật sự cần thiết nếu bạn chỉ dùng CSS để trình bày cho một trang HTML có sẵn (như làm skin cho blog chẳng hạn), nhưng bạn vẫn cần biết ý nghĩa một số thẻ HTML, nó sẽ có ích khi bạn viết CSS. Tuy nhiên, nếu bạn muốn tự thiết kế, trình bày một trang web của riêng mình thì tùy theo quy mô trang web, bạn cần phải học thêm cả HTML, XHMTL, Javascript và một số ngôn ngữ lập trình web khác.

Hành trang thứ hai chính là một trình soạn thảo văn bản để bạn có thể viết mã CSS. Ở đây, Pearl khuyên bạn nên sử dụng một trình soạn thảo đơn giản như Notepad, Wordpad trong Windows hay Pico trong Linux, Simple Text trong Mac. Nó sẽ giúp bạn chắc là code là của bạn và không có bất kỳ một sự can thiệt nào từ chương trình như khi dùng DreamWeaver, FrontPage, Golive,…

Hành trang thứ ba của bạn chính lả một phiên bản mới nhất của trình duyệt mà bạn thường dùng.

Và một điều nữa mà Pearl muốn đề nghị đó là các bạn hãy dành một ít thời gian để thực hành CSS sau mỗi bài học nó sẽ thật sự có ích cho bạn. Thực hành chẳng những giúp bạn vận dụng nhuần nhuyễn các bài học mà còn có tác dụng explain ngược lại những lý thuyết mà bạn chưa hiểu.

Xem thêm:

Bây giờ nếu bạn đã thật sự chuẩn bị chúng ta hãy chuyển qua chương tiếp theo để thật sự bước chân vào thế giới CSS.

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *