CHÀO MỪNG BẠN ĐẾN VỚI THƯ VIỆN HỌC TẬP & ĐÀO TẠO CƠ BẢN
Cú pháp CSS – Selector trong CSS
CSS
Hướng dẫn CSS
- Tổng quan CSS.
- Cú pháp CSS – Selector trong CSS
- Cách chèn CSS.
- Tìm hiểu về cách chèn CSS
- Thuộc tính color trong CSS
- Thuộc tính Background trong CSS
- Thuộc tính Border trong CSS
- Thuộc tính Margin trong CSS
- Thuộc tính Padding trong CSS
- Thuộc tính height và width trong CSS
- Box Model trong CSS
- Thuộc tính outline trong CSS
- Các thuộc tính Text trong CSS
- Phông chữ trong CSS
- Thêm icon trong CSS
- Đường dẫn trong CSS
- Danh sách trong CSS
- Bảng trong CSS
- Bố cục trong CSS – Thuộc tính display
- Bố cục trong CSS – width và max-width
- Bố cục trong CSS – thuộc tính position
- Bố cục trong CSS – Overflow
- Bố cục trong CSS – float và clear
- Bố cục trong CSS – inline-block
- Bố cục trong CSS – căn chỉnh theo chiều ngang và chiều dọc
- Các kết hợp trong CSS
- Pseudo-classes trong CSS
- Các Pseudo-Element trong CSS
- Thuộc tính Opacity / Transparency trong CSS
- Thanh điều hướng trong CSS
- Hiệu ứng dropdown trong CSS
- Chú giải trong CSS
- Thư viện ảnh trong CSS
- Hình sprit trong CSS
- Các vùng chọn thuộc tính trong CSS
- Biểu mẫu trong CSS
- Bộ đếm trong CSS
- Bố cục website trong CSS
CSS3
Chúng ta chia một đoạn mã CSS ra gồm hai phần đó là:
- selector: selector sẽ trỏ đến những đối tượng (html) chịu ảnh hưởng bởi CSS
- declaration: các thuộc tính CSS dùng để style cho thẻ selector
Example:
h1{background:red;color:blue;}
Trong đó:
h1làselector- các thuộc tính background, color nằm bên trong cặp dấu ngoặc
{}chính làdeclaration.
Riêng đối với declaration thì các bạn để ý bên trong nó là danh sách các thuộc tính và giá trị của thộc tính đó (key:value), mỗi thuộc tính sẽ được kết thúc bởi dấu chấm phẩy (;).
CSS Selector:
Selector CSS: sử dụng để tìm (chọn) phần tử HTML dựa trên tên phần tử, id, lớp, thuộc tính của chúng,…
Bạn có thể chọn tất cả các phần tử <p> trên một trang như thế này (trong trường hợp này, tất cả các phần tử <p> sẽ được căn giữa, có màu đỏ):
Example:
p {
text-align: center;
color: red;
}
Bộ chọn id
Bộ chọn id sử dụng thuộc tính id của một phần tử HTML để chọn một phần tử cụ thể.
Id của một phần tử phải là duy nhất trong một trang, vì vậy bộ chọn id được sử dụng để chọn một phần tử duy nhất!
Để chọn một phần tử có id cụ thể, hãy viết một ký tự băm (#), tiếp theo là id của phần tử.
Quy tắc kiểu bên dưới sẽ được áp dụng cho phần tử HTML với id = “para1”:
#para1 {
text-align: center;
color: red;
}
Slector class.
Bộ chọn lớp chọn các phần tử có thuộc tính lớp cụ thể.
Để chọn các phần tử với một lớp cụ thể, viết một ký tự dấu chấm (.), 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à màu đỏ và căn giữa:
.center {
text-align: center;
color: red;
}
