Quay về MỤC LỤC HỌC CSS
1. CSS – Cascading Style Sheets
Dùng để định kiểu, layout, cách thức hiển thị trên nhiều thiết
bị khác nhau của trang web.
Ra đời nhằm mục đích xóa bỏ việc định kiểu trên trang HTML,
nhờ đó quản lý tập trung hơn.
2. Các cách chèn CSS vào trang web
Có 03 cách:
a.
File bên ngoài
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Nội
dung file “mystyle.css”
body { background-color: lightblue;}
h1 {color: navy;margin-left: 20px;}
h1 {color: navy;margin-left: 20px;}
b.
Bên trong file HTML
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
c.
Ngay trong thẻ HTML
<h1 style="color:blue;margin-left:30px;">Lớp học vi tính .COM</h1>
Chúng ta nên hạn chế dùng cách này,
vì mỗi lần chỉnh sửa phải tìm đúng thẻ HTML trong trang web => Điều này làm
mất đi tính tiện dụng của CSS.
3. Cú pháp CSS
Selector – Declaration (đối tượng – mô tả)
Đối tượng ở đây là các phần tử HTML, name, id, class,
attribute,…
Mô tả là các thuộc tính và giá trị của chúng.
Ví dụ 1: tất cả đối tượng h1 có màu đỏ và cỡ chữ 11px
h1{color:red;font-size:11px;}
Ví dụ 2: tất cả đối tượng có id="tieude"
#tieude {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
Ví dụ 3: tất cả đối tượng có lớp
class="tacgia"
.tacgia {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
Chú ý: ta có thể khai báo 01 thẻ
thuộc nhiều lớp
<p class="center
large">Đoạn văn này thuộc 02 lớp.</p>
Hoặc kết hợp cả thẻ HTML và lớp trong mô tả CSS
p.tacgia {
text-align: center;
color: red;
}
text-align: center;
color: red;
}
Ta cũng có thể gộp nhiều đối tượng lại với nhau nếu chúng có
chung thuộc tính
h1, h2, p {
text-align: center;
color: red;
}
Cuối cùng là cách ghi chú thích trong CSS => Ghi trong cặp dấu /*…*/
text-align: center;
color: red;
}
Cuối cùng là cách ghi chú thích trong CSS => Ghi trong cặp dấu /*…*/
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
4. Thứ tự ưu tiên
Trong trường hợp cùng 01 đối tượng nhưng được mô tả nhiều lần,
lần mô tả sau chót sẽ được ưu tiên áp dụng.
Khai báo mô tả CSS trực tiếp bên trong thẻ HTML sẽ được ưu
tiên nhất.
Ví dụ:
Ta mô tả đối tượng h1 trong file bên ngoài “mystyle.css”
=> màu đỏ
h1 {
color: red;
}
color: red;
}
và bên trong trang HTML => màu vàng
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: yellow;
}
</style>
</head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: yellow;
}
</style>
</head>
Trong trường hợp này thẻ h1 sẽ có màu vàng do khai báo trong
cặp thẻ <style></style> nằm dưới cùng.
Các bạn thử đảo ngược cho phần thẻ <link…> nằm bên dưới
cùng xem kết quả ra sao nhé.
Sau đây là file ví dụ html:
Nếu vẫn chưa hiểu chỗ nào các bạn vui lòng xem thêm video
clip ví dụ sau đây:
Quay về MỤC LỤC HỌC CSS
- Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
- Trang fan page: https://www.facebook.com/lophocvitinhcom
- Trang web: http://lophocvitinh.com
Tác giả: #drM
Nguồn: Sưu Tầm
Nguồn: Sưu Tầm
Không có nhận xét nào:
Đăng nhận xét