[Tự học CSS] - Tìm hiểu cách định dạng một bộ phận của phần tử CSS

Mẹo nhỏ: Để tìm kiếm chính xác các ấn phẩm của GiuseArt.com, hãy search trên Google với cú pháp: "Từ khóa" + "giuseart". (Ví dụ: thiệp tân linh mục giuseart). Tìm kiếm ngay

Chào các bạn, mình rất vui khi hôm nay chúng ta lại gặp nhau trong một loạt bài hướng dẫn dùng CSS cơ bản của Giuseart.com. Bài viết này sẽ giúp các bạn hiểu một bộ phận của phần tử trong CSS là gì ? Và cách định dạng chúng ra sao. Hãy theo dõi bài viết để biết thêm thông tin chi tiết về điều mình muốn nói ở đây.

Bộ phận trong CSS là gì ?

Bộ phận tức là một phần nào đó của phần tử. Ví dụ, tôi có phần tử là một đoạn văn như sau:

Trong đó

Bộ phận ký tự đầu tiên của phần tử là: H
Bộ phận dòng đầu tiên của phần tử là: Hướng dẫn học CSS cơ bản từ giuseart.com. Để học tốt thì hãy theo dõi bài viết kỹ nhá, lơ là là
…

Cú pháp định dạng cho một bộ phận của phần tử

bộ chọn::bộ phận{
    thuộc tính 1 : giá trị;
    thuộc tính 2 : giá trị;
    thuộc tính 3 : giá trị;
    .....
    thuộc tính N : giá trị;
}

bộ chọn::bộ phận{

thuộc tính 1 : giá trị;

thuộc tính 2 : giá trị;

thuộc tính 3 : giá trị;

.....

thuộc tính N : giá trị;

}

Bộ phận ::before

Bộ phận ::before là bộ phận nằm ở vị trí ĐẦU TIÊN trong phần nội dung của phần tử

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    p::before{
        content: "^^__^^ ";
    }
    div::before{
        content: "^^__^^ ";
        border:1px solid red;
    }
    </style>
</head>
<body>
    <p>Hướng dẫn học lập trình web</p>
    <div style="border:1px solid black;padding:10px;">Hướng dẫn học lập trình web</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

p::before{

content: "^^__^^ ";

}

div::before{

content: "^^__^^ ";

border:1px solid red;

}

</style>

</head>

<body>

<p>Hướng dẫn học lập trình web</p>

<div style="border:1px solid black;padding:10px;">Hướng dẫn học lập trình web</div>

</body>

</html>

Kết quả :

Bộ phận ::after

Bộ phận ::after là bộ phận nằm ở vị trí CUỐI CÙNG trong phần nội dung của phần tử

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    p::after{
        content: " ^^__^^ ";
    }
    div::after{
        content: " ^^__^^ ";
        border:1px solid red;
    }
    </style>
</head>
<body>
    <p>Hướng dẫn học lập trình web</p>
    <div style="border:1px solid black;padding:10px;">Hướng dẫn học lập trình web</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

p::after{

content: " ^^__^^ ";

}

div::after{

content: " ^^__^^ ";

border:1px solid red;

}

</style>

</head>

<body>

<p>Hướng dẫn học lập trình web</p>

<div style="border:1px solid black;padding:10px;">Hướng dẫn học lập trình web</div>

</body>

</html>

Kết quả :

Bộ phận ::first-line

Bộ phận ::first-line là dòng đầu tiên của đoạn văn bản

Ví dụ :

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p::first-line{
color:red;
}
</style>
</head>
<body>
<p>Giuseart.com, hướng dẫn học lập trình web từ cơ bản đến nâng cao 1, Web cơ bản, hướng dẫn học lập trình web từ cơ bản đến nâng cao 2, Web cơ bản, cơ bản đến nâng cao 6</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

p::first-line{

color:red;

}

</style>

</head>

<body>

<p>Giuseart.com, hướng dẫn học lập trình web từ cơ bản đến nâng cao 1, Web cơ bản, hướng dẫn học lập trình web từ cơ bản đến nâng cao 2, Web cơ bản, cơ bản đến nâng cao 6</p>

</body>

</html>

Kết quả :

Dưới đây là một số loại thuộc tính có thể dùng để định dạng cho bộ phận ::first-line

Các thuộc tính định dạng font chữ
Các thuộc tính background
Thuộc tính color
Thuộc tính word-spacing
Thuộc tính letter-spacing
Thuộc tính text-decoration
Thuộc tính vertical-align
Thuộc tính text-transform
Thuộc tính line-height
Thuộc tính clear

Bộ phận ::first-letter

Bộ phận ::first-letter là Ký tự đầu tiên của đoạn văn bản

Ví dụ :

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
    p::first-letter{
        font-size: 40px;
        color: red;
    }
    </style>
</head>
<body>
    <p>Hướng dẫn học CSS cơ bản từ Giuseart.com</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

p::first-letter{

font-size: 40px;

color: red;

}

</style>

</head>

<body>

<p>Hướng dẫn học CSS cơ bản từ Giuseart.com</p>

</body>

</html>

Kết quả :

Dưới đây là một số loại thuộc tính có thể dùng để định dạng cho bộ phận ::first-letter

Các thuộc tính định dạng font chữ
Các thuộc tính background
Thuộc tính color
Thuộc tính margin
Thuộc tính padding
Thuộc tính border
Thuộc tính vertical-align
Thuộc tính text-transform
Thuộc tính line-height
Thuộc tính float
Thuộc tính clear

Lời Kết

Bài viết hướng dẫn của mình tới đây là hết rồi, mình mong rằng bài viết này sẽ có ích cho các bạn. Nếu có bất kỳ thắc mắc nào liên quan tới bài học thì hãy đừng ngại và comment vào phía dưới bài viết. Cảm ơn các bạn đã theo dõi bài viết !