Css Cấu trúc

assets/uploads/original/2014-04-27-08-44-19-0.jpg assets/uploads/original/2014-04-27-08-43-24-0.jpg DẠY NGHỀ THANH NIÊN NHÀ HÀNG TIỆC CƯỚI HOÀNG LONG CÔNG TY TNHH THƯƠNG MẠI DỊCH VỤ TIN HỌC DUY HẰNG
Css Cấu trúc

Đăng bởi: Kyle Dang

Ngày đăng: 28/09/2014

Danh mục: CSS

Bình luận: 0

Tags: CSS Tutorial, CSS căn bản, HTML & CSS

Một bộ quy tắc CSS bao gồm một chọn và một khối tuyên bố:

CSS selector

Những điểm để chọn các phần tử HTML mà bạn muốn tạo kiểu.

Các khối khai chứa một hoặc nhiều tờ khai cách nhau bởi dấu chấm phẩy.

Mỗi tờ khai bao gồm một tên sở hữu và giá trị, cách nhau bằng dấu hai chấm.

Một tuyên bố CSS luôn luôn kết thúc bằng một dấu chấm phẩy, và các nhóm khai được bao quanh bởi dấu ngoặc nhọn:

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

Để thực hiện các mã CSS dễ đọc hơn, bạn có thể đặt một tuyên bố trên mỗi dòng, như thế này:

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

CSS Comment

Bình luận được sử dụng để giải thích mã của bạn, và có thể giúp bạn khi bạn chỉnh sửa mã nguồn vào một ngày sau đó. Bình luận được bỏ qua bởi trình duyệt.

Một comment CSS bắt đầu bằng / * và kết thúc bằng * /. Các comment ​​cũng có thể kéo dài:

p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}

/* This is
a multi-line
comment */

CSS Selectors

Lựa chọn CSS cho phép bạn chọn và thao tác các phần tử HTML (s).

Lựa chọn CSS được sử dụng để "tìm thấy" (hoặc chọn) các phần tử HTML dựa trên id, các lớp học, các loại, thuộc tính, giá trị của các thuộc tính và nhiều hơn nữa.

Các yếu tố Selector

Các yếu tố chọn lựa chọn dựa trên các yếu tố thành phần name.

Bạn có thể chọn tất cả <p> yếu tố trên một trang như thế này: (tất cả <p> yếu tố này sẽ là trung tâm liên kết, với một màu chữ đỏ)

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

Id Selector

Bộ chọn id sử dụng thuộc tính id của một thẻ HTML để tìm thấy những yếu tố cụ thể.

Id phải là duy nhất trong một trang, vì vậy bạn nên sử dụng bộ chọn id khi bạn muốn tìm một yếu tố duy nhất duy nhất.

Để tìm một phần tử với một id cụ thể, viết một nhân vật băm, tiếp theo là số thứ tự của nguyên tố này.

Các quy tắc phong cách dưới đây sẽ được áp dụng cho các phần tử HTML với id = "para1": 

#para1 {
    text-align: center;
    color: red;
}

Class Selector

Các chọn lớp thấy các yếu tố với các lớp học cụ thể.

Bộ chọn lớp sử dụng thuộc tính class HTML.

Để tìm phần tử với một lớp học cụ thể, viết một nhân vật thời gian, tiếp theo là tên của lớp:

Trong ví dụ dưới đây, tất cả các phần tử HTML với class = "center" sẽ là trung tâm liên kết: 

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

Bạn cũng có thể xác định rằng các phần tử HTML chỉ cụ thể nên bị ảnh hưởng bởi một lớp.

Trong ví dụ dưới đây, tất cả các yếu tố p với class = "center" sẽ là trung tâm liên kết: 

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

Grouping Selectors

Trong phong cách thường có yếu tố với cùng một phong cách:

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

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

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

 

 Để giảm thiểu các mã, bạn có thể nhóm bộ chọn.

Để bộ chọn nhóm, tách riêng từng chọn bằng dấu phẩy.

Trong ví dụ dưới đây, chúng tôi đã được nhóm các bộ chọn từ đoạn code trên:

h1, h2, p {
    text-align: center;
    color: red;
}