Bài viết Câu hỏi About RongvangIT
profile Pic
0
0

Đăng ngày:

 

Sửa ngày:

99 Lượt xem

【HTML&CSS】Giải thích về những điểm mà người mới học thường gặp khó khăn trong việc tạo style CSS

HTMLCSS

Chào bạn! Rất vui được gặp bạn!
Trong bài này tôi muốn giới thiệu một số Ví dụ thường gặp và cách giải quyết vấn đề về kiểu dáng mà người mới học thường gặp khi phát triển ứng dụng web với HTML & CSS!

Đối tượng bài viết này

  • Những người gặp vấn đề về việc kiểu dáng với CSS (SCSS)
  • Những người quan tâm đến việc tạo trang web, tạo trang LP (tạo trang web)
  • Những người muốn nâng cao kỹ năng sau khi học cơ bản về HTML & CSS
    • Việc hiểu về kiểu dáng cơ bản của FlexBox sẽ là một điều tốt (đủ để sắp xếp theo chiều ngang và căn giữa).

:::note info
Trong bài viết này, chúng tôi giả định rằng bạn không sử dụng bất kỳ Framework CSS nào như Bootstrap hoặc Tailwind CSS. Nếu bạn đang sử dụng một Framework, hãy lưu ý rằng có thể có những kiểu dáng không mong muốn được áp dụng.
:::

Minh họa 1: Chữ hoặc phần tử không căn giữa

Đầu tiên, hãy xem xét việc căn giữa các phần tử để làm lại và đồng thời làm bài kiểm tra lại.

Khi muốn căn giữa một phần tử, điều quan trọng là phải xem xét phần tử mà bạn đang áp dụng là gì. Một số phần tử đại diện phổ biến bao gồm:

Phần tử khối (Block Elements)

  • Có vai trò tổng hợp văn bản hoặc nội dung, có thể chỉ định chiều rộng, chiều cao và khoảng trắng.
    • (Ví dụ: thẻ div, thẻ p, thẻ ul, v.v.)

Phần tử nội dung (Inline Elements)

  • Được coi là nội dung bên trong phần tử khối. Khác với phần tử khối, chúng không thể chỉ định chiều rộng, chiều cao và khoảng trắng.
    • (Ví dụ: thẻ a, thẻ span, thẻ i, v.v.)

Hãy xem xét ví dụ dưới đây với hai phần tử:

<!-- index.html -->
<body>
    <div class="container">
        <div class="box"></div>
        <span class="text">Mẫu</div>
    </div>
</body>
/* style.css */
.container {
    width: 100%;
    height: 100%;
}

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
}

.text {
    font-size: 32px;
    color: red;
}

image.png

Trong Ví dụ này, chúng ta sẽ giữ giữa hai phần tử div và span.

Đối với thẻ div (phần tử khối)

Đầu tiên, đối với thẻ div, đây là một phần tử khối. Để căn giữa phần tử khối, hãy thêm thuộc tính margin: 0 auto;.

.box {
    width: 200px;
    height: 200px;
    background-color: blue;
    margin: 0 auto; /* Thêm vào */
}

image.png

Phần tử giữa đã được căn giữa! Cả đoạn sau đây sẽ giải thích vì sao margin: 0 auto; giúp căn giữa.

margin: 0 auto; có hai giá trị, mỗi giá trị đại diện cho top-bottom left-right. Giải phân tích thành các thuộc tính riêng lẻ:

.box {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
}

Quan trọng ở đây là việc áp dụng auto cho leftright:

.box {
    margin-left: auto;
    margin-right: auto;
}

Khi áp dụng auto cho cả margin-leftmargin-right, nó sẽ thêm lề đều hai bên, tạo ra việc căn giữa.

Đặc biệt, margin-left: auto; có thể được sử dụng để căn giữa bên phải, vì vậy hãy nhớ điều này!

.box{
    width: 200px;
    height: 200px;
    background-color: blue;
    margin-left: auto;
}

