Chiều rộng chiều cao CSS

Thiết kế các trang web HTML thông qua việc sử dụng CSS mang lại khả năng kiểm soát đáng kinh ngạc. Bạn có thể thêm màu sắc, hình ảnh và nội dung văn bản tuyệt vời kết hợp thành màn hình nghệ thuật tuyệt vời. Tuy nhiên, những kỳ tích của sự hiểu biết về thiết kế cũng cần được định dạng để sử dụng theo chức năng.

Đây là nơi một số thuộc tính tinh chỉnh của CSS có thể phát huy tác dụng đối với nhà thiết kế. Trong phần giải thích ngắn gọn này, bạn sẽ học cách điều khiển chiều rộng và chiều cao. Hai tùy chọn này cùng nhau hoạt động để có được khía cạnh hoàn hảo đó cho kích thước HTML hiển thị

Chuẩn bị đặt Chiều cao Chiều rộng CSS

Đặt chiều rộng và chiều cao HTML bắt đầu bằng kiểu dáng CSS. Để cung cấp hỗ trợ trực quan cho hướng dẫn này, một tài liệu HTML mẫu và biểu định kiểu CSS sẽ được sử dụng. Bạn có thể chọn sao chép mã và làm theo trong trình soạn thảo văn bản của riêng mình.  

Đây là mã HTML mẫu được sử dụng cho hướng dẫn. Lưu ý thẻ "div" duy nhất trong nội dung. Đây sẽ là mục tiêu của những thay đổi kiểu dáng của chúng tôi

 
 
     
         
        
     
    
        
Udacity HTML Example Box
     
  

Khi HTML mẫu được đặt, biểu định kiểu CSS có thể được tạo. Nếu bạn không quen với việc thiết lập và liên kết biểu định kiểu CSS, hãy xem hướng dẫn này sẽ giúp bạn giải quyết vấn đề đó

div {
 
}

Để dễ quan sát, một bộ kiểu div thứ hai cũng được thêm vào. Điều này không bắt buộc đối với hướng dẫn, nhưng vui lòng thêm chúng vào mã của riêng bạn nếu bạn muốn bắt chước phong cách. Để biết thêm thông tin về các kiểu được áp dụng, vui lòng xem bài đăng trên blog về đường viền CSS và màu CSS

div{
 border-color: black;
 border-style: solid;
 border-spacing: 12px;
 text-align: center;
}

Điều này sẽ cung cấp màn hình sau trên trang HTML

Với ví dụ này được thiết lập làm cơ sở để làm việc, các thuộc tính chiều cao chiều rộng giờ đây có thể được thao tác

Thuộc tính Chiều cao Chiều rộng

Sử dụng các thuộc tính chiều rộng và chiều cao CSS khá trực tiếp theo cú pháp chung. Bạn chỉ cần gọi thuộc tính dự định theo tên và sau đó cung cấp giá trị cho thuộc tính đó. Xem ví dụ dưới đây để thấy điều này trong hành động

 div {
 width:  “Value to Add”;
 height: “Value to Add”;
}

Bạn có thể thấy rằng các thuộc tính chiều cao chiều rộng được đặt. Tuy nhiên, vẫn chưa có giá trị được cung cấp. Điều này sẽ được đề cập trong các khu vực riêng biệt vì bạn có thể đặt nhiều loại giá trị cho các thuộc tính này. Mặc dù ví dụ này nhằm vào kích thước “div” HTML nhưng cần lưu ý rằng nhiều phần tử có thể sử dụng các thuộc tính chiều cao chiều rộng để thay đổi nội dung HTML

Ghi chú. Thuộc tính chiều cao chiều rộng CSS cũng có thể sử dụng giá trị “tự động”. Nếu bạn không đặt giá trị cụ thể cho một trong hai thuộc tính này, trình duyệt sẽ chỉ chuyển về giá trị mặc định là “auto” để điền vào chỗ trống

Đặt chiều cao chiều rộng CSS bằng cách sử dụng kích thước pixel

Trong ví dụ này, các thuộc tính chiều cao chiều rộng sẽ được xác định bằng cách sử dụng pixel. Div bên dưới đã được cung cấp các giá trị bằng nhau là 100 pixel ở cả thuộc tính chiều rộng và chiều cao. Từ pixel được rút ngắn chỉ còn hai chữ cái của “px” khi được sử dụng trong CSS. Ngoài ra, lưu ý rằng không có khoảng cách giữa giá trị số và các chữ cái

