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 4: Định dạng văn bản, danh sách và bảng

1. Định dạng văn bản

CSS cung cấp nhiều thuộc tính để định dạng văn bản, giúp nội dung trở nên dễ đọc và hấp dẫn hơn. Điều này rất quan trọng trong thiết kế web để cải thiện trải nghiệm người dùng.

a. Thuộc tính font-family

  • Dùng để thiết lập kiểu chữ cho văn bản.
  • Có thể sử dụng nhiều giá trị, cách nhau bởi dấu phẩy, để trình duyệt chọn font phù hợp.
  • Nếu font đầu tiên không có, trình duyệt sẽ thử font tiếp theo.

Ví dụ:

p {
    font-family: Arial, Helvetica, sans-serif;
}

b. Thuộc tính font-size

  • Xác định kích thước chữ.
  • Đơn vị có thể là px, em, %, rem, vw, vh...
  • em và rem giúp kích thước chữ linh hoạt theo cài đặt của trình duyệt.

Ví dụ:

h1 {
    font-size: 24px;
}

c. Thuộc tính font-weight

  • Quy định độ đậm của chữ.
  • Giá trị phổ biến: normal, bold, lighter, bolder, hoặc số từ 100 đến 900 (trong đó 400 là normal, 700 là bold).

Ví dụ:

strong {
    font-weight: bold;
}

d. Thuộc tính line-height

  • Điều chỉnh khoảng cách giữa các dòng văn bản.
  • Có thể dùng giá trị normal, số, %, px, em...
  • Thường dùng giá trị 1.5 hoặc 2 để dễ đọc hơn.

Ví dụ:

p {
    line-height: 1.5;
}

e. Thuộc tính text-align

  • Căn chỉnh văn bản theo các hướng: left, right, center, justify.
  • justify: Căn đều hai bên.

Ví dụ:

div {
    text-align: justify;
}

2. Định dạng danh sách (List)

CSS cung cấp các thuộc tính để kiểm soát cách hiển thị danh sách:

a. Thuộc tính list-style-type

  • Xác định kiểu dấu đầu dòng cho danh sách.
  • Giá trị phổ biến:
    • disc: Hình tròn đậm mặc định.
    • circle: Hình tròn rỗng.
    • square: Hình vuông.
    • none: Không có dấu đầu dòng.
    • decimal: Số thứ tự (1, 2, 3, ...).
    • lower-roman: Số La Mã viết thường (i, ii, iii, ...).
    • upper-roman: Số La Mã viết hoa (I, II, III, ...).
    • lower-alpha: Chữ cái viết thường (a, b, c, ...).
    • upper-alpha: Chữ cái viết hoa (A, B, C, ...).

Ví dụ:

ul {
    list-style-type: square;
}

b. Thuộc tính list-style-position

  • Xác định vị trí dấu đầu dòng: inside hoặc outside.
  • inside: Dấu đầu dòng nằm trong phần nội dung.
  • outside: Dấu đầu dòng nằm ngoài lề văn bản (mặc định).

Ví dụ:

ul {
    list-style-position: inside;
}

c. Thuộc tính list-style-image

  • Sử dụng hình ảnh thay cho dấu đầu dòng.

Ví dụ:

ul {
    list-style-image: url('icon.png');
}

d. Danh sách lồng nhau (Nested List)

  • Có thể tạo danh sách con bên trong danh sách cha.

Ví dụ:

<ul>
    <li>Mục 1
        <ul>
            <li>Mục 1.1</li>
            <li>Mục 1.2</li>
        </ul>
    </li>
    <li>Mục 2</li>
</ul>

3. Định dạng bảng (Table)

Bảng là một phần quan trọng trong thiết kế web. CSS giúp điều chỉnh bảng để dễ nhìn hơn.

a. Thuộc tính border

  • Thiết lập viền cho bảng và ô trong bảng.
  • Sử dụng border-collapse: collapse; để gộp viền thành một.

Ví dụ:

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}

b. Thuộc tính padding

  • Xác định khoảng cách giữa nội dung và viền ô.

Ví dụ:

td {
    padding: 10px;
}

c. Thuộc tính text-align và vertical-align

  • text-align: Căn chỉnh nội dung theo chiều ngang (left, center, right).
  • vertical-align: Căn chỉnh theo chiều dọc (top, middle, bottom).

Ví dụ:

th, td {
    text-align: center;
    vertical-align: middle;
}

d. Thuộc tính background-color

  • Thiết lập màu nền cho bảng hoặc từng ô.

Ví dụ:

table {
    background-color: #f2f2f2;
}
th {
    background-color: #ddd;
}

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

  • Quy định chiều rộng và chiều cao của bảng.
  • width: auto; giúp bảng tự động điều chỉnh theo nội dung.
  • Dùng %, vw/vh để thiết lập kích thước linh hoạt.

Ví dụ:

table {
    width: 100%;
}
th, td {
    height: 50px;
}

Kết luận

Việc sử dụng các thuộc tính CSS để định dạng văn bản, danh sách và bảng 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;
        }

            .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" />
    </section> 
    <img class="call" src="https://cdn-icons-png.flaticon.com/512/9073/9073336.png" />
</body>
</html>
 

1. Thiết kế trang web như hình ảnh (Sử dụng luôn code bài trước, thay thế phần table)

- Tập trung làm css cho table

- Menu sử dụng ul, li, thay đổi nền khi hover

2. Nộp file html và css đính kèm