top
 0982.566.782
Thiet ke web hai phong chuyen nghiep
Thiết kế website, quảng cáo trực tuyến, xây dựng phần mềm, dịch vụ domain-hosting

Tài liệu CSS (Phần 1)

Ngày đăng: 22 - 08 - 2011

CSS là ngôn ngữ cho phép định dạng chính xác các qui tắc hiển thị cho các phần tử HTML

 CASCADING STYLE SHEET

 

  1. CSS

- CSS là ngôn ngữ cho phép định dạng chính xác các qui tắc hiển thị cho các phần tử HTML

 

2. Cú pháp CSS

Cú pháp CSS gồm 3 phần: Phần tử chọn (selector), thuộc tính (property) , và giá trị (value)

Selector {

          Property: value;

}

          Ví dụ:

                   Div {

                             Color: black;

                             Background-color: white;

                             …

}

 

P {

          Font-family: Tahoma;

          Font-size: 20pt;

          Color: red;

}

 

Các câu này có nghĩa là: phần tử (thẻ) DIV  sẽ được áp dụng qui tắc CSS với văn bản có màu đen (black), còn màu nền là trắng (white), còn với phần tử P thì áp dụng font chữ họ Tahoma, kích thước là 20 điểm (point), chữ màu đỏ

 

 

          NHÓM CÁC PHẦN TỬ CHỌN (Grouping)

Ta cũng có thể nhóm các phần tử nào đó của HTML lại với nhau để áp dụng cùng một qui tắc style cho chúng, Ví dụ:

 

H1, h2, h3, p, div {

              Color: green;

              Text-align: center;

}

 

CHỌN THEO LỚP (Class selector)

Qui tắc này cho phép chúng ta áp dụng cùng một qui tắc CSS cho nhiều phần tử HTML hoặc nhiều qui tắc CSS cho cùng một phần tử HTML

 

Áp dụng nhiều qui tắc CSS cho cùng một phần tử DIV

           

          div.leftAlign  {

                   text-align: left;

}

          div.rightAlign  {

                   text-align: right;

}

 

Khi đó, trong tài liệu HTML, ta có thể áp dụng các lớp CSS khác nhau cho phần tử DIV, Ví dụ:

         

         

 

                   Đoạn văn bản nay sẽ được gióng theo lề trái

 

 

 

 

 

                   Đoạn văn bản nay sẽ được gióng theo lề phải

 

 

 

Áp dụng một qui tắc CSS cho nhiều phần tử HTML:

           

.leftAlign  {

          text-align: left;

}

 

.rightAlign  {

          text-align: right;

}

 

Trong tài liệu HTML, ta có thể áp dụng qui tắc CSS này cho bất cứ phần tử HTML  nào ta muốn

 

         

 

                   Áp dụng qui tắc leftAlign cho phần tử DIV

 

 

         

         

 

                   Áp dụng qui tắc rightAlign cho phần tử DIV

 

 

 

           

 

                   Áp dụng qui tắc rightAlign cho phần tử p

 

 

 

           

 

 

                   Áp dụng qui tắc rightAlign cho phần tử DIV

 

 

 

           

 

                  

 

                            

 

                            

 

                             …

                  

 

 

                   …

 

   

 

 

 

Phần tử chọn theo định danh (ID selector)

Qui tắc CSS này dùng để áp dụng cho chỉ một phần tử HTML, vì vậy mỗi ID  selector phải là duy nhất trong tài liệu

 

Ví dụ:

  1. Qui tắc CSS sau áp dụng cho chỉ duy nhất một phần tử DIV nào có ID là myDIV

 

Div#myDIV  {

     Color: green;

     Align: left;

     Width: 200px;

     Height: 200px;        

}

 

Trong tài liệu HTML, ta có thể sử dụng nó như sau

 

    

             

 

                        Qui tắc CSS chỉ áp dụng duy nhất cho phần tử này        

             

 

    

 

 

  1. Còn qui tắc CSS này áp dụng cho bất cứ phần tử HTML nào có thuộc tính ID sánh đúng với nó

 

#myStyle  {

     color: black;

     background-color: white;

}

           

Các chú thích (Comments)

CSS cho phép người sử dụng nhúng các câu chú thích vào mã nguồn để làm tăng tính dễ hiểu, các chú thích của CSS là các đoạn văn bản nằm bên trong cặp dấu /* và */

Ví dụ:

 

     /* Đây là câu chú thích */

     .myStyle {

              color: black;                      /* Màu chữ trắng */

              background-color: black;       /* Màu nền đen */

              font-family: arial;                  /* Font chữ kiểu Arial */

              font-size: 20pt;                     /* Kích thước font la 20pt */

}       

 




Chia sẻ
Share on Facebook


.: Các tin thiết kế web khác :.

thiet ke web Hai Phong123

Tư vấn thiết kế web
Thiet ke web Hai Phong ho tro
Tư vần thiết kế website, hỗ trợ trực tuyến

     Hotline: 0982.566.782

   Kinh Doanh     Thiet ke website Hai Phong yahoo   Thiết kế web Hải Phòng Skype     Email tu van thiet ke web




Khách hàng nói về chúng tôi
Công ty thiết kế web Hải Phòng

CEO Nguyễn Văn Công

Công ty TNHH TMDV Trường Hưng. Tel: 0936 847 357

CEO Hà Thị Thanh Xuân

Công ty TNHH Cửa Cuốn Đại Phúc. Tel: 0912.665.189

CEO Tạ Thị Hương

Công ty In Phi Long. Tel: 0936.434.222

CEO Nguyễn Tuấn Dũng

Chủ tịch hệ thống Yoga Vàng Việt Nam. Tel: 0968.25.6868