Bài 1: Giới thiệu về Trình quản lý quảng cáo

Bài trước Bài tiếp theo

CSS 5: Định dạng ảnh và hộp (Box Model)

1. Định dạng ảnh

Hình ảnh là một phần quan trọng trong thiết kế web. CSS cung cấp nhiều thuộc tính để điều chỉnh kích thước, viền, bo góc của ảnh giúp bố cục trở nên đẹp và hài hòa hơn.

a. Thuộc tính width và height

  • Điều chỉnh chiều rộng (width) và chiều cao (height) của ảnh.
  • Đơn vị có thể là px, %, em, vw, vh, auto.
  • Giá trị auto giúp ảnh giữ nguyên tỉ lệ khung hình khi chỉ định một trong hai thuộc tính width hoặc height.

Ví dụ:

img {
    width: 300px;
    height: auto;
}

b. Thuộc tính border-radius

  • Bo tròn các góc của ảnh.
  • Giá trị có thể là px, %, em.
  • border-radius: 50%; giúp ảnh hiển thị thành hình tròn.

Ví dụ:

img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
}

c. Thuộc tính object-fit

  • Điều chỉnh cách ảnh hiển thị trong khung chứa.
  • Giá trị phổ biến:
    • contain: Hiển thị toàn bộ ảnh mà không bị cắt.
    • cover: Phủ kín khung hình, có thể bị cắt một phần.
    • fill: Kéo giãn ảnh để lấp đầy khung.
    • none: Giữ nguyên kích thước ảnh.

Ví dụ:

img {
    width: 300px;
    height: 200px;
    object-fit: cover;
}

2. Mô hình hộp (Box Model)

Mô hình hộp giúp xác định không gian chiếm dụng của một phần tử trên trang web. Bao gồm:

a. Thuộc tính border

  • Xác định đường viền của phần tử.
  • Cú pháp: border: [độ dày] [kiểu] [màu sắc];
  • Kiểu viền phổ biến: solid, dashed, dotted, double.

Ví dụ:

div {
    border: 2px solid black;
}

b. Thuộc tính padding

  • Xác định khoảng cách giữa nội dung và viền.
  • Đơn vị: px, em, %, auto.

Ví dụ:

div {
    padding: 20px;
}

c. Thuộc tính margin

  • Xác định khoảng cách giữa phần tử với phần tử khác.
  • Giá trị auto có thể dùng để căn giữa.

Ví dụ:

div {
    margin: 10px auto;
}

3. Định dạng Form nhập liệu

Các thẻ nhập liệu như input, textarea, select có thể được tùy chỉnh với CSS để phù hợp với giao diện trang web.

a. Định dạng input

  • Điều chỉnh kích thước, viền, màu sắc, và kiểu chữ.

Ví dụ:

