Cơ bản về CSS: Bộ chọn và Thuộc tính Văn bản

Cấu trúc của CSS

Một quy tắc CSS được cấu thành từ bộ chọn (selector) và khối khai báo (declaration block). Bộ chọn dùng để xác định phần tử HTML cần styling, trong khi khối khai báo chứa các thuộc tính và giá trị tương ứng.

Các bộ chọn cơ bản trong CSS

CSS cung cấp nhiều loại bộ chọn để nhắm mục tiêu các phần tử. Dưới đây là các bộ chọn cơ bản nhất:

1. Bộ chọn phần tử (Element Selector)

Bộ chọn này nhắm trực tiếp vào tên thẻ HTML. Ví dụ sau sẽ áp dụng cho toàn bộ thẻ <p> trong trang:

p {
    color: #333;
    font-size: 16px;
}

Tuy nhiên, phương pháp này sẽ ảnh hưởng đến tất cả các thẻ cùng loại, không thể tùy chỉnh riêng biệt.

2. Bộ chọn lớp (Class Selector)

Đây là bộ chọn phổ biến nhất, cho phép styling các phần tử một cách linh hoạt. Cú pháp bắt đầu bằng dấu chấm (.):

.box-primary {
    background-color: #f0f0f0;
    padding: 20px;
}

Để sử dụng, thêm thuộc tính class vào thẻ HTML:

<div class="box-primary">Nội dung bên trong</div>

Lưu ý quan trọng: Nên đặt tên class bằng tiếng Anh hoặc ký tự chữ cái, tránh dùng số thuần túy hoặc ký tự đặc biệt ở đầu.

Đa lớp (Multiple Classes)

Một phần tử có thể nhận nhiều class cùng lúc, cách nhau bằng khoảng trắng:

<div class="box-primary text-center">Nội dung</div>

3. Bộ chọn ID (ID Selector)

ID sử dụng dấu # và có tính duy nhất trong một trang:

#main-header {
    background: #2c3e50;
    color: white;
}

<header id="main-header">Tiêu đề trang</header>

Khác với class, một ID chỉ được sử dụng một lần duy nhất trong mỗi tài liệu HTML.

4. Bộ chọn đại diện (Universal Selector)

Ký tự * đại diện cho mọi phần tử trên trang:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

Thuộc tính Font chữ

CSS cung cấp các thuộc tính để điều chỉnh font chữ:

Thuộc tínhChức năng
font-familyXác định họ font chữ, có thể liệt kê nhiều font dự phòng
font-sizeThiết lập kích thước chữ
font-weightĐiều chỉnh độ đậm của chữ (normal, bold, hoặc số 100-900)
font-styleKiểu chữ: normal, italic, oblique

Cú pháp viết tắt (Shorthand)

Có thể gộp các thuộc tính font vào một dòng, nhưng bắt buộc phải tuân thủ thứ tự:

.paragraph {
    font: italic bold 18px/1.6 'Roboto', sans-serif;
}

Thứ tự: font-style → font-weight → font-size/line-height → font-family. Trong đó font-size và font-family là bắt buộc.

Thuộc tính Văn bản

Thuộc tínhMục đíchVí dụ giá trị
colorMàu văn bản#ff0000, rgb(255,0,0)
text-alignCăn lề văn bảnleft, right, center, justify
text-decorationTrang trí dòng văn bảnnone, underline, line-through
text-indentThụt đầu dòng2em, 30px
line-heightChiều cao dòng1.5, 24px

Căn lề văn bản

.center-text {
    text-align: center;
}

.align-right {
    text-align: right;
}

Trang trí văn bản

Thuộc tính text-decoration thường được dùng để loại bỏ gạch chân mặc định của đường dẫn:

