Khái niệm cơ bản của cSS và Douglas Robot JavaScript - núm vú

Trong dự án này, bạn sửa đổi và thêm các kiểu cho một robot HTML có tên Douglas. Douglas đã được chuyển từ nhà máy robot vào sáng nay. Kỹ năng JavaScript của ông là xuất sắc; ông không cần bảo trì nhiều (chỉ cần một biến mới để chơi với tất cả bây giờ và sau đó); và anh ấy nói đùa vui vẻ!

Vấn đề duy nhất là, vẻ ngoài của anh ta là một chút nhàm chán! Chắc chắn, anh ấy có đôi mắt xanh tuyệt vời, và "I <3>

Để bắt đầu, mở trình duyệt web của bạn và đăng nhập vào bảng điều khiển công cộng. Sau đó làm theo các bước sau:

1. Tìm fiddle được gọi là Chương 6: Phong cách Robot - Bắt đầu và nhấp vào tiêu đề để mở nó.

   Bạn cũng có thể đi trực tiếp vào ứng dụng Robot.

   Bạn thấy một màn hình với HTML trong bảng điều khiển HTML và một số CSS trong bảng điều khiển CSS.

2. Nhấp vào Fork ở trình đơn trên cùng để tạo một bản sao của câu cá trong tài khoản JSFiddle của chính bạn.

Bây giờ bạn đã sẵn sàng để bắt đầu cho Douglas một phong cách!

Hãy xem ba dòng đầu tiên trong khung JavaScript của Khung JavaScript.

body {font-family: Arial;}

Ba đường này tạo thành quy tắc CSS . Quy tắc CSS gồm có hai thành phần chính:

• Bộ chọn: Bộ chọn cho biết yếu tố hoặc yếu tố nào quy tắc CSS áp dụng. Trong ví dụ này, bộ chọn là thân.

  Tuyên bố khối:

• Khối khai báo có chứa một hoặc nhiều khai báo CSS, cho biết làm thế nào để tạo kiểu cho phần tử hoặc phần tử đã chọn. Trong ví dụ này, bạn chỉ có một khai báo, font-family: Arial;. Bộ chọn CSS

Bộ chọn là một phần của quy tắc CSS xuất hiện trước { Bộ chọn CSS nói với trình duyệt web những yếu tố HTML nào nên áp dụng cho phong cách.

Khi bạn chọn một phần tử để áp dụng một kiểu, nó cũng áp dụng cùng một kiểu cho mỗi phần tử bên trong phần tử được chọn.

Bộ chọn CSS có một số cách khác nhau để chọn các phần tử. Nhìn vào ba trong số này trong khi làm việc với Douglas của JavaScript Robot:

Bộ phận chọn phần tử:

• Hãy xem hai quy tắc đầu tiên trong bảng CSS của robot JavaScript: body {font-family: Arial;} {font-size: 1em;}

  Đây là cả hai ví dụ về bộ chọn nguyên tố. Bộ chọn nguyên tố chọn phần tử HTML sử dụng tên của phần tử. Để sử dụng bộ chọn nguyên tố, chỉ cần nhập tên của phần tử bạn muốn chọn. Trong những trường hợp này, bạn đang chọn phần tử cơ thể (sử dụng và thẻ) và phần tử p (sử dụng thẻ
  

  và

  ).

  Bộ chọn lớp:

• Giờ hãy xem quy tắc CSS thứ ba trong ngăn JavaScript dành cho Người dùng JavaScript: . mắt (màu nền: màu xanh; chiều rộng: 20%; chiều cao: 20%; bán kính biên giới: 50%;)

  Bộ chọn lớp bắt đầu với khoảng thời gian (.), tiếp theo là giá trị của một thuộc tính HTML có tên lớp. Trong trường hợp này, bạn đang chọn tất cả các phần tử có lớp = "mắt". Nếu bạn nhìn vào khung HTML, bạn có thể thấy rằng có hai phần tử với class = "eye". Chúng được sử dụng để làm cho hai mắt của Douglas.
  

  Bộ chọn lớp là lý tưởng cho những lần khi bạn cần áp dụng cùng một phong cách cho nhiều phần tử. Trong trường hợp này, robot có hai mắt, và hai mắt có một số điểm chung (cả hai đều có màu xanh và cùng kích thước, ví dụ).

  Bộ chọn ID:

• Bộ chọn ID bắt đầu bằng một ký hiệu băm (#) và chọn các phần tử dựa trên giá trị thuộc tính ID của phần tử. Ví dụ: mắt trái và mắt phải của Douglas có các thuộc tính ID riêng: #righteye {position: absolute; trái: 20%; top: 20%;} #lefteye {position: absolute; trái: 60%; top: 20%;}

  Bộ chọn mã ID rất hữu ích khi bạn cần chọn một phần tử trong một tài liệu HTML.
  

  Mỗi thuộc tính ID phải là duy nhất trong một tài liệu.

  Nếu bạn nhìn vào khung HTML, bạn có thể thấy đôi mắt trái và bên phải của Douglas, ngoài cả hai đều có thuộc tính lớp, cũng có các thuộc tính ID duy nhất. Những thuộc tính này đã được thêm vào để bạn có thể đặt mắt cá nhân lên mặt Douglas.

  Tuyên bố CSS

Các tờ khai CSS đi vào bên trong các khối khai báo theo các bộ chọn CSS. Tuyên bố được tạo thành từ hai phần:

Tài sản:

• Phần tài sản của một tờ khai cho biết nên sửa đổi những gì. Ví dụ, bạn có thể thay đổi màu sắc, chiều rộng, hoặc vị trí của một phần tử. Tài sản phải được theo sau bởi dấu hai chấm (:). Giá trị:

• Giá trị cho biết tài sản nên được thay đổi như thế nào. Mỗi tuyên bố phải kết thúc với một dấu chấm phẩy (;). Bạn có thể có nhiều tờ khai trong một khối khai báo như bạn cần để có được công việc làm.

Ví dụ, khối khai báo cho các phần tử có mắt bao gồm bốn tờ khai:

. mắt (màu nền: màu xanh; chiều rộng: 20%; chiều cao: 20%; bán kính biên giới: 50%;}