Khi áp dụng mã này, thẻ div của lớp “box” sẽ hoạt động như sau:
image.png

Nó đã được căn phải!
Nói cách khác, việc áp dụng auto cho cả left và right đồng thời sẽ khiến chúng tương tác ở giữa và dẫn đến căn giữa.

Đặc biệt, việc sử dụng margin-left: auto; có thể được sử dụng để thực hiện tạo kiểu canh phải, vì vậy hãy nhớ nó và giữ trong đầu của bạn!

Đối với thẻ span (phần tử nội dung)

Tiếp theo, hãy xem xét việc căn giữa phần tử span.

Phần tử span là một phần tử nội dung, và để căn giữa phần tử nội dung, hãy áp dụng text-align: center; cho phần tử cha.

.container {
    width: 100%;
    height: 100%;
    text-align: center; /* Thêm vào */
}

image.png

Phần tử giữa đã được căn giữa! Quan trọng ở đây là áp dụng text-align: center; cho phần tử cha của phần tử cần giữa. Đối với phần tử nội dung như span, việc áp dụng trực tiếp vào span không thể giữa được.

※ Bạn cũng có thể sử dụng display để chuyển đổi phần tử span thành phần tử khối, nhưng trong bài viết này, chúng tôi sẽ bỏ qua điều này.

Mở rộng: Khi margin: 0 auto; không làm cho phần tử khối giữa

Đôi khi, khi áp dụng margin: 0 auto; cho phần tử khối mà không giữa được. Hãy xem xét mã nguồn sau:

<!-- index.html -->
<body>
    <div class="container">
        <div class="inner">
            <div class="box"></div>
        </div>
    </div>
</body>
.container {
    width: 100%;
    height: 100%;
}

.inner {
    width: 200px;
}

.box {
    width: 200px;
    height: 200px;
    background-color: green;
}

image.png

Trong Ví dụ này, áp dụng margin: 0 auto; cho box class không làm cho nó giữa được và nó không chuyển động một chút nào. Tại sao lại như vậy?
Điều này là do chiều rộng của phần tử con (box class) và chiều rộng của phần tử cha (inner class) bằng nhau.

Việc áp dụng margin để giữa làm cho nó giữa dựa trên chiều rộng của phần tử cha. Nếu chiều rộng của phần tử cha quá hẹp, nó có thể không giữa theo cách bạn mong muốn. Trong Ví dụ này, vì chiều rộng của phần tử cha và phần tử con đều là 200px, nó không làm cho phần tử con giữa.

Đối với Ví dụ này, hãy áp dụng margin: 0 auto; cho phần tử cha (inner class) hoặc áp dụng width: 100%; cho inner class để đảm bảo chiều rộng, sau đó áp dụng margin: 0 auto; cho box class.

Vấn đề trong Ví dụ này thường xảy ra khi cấu trúc lồng nhau của HTML trở nên phức tạp. (Tôi cũng thường xuyên gặp phải nó)

Việc hiểu rõ về chiều rộng và cấu trúc của phần tử cha là rất quan trọng.

Minh họa 2: Đặt văn bản lên trên hình ảnh

Tiếp theo, chúng ta sẽ xem xét một Ví dụ như sau:

image.png

Đây là một kiểu tạo kiểu đặt hình ảnh lên trên hình nền thường xuất hiện trên trang chủ của trang web doanh nghiệp hoặc ứng dụng web!

Trong Ví dụ này, chúng ta cần đặt văn bản lên trên hình ảnh, và điều này thường không thể giải quyết được bằng margin hoặc text-align như đã nói trước đó. Do đó, chúng ta sẽ sử dụng thuộc tính position để giải quyết vấn đề.

Giải thích về position

