1. Về CSS3
a. Cách thức sử dụng CSS
Cách 1: Đặt trong thẻ <head> của mã nguồn trang Web
<head>
<meta charset="utf-8">
<title>Sample HTML5 Structure</title>
<style>
h1, h2 {
margin:0px;
font-size:1.5em;
}
footer{
background-color:#999;
text-align:center;
}
</style>
</head>
- Có thể tái sử dụng được
- Chỉ sử dụng được cho trang đó
Cách 2: Kiểu Inline – Đặt vào giá trị của thuộc tính trong thẻ
<p style="font-size: 14px; color: purple;"></p>
- Không thể tái sử dụng được
- Không thể sử dụng ở bất kỳ đầu trên trang web
Cách 3: Kiểu External – Đặt vào trong tệp tin CSS
- Tạo tệp body.css
BODY {
background-color: gray;
font-family: arial;
font-style: italic;
}
- Tạo trang index.html
<!DOCTYPE html>
<html>
<head>
<LINK rel="stylesheet" type="text/css" href="body.css"/>
<title>Webex e-Server</title>
</head>
<body>
This is the fastest web server..!!
</body>
</html>
- Tái sử dụng được ở tất cả các trang
- Có thể tìm kiếm dễ dàng
b. Về Selectors
- Type Selectors
+ Kiểu được chỉ định trên HTML và được sử dụng ở tất cả các phần tử đó
- Class Selectors
+ Áp dụng cho các kiểu trong nội dung có thuộc tính class
+ Sử dụng dấu chấm(.)
<style>
.chudam{
Font-weight: bold;
}
</style>
Ví dụ: <p class=”planets chudam”>Thẻ đoạn văn</p>
- ID Selectors
+ Áp dụng cho các kiểu trong nội dung có thuộc tính Id
+ Sử dụng dấu thăng(#)
Ví dụ:
<p Id=”E001”>Thẻ đoạn văn</p>
- Universal Selector
+ Áp dụng tất cả nội dung trên tất cả phần tử
+ Thể hiện bằng dấu sao(*)
c. Thứ tự ưu tiên CSS
d. Class giả
selector_name:state_name {property: value}
:active Người dùng tác động vào
:hover Người dùng di chuột qua
:link Người dùng chưa click hay di chuột vào
:visited Người dùng đã click vào
:focus Người dùng chọn vào phần tử nhập
:first-letter Chọn chữ cái đầu tiên của thẻ <p>
:first-line Chọn dòng đầu tiên của thẻ <p>
:first-child Chọn tất cả các phần tử <p> là con đầu tiên của thẻ cha
:before Chèn nội dung trước thẻ <p>
:after Chèn nội dung sau thẻ <p>
a:link {
color: white;
background-color: black;
border: 2px solid white;
}
a:visited {
color: white;
background-color: brown;
border: 2px solid white;
}
a:hover {
color: black;
background-color: white;
border: 2px solid black;
}
p:first-line
{
font-family: “Tahoma”;
font-weight: bolder;
background-color: #FFFFCC;
}
p:first-letter
{
font-family: “fantasy”;
font-size: xx-large;
font-weight: bold;
}
e. Các phép chọn nâng cao:
Phép chọn đã biết
p{}
.class{}
#id{}
Phép chọn toàn bộ
*{}
Phép chọn thẻ bên trong thẻ khác
h3 em{}
A+B chọn thẻ kế tiếp thẻ khác
h3 + p {}
a[thuộc tính]: chọn thẻ sở hữu thuộc tính nào đó
a[title=“theo đường dẫn”]
2. Kiểu Text và Font
a. Text
- color xác định màu sắc cho text trong phần tử
- text-align định hướng text trong phần tử
left căn trái
right căn phải
center căn giữa
justify căn đều hai bên
- text-decoration để trang trí text trong phần tử
none
underline
overline
line-through
blink
- text-indent để xác định dòng đầu tiên của text trong phần tử với độ dài hoặc %
length
%
- text-transform sử dụng trong việc xác định loại text trong phần tử
none
capitalize
Uppercase
Lowercase
- word-spacing sử dụng để tăng hoặc giảm khoảng cách giữa các từ
normal
length
b. Font
Font-color : màu font chữ
font-family kiểu tên font
font-size kích cỡ font
font-style kiểu của font
font-variant sử dụng để xác định xem text có được hiển thị ở dạng chữ nhỏ hay không.
3. Padding
Khoảng cách giữa border và và nội dung trong đó
4. Margin
Khoảng cách giữa lề xung quanh phần tử và bên ngoài phần tử