a {
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

Thụt đầu dòng

Đơn vị em là lựa chọn lý tưởng vì nó tương đối với kích thước font hiện tại:

article p {
    text-indent: 2em;
}

Chiều cao dòng

line-height kiểm soát khoảng cách giữa các dòng văn bản, bao gồm cả khoảng cách trên và dưới:

p {
    line-height: 1.8;
}

Phương pháp chèn CSS

Có ba cách để đưa CSS vào tài liệu HTML:

  1. Nội tuyến (Inline): Viết trực tiếp trong thuộc tính style của thẻ HTML
  2. Nội bộ (Internal): Đặt trong thẻ <style> bên trong <head>
  3. Ngoài tuyến (External): Liên kết file .css riêng biệt qua thẻ <link>

Phương pháp External được khuyến khích vì giúp tách biệt hoàn toàn giữa cấu trúc (HTML) và trình bày (CSS):

<link rel="stylesheet" href="styles/main.css">

Ví dụ thực hành

Dưới đây là một trang bài viết tin tức đơn giản:

File HTML:

<!DOCTYPE html>
<html lang="vi">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tin tức Công nghệ</title>
    <link rel="stylesheet" href="article-style.css">
</head>
<body>
    <article class="news-article">
        <h1 class="headline">Xu hướng Công nghệ 2024</h1>
        <div class="meta-info">
            <span class="date">15/01/2024</span>
            <span class="source">— Tạp chí Khoa học</span>
        </div>
        <hr class="divider">
        
        <p class="intro">Năm 2024 đánh dấu sự bùng nổ của AI tạo sinh trong mọi lĩnh vực đời sống.</p>
        
        <p>Theo báo cáo từ các tổ chức nghiên cứu hàng đầu, thị trường AI toàn cầu dự kiến đạt giá trị 500 tỷ USD vào cuối năm nay.</p>
        
        <p>Các công ty công nghệ lớn như Google, Microsoft, và OpenAI đang chạy đua phát triển các mô hình ngôn ngữ lớn thế hệ mới với khả năng xử lý đa phương thức vượt trội.</p>
        
        <figure class="image-container">
            <img src="tech-trends.jpg" alt="Biểu đồ xu hướng công nghệ">
        </figure>
        
        <h2 class="subheading">Tác động đến thị trường lao động</h2>
        
        <p>Các chuyên gia dự đoán khoảng 40% công việc văn phòng sẽ có sự hỗ trợ từ AI trong vòng 5 năm tới. Điều này đặt ra yêu cầu cấp thiết về đào tạo lại kỹ năng cho người lao động.</p>
        
        <p>Một thống kê thú vị: <span class="highlight">75%</span> doanh nghiệp tại Việt Nam đã bắt đầu triển khai ít nhất một giải pháp AI trong quy trình vận hành.</p>
        
        <div class="formula-box">
            Hiệu quả = (Tự động hóa + Sáng tạo) × Tốc độ thích nghi
        </div>
        
        <p>Dù còn nhiều thách thức về bảo mật và đạo đức, tương lai của công nghệ AI vẫn là một bức tranh đầy hứa hẹn.</p>
        
        <footer class="credit">
            Nguồn: Viện Nghiên cứu Khoa học Dữ Liệu
        </footer>
    </article>
</body>
</html>

File CSS (article-style.css):

/* Reset cơ bản */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Style cho body */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #2d3436;
    background-color: #fafafa;
}

/* Container bài viết */
.news-article {
    max-width: 750px;
    margin: 40px auto;
    padding: 30px 40px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

/* Tiêu đề chính */
.headline {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    color: #1a1a2e;
    margin-bottom: 12px;
}

/* Thông tin meta */
.meta-info {
    text-align: center;
    color: #636e72;
    font-size: 14px;
    margin-bottom: 20px;
}

/* Dòng kẻ ngang */
.divider {
    border: none;
    height: 1px;
    background: #dfe6e9;
    margin: 15px 0 25px;
}

/* Đoạn văn */
.news-article p {
    text-indent: 1.8em;
    margin-bottom: 18px;
}

/* Đoạn mở đầu */
.intro {
    font-size: 19px;
    font-weight: 500;
    color: #0984e3;
    text-indent: 0;
}

/* Tiêu đề phụ */
.subheading {
    font-size: 22px;
    font-weight: 600;
    color: #2d3436;
    margin: 30px 0 15px;
}

/* Hình ảnh */
.image-container {
    text-align: center;
    margin: 25px 0;
}

.image-container img {
    max-width: 100%;
    border-radius: 6px;
}

/* Ô công thức */
.formula-box {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    text-align: center;
    padding: 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 18px;
    margin: 25px 0;
    text-decoration: underline;
}

/* Từ ngữ nhấn mạnh */
.highlight {
    background: #fff3cd;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
}

/* Phần credit */
.credit {
    text-align: right;
    color: #b2bec3;
    font-size: 14px;
    margin-top: 35px;
    font-style: italic;
}

Thẻ: css CSS Selector font properties text properties CSS cơ bản

Đăng vào ngày 15 tháng 8 lúc 04:01

Thẻ Phổ Biến

©2026 Thành phố Cuồng loạn