Có mấy cách sử dụng CSS trong HTML

Trong bài này tôi hướng dẫn bạn 3 cách thêm css vào tài liệu html của website bao gồm inline css, internal css , external css.

Nội dung chính Show

Internal Css
External Css
CSS trực tiếp (Inline CSS)
CSS nội bộ (Internal CSS)
CSS ngoài (External CSS)
Kiểu chữ trong CSS
Mô hình hộp trong CSS
Thuộc tính id
Thuộc tính class
Những thẻ và thuộc tính bị loại bỏ trong HTML5

Inline Css

Đây là cách thêm css trực tiếp trên thẻ html cần định dạng. Tập hợp các style css được khai báo bên trong thuộc tính style của thẻ.

Ưu điểm: Style cho một đối tượng html rất nhanh chóng.

Nhược điểm: Những style css chỉ áp dụng cho một cụ thể, không áp dụng chung cho nhiều thẻ html cùng lúc.

Ví dụ 1: Thiết lập đoạn văn có màu đỏ, chúng ta có thể thiết lập như code bên dưới.

<p style="color: red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, unde?</p>

Internal Css

Đây là cách thêm đoạn code css ở một khu vực riêng trong file html.

Ưu điểm: Phân biệt rõ ràng đoạn code css và những nội dung html còn lại.

Nhược điểm: Những style css chỉ áp dụng được trong phạm vi một file cụ thể nơi mà nó được khai báo. Nó không thể sử dụng chung cho nhiều page khác nhau.

Ví dụ 2: Thiết lập font-size: 18px và color: orange cho thẻ tiêu đề h1.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    h1 {
        color: orange;
        font-size: 18px;
    }
</style>
<h1>Unitop.vn - Học lập trình web đi làm</h1>
</body>
</html>

External Css

Với hình thức này tất cả những code css được đưa vào trong file có đuôi mở rộng .css (ví dụ: main.css).

Ưu điểm: Giúp Css có thể dùng chung cho nhiều page khác nhau của website và dễ dàng quản lý.

Ví dụ bên dưới giúp thiết lập màu sắc cho thẻ p thông qua file main.css

Cấu trúc file thư mục:

index.html
css
----main.css

File main.css nằm trong thư mục

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<style>
    h1 {
        color: orange;
        font-size: 18px;
    }
</style>
<h1>Unitop.vn - Học lập trình web đi làm</h1>
</body>
</html>

p{
    color: #f15c25;
}

Nội dung file index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Unitop.vn - Học lập trình web đi làm</title>
    <link rel="stylesheet" href="css/main.css">
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem doloribus officia reiciendis sed similique sit sunt suscipit tempore! Eaque, possimus?</p>
</body>
</html>

Trong đó dòng code

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

giúp liên kết đến file main.css nằm trong thư mục css của dự án.

Tổng kết

Qua bài này tôi chia sẻ đến bạn 3 cách thêm css vào tài liệu html. Tùy vào từng trường hợp cụ thể bạn có thể lựa chọn cách thích hợp.

Nếu website chỉ có một page bạn có thể sử dụng internal css là đủ. Nhưng nếu dự án có hệ thống file lớn thì bạn nên sử dụng cách external css.

Cách sử dụng phổ biến nhất là chia CSS thành các tệp tin riêng biệt sau đó gọi chúng vào HTML. Nhưng trong bài học này, chúng ta sẽ sử dụng CSS nội bộ vì nó dễ minh họa hơn và bạn cũng thực hành dễ hơn.

Bạn có thể học nhiều hơn về CSS trong phần Học CSS

CSS trực tiếp (Inline CSS)

Kiểu viết CSS trực tiếp chỉ hữu dụng khi sử dụng một kiểu trang trí cho một thành thẻ trong HTML.

CSS trực tiếp được viết thông qua thuộc tính style.

Đoạn CSS sau thay đổi màu chữ của một đề mục:

<!DOCTYPE html>

<html>

<body>

</body>

</html>

Demo

CSS nội bộ (Internal CSS)

Sử dụng CSS nội bộ có thể trang trí cho tất cả các thành phần trong trang HTML.

CSS nội bộ được viết trong phần <head> của một trang HTML, sử dụng thẻ <style>:

<!DOCTYPE html>

<html>

<head>

<style>

