Đăng ký tài khoản để xem

Đăng ký Đăng nhập

CSS 4. Định dạng văn bản, list, table

Khóa học: Thiết kế Web với HTML CSS - Giảng viên: Phạm Quang Trường

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>

<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>

<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>

Bài trước

Bài tiếp theo

Tài liệu khóa học

Chưa có tài liệu.

Danh sách bài học

Đăng ký tài khoản để xem

CSS 4. Định dạng văn bản, list, table

CSS 4: Định dạng văn bản, danh sách và bảng

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

a. Thuộc tính font-family

b. Thuộc tính font-size

c. Thuộc tính font-weight

d. Thuộc tính line-height

e. Thuộc tính text-align

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

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

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

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

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

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

a. Thuộc tính border

b. Thuộc tính padding

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

d. Thuộc tính background-color

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

Kết luận

a. Thuộc tính `font-family`

b. Thuộc tính `font-size`

c. Thuộc tính `font-weight`

d. Thuộc tính `line-height`

e. Thuộc tính `text-align`

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

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

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

a. Thuộc tính `border`

b. Thuộc tính `padding`

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

d. Thuộc tính `background-color`

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