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ư.
.
.
.
.social-link {
background: rgba[150, 150, 150, 1];
color: blue;
}
.
.
.
Chú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ân
Có 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
/* GLOBAL STYLES */
a {
color: #ff0000;
}
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
- Tỷ lệ phần trăm này sẽ dựa vào vùng chứa cha [container cha] đang bao bọc nó - chứ không phải nó không được xác định bởi trình duyệt hay toàn bộ trang
- Ta ít khi sử dụng tỷ lệ chiều cao, vì nó yêu cầu thiết lập chiều cao trên phần tử gốc - Mà ta không thể giả định chiều cao như chiều dọc giả định được
Để 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
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
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
.
.
.
.bio-wrapper {
}
.
.
.
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.
Thúc đẩy trong trường hợp bạn muốn đặt chiều cao của hộp là cả trình duyệt, bạn sẽ làm ntn? . 100% ư? .
Ta thử đoạn mã dưới đây.
.
.
.
I'm a percent
test
I'm an h1
.
.
.
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
.
.
.
/* GLOBAL STYLES */
body {
height: 800px;
}
.
.
.
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ữ .
Ví dụ chiều cao của hộp là 1000px, nhưng kích thước phông chữ kế thừa của nó là 16px, vậy nếu bạn đặt kích thước phông chữ của phần tử con là 50% thì nó sẽ có chiều cao là 8px [50 . Nói chung người ta thường sử dụng % như là cách để định dạng kích thước cho những thứ có hình hộp, và sử dụng phương pháp định kích thước khác cho phông chữ [ví dụ như sử dụng đơn vị
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
Đố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à
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
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
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
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
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
.bio-wrapper {
}
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
.bio-wrapper {
}
.
.
.
/* GLOBAL STYLES */
a {
color: #ff0000;
}
Dũ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- Report
- Add to series of me
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ư.
.
.
.
.social-link {
background: rgba[150, 150, 150, 1];
color: blue;
}
.
.
.
Chú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ân
Có 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
/* GLOBAL STYLES */
a {
color: #ff0000;
}
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
- Tỷ lệ phần trăm này sẽ dựa vào vùng chứa cha [container cha] đang bao bọc nó - chứ không phải nó không được xác định bởi trình duyệt hay toàn bộ trang
- Ta ít khi sử dụng tỷ lệ chiều cao, vì nó yêu cầu thiết lập chiều cao trên phần tử gốc - Mà ta không thể giả định chiều cao như chiều dọc giả định được
Để 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
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
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
.
.
.
.bio-wrapper {
}
.
.
.
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.
Thúc đẩy trong trường hợp bạn muốn đặt chiều cao của hộp là cả trình duyệt, bạn sẽ làm ntn? . 100% ư? .
Ta thử đoạn mã dưới đây.
.
.
.
I'm a percent
test
I'm an h1
.
.
.
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
.
.
.
/* GLOBAL STYLES */
body {
height: 800px;
}
.
.
.
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ữ .
Ví dụ chiều cao của hộp là 1000px, nhưng kích thước phông chữ kế thừa của nó là 16px, vậy nếu bạn đặt kích thước phông chữ của phần tử con là 50% thì nó sẽ có chiều cao là 8px [50 . Nói chung người ta thường sử dụng % như là cách để định dạng kích thước cho những thứ có hình hộp, và sử dụng phương pháp định kích thước khác cho phông chữ [ví dụ như sử dụng đơn vị
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
Đố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à
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
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
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
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
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
.bio-wrapper {
}
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
.bio-wrapper {
}
.
.
.
/* GLOBAL STYLES */
a {
color: #ff0000;
}
Và 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
.
.
.
.bio-wrapper {
}
.
.
.
.
.
.
.bio-wrapper {
}
.
.
.
.
.
.
.bio-wrapper {
}
.
.
.
.
.
.
I'm a percent
test
I'm an h1
.
.
.
Để 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 .
Kết quả là, cỡ chữ 0. 5 em không phải là 50% của 16px nữa, mà trở thành 50% của 24px, là 12px. Như vậy kích thước phông chữ của. hộp sinh học tự động tăng từ 8px lên 12px, như bên dưới.
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ó.
Mã hiển thị của chúng ta đang bao gồm các thẻ div lồng nhau, đó là
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
.bio-wrapper {
}
.
.
.
.
.
.
.bio-wrapper {
}
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
.bio-wrapper {
}
.
.
.
.
.
.
I'm a percent
test
I'm an h1
.
.
.
Khi 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.
Hoặc nó cũng có thể hoạt động theo một cách khác, nếu ta đặt chữ cái của. hộp sinh học và. bản sao sinh học thành 1. 5 em, thì trình duyệt sẽ hiển thị font chữ rất lớn là 54px [bằng cách tính 24×1. 5×1. 5= 54px].
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
.
.
.
I'm a percent
test
I'm an h1
.
.
.
Cho đến thời điểm hiện tại, ta mới sử dụng đơn vị
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.
.
.
.
Michael Hartl
here
Known for his dazzling charm, rapier wit, and unrivaled humility,
Michael is the creator of the
Ruby on Rails
Tutorial and principal author of the
Learn Enough to Be Dangerous introductory sequence. Michael
is also notorious as the founder of
Tau Day and author of
The Tau
Manifesto, but rumors that he's secretly a supervillain
are slightly exaggerated.
Lee Donahoe
here
When he's not literally swimming with sharks or hunting powder stashes on
his snowboard, you can find Lee in front of his computer designing
interfaces, doing front-end development, or writing some of the interface
-related Learn Enough tutorials.
Nick Merwin
here
You may have seen him shredding guitar live with Capital Cities on Jimmy
Kimmel, Conan, or The Ellen Show, but rest assured Nick is a true nerd at
heart. He's just as happy shredding well-spec'd lines of code from a tour
bus as he is from his kitchen table.
??
The Future
.
.
.