Giới thiệu CSS và cú pháp – CSS Introduction and Syntax [1]

images

CSS (Cascading Style Sheet) được dùng để miêu tả cách trình bày tài liệu viết bằng ngôn ngữ HTML và XHTML. Ngoài ra CSS còn có thể dùng cho XML, SVG, XUL. Các đặc điểm kỹ thuật của CSS được quy định bởi World Wide Web Consortium (W3C). CSS góp phần làm cho định dạng của các trang web trở nên phong phú và đa dạng hơn. Do đó việc tìm hiểu CSS và HTML luôn đi kề nhau. Bài viết đầu tiên này sẽ giới thiệu sơ lược về CSS để chúng ta có được cái nhìn tổng quan nhất về CSS (tập tin định kiểu theo tầng).

1. Bạn đã sẵn sàng với CSS? (What you shoult already know?)

Trước khi tìm hiểu về CSS chúng ta nên có một kiến thức cơ bản về HTML và XHTML vì có những kiến thức này thì sẽ nhanh chóng nắm bắt được nội dung của CSS.

2. CSS là gì? (What is CSS?)

– CSS là viết tắt của Cascading Style Sheet – tức là: tập tin định kiểu theo tầng.

– Styles định nghĩa các phần tử HTML được hiển thị như thế nào.

– Styles đã được thêm vào HTML 4 để giải quyết một số vấn đề.

– External Style Sheets có thể giúp chúng ta tiết kiệm được rất nhiều công việc.

– External Style Sheets được chứa trong file CSS.

3. Thử chạy một CSS (CSS Demo)

Một tài liệu HTML có thể được hiển thị với phong cách khác nhau.

Click vào đây để xem demo cách thức hoạt động của CSS trong HTML.

(Các bạn lần lượt click vào các mục View Style1, View Style2, View Style3 để xem hiển kết quả của file HTML sử dụng CSS, và click vào Style1, Style2, Style3 để xem file CSS của chúng).

4. Styles giải quyết được một vấn đề lớn (Styles Solved a Big Problem)

– HTML không bao giờ dành để chứa các thẻ(tag) để định dạng một tài liệu.

– HTML đưa ra để xác định nội dung của một tài liệu như:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

Khi các thẻ như <font> và các thuộc tính màu sắc khác đã được thêm vào các đặc điểm kỹ thuật của HTML 3.2. Nó bắt đầu một cơn ác mộng cho các nhà phát triển Web(web developers). Việc phát triển các trang web lớn, nơi mà những thông tin về font chữ và màu  sắc được thêm vào một trang duy nhất, nó trở thành một quá trình lâu dài và tốn kém.

– Để giải quyết vấn đề này, Word Wide Web Consortium (W3C) đã tạo ra CSS.

– Trong HTML 4, tất cả các định dạng có thể được gỡ bỏ từ tài liệu HTML và được lưu trữ trong một file CSS riêng biệt.

Ngày nay tất cả các trình duyệt đều hỗ trợ CSS.

5. CSS tiết kiệm nhiều công việc (CSS saves a lot of work)

– CSS định xác định các phần tử HTML sẽ được hiển thị như thế nào.

– Styles thông thường được lưu riêng một file có đuôi mở rộng là .css. External Style Sheets cho phép bạn thay đổi giao diện và cách bố trí của tất cả các trang trong một trang web, khi  cần chỉnh sửa chúng ta chỉ sửa một tập tin duy nhất.

6. Cú pháp của CSS (CSS Syntax)

Trước khi bắt đầu nói về cú pháp của CSS thử cảm nhận về CSS thông qua ví dụ sau:

– Ví dụ 1

– Ví dụ 2

– Hoặc bạn cũng có thể tạo một file HTML bằng cách mở Notepad ( hoặcNotepad++) và copy nội dung dưới đây vào:

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="ex1.css" />
 </head>

  <body>

    <h1>thanhcuong.wordpress.com</h1>
    <h2>thanhcuong1990@gmail.com</h2>
    <p>Xin chào bạn !</p> 

  </body>
</html>

Sau đó chọn save as để lưu lại file trên với đuôi mở rộng là  .html . (tên file bất kỳ)

– Tiếp tục tạo một file nodepad khác copy nội dung sau vào và lưu lại với tên “ex1.css”

body
{
   background-color:yellow;
}
h1
{
   font-size:36pt;
}
h2
{
   color:blue;
}
p
{
   margin-left:50px;
}

– Copy 2 file vừa tạo vào cùng một thư mục. Sau đó chạy file .html mà bạn vừa tạo ra để xem kết quả tương tự hình bên dưới.

image

Chắc hẳn bây giờ bạn đã có một số cảm giác về CSS. Tiếp theo chúng ta sẽ tìm hiểu cú pháp của nó.

–  Một cú pháp đúng của CSS có 2 phần chính: 1 sector, và 1 hay nhiều declaration

image

+ Sector là phần tử thông thường của HTML mà bạn muốn chỉnh style.

+ Mỗi một Declaration bao gồm 1 thuộc tính (property) và 1 giá trị (value):  Property là thuộc tính phong cách mà bạn muốn thay đổi, mỗi một property có một giá trị (value).

7. Ví dụ CSS (CSS example)

– Khai báo (declarations) CSS luôn kết thúc bằng dấu chấm phẩy (semicolon). Và các nhóm khai báo (declaration groups) được bao quanh bởi cặp ngoặc nhọn (curly brackets):

p {color:red;text-align:center;}

– Để làm cho CSS dễ đọc  hơn, bạn có thể đặt các khai báo (declaration) trên mỗi dòng như thế này:

p
{
color:red;
text-align:center;
}

– Click vào đây và thử sửa một số thông tin trong đó và xem kết quả mà mình làm được

8. CSS Comments

Chú thích (comments) trong CSS được sử dụng để giải thích các đoạn mã (code) của bạn, nó có thể giúp bạn khi bạn sửa chữa mã nguồn vào một ngày sau đó. Comments được bỏ qua bởi trình duyệt.

Mỗi Comment trong CSS cũng giống như C, C++ hay một số ngôn ngữ khác là bắt đầu với “/*” và kết thúc với  “*/”, ví dụ như:

/* Đây là một comment*/
p
{
text-align:center;
/* Còn đây là một comment khác.*/
color:black;
font-family:arial;
}

Advertisements

About thanhcuong1990

Handsome and talent!! ^^
This entry was posted in CSS. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s