css thông dụng
19/01/2024 09:22
CÁC CSS THÔNG DỤNG:
- Khai báo trong cặp thẻ:
<style type="text/css">
Nội dung các thẻ css
</style>
* Nếu dùng file .css ngoài thì khai báo:
@import url(link file .css');
* Các css thông dụng:
5.1 Thay đổi màu liên kết:
a:link {
color: gray;
}
a:visited {
color: green;
}
a:hover {
color: rebeccapurple;
}
a:active {
color: teal;
}
5.2 Loại bỏ gạch chân liên kết:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
5.3 Tạo một nút liên kết:
a:link, a:visited, a:hover, a:active {
background-color: green;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
5.4 Tạo một hộp văn bản:
p.important {
border-style: solid;
border-width: 5px;
border-color: purple;
}
* Khai báo html khi dùng:
<p class="important">Chèn đoạn văn bản quan trọng của bạn vào đây.</p>
5.5 Căn giữa các yếu tố trên trang:
- Đối với các yếu tố dạng khối, như hình ảnh, bạn có thể sử dụng thuộc tính margin:
.center {
display: block;
margin: auto;
}
- Căn giữa tất cả các hình ảnh trên một trang:
img {
margin: auto;
}
5.6 Background::
background-color: transparent; // làm nền trong suốt
background-image: url(‘image.jpg’); // ảnh nền
background-repeat: no-repeat; // thuộc tính không lặp lại
background-position: top right; // vị trí nền
background-attachment: scroll; // nền trượt
background-size: cover; // ảnh tràn màn hình
- Ví dụ:
.picbg {
background: transparent url(‘image.jpg’) no-repeat top right scroll;
}
CÁC CSS THÔNG DỤNG:
- Khai báo trong cặp thẻ:
<style type="text/css">
Nội dung các thẻ css
</style>
* Nếu dùng file .css ngoài thì khai báo:
@import url(link file .css');
* Các css thông dụng:
5.1 Thay đổi màu liên kết:
a:link {
color: gray;
}
a:visited {
color: green;
}
a:hover {
color: rebeccapurple;
}
a:active {
color: teal;
}
5.2 Loại bỏ gạch chân liên kết:
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
5.3 Tạo một nút liên kết:
a:link, a:visited, a:hover, a:active {
background-color: green;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
5.4 Tạo một hộp văn bản:
p.important {
border-style: solid;
border-width: 5px;
border-color: purple;
}
* Khai báo html khi dùng:
<p class="important">Chèn đoạn văn bản quan trọng của bạn vào đây.</p>
5.5 Căn giữa các yếu tố trên trang:
- Đối với các yếu tố dạng khối, như hình ảnh, bạn có thể sử dụng thuộc tính margin:
.center {
display: block;
margin: auto;
}
- Căn giữa tất cả các hình ảnh trên một trang:
img {
margin: auto;
}
5.6 Background:
background-color: transparent; // làm nền trong suốt
background-image: url(‘image.jpg’); // ảnh nền
background-repeat: no-repeat; // thuộc tính không lặp lại
background-position: top right; // vị trí nền
background-attachment: scroll; // nền trượt
background-size: cover; // ảnh tràn màn hình
- Ví dụ:
.picbg {
background: transparent url(‘image.jpg’) no-repeat top right scroll;
}