div {
 width:  100px;
 height: 100px;
}

Điều này sẽ cung cấp đầu ra sau trên trang HTML

Bạn có thể thấy rằng văn bản nằm trong phần tử div đã bị ảnh hưởng do các ràng buộc về khoảng cách giới hạn vùng làm việc của nó. Điều này là do các thuộc tính của chiều cao và chiều rộng không thay đổi thuộc tính lề, phần đệm hoặc đường viền. Những gì bạn thấy bị thay đổi là các thuộc tính chiều cao chiều rộng CSS trong phần tử.  

Nếu bạn không quen thuộc với mô hình hộp CSS, hãy xem bài đăng này để hiểu cách thức hoạt động của nó cho người mới bắt đầu

Nếu giá trị của chiều rộng được thay đổi để phù hợp với văn bản, bạn có thể thấy nó thay đổi trực quan trên trang HTML

div{
 height: 100px; 
 width:  350px;
}

Mã mới này hiện cung cấp đầu ra sau trên trang

Tràn nội dung

Điều quan trọng là phải hiểu rằng kích thước bạn áp dụng cho phần tử không có nghĩa là nội dung bên trong được tự động đặt để phù hợp như mong muốn. Trong ví dụ tiếp theo này, chiều rộng và chiều cao đã được thay đổi thành các giá trị sau

div{
 height: 70px; 
 width:  170px;
}

Nội dung văn bản bổ sung đã được thêm vào phần tử div để đưa ra ví dụ về tràn nội dung

Đặt chiều cao chiều rộng CSS bằng tỷ lệ phần trăm

Một tùy chọn khác để áp dụng các giá trị cho thuộc tính chiều rộng và chiều cao, có thể sử dụng tỷ lệ phần trăm thay cho pixel. Điều này khá đơn giản đối với cú pháp khi bạn thêm một giá trị số theo sau là dấu phần trăm. Như với “px” cho pixel, không có khoảng cách giữa số và dấu. Xem ví dụ bên dưới nơi mã CSS đã được thay đổi để sử dụng tỷ lệ phần trăm

div{
 height: 100%; 
 width:  100%;
}

Nếu bạn nhớ vấn đề tràn nội dung trong các giá trị pixel trước đó được sử dụng, thì kết quả sau đây sử dụng tỷ lệ phần trăm sẽ rất thú vị

Như bạn có thể thấy, tràn nội dung không phải là vấn đề với biểu mẫu này. Tỷ lệ phần trăm không phải là đơn vị tĩnh như pixel và có thể cung cấp khả năng thích ứng với kích thước màn hình và các biến khác. Trong ví dụ tiếp theo này, các giá trị không thay đổi nhưng cửa sổ của trang HTML được thu nhỏ để mô phỏng màn hình điện thoại tiêu chuẩn.  

Nội dung vẫn giữ nguyên; . Điều đó có vẻ tuyệt vời cho nhu cầu thiết kế, nhưng có một số điểm tốt hơn khi sử dụng tỷ lệ phần trăm làm giá trị phải được lưu ý.  

Khi bạn đặt tỷ lệ phần trăm làm giá trị, bạn đang lấy phần trăm bất động sản của bất kỳ phần tử đó ở đâu. Trong các ví dụ được sử dụng ở đây, div là thành phần duy nhất trên tài liệu HTML. Đặt chiều cao và chiều rộng thành 100% trong phần nội dung về cơ bản khuyên trình duyệt chỉ cần sử dụng toàn bộ màn hình làm tham chiếu cho tỷ lệ phần trăm.  

Trong ví dụ này, một phần tử đoạn đã được lồng trong thẻ div.  

Trong biểu định kiểu, chiều cao chiều rộng CSS cho thành phần đoạn văn được đặt ở mức 50%. Đã thêm kiểu dáng để xem dễ dàng

p{
 background-color: blue;
 color: white;
 height: 50%; 
 width:  50%;
}

Điều này sẽ cung cấp cho bạn đầu ra sau trên trang HTML