body {background-color:lightgrey}

h1 {color:blue}

p {color:green}

</style>

</head>

<body>

</body>

</html>

Demo

CSS ngoài (External CSS)

Hãy tưởng tượng, bạn có rất nhiều trang HTML có cùng kiểu trang trí, nếu sử dụng CSS nội bộ hoặc CSS trực tiếp bạn sẽ phải lặp đi lặp lại ở mỗi trang. Khi bạn muốn thay đổi cách trang trí của một thành phần nào đó, bạn phải sửa trên tất cả các trang.

CSS ngoài đặc biệt hữu dụng khi bạn cần cách trang trí sử dụng cho nhiều trang. Bạn có thể thay đổi kiểu trang trí trên tất cả các trang bằng cách thay đổi một tệp tin CSS duy nhất.

CSS ngoài được viết vào một tệp tin .css và được gọi vào trang HTML thông qua phần <head>:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Demo

Kiểu chữ trong CSS

Thuộc tính color trong CSS quy định màu chữ được sử dụng trong các thành phần của HTML.

Thuộc tính font-family trong CSS quy định kiểu chữ được sử dụng trong các thành phần của HTML.

Thuộc tính font-size trong CSS quy định cỡ chữ được sử dụng trong các thành phần của HTML.

<!DOCTYPE html>

<html>

<head>

<style>

h1 {

color:blue;

font-family:Tahoma;

font-size:200%;

}

p {

color:red;

font-family:Arial;

font-size:120%;

}

</style>

</head>

<body>

</body>

</html>

Demo

Mô hình hộp trong CSS

Mỗi thành phần trong HTML đều có một khung bao bao quanh, ngay cả khi bạn không nhìn thấy nó.

Thuộc tính border trong CSS quy định cách hiển thị đường viền bao quanh một thành phần HTML:

<!DOCTYPE html>

<html>

<head>

<style>

p {

border:1px solid grey;

}

</style>

</head>

<body>

</body>

</html>

Demo

Thuộc tính padding trong CSS quy định khoảng cách từ đường viền đến các thành phần bên trong:

<!DOCTYPE html>

<html>

<head>

<style>

p {

border:1px solid grey;

padding:10px;

}

</style>

</head>

<body>

</body>

</html>

Demo

Thuộc tính margin trong CSS quy định khoảng cách từ đường viền đến các thành phần bên ngoài:

<!DOCTYPE html>

<html>

<head>

<style>

p {

border:1px solid grey;

padding:10px;

margin:30px;

}

</style>

</head>

<body>

</body>

</html>

Demo

CSS trong các ví dụ ở trên sử dụng đơn vị đo là pixels, ký hiệu là px.

Thuộc tính id

Tất cả các ví dụ bên trên đều sử dụng CSS để trang trí các thành phần trong HTML theo cách thông thường.

Để áp dụng một kiểu trang trí cho một thành phần đặc biệt, đầu tiên ta sẽ thêm thuộc tính id vào thành phần đó:

<p id="element1">Đoạn văn bản có thuộc tính id</p>

sau đó ta sẽ định nghĩa kiểu trang trí cho thành phần đó:

<!DOCTYPE html>

<html>

<head>

<style>

p#element1 {

color: blue;

}

</style>

</head>

<body>

<p id="element1">Đoạn văn bản có thuộc tính id</p>

</body>

</html>

Demo

Thuộc tính class

Để sử dụng CSS trang trí cho một nhóm các thành phần đặc biệt, đầu tiên ta sẽ thêm thuộc tính class vào những thành phần đó:

<p class="classname">Đoạn văn bản có thuộc tính class</p>

Bây giờ bạn đã có thể trang trí tất cả các thành phần có cùng tên class:

<!DOCTYPE html>

<html>

<head>

<style>

p.classname {

color:red;

}

</style>

</head>

<body>

<p class="classname">Đây là đoạn văn bản có thuộc tính class.</p>

<p class="classname">Đây là đoạn văn bản có thuộc tính class cùng tên.</p>

</body>

</html>

Demo

Giá trị của thuộc tính id là duy nhất trong trang vì vậy bạn chỉ nên sử dụng id khi muốn trang trí CSS cho 1 thành phần. Sử dụng thuộc tính class khi muốn trang trí cho nhiều thành phần.