Trong bài này chúng ta sẽ học
những mục sau:
- Sử dụng thuộc tính style bên trong thẻ HTML.
- Sử dụng thẻ <style> để khai báo CSS nội bộ.
- Sử dụng thẻ <link> để khai báo tham chiếu đến CSS file.
- Khai báo trong thẻ <head> 2 thẻ CSS <style> và <link>
- Sử dụng CSS để định màu chữ.
- Sử dụng CSS để định kiểu chữ.
- Sử dụng CSS định cỡ chữ.
- Sử dụng CSS để tạo đường viền.
- Sử dụng CSS để thụt lề trong đường viền.
- Sửu dụng CSS để canh lề.
Định kiểu dáng trong HTML với CSS
CSS
(Cascading Style Sheets)
CSS
mô tả cách các thẻ
HTML hiển thị trên trình duyệt, giấy, hoặc các thiết
bị khác.
CSS
tiết kiệm rất nhiều công sức. Nó có thể điều khiển
giao diện của nhiều trang web 1 lúc.
CSS
có thể thêm vào HTML bằng 3 cách sau:
- Bên trong thẻ tag – thông qua sử dụng thuộc tính style của thẻ.
- Nội bộ – sử dụng thẻ <style> khai báo trong thẻ <head>
- Ngoại vi – tham chiếu đến 1 file CSS
Cách
thông dụng nhất để thêm CSS là dùng 1 file có đuôi .css
lưu trữ riêng ra( cách số 3).
Tuy nhiên ở đây trong các ví dụ chúng ta thường dùng cách 1 và 2 cho dễ thao tác và quan sát.
Tuy nhiên ở đây trong các ví dụ chúng ta thường dùng cách 1 và 2 cho dễ thao tác và quan sát.
Ghi
chú:Tôi sẽ có bài viết riêng chuyên về CSS sau.
CSS trong thẻ tag
CSS
trong thẻ tag dùng để định kiểu cho phần nội dung
trong 1 thẻ HTML duy nhất thông qua thuộc tính style.
Ví
dụ sau sẽ đổi màu của phần nội dung trong thẻ <h1>
sang xanh:
<h1 style="color:blue;">Đây
là 1 tiêu đề màu xanh dương</h1>
CSS nội bộ
CSS
nội bộ nghĩa là chỉ dùng định kiểu cho 1 trang HTML.
CSS
nội bộ được khai báo trong thẻ <style> đặt trong
thẻ <head>
Ví dụ:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Đây là 1 tiêu đề</h1>
<p>Đây là 1 đoạn văn.</p>
</body>
</html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>Đây là 1 tiêu đề</h1>
<p>Đây là 1 đoạn văn.</p>
</body>
</html>
CSS ngoại vi
CSS
ngoại vi được dùng để định dạng cho nhiều trang HTML
1 lúc.
CSS
ngoại vi có thể giúp bạn thay đổi kiểu toàn bộ site
thông qua 1 file.
Để
sử dụng CSS ngoại vi bạn khai báo như trong ví dụ dưới
đây.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Đây là 1 tiêu đề</h1>
<p>Đây là 1 đoạn văn.</p>
</body>
</html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Đây là 1 tiêu đề</h1>
<p>Đây là 1 đoạn văn.</p>
</body>
</html>
CSS
ngoại vi có thể được viết bằng bất kỳ trình soạn
thảo văn bản đơn giản nào (Ví dụ: Notepad) nhưng phải
lưu dạng .css và viết theo 1 cú pháp nhất định.
Đây
là ví dụ 1 file "styles.css" mẫu:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Kiểu chữ
Thuộc
tính color trong CSS dùng định màu chữ.
Thuộc
tính font-family trong CSS dùng định kiểu chữ.
Thuộc
tính font-size trong CSS dùng định cỡ chữ.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS đường viền
Thuộc
tính border trong CSS dùng để định đường viền xung
quanh 1 thẻ HTML.
Ví dụ:
p {
border: 1px solid powderblue;
}
border: 1px solid powderblue;
}
CSS thụt lề
Thuộc
tính padding xác định khoảng cách từ chữ đến đường
viền.
Ví dụ:
p {
border: 1px solid powderblue;
padding: 30px;
}
border: 1px solid powderblue;
padding: 30px;
}
CSS Canh lề
Thuộc
tính margin
dùng để xác định lề bên ngoài đường viền.
Ví dụ:
p {
border: 1px solid powderblue;
margin: 50px;
}
border: 1px solid powderblue;
margin: 50px;
}
Thuộc tính id
Xác
định 1 kiểu riêng cho 1 đối tượng duy nhất và thêm 1
thuộc tính id cho đối tượng đó:
<p id="p01">I
am different</p>
sau
đó mô tả kiểu cho id đó trong phần khai báo CSS.
Ví dụ:
#p01 {
color: blue;
}
color: blue;
}
Ghi
chú: giá trị id trong 1 trang không được trùng nhau.
Thuộc tính class (lớp)
Dùng
để xác định kiểu riêng cho nhiều
đối tượng, thêm thuộc tính class vào đối tượng HTML:
<p class="error">I
am different</p>
sau
đó định kiểu cho lớp trong phần khai báo CSS.
Ví dụ:
p.error {
color: red;
}
color: red;
}
Tác giả: #drM
Nguồn: Sưu Tầm
Không có nhận xét nào:
Đăng nhận xét