Trước hết, chúng ta sẽ giải thích về thuộc tính position. Dưới đây là một số giá trị mà bạn có thể áp dụng cho thuộc tính position:

  • relative: Đặt vị trí tương đối với vị trí hiện tại.
  • absolute: Đặt vị trí tuyệt đối so với vị trí của phần tử cha.
  • fixed: Đặt phần tử ở một vị trí cố định trên màn hình.

Chỉ nói vậy có thể khiến bạn thấy bối rối, vì vậy chúng ta sẽ giải thích thêm một chút.

position: relative;

Đầu tiên, về relative, nó liên quan đến việc di chuyển từ vị trí ban đầu bao nhiêu.

Ví dụ, hãy xem xét việc di chuyển hình ảnh chó Shiba dưới đây.

image.png

<!-- index.html -->
<body>
    <div class="container">
        <div class="box box1"></div>
        <div class="box box2"></div>
        <img class="shiba" src="./img/shiba.jpg" alt="Shiba Inu">
        <div class="box box3"></div>
        <div class="box box4"></div>
    </div>
</body>
/* style.css */
body{
    margin: 0;
}
p{
    margin: 0;
    padding: 0;
}

.box{
    width: 100%;
    height: 50px;
}
.box1{
    background-color: green;
}
.box2{
    background-color: blue;
}
.box3{
    background-color: orange;
}
.box4{
    background-color: pink;
}

.shiba{
    width: 200px;
    height: auto;
    vertical-align: top;
}

Thêm thuộc tính position: relative; cho lớp shiba, và chúng ta sẽ di chuyển nó xuống và sang phải mỗi 50px.

.shiba{
    /* Thêm vào */
    position: relative;
    top: 50px;
    left: 50px;

    ...Tiếp theo là n đi...
}

Kết quả là hình ảnh di chuyển như sau.

image.png

Như vậy, relative quyết định việc di chuyển từ vị trí ban đầu.

position: absolute;

Đối với hình ảnh Shiba trước đó, chúng ta sẽ áp dụng position: absolute; và thực hiện cùng một chuyển động như relative.

.shiba{
    /* Thêm vào */
    position: absolute;
    top: 50px;
    left: 50px;

    ...Tiếp theo là n đi...
}

Kết quả sẽ như sau.

image.png

Khác biệt so với lần trước, bạn có thể thấy rằng vị trí ở góc trên bên trái của hình ảnh đã thay đổi sang đường màu xanh. Khi sử dụng position: absolute;, vị trí được xác định dựa trên điểm góc trái trên của phần tử cha, do đó, điểm xuất phát là góc trái trên của đường màu xanh, và từ đó di chuyển xuống và sang phải mỗi lần là 50px.

:::note info
Khi bạn đã áp dụng position: relative; cho phần tử cha, có một đặc tính là điểm cơ sở của absolute sẽ thay đổi thành góc trái trên của phần tử cha đã thêm relative.

Thường thì khi sử dụng absolute, người ta thường áp dụng relative cho phần tử cha.
:::

Một chút lạc hướng, nhưng bây giờ chúng ta sẽ xem xét lại ví dụ của chúng ta.

Xem xét lại ví dụ.

Sau khi đã giải thích về position, bây giờ chúng ta sẽ xem xét lại ví dụ của chúng ta.

image.png

Mã nguồn của hình ảnh trên được tổ chức như sau.

<!-- index.html -->
<body>
    <div class="container">
        <div class="inner">
            <p class="mv-text">
                新しいソリューション
                <br>
                xxx株式会社
            </p>
        </div>
    </div>
</body>
/* style.css */
p{
    margin: 0;
    padding: 0;
}

.inner{
    position: relative;
    background: url(./img/background.jpg) no-repeat center center /cover;
    height: 600px;
}

.mv-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 50px;
    font-weight: bold;
    text-align: center;
    font-family: 'Times New Roman', serif;
}

Trong đó, đoạn mã quan trọng là đoạn sau.

.inner{
    position: relative;
}

