Rgba trong css
Trong bài này chúng ta sẽ tìm hiểu 2 loại giá trị quan trọng nhất mà CSS có thể áp dụng cho các phần tử HTML, đó là. màu sắc và kích thước. Nó cho phép chúng tôi kiểm soát được màu sắc của các bộ phận tử và màu sắc của chúng. Hầu hết các kiểu khai báo và giá trị CSS đều có tính năng giải thích tự động, ví dụ như. 4. Tuy nhiên, cũng có khá nhiều ngoại lệ và cách xác định giá trị bất thườngmàu CSSChúng ta thường biết đến các từ mô tả màu sắc như. đỏ, xanh lá cây và xám nhạt. Và CSS cũng hỗ trợ một lượng lớn các tên màu khác nhau, bạn có thể xem tài liệu trực tuyến tại đây - color. Tuy nhiên, đây không phải là cách xác định màu CSS linh hoạt và phổ biến, chúng ta sẽ cùng tìm hiểu về những cách mạnh mẽ/tốt nhất để áp dụng màu trong CSS màu thập lục phânCó một phương pháp phổ biến để xác định màu sắc đó là, hệ thập lục phân RGB (đỏ-lục-lam). Nghe qua thì thấy có vẻ phức tạp, tuy nhiên khái niệm về nó cũng khá đơn giản. Một cách nhanh chóng để hiểu cách hoạt động của màu thập lục phân, đó là chúng ta thử thay đổi màu của thẻ a từ đỏ sang màu RGB thập lục phân tương ứng
Khi lưu và tải lại trang, ta thấy thẻ vẫn có màu đỏ như cũ Kích thước quảng cáo như thế này chắc chắn bạn đã thấy ở rất nhiều nơi tỷ lệ phần trămCó thể bạn đã biết về cách thiết lập kích thước bằng Tỷ lệ phần trăm (%). Nó sẽ rất hữu ích khi chúng ta muốn sử dụng kích thước tương đối, để ép một phần tử lấp đầy vào một khoảng trống. Có một vài điểm chú ý, bạn cần biết như sau
Để hiểu cách kích thước % hoạt động như thế nào, ta sẽ tạo một thẻ div mới với tên lớp là. bio-wrapper , bao bọc thẻ div của lớp. hộp sinh học
at here. bio-wrapper sẽ là thùng chứa chính và xác định kích thước của con. hộp sinh học. Và ta sẽ đặt chiều rộng của lớp mới là 500px và thay đổi chiều rộng của. bio-box from 200px (kháng rác) to 50% Trông có vẻ vẫn còn khá chật nhỉ ? Lý do hộp nhìn khá nhỏ bởi vì nó đang lấy giá trị 50% của 500px là 250px. Để làm cho nó rộng rãi, to hơn thì ta cần thiết lập cho cha mẹ của nó to hơn. Có một cách đơn giản đó là ta xóa chiều rộng của lớp. bio-wrapper sau đó lưu và làm mới lại. Khi trình duyệt này sẽ tự động giả định rằng phần trăm của chiều rộng của. bio-boxes is based on the width of the browser
Như đã tìm hiểu ở trên, ta thấy rằng đơn vị % hoạt động tốt khi đặt kích thước cho chiều rộng, nhưng nó hoạt động khá dị với chiều cao và không hoạt động đối với dày. Do đó, chúng tôi không thể sử dụng đơn vị % cho đường viền. To size % height has effect, then ta need to set height for parent of it before.
Chiều rộng của ta sẽ là 50% của trang, tuy nhiên chiều cao lại chỉ bằng với chiều cao của nội dung trong div. (không giống như ta mong muốn. ) Ta sẽ thử xem điều gì sẽ xảy ra nếu ta đặt chiều cao cho nội dung thẻ, như dưới đây
Ta thấy rằng, thẻ div mới đã trở nên rất cao Qua đoạn mã ở trên ta thấy rằng, khi sử dụng % cho chiều cao thì vùng chứa cha phải được đặt chiều cao trước thì chiều cao % của con mới có tác dụng. Nếu không, trình duyệt sẽ chỉ định độ cao cần thiết để đủ chứa nội dung bên trong phông chữ phần trăm Chúng ta có thể sử dụng % để đặt kích thước cho văn bản, tuy nhiên có một điều bạn hãy lưu ý rằng, kích thước của phông chữ sẽ không dựa trên kích thước pixel của vùng chứa mà nó dựa trên kích thước phông chữ . 1). em 1 là đơn vị tương đối để đặt kích thước cho văn bản, và đó là đơn vị được nhiều người sử dụng và không thích. Tên gọi này bắt nguồn từ chiều rộng gần đúng của chữ 3, tuy nhiên việc sử dụng này mang tính lịch sử nhiều hơn. Trong CSS, một 1, đại diện cho số lượng pixel bằng kích thước phông chữ hiện tại của bất kỳ vùng chứa chính nào của phần tử định dạng lớn nhất. Đối với kích thước văn bản được loại trừ (không phải là kiểu tiêu đề h1, h2) thì kích thước mặc định của văn bản là 5, do đó kích thước mặc định của 1 em cũng là 5. Ví dụ, font size kế thừa parent container is 16px, if set size is 0. 5em thì sẽ tính 50% của 16px là 8px. Và 2. 25em sẽ bằng 225% của 16px là 36px. vv Một trong những lý do giúp 1 trở nên hữu ích hơn so với pixel, đó là nó sẽ tự động thay đổi giá trị dựa trên kích thước phông chữ kế thừa của đối tượng gốc. Điều kiện có nghĩa là nếu bạn sử dụng 1 cho toàn bộ trang web của mình, bạn có thể chỉnh sửa toàn bộ văn bản của trang web một cách đơn giản bằng cách chỉnh sửa cơ sở kích thước phông chữ, và sau đó tất cả phông chữ trong bộ chứa con sẽ tự động . Trong trường hợp bạn đã sử dụng pixel cho mọi thứ, thì bạn phải thay đổi bằng tay cho tất cả các vị trí cần thay đổi. Ví dụ ta thử set font size of class 9 to 0. Và bởi vì cỡ chữ mặc định của toàn bộ trang là 5, cho nên cỡ chữ sau khi đặt sẽ trở thành 2. 8Dũng @do. định. phân Theo dõi 128 8 24 Đã đăng vào ngày 12 tháng 19 năm 2020 12. 53 CH 20 phút đọc 358 0 1 [CSS] Color and Sizing
Trong bài này chúng ta sẽ tìm hiểu 2 loại giá trị quan trọng nhất mà CSS có thể áp dụng cho các phần tử HTML, đó là. màu sắc và kích thước. Nó cho phép chúng tôi kiểm soát được màu sắc của các bộ phận tử và màu sắc của chúng. Hầu hết các kiểu khai báo và giá trị CSS đều có tính năng giải thích tự động, ví dụ như. 4. Tuy nhiên, cũng có khá nhiều ngoại lệ và cách xác định giá trị bất thườngmàu CSSChúng ta thường biết đến các từ mô tả màu sắc như. đỏ, xanh lá cây và xám nhạt. Và CSS cũng hỗ trợ một lượng lớn các tên màu khác nhau, bạn có thể xem tài liệu trực tuyến tại đây - color. Tuy nhiên, đây không phải là cách xác định màu CSS linh hoạt và phổ biến, chúng ta sẽ cùng tìm hiểu về những cách mạnh mẽ/tốt nhất để áp dụng màu trong CSS màu thập lục phânCó một phương pháp phổ biến để xác định màu sắc đó là, hệ thập lục phân RGB (đỏ-lục-lam). Nghe qua thì thấy có vẻ phức tạp, tuy nhiên khái niệm về nó cũng khá đơn giản. Một cách nhanh chóng để hiểu cách hoạt động của màu thập lục phân, đó là chúng ta thử thay đổi màu của thẻ a từ đỏ sang màu RGB thập lục phân tương ứng
Khi lưu và tải lại trang, ta thấy thẻ vẫn có màu đỏ như cũ Kích thước quảng cáo như thế này chắc chắn bạn đã thấy ở rất nhiều nơi tỷ lệ phần trămCó thể bạn đã biết về cách thiết lập kích thước bằng Tỷ lệ phần trăm (%). Nó sẽ rất hữu ích khi chúng ta muốn sử dụng kích thước tương đối, để ép một phần tử lấp đầy vào một khoảng trống. Có một vài điểm chú ý, bạn cần biết như sau
Để hiểu cách kích thước % hoạt động như thế nào, ta sẽ tạo một thẻ div mới với tên lớp là. bio-wrapper , bao bọc thẻ div của lớp. hộp sinh học
at here. bio-wrapper sẽ là thùng chứa chính và xác định kích thước của con. hộp sinh học. Và ta sẽ đặt chiều rộng của lớp mới là 500px và thay đổi chiều rộng của. bio-box from 200px (kháng rác) to 50% Trông có vẻ vẫn còn khá chật nhỉ ? Lý do hộp nhìn khá nhỏ bởi vì nó đang lấy giá trị 50% của 500px là 250px. Để làm cho nó rộng rãi, to hơn thì ta cần thiết lập cho cha mẹ của nó to hơn. Có một cách đơn giản đó là ta xóa chiều rộng của lớp. bio-wrapper sau đó lưu và làm mới lại. Khi trình duyệt này sẽ tự động giả định rằng phần trăm của chiều rộng của. bio-boxes is based on the width of the browser
Giờ thì các hộp con đã to hơn rồi Như đã tìm hiểu ở trên, ta thấy rằng đơn vị % hoạt động tốt khi đặt kích thước cho chiều rộng, nhưng nó hoạt động khá dị với chiều cao và không hoạt động đối với dày. Do đó, chúng tôi không thể sử dụng đơn vị % cho đường viền. To size % height has effect, then ta need to set height for parent of it before.
Chiều rộng của ta sẽ là 50% của trang, tuy nhiên chiều cao lại chỉ bằng với chiều cao của nội dung trong div. (không giống như ta mong muốn. ) Ta sẽ thử xem điều gì sẽ xảy ra nếu ta đặt chiều cao cho nội dung thẻ, như dưới đây
Ta thấy rằng, thẻ div mới đã trở nên rất cao Qua đoạn mã ở trên ta thấy rằng, khi sử dụng % cho chiều cao thì vùng chứa cha phải được đặt chiều cao trước thì chiều cao % của con mới có tác dụng. Nếu không, trình duyệt sẽ chỉ định độ cao cần thiết để đủ chứa nội dung bên trong phông chữ phần trăm Chúng ta có thể sử dụng % để đặt kích thước cho văn bản, tuy nhiên có một điều bạn hãy lưu ý rằng, kích thước của phông chữ sẽ không dựa trên kích thước pixel của vùng chứa mà nó dựa trên kích thước phông chữ . 1). em 1 là đơn vị tương đối để đặt kích thước cho văn bản, và đó là đơn vị được nhiều người sử dụng và không thích. Tên gọi này bắt nguồn từ chiều rộng gần đúng của chữ 3, tuy nhiên việc sử dụng này mang tính lịch sử nhiều hơn. Trong CSS, một 1, đại diện cho số lượng pixel bằng kích thước phông chữ hiện tại của bất kỳ vùng chứa chính nào của phần tử định dạng lớn nhất. Đối với kích thước văn bản được loại trừ (không phải là kiểu tiêu đề h1, h2) thì kích thước mặc định của văn bản là 5, do đó kích thước mặc định của 1 em cũng là 5. Ví dụ, font size kế thừa parent container is 16px, if set size is 0. 5em thì sẽ tính 50% của 16px là 8px. Và 2. 25em sẽ bằng 225% của 16px là 36px. vv Một trong những lý do giúp 1 trở nên hữu ích hơn so với pixel, đó là nó sẽ tự động thay đổi giá trị dựa trên kích thước phông chữ kế thừa của đối tượng gốc. Điều kiện có nghĩa là nếu bạn sử dụng 1 cho toàn bộ trang web của mình, bạn có thể chỉnh sửa toàn bộ văn bản của trang web một cách đơn giản bằng cách chỉnh sửa cơ sở kích thước phông chữ, và sau đó tất cả phông chữ trong bộ chứa con sẽ tự động . Trong trường hợp bạn đã sử dụng pixel cho mọi thứ, thì bạn phải thay đổi bằng tay cho tất cả các vị trí cần thay đổi. Ví dụ ta thử set font size of class 9 to 0. Và bởi vì cỡ chữ mặc định của toàn bộ trang là 5, cho nên cỡ chữ sau khi đặt sẽ trở thành 2. 8Và bây giờ ta xem nó sẽ thay đổi thế nào nếu ta thay đổi cỡ chữ của phần tử cha. Ta sẽ thêm lại lớp 3 để bao bọc lớp 4, từ đó ta có thể đặt lại kích thước phông chữ cơ sở, bằng cách thêm quy tắc CSS. Đó là ta sẽ thay đổi cỡ chữ mặc định từ 16px thành 24px. Do vậy, 4 đang có cỡ chữ là 0. 5em (50% của 24px ) sẽ trở thành 12px 1Để xác định kích thước phông chữ được bao nhiêu, trình duyệt sẽ thu thập dự kiến phông chữ chữ từ con tới cha, để khi tìm được phông chữ tuyệt đối, sau đó tính toán ngược cây để có . Như đã nói ở trên, nếu không tìm thấy giá trị tuyệt đối như vậy, trình duyệt sẽ lấy cỡ chữ mặc định là 16px, tuy nhiên ta đã thay đổi div cha thành 24px, do đó kích thước của các con tử cũng vậy . Một trong những thuộc tính quan trọng của đơn vị em đó là, nó có tính tích lũy. Nếu một phần tử được đặt kích thước phông chữ là 0. 5em, được đặt trong một phần tử khác cũng được đặt cỡ chữ là 0. 5em, then size font chữ cuối cùng sẽ là 0. 5×0. 5= 0. 25em. Ví dụ, kích thước cơ sở là 24px, thì phần tử được lồng sâu nhất có kích thước là 25% của 24, hay là 6px. Hiệu ứng tích lũy này có thể sẽ hữu ích, hoặc nó cũng có thể vô tình gây ra lỗi hiển thị, nên bạn cần cẩn thận với nó. 9 nằm trong 4 và nằm trong 3. At on ta đã thay đổi kích thước phông chữ của 9 thành 0. 5em, if time ta continue change font size of 4 to 0. 5em, thì kết quả ta thu được sẽ là 50% của 50% của 24px, là 6px. 70Khi kích thước phông chữ này sẽ trở nên khá nhỏ Như trình bày ở trên, trình duyệt sẽ bắt đầu đi từ. bio-copy, nó đi lên một cấp tới lớp cha, nó phát hiện ra lệnh đặt phông chữ tương đối là 50%, nó lại đi tiếp lên một cấp nữa để tìm kích thước phông chữ tuyệt đối, và nó thấy rằng lớp đó. bio-wrapper đang đặt kích thước tuyệt đối là 24px. Do đó, nó sẽ quay trở lại phần tử con. bio-box và đặt kích thước phông chữ thành 12px, nó quay lại phần cuối cùng của phần tử con. sao chép sinh học và đặt kích thước phông chữ thành 6px. Chữ chữ quá xuất hiện quá lớn đúng k nào. Ta có thể đặt kích thước phông chữ phù hợp hơn đó là khoảng 1em 71Cho đến thời điểm hiện tại, ta mới sử dụng đơn vị 1 cho cỡ chữ của ký tự, tuy nhiên thực tế là đơn vị 1 có thể sử dụng cho cả lề, đệm hoặc chiều rộng |