The được sử dụng để giải thích rằng tỷ lệ phần trăm được sử dụng được giải quyết liên quan đến vị trí phần tử được lồng vào nhau. Trong trường hợp này, phần tử đoạn nằm trong phần tử div. Điều đó có nghĩa là tỷ lệ phần trăm được giải quyết là 50% của phần tử div, không phải toàn bộ trang

Đặt giá trị chiều rộng tối đa

Bạn có thể yêu cầu trình duyệt sử dụng chiều rộng tối đa đã đặt cho một phần tử thông qua việc sử dụng thuộc tính “max-width”. Giá trị có thể được xác định bằng pixel hoặc tỷ lệ phần trăm. Điều quan trọng cần lưu ý là bạn có thể đặt thuộc tính chiều rộng và chiều rộng tối đa. Chiều rộng tối đa sẽ thông báo cho trình duyệt biết chiều rộng được phép cho phần tử là bao nhiêu. Hãy xem ví dụ sau trong đó phần tử div được gán thuộc tính này

div {
 
}

Ghi chú. Trong ví dụ trên, bạn có thể thấy thuộc tính chiều rộng và chiều rộng tối đa đều đã được chỉ định. Điều này rất quan trọng vì không có sự kế thừa các giá trị được truyền. Thuộc tính chiều rộng đã được đặt và trình duyệt lấy 150px đó làm chiều rộng đã đặt. Điều này có nghĩa là nó sẽ được ưu tiên hơn thuộc tính độ rộng tối đa được đặt sau nó

Khi đã đặt chiều rộng tối đa, bạn sẽ nhận thấy một hiệu ứng thú vị được áp dụng cho cửa sổ trình duyệt. Khi cửa sổ của nội dung bị giảm kích thước, trình duyệt sẽ tự động thêm một thanh cuộn để cho phép truy cập nội dung. Xem hình ảnh dưới đây để biết ví dụ

Điều này có thể hữu ích vì những lý do rõ ràng trong đó khoảng cách có thể là một vấn đề

Đưa các thiết kế đi xa hơn nữa

Hướng dẫn ngắn gọn này chỉ trình bày những điều cơ bản về thuộc tính chiều cao chiều rộng CSS. CSS là một hộp công cụ tuyệt vời gồm nhiều tùy chọn khác nhau đang chờ bạn phát huy tiềm năng. Xem xét cách kết hợp kích thước của một thành phần có thể giúp bạn tạo kiểu nền hoặc nút trang.  

Các tùy chọn khác chẳng hạn như thay đổi kích thước của toàn bộ hình ảnh cho nền trang có thể có tác dụng đó ngay cả cha. Các công cụ khác như Flexbox và CSS Grid cũng hoạt động ở khía cạnh định cỡ và tổ chức để kết hợp các khái niệm thiết kế đó lại với nhau

Nếu CSS và HTML là điểm đầu tiên bạn bước vào thế giới sáng tạo thông qua mã, hãy cân nhắc tận dụng đường dẫn. Biết cách hiểu mã trong các lĩnh vực khác nhau của cuộc sống có thể dẫn đến một số lựa chọn nghề nghiệp rất sáng tạo và khiến bạn khác biệt với đám đông.  

Tiếp tục học hỏi và thử những điều mới. Không chỉ để nâng cao sự nghiệp của bạn, mà còn để tận hưởng niềm vui trong những gì bạn có thể nghĩ ra. Hôm nay nó đang học cách kiểm soát thuộc tính chiều rộng chiều cao CSS. Ngày mai, đó là trang web của riêng bạn với tất cả nội dung sáng tạo mà bạn có thể tập hợp

_________________________

Nếu bạn đang muốn bay xa hơn và mạnh mẽ hơn bao giờ hết, hãy thực hiện những bước đầu tiên với mã. Học cách viết mã có thể giúp bạn mở ra những cánh cửa tới những khả năng mới giúp bạn trở nên tốt hơn. Tham gia chương trình Giới thiệu về Lập trình Nanodegree của Udacity ngay hôm nay để bắt đầu cuộc hành trình.   

Chiều rộng và chiều cao được tính như thế nào trong CSS?

Chiều rộng và chiều cao có giống nhau không?

Là chiều rộng 100 và chiều rộng 100%?

Chiều cao CSS là gì?