.mv-text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Khi bạn muốn chồng chéo văn bản lên hình nền, bạn sẽ áp dụng position: relative; cho phần tử chứa hình nền (.inner) và position: absolute; cho phần tử di chuyển (.mv-text). Như vậy, điểm khởi đầu của văn bản sẽ là góc trái trên của hình nền, và sau đó, bạn chỉ cần điều chỉnh top và left là 50% để chuyển văn bản vào giữa.

Tuy nhiên, nếu chỉ áp dụng top và left mà không áp dụng width và height, văn bản sẽ bị dịch sang phải một chút.

image.png

Điều này là do đang sử dụng góc trái trên của phần tử làm điểm cơ sở cho vị trí, nên góc trái trên của văn bản đang ở giữa hình ảnh.

image.png

Do đó, chúng ta sử dụng thuộc tính transform để di chuyển một phần trở lại 50% theo cả chiều rộng và chiều cao.

transform: translate(-50%, -50%);

Như vậy, văn bản sẽ được di chuyển vào giữa màn hình!!

Bonus

Khi bạn đặt vị trí của position bằng top, bottom, left, right, bạn có thể sử dụng inset property để đặt cùng một lúc.
Thứ tự ứng dụng là “top, right, bottom, left” (từ trên xuống dưới theo chiều kim đồng hồ).

inset: 50% 0 0 50%; /* top, right, bottom, left */

Minh họa 3: Không thể căn giữa khi sử dụng Flexbox để xếp theo chiều dọc

Cuối cùng, chúng ta sẽ giới thiệu về một case phức tạp hơn một chút.

Một trong những cách để giữa các phần tử là sử dụng Flexbox. Để sử dụng nó, bạn cần áp dụng display: flex; cho phần tử được áp dụng, và cũng thêm justify-content: center; để căn giữa theo chiều ngang.

Ví dụ, chúng ta sẽ xếp theo chiều ngang 4 hình ảnh như sau.

image.png

<!-- index.html -->
<div class="flex-container">
    <div class="box">
        <img class="content" src="./img/dog1.jpg" alt="">
    </div>

    <div class="box">
        <img class="content" src="./img/dog2.jpg" alt="">
    </div>

    <div class="box">
        <img class="content" src="./img/dog3.jpg" alt="">
    </div>

    <div class="box">
        <img class="content" src="./img/dog4.jpg" alt="">
    </div>
</div>

Mỗi hình ảnh trong các box được đặt trong một phần tử có class là .box, và chúng lại được đặt trong một container có class là .flex-container.

/* style.css */
.flex-container{
    display: flex;
    gap: 10px;
    height: 500px;
}

Với cấu hình trên, các phần tử sẽ được xếp theo chiều ngang.

:::note info
gap là một thuộc tính cho phép bạn chỉ định khoảng trống giữa các item hoặc cột trong một flex container.
Khác với margin hoặc padding, gap không tạo ra khoảng trống ở đầu và cuối của dòng hoặc cột, giúp tối ưu hóa thiết kế của bạn.
:::

image.png

Để căn giữa khi đã áp dụng flex, bạn có thể sử dụng justify-content: center; cho phần tử đang áp dụng flex.

/* style.css */
.flex-container {
    display: flex;
    justify-content: center; /* Thêm vào */
    gap: 10px;
    height: 500px;
}

image.png

Nếu bạn muốn căn giữa cả theo chiều dọc, bạn cũng có thể thêm align-items: center; vào.

/* style.css */
.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;  /* Thêm vào */
    gap: 10px;
    height: 500px;
}

image.png

Vấn đề trong case này

Dưới đây là vấn đề mà chúng ta sẽ giải quyết.
Vấn đề trong Ví dụ này là xếp theo chiều dọc và muốn căn giữa các phần tử.

Khi bạn muốn xếp theo chiều dọc, bạn sẽ thêm flex-direction: column;.

/* style.css*/
.flex-container{
    display: flex;
    flex-direction: column; 
    gap: 10px;
    height: 500px;
}

image.png

