Thuộc tính CSS dominant-baseline điều khiển cách văn bản được căn chỉnh dọc theo đường cơ sở. Nó ảnh hưởng đến vị trí của glyphs so với đường cơ sở, giúp căn chỉnh văn bản đa dòng chính xác hơn. Các giá trị như 'middle', 'hanging', 'alphabetic' cho phép điều khiển chính xác vị trí dọc của văn bản. Hiểu thuộc tính này rất quan trọng để tạo ra bố cục văn bản chuyên nghiệp và dễ đọc.
Dominant-Baseline trong css là gì
Dominant-baseline trong CSS là thuộc tính điều khiển cách văn bản được căn chỉnh dọc theo đường cơ sở. Nó xác định vị trí chính xác của đường cơ sở, ảnh hưởng đến sự sắp xếp của các dòng chữ và các phần tử khác liên quan. Thuộc tính này rất hữu ích trong việc tạo ra bố cục phức tạp và đảm bảo sự nhất quán về mặt hình ảnh. Việc sử dụng dominant-baseline giúp kiểm soát chính xác vị trí văn bản trên trang web.
Cấu trúc thuộc tính Dominant-Baseline
Dominant-Baseline: value;
Các giá trị của Dominant-Baseline property in css
Thuộc tính Dominant-Baseline property in css xác định đường cơ sở ưu thế cho văn bản, ảnh hưởng đến cách văn bản được căn chỉnh dọc. Nó điều khiển vị trí của dòng chữ so với đường cơ sở, cho phép điều chỉnh độ cao và vị trí chính xác của văn bản. Hiểu rõ thuộc tính này rất quan trọng để tạo bố cục văn bản chính xác và chuyên nghiệp.
- auto: Giá trị mặc định, trình duyệt tự động xác định đường cơ sở.
- alphabetic: Căn chỉnh dòng chữ theo đường cơ sở chữ cái.
- central: Căn chỉnh dòng chữ ở giữa hộp chứa.
- hanging: Căn chỉnh dòng chữ từ đường cơ sở phía trên.
- ideographic: Căn chỉnh dòng chữ theo đường cơ sở ký tự tượng hình.
- mathematical: Căn chỉnh dòng chữ theo đường cơ sở toán học.
- middle: Căn chỉnh dòng chữ ở giữa chiều cao hộp chứa.
- text-bottom: Căn chỉnh dòng chữ ở đáy hộp chứa.
- text-top: Căn chỉnh dòng chữ ở đỉnh hộp chứa.
- inherit: Kế thừa giá trị từ phần tử cha.
- initial: Thiết lập giá trị ban đầu của thuộc tính.
- revert: Thiết lập giá trị được kế thừa từ quy tắc kiểu mặc định của user agent.
- revert-layer: Thiết lập giá trị được kế thừa từ quy tắc kiểu mặc định của lớp.
- unset: Thiết lập giá trị thành giá trị kế thừa nếu có, nếu không thì là giá trị ban đầu.
Ví dụ về giá trị auto trong Dominant-Baseline
Thuộc tính `dominant-baseline` trong CSS giúp căn chỉnh văn bản dọc. Giá trị `auto` là giá trị mặc định, nó tự động chọn cách căn chỉnh tốt nhất tùy thuộc vào font chữ và nội dung. Hệ thống sẽ cố gắng đặt văn bản ở vị trí cân bằng và dễ đọc nhất. Vì vậy, bạn không cần phải lo lắng về việc căn chỉnh nếu để mặc định. Nó sẽ tự động xử lý phần lớn trường hợp.Cấu trúc
Dominant-Baseline: auto;
Ví dụ
```html<html>
<head>
<style>
.container {
width: 200px;
height: 200px;
border: 1px solid black;
}
.text {
font-size: 24px;
dominant-baseline: auto; /* Giá trị auto sẽ căn chỉnh baseline theo mặc định */
}
.image {
width: 100px;
height: 100px;
dominant-baseline: auto; /* Giá trị auto sẽ căn chỉnh baseline theo mặc định */
background-image: url("https://tidadigi.com/images/post/css.jpg");
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<div class="text">Text</div>
</div>
<div class="container">
<div class="image"></div>
</div>
</body>
</html>
```
Output
Ví dụ về giá trị alphabetic trong Dominant-Baseline
Thuộc tính `dominant-baseline` trong CSS giúp căn chỉnh văn bản dọc. Nó xác định vị trí dòng cơ sở chính, nơi mà văn bản được đặt so với hộp chứa. Giá trị `alphabetic` căn chỉnh văn bản sao cho dòng cơ sở nằm ở vị trí trung bình của các chữ cái. Điều này tạo ra sự sắp xếp tự nhiên và dễ đọc hơn. Bạn sẽ thấy nó hữu ích khi cần căn chỉnh chính xác văn bản trong các thiết kế phức tạp.Cấu trúc
Dominant-Baseline: alphabetic;
Ví dụ
<style>
.container {
font-size: 20px;
font-family: sans-serif;
}
.alphabetic {
dominant-baseline: alphabetic;
display: inline-block;
vertical-align: middle; /* Để căn giữa dòng chữ */
border: 1px solid black; /* Giúp dễ nhìn thấy vùng chữ */
padding: 5px;
}
.hanging {
dominant-baseline: hanging;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
padding: 5px;
}
.ideographic {
dominant-baseline: ideographic;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
padding: 5px;
}
.middle {
dominant-baseline: middle;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
padding: 5px;
}
.text-after-edge {
dominant-baseline: text-after-edge;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
padding: 5px;
}
.text-before-edge {
dominant-baseline: text-before-edge;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
padding: 5px;
}
.central {
dominant-baseline: central;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
padding: 5px;
}
.no-change {
dominant-baseline: no-change;
display: inline-block;
vertical-align: middle;
border: 1px solid black;
padding: 5px;
}
.alphabetic img {
vertical-align: baseline;
}
</style>
<body>
<div class="container">
<div class="alphabetic">Alphabetic</div>
<div class="hanging">Hanging</div>
<div class="ideographic">Ideographic</div>
<div class="middle">Middle</div>
<div class="text-after-edge">Text-after-edge</div>
<div class="text-before-edge">Text-before-edge</div>
<div class="central">Central</div>
<div class="no-change">No-change</div>
<div class="alphabetic"><img src="https://tidadigi.com/images/post/css.jpg" alt="CSS Image" width="20" height="20"> Alphabetic with Image</div>
</div>
</body>
</html>
Output
Ví dụ về giá trị central trong Dominant-Baseline
Thuộc tính `dominant-baseline` trong CSS giúp căn chỉnh văn bản dọc một cách chính xác. Nó xác định vị trí baseline (đường cơ sở) của văn bản, giúp cho việc xếp đặt các phần tử văn bản khác nhau trở nên dễ dàng hơn. Giá trị `central` sẽ đặt baseline của văn bản vào giữa hộp chứa, tạo sự cân bằng và thẩm mỹ. Vì vậy, sử dụng `dominant-baseline: central;` sẽ giúp văn bản của bạn được căn giữa theo chiều dọc một cách hiệu quả.Cấu trúc
Dominant-Baseline: central;
Ví dụ
<html>
<head>
<style>
body {
font-family: sans-serif;
}
.container {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.text {
dominant-baseline: central;
font-size: 24px;
}
.image-container {
width: 100px;
height: 100px;
}
.image {
width: 100%;
height: 100%;
object-fit: contain;
dominant-baseline: central;
}
</style>
</head>
<body>
<div class="container">
<span class="text">Central</span>
</div>
<div class="container">
<div class="image-container">
<img class="image" src="https://tidadigi.com/images/post/css.jpg" alt="CSS Image">
</div>
</div>
</body>
</html>
Output
Ví dụ về giá trị hanging trong Dominant-Baseline
Thuộc tính `dominant-baseline` trong CSS giúp căn chỉnh văn bản dọc. Nó xác định vị trí baseline của văn bản so với vùng chứa. Bạn có thể điều chỉnh vị trí này để văn bản trông cân đối hơn. Việc sử dụng thuộc tính này rất hữu ích khi bạn cần sắp xếp văn bản một cách chính xác. Hãy thử nghiệm để tìm giá trị phù hợp nhất cho thiết kế của bạn.Cấu trúc
Dominant-Baseline: hanging;
Ví dụ
```html<p>Hanging:<span class="hanging">Hanging</span></p> <p>Alphabetic:<span class="alphabetic">Alphabetic</span></p> <p>Ideographic:<span class="ideographic">Ideographic</span></p> <p>Middle:<span class="middle">Middle</span></p> <p>Text-top:<span class="text-top">Text-top</span></p> <p>Text-before-edge:<span class="text-before-edge">Text-before-edge</span></p> <p>Central:<span class="central">Central</span></p> <p>Auto:<span class="auto">Auto</span></p> <p>Hanging Image:<span class="hanging-image"></span></p>```
Output
Ví dụ về giá trị ideographic trong Dominant-Baseline
Thuộc tính `dominant-baseline` trong CSS giúp căn chỉnh văn bản theo đường cơ sở, giúp cho việc xếp đặt văn bản thẳng hàng dễ dàng hơn, đặc biệt là khi kết hợp với các hình ảnh hoặc đối tượng khác. Nó xác định vị trí chính của dòng chữ so với đường cơ sở, tạo sự cân bằng và dễ đọc hơn cho nội dung. Việc sử dụng thuộc tính này rất hữu ích trong việc thiết kế giao diện web chuyên nghiệp và đẹp mắt.Cấu trúc
Dominant-Baseline: ideographic;
Ví dụ
```html```日 A M T B
Output
Ví dụ về giá trị mathematical trong Dominant-Baseline
Thuộc tính `dominant-baseline` trong CSS giúp căn chỉnh văn bản dọc, đặc biệt hữu ích khi làm việc với văn bản phức tạp hoặc đồ họa. Nó xác định vị trí baseline của văn bản so với vùng chứa, giúp cho việc sắp xếp các dòng chữ thẳng hàng dễ dàng hơn. Bạn có thể chọn các giá trị như `middle`, `central`, `text-before-edge` hay `text-after-edge` để điều chỉnh vị trí chính xác. Việc sử dụng thuộc tính này giúp tạo ra bố cục văn bản đẹp mắt và chuyên nghiệp hơn. Hiểu rõ `dominant-baseline` sẽ giúp bạn kiểm soát tốt hơn cách hiển thị văn bản trên trang web.Cấu trúc
Dominant-Baseline: mathematical;
Ví dụ
```html```AgjA
j
Output
Ví dụ về giá trị middle trong Dominant-Baseline
Thuộc tính `dominant-baseline` trong CSS giúp căn chỉnh văn bản dọc. Giá trị `middle` sẽ đặt đường cơ sở của văn bản nằm chính giữa hộp chứa. Điều này đảm bảo văn bản được hiển thị cân bằng, đẹp mắt hơn. Bạn có thể dùng nó để tạo bố cục văn bản chuyên nghiệp hơn. Nhớ đặt toàn bộ nội dung vào một thẻnhé!
Cấu trúc
Dominant-Baseline: middle;
Ví dụ
<html>
<head>
<style>
body {
font-family: sans-serif;
}
.container {
width: 200px;
height: 100px;
border: 1px solid black;
text-align: center;
}
.middle {
dominant-baseline: middle;
font-size: 20px;
}
.middle img {
vertical-align: middle;
}
</style>
</head>
<body>
<div class="container">
<span class="middle">Text</span>
</div>
<div class="container">
<span class="middle"><img src="https://tidadigi.com/images/post/css.jpg" alt="CSS"></span>
</div>
</body>
</html>
Output
Ví dụ về giá trị text-bottom trong Dominant-Baseline
Thuộc tính `dominant-baseline: text-bottom` trong CSS giúp căn chỉnh văn bản xuống phía dưới của vùng chứa. Nó đặt đường cơ sở của văn bản trùng với cạnh dưới cùng của hộp chứa ký tự. Điều này hữu ích khi bạn muốn căn chỉnh chính xác văn bản với các yếu tố khác trên trang web. Bạn có thể dùng thuộc tính này để tạo bố cục đẹp mắt và chuyên nghiệp hơn.Cấu trúc
Dominant-Baseline: text-bottom;
Ví dụ
<html>
<head>
<style>
body {
font-family: sans-serif;
}
.container {
width: 200px;
height: 200px;
border: 1px solid black;
display: flex;
justify-content: center;
align-items: center;
}
.text {
dominant-baseline: text-bottom;
font-size: 24px;
}
</style>
</head>
<body>
<div class="container">
<span class="text">Text Bottom</span>
</div>
</body>
</html>
Output
Ví dụ về giá trị text-top trong Dominant-Baseline
Thuộc tính text-top trong Dominant-Baseline của CSS điều chỉnh vị trí dòng cơ sở của văn bản so với hộp chứa. Nó đặt dòng cơ sở lên phía trên cùng của hộp, giúp căn chỉnh văn bản chính xác hơn. Điều này hữu ích khi bạn cần kiểm soát chính xác vị trí của chữ cái, đặc biệt là khi kết hợp với các yếu tố khác. Bạn có thể dùng nó để tạo hiệu ứng bố cục độc đáo. Hãy thử nghiệm để thấy sự khác biệt!Cấu trúc
Dominant-Baseline: text-top;
Ví dụ
```html
<style>
body {
font-family: sans-serif;
}
.container {
width: 200px;
height: 200px;
border: 1px solid black;
}
.text-top {
dominant-baseline: text-top;
font-size: 20px;
}
</style>
<body>
<div class="container">
<span class="text-top">Text Top</span>
</div>
</body>
</html>
```
Output
Ví dụ về giá trị inherit trong Dominant-Baseline
Giá trị `inherit` trong thuộc tính `dominant-baseline` của CSS có nghĩa là phần tử kế thừa giá trị của thuộc tính này từ phần tử cha của nó. Điều này giúp cho việc căn chỉnh văn bản trở nên dễ dàng hơn, nhất là khi bạn đang làm việc với nhiều lớp lồng nhau. Nó giúp giữ cho sự nhất quán về cách hiển thị văn bản trên toàn bộ trang web. Bạn không cần phải đặt lại thuộc tính này cho từng phần tử con nếu muốn chúng có cùng kiểu căn chỉnh. Việc sử dụng `inherit` giúp tiết kiệm thời gian và code của bạn gọn gàng hơn.Cấu trúc
Dominant-Baseline: inherit;
Ví dụ
```html<html>
<head>
<style>
body {
font-family: sans-serif;
}
.container {
display: flex;
align-items: center;
}
.parent {
dominant-baseline: middle; /* Dominant-baseline của phần tử cha */
font-size: 24px;
}
.child {
dominant-baseline: inherit; /* Kế thừa dominant-baseline từ cha */
font-size: 16px;
color: blue;
}
</style>
</head>
<body>
<div class="container">
<div class="parent">
Parent Text
<div class="child">Child Text</div>
</div>
</div>
</body>
</html>
```
Output
Ví dụ về giá trị initial trong Dominant-Baseline
Thuộc tính `dominant-baseline` trong CSS điều khiển cách văn bản căn chỉnh dọc. Giá trị `initial` của nó đặt văn bản về vị trí mặc định, thường là căn giữa theo đường cơ sở. Điều này đảm bảo văn bản hiển thị tự nhiên, dễ đọc trên hầu hết các trình duyệt. Bạn có thể điều chỉnh giá trị này để tùy chỉnh vị trí văn bản theo nhu cầu thiết kế của mình. Việc hiểu thuộc tính này giúp bạn tạo bố cục trang web chuyên nghiệp hơn.Cấu trúc
Dominant-Baseline: initial;
Ví dụ
<html>
<head>
<style>
.text1 {
dominant-baseline: initial; /* Giá trị initial của dominant-baseline là alphabetic */
font-size: 20px;
}
.text2 {
dominant-baseline: middle;
font-size: 20px;
}
</style>
</head>
<body>
<div class="text1">Text with initial dominant-baseline (alphabetic)</div>
<div class="text2">Text with dominant-baseline: middle</div>
</body>
</html>
Output
Ví dụ về giá trị revert trong Dominant-Baseline
Thuộc tính `dominant-baseline` trong CSS giúp căn chỉnh văn bản dọc. Giá trị `revert` sẽ đặt lại kiểu căn chỉnh về mặc định của trình duyệt, tùy thuộc vào font chữ và ngữ cảnh. Nó hữu ích khi bạn muốn loại bỏ các tùy chỉnh căn chỉnh trước đó và sử dụng cài đặt mặc định. Điều này giúp đảm bảo sự nhất quán và dễ dự đoán trong việc hiển thị văn bản. Bạn có thể dùng nó để đơn giản hóa việc thiết kế bố cục phức tạp.Cấu trúc
Dominant-Baseline: revert;
Ví dụ
<html>
<head>
<style>
.container {
font-size: 20px;
text-align: center;
}
.dominant-baseline-revert {
dominant-baseline: revert;
display: inline-block;
background-color: lightblue;
padding: 10px;
border: 1px solid black;
}
.dominant-baseline-middle {
dominant-baseline: middle;
display: inline-block;
background-color: lightgreen;
padding: 10px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="container">
<span class="dominant-baseline-middle">Middle</span>
<span class="dominant-baseline-revert">Revert (inherits from parent)</span>
</div>
</body>
</html>
Output
Ví dụ về giá trị revert-layer trong Dominant-Baseline
Thuộc tính `dominant-baseline` trong CSS giúp căn chỉnh văn bản dọc. Giá trị `revert-layer` đặt lại cách căn chỉnh văn bản về mặc định của trình duyệt. Nó hữu ích khi bạn muốn bỏ qua các thiết lập căn chỉnh trước đó và sử dụng thiết lập mặc định. Điều này giúp đảm bảo tính nhất quán và dễ dự đoán trong việc hiển thị văn bản. Bạn có thể dùng nó để đơn giản hóa việc thiết kế giao diện.Cấu trúc
Dominant-Baseline: revert-layer;
Ví dụ
<html>
<head>
<style>
.container {
font-size: 20px;
text-align: center;
}
.text-above {
dominant-baseline: text-before-edge;
font-size: 16px;
}
.text-below {
dominant-baseline: text-after-edge;
font-size: 16px;
}
.text-middle {
dominant-baseline: middle;
font-size: 16px;
}
.text-central {
dominant-baseline: central;
font-size: 16px;
background-image: url("https://tidadigi.com/images/post/css.jpg");
background-repeat: no-repeat;
background-size: 50px 50px;
background-position: center;
padding: 50px;
}
.text-hanging {
dominant-baseline: hanging;
font-size: 16px;
}
.text-ideographic {
dominant-baseline: ideographic;
font-size: 16px;
}
.text-alphabetic {
dominant-baseline: alphabetic;
font-size: 16px;
}
.revert-layer {
dominant-baseline: revert-layer;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<div class="text-above">text-before-edge</div>
<div class="text-below">text-after-edge</div>
<div class="text-middle">middle</div>
<div class="text-central">central</div>
<div class="text-hanging">hanging</div>
<div class="text-ideographic">ideographic</div>
<div class="text-alphabetic">alphabetic</div>
<div class="revert-layer">revert-layer</div>
</div>
</body>
</html>
Output
Ví dụ về giá trị unset trong Dominant-Baseline
Thuộc tính `dominant-baseline` trong CSS điều khiển cách văn bản căn chỉnh dọc. Giá trị `unset` sẽ khôi phục lại giá trị mặc định của thuộc tính này, tùy thuộc vào trình duyệt và ngữ cảnh. Nói cách khác, nó sẽ sử dụng cách căn chỉnh dọc mặc định của phần tử cha hoặc của chính phần tử đó. Điều này giúp bạn dễ dàng kiểm soát cách văn bản hiển thị mà không cần ghi nhớ các giá trị cụ thể.Cấu trúc
Dominant-Baseline: unset;
Ví dụ
<html>
<head>
<style>
.text1 {
dominant-baseline: middle;
font-size: 20px;
}
.text2 {
dominant-baseline: unset; /* Inherits from parent */
font-size: 20px;
}
.container {
dominant-baseline: central; /* Parent element sets dominant-baseline */
}
</style>
</head>
<body>
<div class="container">
<span class="text1">Middle</span>
<span class="text2">Unset (Inherits Central)</span>
</div>
</body>
</html>
Output
Kết bài cho css Dominant-Baseline property
Tóm lại, thuộc tính dominant-baseline giúp chúng ta căn chỉnh văn bản một cách chính xác hơn, đặc biệt khi làm việc với nhiều dòng chữ hoặc các hình ảnh phức tạp. Hiểu rõ cách sử dụng nó sẽ giúp bố cục thiết kế của bạn trở nên chuyên nghiệp và dễ nhìn hơn rất nhiều. Hãy thử nghiệm với các giá trị khác nhau để tìm ra cách phù hợp nhất cho từng trường hợp cụ thể nhé! Bạn sẽ thấy việc điều chỉnh vị trí văn bản trở nên dễ dàng và hiệu quả hơn đấy.