input {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

b. Định dạng textarea

  • Tương tự như input, nhưng có thể chỉnh kích thước theo chiều dọc.

Ví dụ:

textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

c. Định dạng button

  • Điều chỉnh kích thước, màu nền, viền, và hiệu ứng hover.

Ví dụ:

button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

Kết luận

Việc sử dụng các thuộc tính CSS để định dạng ảnh, mô hình hộp và form giúp cải thiện giao diện trang web và nâng cao trải nghiệm người dùng. Hãy thực hành để làm chủ những kỹ thuật này!

CODE BÀI GIẢNG

 

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Code bài 5: chia khung</title>
    <style>
        body {
            font-family: Arial;
        }

        .call {
            position: fixed;
            bottom: 50px;
            right: 50px;
            width: 50px;
            height: 50px;
        }
        /*CSS UL MENU*/
        .menu {
            width: 100%;
            height: 70px;
            position: sticky;
            top: 0px;
            padding-left: 200px;
            padding-right: 200px;
            display: flex;
            box-sizing: border-box;
            align-items: center;
        }

            .menu img {
                height: 60px;
                width: auto;
                left: 200px;
            }

            .menu ul {
                flex: 1;
                text-align: right;
            }

                .menu ul li {
                    display: inline-block;
                    padding: 10px 15px;
                }

                    .menu ul li a {
                        font-weight: 700;
                        color: #515151;
                        text-decoration: none;
                        font-size: 13px
                    }

            .menu button {
                padding: 12px 20px;
                background: #ff6a00;
                color: white;
                border: none;
                border-radius: 30px;
                font-size: 14px;
            }
        /* CSS BANNER*/
        .banner {
            width: 100%;
            height: 600px;
            padding-top: 200px;
            padding-left: 200px;
            box-sizing: border-box;
            position: relative;
            border-bottom: 1px solid #808080
        }

            .banner .hello {
                top: 250px;
                left: 200px;
            }

            .banner h1 {
                top: 0;
                left: 0;
                font-size: 80px;
                line-height: 0;
            }

            .banner h2 {
                top: 150px;
                line-height: 0;
            }


            .banner button {
                padding: 12px 20px;
                background: #ff6a00;
                color: white;
                border: none;
                border-radius: 30px;
                font-size: 14px;
                font-weight: bold;
            }

                .banner button.black {
                    background-color: black;
                }

            .banner .social-box {
                margin-top: 20px;
                display: flex;
            }

                .banner .social-box .social {
                    display: block;
                    border: 2px solid #ff6a00;
                    width: 40px;
                    height: 40px;
                    margin-right: 20px;
                    text-align: center;
                    padding: 10px 10px;
                    box-sizing: border-box;
                    color: #ff6a00;
                    font-weight: bold;
                    border-radius: 20px
                }

                    .banner .social-box .social:hover {
                        background: #ff6a00;
                        color: white;
                        cursor: pointer
                    }

            .banner img {
                position: absolute;
                right: 200px;
                bottom: 0;
                height: 600px
            }
    </style>
</head>
<body>
    <!-- Menu -->
    <section class="menu">
        <img src="logo.svg" />
        <ul>
            <li>
                <a href="#">Home</a>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Service</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Testmonial</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
        <div>
            <button>Components</button>
        </div>
    </section>
    <!-- banner -->
    <section class="banner">
        <div class="hello">
            hello,I'm
        </div>
        <h1>
            James Smith
        </h1>
        <h2>
            UI/UX Designer
        </h2>
        <div>
            <button>HIRE ME</button>
            <button class="black">DOWNLOAD CV</button>
        </div>
        <div class="social-box">
            <a class="social">F</a>
            <a class="social">G</a>
            <a class="social">T</a>
            <a class="social">W</a>
        </div>

        <img src="man.svg" />


        <style>
            .box-counter {
                width: 600px;
                border: 1px solid #e9e9e9;
                padding: 20px;
                height: 70px;
                border-radius: 60px;
                display: flex;
                position: absolute;
                bottom: -55px;
                /*z-index:5;*/
                background: white;
                left: 50%;
                transform: translateX(-50%);
                box-shadow: 3px 0px 20px #e0e0e0;
                align-items: center;
                justify-content: center;
            }

                .box-counter .item {
                    padding:0px 40px;
                    text-align:center;
                    color:#ababab
                }

                .box-counter .counter {
                    font-size: 40px;
                    font-weight: 500;
                    color: #3d3d3d;
                    line-height:50px
                }
        </style>

        <div class="box-counter">
            <div class="item">
                <div class="counter">124</div>
                Happy Clients
            </div>
            <div class="item" style="border-right: 1px solid #e0e0e0; border-left: 1px solid #e0e0e0; ">
                <div class="counter">
                    456
                </div>
                Project Completed
            </div>
            <div class="item">
                <div class="counter">
                    789
                </div>
                Awards Won
            </div>
        </div>
    </section> 
    <!--<div style="width: 300px; height: 450px; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; overflow: hidden; ">
        <img src="artboard.jpg" style="width: 300px; height: 450px;object-fit:cover" />
    </div>-->   
    <img class="call" src="https://cdn-icons-png.flaticon.com/512/9073/9073336.png" />
</body>
</html>
 

1. Làm html và css để có kết quả như ảnh

- Bộ lọc: Sử dụng form và chia khung theo flex

- Danh sách sản phẩm: Mỗi sản phẩm 1 box, có đổ bóng viền cho đẹp

2. Nộp file html và css kèm theo