Đây là cách thêm css trực tiếp vào thẻ html cần định dạng. Tập hợp các kiểu css được khai báo bên trong kiểu thuộc tính của thẻ
ưu điểm. Tạo kiểu cho một đối tượng html rất nhanh chóng
nhược điểm. Những style css này 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 bản có màu đỏ, chúng ta có thể thiết lập như mã bên dưới
<p style="color: red">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, unde?</p>
Css nội bộ
Đây là cách thêm đoạn mã css vào một vùng riêng trong tệp html
ưu điểm. Phân vùng rõ ràng đoạn mã css và những nội dung html còn lại
nhược điểm. Những kiểu css này chỉ được áp dụng trong phạm vi một tệp cụ thể mà nó được khai báo. Nó không thể sử dụng chung cho nhiều trang 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>
Css bên ngoài
Với công thức này, tất cả các mã css được đưa vào trong tệp có đuôi mở rộng. css (ví dụ. chủ yếu. css)
ưu điểm. Giúp Css có thể sử dụng chung cho nhiều trang khác nhau của website và quản lý dễ dàng
Ví dụ bên dưới giúp thiết lập màu sắc cho thẻ p thông qua tệp main.css
Constructor file directory
index.html
css
----main.css
Tệp 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>
1
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 mã
<link rel="stylesheet" href="css/main.css">
giúp liên kết đến tập tin chính. css nằm trong thư mục css của dự án
Tổng kết
Qua bài viết này tôi chia sẻ cho 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ể mà bạn có thể lựa chọn cách thích hợp
Nếu trang web chỉ có một trang, bạn có thể sử dụng css nội bộ là đủ. Nhưng nếu dự án có tệp hệ thống lớn thì bạn nên sử dụng cách css bên ngoài
Có thể nhận thấy rằng, một số thẻ HTML như
,
,
luôn bắt đầu bằng một dòng mới và có độ dài dòng trải dài 100% trang web, trong khi các thẻ HTML khác như ,
________số 8_______
Ở ví dụ này, thuộc tính chiều rộng và chiều cao không được sử dụng, các thẻ span nằm cùng một dòng cạnh nhau, một số thuộc tính gây ảnh hưởng đến nội dung ở các dòng khác
display value. khối
Block là cách hiển thị luôn bắt đầu bằng một dòng mới và có chiều rộng bằng 100% chiều rộng trang web. Vì vậy khi bạn dùng thẻ này thì mặc dù nội dung ngắn nhưng các thẻ khác ở phía dưới vẫn được nằm ở một dòng khác tách biệt. Khác biệt của thẻ này là dùng được thuộc tính width và height. Các thẻ HTML hiển thị mặc đinh block là:
