Thay đổi kích thước các phần tử bằng CSS và Douglas Robot JavaScript - núm vú

Mỗi phần tử trong một tài liệu HTML là một hình chữ nhật. Ngay cả khi một phần tử trông giống một vòng tròn (như đôi mắt của Douglas), nó thực sự được đối xử như một hình chữ nhật xung quanh hình tròn. Bởi vì tất cả mọi thứ là một hình chữ nhật, bạn có thể thay đổi kích thước của các phần tử bằng CSS bằng cách điều chỉnh độ rộng và chiều cao của chúng.

Để bắt đầu, hãy 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.

Khi bạn đo chiều rộng và chiều cao của sự vật trong thế giới thực, bạn sử dụng đơn vị đo lường chẳng hạn như inch, cm hoặc mét. Khi bạn đo mọi thứ trong thế giới CSS, bạn có nhiều đơn vị đo khác nhau. Chúng bao gồm px (pixels) và% (percent):

• Pixels: Pixel là điểm nhỏ nhất có thể được hiển thị trong trình duyệt web của bạn. Khi bạn chỉ định chiều rộng và chiều cao bằng pixel, bạn sẽ cho trình duyệt biết chính xác độ rộng và chiều cao của một phần tử phải là bao nhiêu. Vấn đề với việc sử dụng các điểm ảnh cho các phép đo là nó luôn hiển thị những thứ có cùng kích thước - ngay cả khi cửa sổ trình duyệt của người dùng là rất lớn hoặc rất nhỏ.

• Phần trăm: Khi bạn chỉ định chiều rộng và chiều cao với phần trăm, bạn đang nói với trình duyệt để làm cho phần tử này có tỷ lệ phần trăm nhất định về kích thước của cha mẹ của phần tử.

Bạn đã xác định tất cả các phép đo của Douglas sử dụng phần trăm. Điều này có lợi vì nó có nghĩa là bất kể bạn đang tìm kiếm Douglas trên điện thoại di động hay trên Jumbotron ở Times Square, kích thước của nó sẽ thích nghi để phù hợp với màn hình. Để xem sự kỳ diệu của kích thước tương đối trong hành động, kéo các đường viền cửa sổ trong JSFiddle để làm cho các kết quả ngăn lớn hơn hoặc nhỏ hơn. Lưu ý làm thế nào Douglas thay đổi kích thước cùng với kích thước của cửa sổ.

Có thể bạn đã từng nghe thuật ngữ thiết kế đáp ứng . Thiết kế đáp ứng nhằm tạo ra nội dung web linh hoạt và đáp ứng với kích thước màn hình của người dùng. Cách bạn chỉ định kích thước của Douglas là một ví dụ về thiết kế đáp ứng.

Thực hiện một vài thay đổi đối với một số phần của Douglas:

1. Tìm luật CSS cho lớp mắt.

2. Thay đổi chiều rộng thành 30% và chiều cao là 30%.

   Bạn sẽ nhận thấy mắt của Douglas trở nên to hơn. Nhưng chúng cũng không còn trung tâm trên khuôn mặt, như thể hiện ở đây!

   

   Đôi mắt to lớn của Douglas đã lệch khỏi tâm.

3. Tìm luật CSS cho lớp cánh tay.

   . cánh tay {background-color: #cacaca; vị trí: tuyệt đối; đầu: 35%; chiều rộng: 5%; chiều cao: 40%;}
   

   . cánh tay CSS kiểm soát màu sắc và kích thước của cả hai cánh tay.

   The. cánh tay cũng kiểm soát khoảng cách của cánh tay từ trên cùng của cửa sổ.

4. Thay đổi chiều rộng của cánh tay xuống còn 3% và sau đó nhấp vào Run để cho cánh tay Douglas gầy.

5. Tìm luật CSS cho cánh tay trái của Douglas.

6. Thêm thuộc tính để thay đổi chiều rộng lớn hơn chiều cao.

   Ví dụ:

   #leftarm {position: absolute; trái: 70%; chiều rộng: 27%; height: 5%;}
   

   Nhấp vào chạy để xem sự thay đổi. Douglas hiện đang trỏ màn hình, như bạn có thể nhìn thấy ở đây.

   

   Douglas đang chỉ tay!

Trong bước cuối cùng, bạn đã thêm chiều rộng và chiều cao vào một quy tắc với bộ chọn ID, mặc dù phần tử đã chọn đã có chiều rộng và chiều cao được áp dụng bằng bộ chọn lớp.

Mặc dù đã có chiều rộng và chiều rộng cho cánh tay trái, cánh tay lấy chiều rộng và chiều cao mới từ quy tắc bằng bộ chọn ID.

Hiểu biết về tầng

Tay trái của robot chỉ có thể là một chiều rộng và chiều rộng. Vậy điều gì xảy ra khi hai quy tắc CSS khác nhau cố gắng đặt chiều rộng và chiều cao của cánh tay một cách riêng biệt? Điều gì xảy ra là trình duyệt giữ một sự cạnh tranh giữa hai quy tắc CSS.

Trình duyệt sẽ xem xét các yếu tố như quy tắc CSS được đặt cuối cùng và cái nào cụ thể hơn để xác định độ rộng và chiều cao nào sẽ được sử dụng.

Trong cuộc cạnh tranh tầng này, các thuộc tính ID giành chiến thắng đối với các thuộc tính của lớp vì chúng là duy nhất cho một phần tử, và do đó cụ thể hơn thuộc tính lớp.

Các yếu tố định vị với CSS

Ngoài việc cung cấp cho bạn khả năng thay đổi màu sắc và cách các phần tử xuất hiện trong trình duyệt, CSS cũng cho phép bạn thay đổi vị trí trên màn hình một phần tử sẽ xuất hiện. Thay đổi vị trí một phần tử sẽ xuất hiện được gọi là vị trí một phần tử.

Thay đổi vị trí của một số phần của Douglas:

1. Tìm quy tắc CSS kiểm soát mắt phải của Douglas.

   #righteye {position: tuyệt đối; trái: 20%; top: 20%;}
   

   Tài sản đầu tiên, vị trí, cho trình duyệt biết cách giải thích các thuộc tính vị trí cụ thể (như trên và bên trái). Khi bạn sử dụng vị trí tuyệt đối, phần tử đã chọn (mắt trong trường hợp này) có thể được định vị bất cứ nơi nào trong đầu mà không cần lo lắng về việc liệu một phần khác trong đầu sẽ đẩy nó ra khỏi đường. Nếu hai phần tử định vị hoàn toàn được đặt ở cùng một vị trí, chúng sẽ chồng chéo nhau.

   Mắt phải được thiết lập để hiển thị 20% dưới (chiều cao của đầu) từ mép trên của phần đầu và 20% (chiều rộng của đầu) ở bên phải cạnh trái của cái đầu.

2. Di chuyển mắt phải sang trái và lên bằng cách thay đổi giá trị của cả hai trái và trên cùng sang phần trăm nhỏ hơn.

   Ví dụ:

   #righteye {position: absolute; trái: 10%; top: 10%;}
   

   Nhấp Chạy để xem kết quả, như được hiển thị ở đây.

   

   Douglas nâng mắt phải.