Làm thế nào để Xác định các lớp cho HTML5 và CSS3 Lập trình - núm vú

Bạn có thể dễ dàng áp dụng một phong cách cho tất cả các phần tử của một loại cụ thể trong trang HTML5, nhưng đôi khi bạn muốn kiểm soát phong cách của mình một cách chặt chẽ hơn. Ví dụ: bạn có thể muốn có nhiều kiểu văn bản. Ví dụ, nhìn vào các lớp học. trang html.

Một lần nữa, nhiều định dạng nằm trên trang này:

• Các câu hỏi có phông chữ chữ sans serif lớn. Có nhiều câu hỏi.

• Câu trả lời nhỏ hơn, màu xanh, và theo phông chữ. Cũng có hơn một câu trả lời.

  

Câu hỏi và câu trả lời là tất cả các đoạn văn, do đó bạn không thể đơn giản làm phong cách đoạn văn bởi vì bạn cần hai phong cách khác biệt. Có nhiều hơn một câu hỏi và hơn một câu trả lời, vì vậy thủ thuật ID sẽ là vấn đề. Hai yếu tố khác nhau không thể có cùng một ID. Đây là nơi khái niệm các lớp học đi vào chơi. Mỗi ID đều thuộc một yếu tố duy nhất, nhưng nhiều yếu tố có thể chia sẻ cùng một lớp.

Làm thế nào để thêm các lớp vào trang

CSS cho phép bạn định nghĩa các lớp trong HTML của bạn và tạo các định nghĩa kiểu được áp dụng trên một lớp. Nó hoạt động như sau:

1. Thêm thuộc tính class vào câu hỏi HTML của bạn.

   Không giống như ID, một số phần tử có thể chia sẻ cùng một lớp. Đặt lớp vào câu hỏi cho thấy các đoạn văn này sẽ được đặt theo kiểu câu hỏi:

   Loại bò nào sống ở Bắc Cực?
   
   
   
   
   
   
   

2. Thêm các thuộc tính lớp tương tự cho các câu trả lời bằng cách thiết lập lớp câu trả lời để trả lời:

   Một Eskimo!
   

   Bây giờ bạn có hai lớp con khác nhau của đoạn: câu hỏi và câu trả lời.

3. Tạo một phong cách lớp cho các câu hỏi.

   Phong cách lớp được định nghĩa trong CSS. Chỉ định một lớp với khoảng thời gian (.) Trước tên lớp. Các lớp được định nghĩa trong CSS như sau:

   . câu hỏi {font: italic 150% arial, sans-serif; text-align: left;}
   

   Trong trường hợp này, lớp câu hỏi được định nghĩa là phông chữ sans serif lớn nằm ở bên trái.

4. Xác định giao diện của câu trả lời.

   Lớp học sử dụng một font phông chữ hợp lệ.

. answer {font: 120% "Comic Sans MS", chữ thảo; text-align: phải; color: # 00F;}

Sử dụng các lớp học

Đây là mã cho trang, hiển thị cách sử dụng các lớp CSS:

. html. câu hỏi {font: italic 150% arial, sans-serif; text-align: left;}. answer {font: 120% "Comic Sans MS", chữ thảo; text-align: phải; màu sắc: # 00F;}

Những câu chuyện cười yêu thích
Loại bò nào sống ở Bắc Cực?
Một người Eskimo!
Cái gì đi trên đầu một ngôi nhà chó?
Các woof!

Đôi khi bạn thấy bộ chọn, như

p. fancy

bao gồm cả phần tử và tên lớp.Phong cách này chỉ áp dụng cho các đoạn văn với lớp được đính kèm. Nói chung, các lớp học là tuyệt vời bởi vì chúng có thể được áp dụng cho tất cả các loại vật, vì vậy bạn có thể để lại tên phần tử ra để làm cho phong cách như tái sử dụng nhất có thể.

Kết hợp các lớp

Một phần tử có thể sử dụng nhiều hơn một lớp.

Các đoạn văn dường như có ba kiểu khác nhau, nhưng chỉ có màu đỏ và tập lệnh được xác định. Đoạn thứ ba sử dụng cả hai lớp. Đây là mã:

redScript. html. đỏ (màu trắng; background-color: red;}. script

Đoạn này sử dụng lớp màu đỏ
Đoạn này sử dụng lớp kịch bản
Đoạn này sử dụng cả hai lớp
Biểu mẫu giới thiệu hai lớp. Lớp màu đỏ làm cho đoạn văn màu đỏ (tốt, văn bản trắng với nền màu đỏ), và lớp kịch bản áp dụng một phông chữ chữ thảo cho các phần tử.

Hai đoạn văn đầu tiên có một lớp, và các lớp hoạt động như bạn mong đợi. Phần thú vị là đoạn thứ ba vì nó có hai lớp.

Cả hai kiểu sẽ được áp dụng cho phần tử theo thứ tự chúng được viết. Lưu ý rằng cả hai tên lớp đều xuất hiện trong ngoặc kép và không cần phải đánh dấu phẩy (hoặc cho phép). Bạn có thể áp dụng nhiều hơn hai lớp học cho một phần tử nếu bạn muốn. Nếu các lớp có các quy tắc mâu thuẫn (nói một cái làm cho phần tử xanh lá cây và tiếp theo làm cho nó màu xanh), lớp mới nhất trong danh sách sẽ ghi đè các giá trị trước đó.

Một phần tử cũng có thể có một ID. Kiểu ID, kiểu nguyên tố và tất cả các kiểu lớp được tính đến khi trình duyệt cố gắng hiển thị đối tượng.

Thông thường, tốt nhất nên đặt tên lớp dựa trên ý nghĩa của chúng (như mainBackgroundColor). Bạn có thể quyết định rằng màu xanh lá cây tốt hơn màu đỏ, vì vậy bạn phải thay đổi tên lớp hoặc bạn phải có một lớp màu đỏ mà màu những thứ màu xanh lá cây. Điều đó thật kì lạ.