Đã quay lại cấu hình ban đầu!

Tuy nhiên, khi áp dụng justify-content: center;, nó không làm cho các phần tử trung tâm.

.flex-container{
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-direction: column;
    height: 500px;
}

image.png

Hãy cùng tìm hiểu nguyên nhân.

Nguyên nhân vấn đề này

Lần này, nguyên nhân không làm cho trung tâm hoạt động không theo đúng giữa là do đặc tính của flex-direction: column;. Trước hết, chúng ta sẽ xem xét Ví dụ khi không áp dụng flex-direction: column;.

image.png

Như bạn thấy, các mục được xếp ngang và có cảm giác trục chính được châm ngang. Chúng ta sẽ thực hiện các di chuyển như căn giữa dựa trên trục chính đang châm ngang giữa này.

Ngược lại, khi áp dụng flex-direction: column;, trục chính của mục flex sẽ trở thành như sau:

image.png

Như bạn thấy, trục chính của mục flex đã quay 90 độ! Nói cách khác, nhiệm vụ của justify-content và align-items có thể tổng hợp như sau:

  • justify-content: Chỉ định vị trí theo hướng song song đối với trục chính.
  • align-items: Chỉ định vị trí theo hướng chéo (dọc) đối với trục chính.

Vấn đề không trung tâm trong Ví dụ này là nếu bạn nhớ rằng justify-content quyết định vị trí theo chiều ngang trục chính, thì vấn đề sẽ xuất hiện khi áp dụng flex-diretion: column.

Khi bạn đặt flex-diretion: column, trục chính quay 90 độ, vì vậy bạn có thể sử dụng align-items để xác định vị trí theo chiều dọc và căn giữa!

.flex-container {
    height: 500px;
    display: flex;
    gap: 10px;
    align-items: center; /* Sửa đổi */
    flex-direction: column;
}

image.png

Chúng ta đã thành công trong việc căn giữa!!
Như vậy, khi sử dụng flex-direction, hãy nhớ rằng hành vi có thể thay đổi, vì vậy hãy nhớ điều này!

Cuối cùng

Cho đến nay, chúng ta đã tóm tắt về các vấn đề trong việc tạo kiểu có thể khiến người mới học gặp khó khăn!
Ngôn ngữ đánh dấu như HTML & CSS có vẻ đơn giản nhìn vào, nhưng thực sự là một ngôn ngữ phức tạp.
Ngoài ra, phát triển ứng dụng web thường chủ yếu tập trung vào việc nghiên cứu phía sau, và việc học HTML và CSS thường bị đặt sau.

Tuy nhiên, để người dùng sử dụng, việc tạo ra giao diện người dùng đẹp và thân thiện là quan trọng! Hãy sử dụng cơ hội này để tiến triển trong việc học ngôn ngữ đánh dấu!

Cảm ơn bạn đã đọc đến đây!
Nếu bạn có thể xem qua các chủ đề khác trong lịch mở hộp, đó sẽ là điều tuyệt vời!

Bình luận

Bài viết chưa có bình luận. Hãy trở thành người bình luận đầu tiên!
Sign up for free and join this conversation.
Sign Up
If you already have a RongvangIT account Login
Danh sách thư mục
Bắt đầu ngay với RồngVàngIT - nền tảng chia sẻ kiến thức lập trình tuyệt vời cho kỹ sư Việt Nam!

Hãy đăng nhập để sử dụng hàng loạt các chức năng tuyệt vời của RồngVàngIT !

  1. 1. Bạn sẽ nhận được các bài viết phù hợp bằng chức năng theo dõi tag và người dùng.
  2. 2. Bạn có thể đọc lại các thông tin hữu ích bằng chức năng lưu trữ nội dung.
  3. 3. Chia sẻ kiến thức, đặt câu hỏi và ghi lại quá trình trưởng thành của mình cùng RồngVàngIT !
Tạo tài khoản Đăng nhập
profile Pic