Cú pháp html và css là gì?
|
Bộ quy tắc CSS chứa bộ chọn và khối khai báo Show Bộ chọn. Bộ chọn cho biết phần tử HTML bạn muốn tạo kiểu. Nó có thể là bất kỳ thẻ như ,etc.Declaration Block: The declaration block can contain one or more declarations separated by a semicolon. For the above example, there are two declarations:
Each declaration contains a property name and value, separated by a colon. Property: A Property is a type of attribute of HTML element. It could be color, border etc. Value: Values are assigned to CSS properties. In the above example, value "yellow" is assigned to color property. CSS bao gồm các quy tắc kiểu được trình duyệt diễn giải và sau đó được áp dụng cho các thành phần tương ứng trong tài liệu của bạn. Một quy tắc kiểu được tạo thành từ ba phần -
Bạn có thể đặt Cú pháp quy tắc kiểu CSS như sau - selector { property: value }
Ví dụ − Bạn có thể xác định đường viền bảng như sau − table{ border :1px solid #C00; }
Ở đây bảng là một bộ chọn và đường viền là một thuộc tính và giá trị đã cho 1px solid #C00 là giá trị của thuộc tính đó Bạn có thể xác định bộ chọn theo nhiều cách đơn giản khác nhau dựa trên sự thoải mái của bạn. Hãy để tôi đặt từng bộ chọn này Bộ chọn loạiĐây là bộ chọn giống như chúng ta đã thấy ở trên. Một lần nữa, một ví dụ nữa để tô màu cho tất cả các tiêu đề cấp 1 - h1 {
color: #36CFFF;
}
Bộ chọn phổ quátThay vì chọn các phần tử của một loại cụ thể, bộ chọn chung khá đơn giản khớp với tên của bất kỳ loại phần tử nào - * {
color: #000000;
}
Quy tắc này hiển thị nội dung của mọi thành phần trong tài liệu của chúng tôi bằng màu đen Bộ chọn hậu duệGiả sử bạn chỉ muốn áp dụng quy tắc kiểu cho một phần tử cụ thể khi nó nằm bên trong một phần tử cụ thể. Như được đưa ra trong ví dụ sau, quy tắc kiểu dáng sẽ chỉ áp dụng cho phần tử khi nó nằm bên trong
ul em {
color: #000000;
}
Bộ chọn lớpBạn có thể xác định quy tắc kiểu dựa trên thuộc tính lớp của các phần tử. Tất cả các phần tử có lớp đó sẽ được định dạng theo quy tắc đã xác định .black {
color: #000000;
}
Quy tắc này hiển thị nội dung có màu đen cho mọi thành phần có thuộc tính lớp được đặt thành màu đen trong tài liệu của chúng tôi. Bạn có thể làm cho nó cụ thể hơn một chút. Ví dụ - h1.black {
color: #000000;
}
Quy tắc này chỉ hiển thị nội dung có màu đen các phần tử có thuộc tính lớp được đặt thành màu đenBạn có thể áp dụng nhiều bộ chọn lớp cho phần tử đã cho. Xem xét ví dụ sau -
Bộ chọn IDBạn có thể xác định quy tắc kiểu dựa trên thuộc tính id của các thành phần. Tất cả các phần tử có id đó sẽ được định dạng theo quy tắc đã xác định ________số 8_______Quy tắc này hiển thị nội dung có màu đen cho mọi thành phần có thuộc tính id được đặt thành màu đen trong tài liệu của chúng tôi. Bạn có thể làm cho nó cụ thể hơn một chút. Ví dụ - h1#black {
color: #000000;
}
Quy tắc này chỉ hiển thị nội dung có màu đen các phần tử có thuộc tính id được đặt thành màu đenSức mạnh thực sự của bộ chọn id là khi chúng được sử dụng làm nền tảng cho bộ chọn con cháu, Ví dụ: table{ border :1px solid #C00; }
0Trong ví dụ này, tất cả các tiêu đề cấp 2 sẽ được hiển thị bằng màu đen khi các tiêu đề đó sẽ nằm trong các thẻ có thuộc tính id được đặt thành màu đen Bộ chọn conBạn đã thấy bộ chọn hậu duệ. Có một loại bộ chọn nữa, rất giống với bộ chọn con cháu nhưng có chức năng khác. Xem xét ví dụ sau - table{ border :1px solid #C00; }
1Quy tắc này sẽ hiển thị tất cả các đoạn văn bằng màu đen nếu chúng là con trực tiếp của phần tử. Các đoạn khác đặt bên trong các yếu tố khác như hoặc là Bộ chọn thuộc tínhBạn cũng có thể áp dụng các kiểu cho các thành phần HTML với các thuộc tính cụ thể. Quy tắc kiểu bên dưới sẽ khớp với tất cả các thành phần đầu vào có thuộc tính kiểu với giá trị văn bản – table{ border :1px solid #C00; }
2Ưu điểm của phương pháp này là phần tử không bị ảnh hưởng và màu chỉ được áp dụng cho các trường văn bản mong muốn Có các quy tắc sau được áp dụng cho bộ chọn thuộc tính
Quy tắc nhiều kiểuBạn có thể cần xác định nhiều quy tắc kiểu cho một phần tử. Bạn có thể xác định các quy tắc này để kết hợp nhiều thuộc tính và giá trị tương ứng thành một khối duy nhất như được xác định trong ví dụ sau – table{ border :1px solid #C00; }
3Ở đây tất cả các cặp thuộc tính và giá trị được phân tách bằng dấu chấm phẩy (;). Bạn có thể giữ chúng trong một dòng hoặc nhiều dòng. Để dễ đọc hơn, chúng tôi giữ chúng trong các dòng riêng biệt Trong một thời gian, đừng bận tâm về các thuộc tính được đề cập trong khối trên. Các thuộc tính này sẽ được giải thích trong các chương tiếp theo và bạn có thể tìm thấy đầy đủ chi tiết về các thuộc tính trong Tài liệu tham khảo CSS Bộ chọn nhómBạn có thể áp dụng một kiểu cho nhiều bộ chọn nếu muốn. Chỉ cần tách các bộ chọn bằng dấu phẩy, như được đưa ra trong ví dụ sau - table{ border :1px solid #C00; }
4Quy tắc kiểu xác định này cũng sẽ được áp dụng cho phần tử h1, h2 và h3. Thứ tự của danh sách là không liên quan. Tất cả các phần tử trong bộ chọn sẽ có các khai báo tương ứng được áp dụng cho chúng Cú pháp của CSS là gì?Bộ chọn trỏ đến phần tử HTML mà bạn muốn tạo kiểu . Khối khai báo chứa một hoặc nhiều khai báo được phân tách bằng dấu chấm phẩy. Mỗi khai báo bao gồm một tên thuộc tính CSS và một giá trị, được phân tách bằng dấu hai chấm.
Cú pháp của HTML là gì?Cú pháp là sự sắp xếp các thành phần và thuộc tính để tạo tài liệu đúng định dạng . Ngữ nghĩa liên quan đến ý nghĩa. Trong HTML, đây là mục đích của các phần tử và thuộc tính, cũng như mối quan hệ logic (ý nghĩa và tham chiếu) giữa các phần tử và thuộc tính của các phần tử đó.
Ba cú pháp CSS trong HTML là gì?CSS có thể được thêm vào tài liệu HTML theo 3 cách. Nội tuyến - bằng cách sử dụng thuộc tính kiểu bên trong các phần tử HTML . Nội bộ - bằng cách sử dụng phần tử . Bên ngoài - bằng cách sử dụng phần tử .
HTML và CSS với ví dụ là gì?HTML so với. CSS |
