Xem VÍ D : "Text/css" Blue

CSS
1. Xác định bộ chọn của phần tử

- Chọn phần tử có id là : css
#css{
color:blue;
}
<!DOCTYPE html>
<html>
<head>
<title>Xem ví dụ</title>
<style type="text/css">
#css{
color:blue;
}
</style>
</head>
<body>
<h1 id="html">Tài liệu học HTML</h1>
<h1 id="css">Tài liệu học CSS</h1>
<h1 id="js">Tài liệu học JavaScript</h1>
</body>
</html>
- Chọn các phần tử có class là html

.html{
color:blue;
}
<!DOCTYPE html>
<html>
<head>
.html{
color:blue;
}
</style>
</head>
<body>
<h1 class="html">Tài liệu học HTML</h1>
<h1 class="css">Tài liệu học CSS</h1>
<h1 class="js">Tài liệu học JavaScript</h1>
</body>
</html>
- Chọn các phần tử <h1>

h1{
color:blue;
}
<!DOCTYPE html>
<html>
<head>
h1{
color:blue;
}
</style>
</head>
<body>
<h1>Tài liệu học HTML</h1>
<p>- Bài học html số 1</p>
<h1>Tài liệu học CSS</h1>
<p>- Bài học css số 1</p>
<h1>Tài liệu học JavaScript</h1>
<p>- Bài học javascript số 1</p>
</body>
</html>
2. Cấu trúc của một phần tử HTML

- Thông thường thì "cấu trúc" của một phần tử HTML sẽ có bốn thành phần chính:
CONTENT : Nội dung của phần tử.
BORDER : Đường viền bao xung quanh nội dung của phần tử.
Khoảng cách (vùng đệm) nằm giữa đường viền của phần tử đến nội dung của
PADDING :
phần tử.
MARGIN : Khoảng cách (lề) nằm giữa đường viền của phần tử đến một phần tử khác.
3. Cách tạo đường viền cho một phần tử HTML

- Thiết lập "kiểu đường viền" : border-style : ……… ;
none - Không thiết lập đường viền cho phần tử.

solid - Đường viền liền
dashed - Đường viền đứt
dotted - Đường viền chấm
double - 2 đường viền
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="border-style:none">none</p>
<p style="border-style:solid">solid</p>
<p style="border-style:dashed">dashed</p>
<p style="border-style:dotted">dotted</p>
<p style="border-style:double">double</p>
<p style="border-style:groove">groove</p>
<p style="border-style:ridge">ridge</p>
<p style="border-style:inset">inset</p>
<p style="border-style:outset">outset</p>
<p style="border-
style:initial">initial</p>
</body>
</html>
2. Thiết lập "độ dày" của đường viền : border-width :…….. ;

thin - Độ dày của đường viền sẽ tương đương với 1 pixel.
medium - Độ dày của đường viền sẽ tương đương với 3 pixel.
thick - Độ dày của đường viền sẽ tương đương với 5 pixel.
- Chỉ định độ dày của đường viền dựa theo một giá trị pixel cụ thể.
length
- Ví dụ: 17px tức là đường viền sẽ có độ dày 17 pixel.
- Sử dụng giá trị mặc định của nó.

initial
(mặc định thì thuộc tính border-width có giá trị là medium)
inherit - Kế thừa giá trị thuộc tính border-width từ phần tử cha của nó.
<!DOCTYPE html>
<html>
<head>
p{
border-style: solid;
}
</style>
</head>
<body>
<p style="border-width:thin">1) Lập Trình
Web</p>
<p style="border-width:medium">2) Lập
Trình Web</p>
<p style="border-width:thick">3) Lập Trình
Web</p>
<p style="border-width:20px">4) Lập Trình
Web</p>
<p style="border-width:initial">5) Lập
Trình Web</p>
</body>
</html>
3. Thiết lập "màu sắc" của đường viền : border – color : ……….. ;
- Chỉ định một màu sắc cụ thể (màu sắc này có thể được xác định dựa theo tên màu,
color
giá trị rgb, giá trị hex, giá trị rgba, giá trị hsl, . . . .)
transparen
- Đường viền trong suốt (nó có tồn tại nhưng ta không thể nhìn thấy)
t
initial - Sử dụng giá trị mặc định của nó.
inherit - Kế thừa giá trị thuộc tính border-color từ phần tử cha của nó.
<!DOCTYPE html>
<html>
<head>
p{
border-style: solid;
border-width:30px;
}
</style>
</head>
<body>
<p style="border-color:green">1) Lập Trình
Web</p>
<p style="border-color:#FFA500">2) Lập
Trình Web</p>
<p style="border-color:rgb(140,51,79)">3)
Lập Trình Web</p>
<p style="border-color:transparent">4) Lập
Trình Web</p>
</body>
</html>
4. Thiết lập đường viền cho từng cạnh

o Cách 1: Thiết lập nhiều giá trị cho thuộc tính.
o Cách 2: Thêm tên cạnh vào bên trong tên thuộc tính.
Cú pháp 1: border-style: value1 value2 value3 value4;

- Cạnh top của đường viền sẽ có kiểu value1.
- Cạnh right của đường viền sẽ có kiểu value2.
- Cạnh bottom của đường viền sẽ có kiểu value3.
- Cạnh left của đường viền sẽ có kiểu value4.
<!DOCTYPE html>
<html>
<head>
h1{
border-style:dashed none dotted
solid;
}
</style>
</head>
<body>
<h1>Lập Trình Web</h1>
</body>
</html>
Cú pháp 2: border-style: value1 value2 value3;

- Cạnh top của đường viền sẽ có kiểu value1.
- Cạnh left & right của đường viền sẽ có kiểu value2.
- Cạnh bottom của đường viền sẽ có kiểu value3.
<!DOCTYPE html>
<html>
<head>
h1{
border-style:dashed solid dotted;
}
</style>
</head>
<body>
</body>
</html>
Cú pháp 3: border-style: value1 value2;

- Cạnh top & bottom của đường viền sẽ có kiểu value1.
- Cạnh left & right của đường viền sẽ có kiểu value2.
4. Thêm tên cạnh vào bên trong tên thuộc tính : border-têncạnh-style: ………. ;
<!DOCTYPE html>
<html>
<head>
h1{
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dashed;
border-left-style:none;
}
</style>
</head>
<body>
</body>
</html>
5. Tạo đường viền cho phần tử (cú pháp rút gọn) : border: width style color;
- Trong đó:
o Giá trị width dùng để xác định độ dày của đường viền (giống thuộc tính border-width)
o Giá trị style dùng để xác định kiểu của đường viền (giống thuộc tính border-style)
o Giá trị color dùng để xác định màu sắc của đường viền (giống thuộc tính border-color)
o <!DOCTYPE html>
o <html>
o <head>
o <title>Xem ví dụ</title>
o <style type="text/css">
o div{
o border:10px dotted red;
o }
o </style>
o </head>
o <body>
o <div>
o <p>border:5px dotted red;</p>
o <p><==></p>
o <ul>
o <li>border-width:5px;</li>
o <li>border-
style:dotted;</li>
o <li>border-color:red;</li>
o </ul>
o </div>
o </body>
o </html>
<!DOCTYPE html>
<html>
<head>
h1{
border:solid red;
}
</style>
</head>
<body>
<p>- Giá trị width thiếu, cho nên nó sẽ
tự động sử dụng giá trị mặc định là
medium.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
h1{
border:5px solid red;
border-top:10px dotted blue;
border-bottom:3px dashed;
}
</style>
</head>
<body>
</body>
</html>
6. Cách tạo đường viền hình ảnh cho một phần tử

- Tạo một cái đường viền cho phần tử
- Xác định tấm hình dùng làm đường viền hình ảnh : border-image-source: url(đường dẫn đến
tập tin hình ảnh);
- Ghép tấm hình lên đường viền để tạo thành đường viền hình ảnh
- Bước 1: Sử dụng thuộc tính border để tạo một cái đường viền cho phần tử.
- Bước 2: Sử dụng thuộc tính border-image-source để xác định tấm hình mà mình muốn
dùng để làm đường viền hình ảnh.
- Bước 3: Sử dụng thuộc tính border-image-slice để phân chia tấm hình ra thành nhiều
mảnh, mặc định thì tấm hình sẽ được chia thành chín mảnh như bên dưới.
<!DOCTYPE html>
<html>
<head>
h1{
text-align : center;
}
div{
border:100px solid black; /*BƯỚC 1*/
border-image-
source:url(../image/pattern.png); /*BƯỚC 2*/
border-image-slice:80; /*BƯỚC 3*/
}
</style>
</head>
<body>
<div>
<h1>WEB CƠ BẢN</h1>
</div>
</body>
</html>
7. Cách thiết lập vùng đệm cho một phần tử HTML (padding) : padding: …….. ; (cho text)
- Chỉ định khoảng cách vùng đệm dựa theo một giá trị cụ thể, giá trị này có thể được
length
xác định dựa theo các loại đơn vị như: px, em, cm, . . . .
- Chỉ định khoảng cách vùng đệm dựa theo tỷ lệ phần trăm chiều rộng phần nội dung
của phần tử cha của nó.
- Ví dụ: Chúng ta có phần tử A là cha của phần tử B, chiều rộng phần nội dung của
phần tử A là 200px.
% o Nếu ta thiết lập thuộc tính padding cho phần tử B với giá trị 50% thì vùng đệm
của phần tử B sẽ có khoảng cách là 100px.
o Nếu ta thiết lập thuộc tính padding cho phần tử B với giá trị 20% thì vùng đệm
của phần tử B sẽ có khoảng cách là 40px.
o ....
inherit - Kế thừa giá trị thuộc tính padding từ phần tử cha của nó.
<!DOCTYPE html>
<html>
<head>
<style>
#a{
border:10px solid blue;
padding:50px;
}
#b{
padding:inherit;
}
</style>
</head>
<body>
<div id="a">
<div id="b">TÀI LIỆU HỌC LẬP TRÌNH
WEB</div>
</div>
<p>- Thuộc tính padding của phần tử
<u>#b</u> có giá trị là <u>inherit</u></p>
<p>⇨ Nó sẽ kế thừa giá trị thuộc
tính padding từ phần tử cha của nó là
<u>#a</u></p>
<p>⇨ Cho nên giá trị thật sự của nó
sẽ tương ứng với <u>50px</u></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#a{
width:400px;
}
#b{
padding:10%;
}
</style>
</head>
<body>
<div id="a">
<div id="b">TÀI LIỆU HỌC LẬP TRÌNH
WEB</div>
</div>
<p>- Vùng đệm của phần tử #b phía trên có
khoảng cách là 40 pixel.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
div{
width : 300px;
padding:50px;
}
</style>
</head>
<body>
<div>TÀI LIỆU HỌC LẬP TRÌNH WEB</div>
<p>- Vùng đệm của phần tử <div>
phía trên có khoảng cách là 50 pixel.</p>
</body>
</html>
8. Cách thiết lập vùng đệm ở riêng từng phía
o Cách 1: Thiết lập nhiều giá trị cho thuộc

tính padding.
o Cách 2: Thêm "tên vị trí" vào phía sau

thuộc tính padding.
Cú pháp 1: padding: value1 value2 value3 value4;

- Vùng đệm phía trên (top) sẽ có khoảng cách là value1.
- Vùng đệm bên phải (right) sẽ có khoảng cách là value2.
- Vùng đệm phía dưới (bottom) sẽ có khoảng cách là value3.
- Vùng đệm bên trái (left) sẽ có khoảng cách là value4.
<!DOCTYPE html>
<html>
<head>
div{
display:inline-block;
border:5px solid green;
padding:25px 300px 100px 50px;
}
</style>
</head>
<body>
<div>LẬP TRÌNH WEB</div>
<p>- Vùng đệm phía trên là 25 pixel</p>
<p>- Vùng đệm bên phải là 300 pixel</p>
<p>- Vùng đệm phía dưới là 100 pixel</p>
<p>- Vùng đệm bên trái là 50 pixel</p>
</body>
</html>
Cú pháp 2: padding: value1 value2 value3;

- Vùng đệm phía trên (top) sẽ có khoảng cách là value1.
- Vùng đệm bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.
- Vùng đệm phía dưới (bottom) sẽ có khoảng cách là value3.
<!DOCTYPE html>
<html>
<head>
div{
padding:25px 200px 75px;
}
</style>
</head>
<body>
<p>- Vùng đệm bên trái & bên phải là
200 pixel</p>
</body>
</html>
Cú pháp 3: padding: value1 value2;

- Vùng đệm phía trên (top) & phía dưới (bottom) sẽ có khoảng cách là value1.
- Vùng đệm bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.
<!DOCTYPE html>
<html>
<head>
div{
padding:25px 200px;
}
</style>
</head>
<body>
<p>- Vùng đệm phía trên & phía dưới là
25 pixel</p>
<p>- Vùng đệm bên trái & bên phải là
200 pixel</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
div{
padding-top:50px;
padding-right:200px;
padding-bottom:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>- Vùng đệm bên phải là 300 pixel</p>
<p>- Vùng đệm bên trái là 50 pixel</p>
</body>
</html>
9. Thiết lập khoảng cách lề cho một phần tử : margin : ……… ;
- Chỉ định khoảng cách lề dựa theo một giá trị cụ thể, giá trị này có thể được xác định
length
dựa theo các loại đơn vị như: px, em, cm, . . . .
- Chỉ định khoảng cách lề dựa theo tỷ lệ phần trăm chiều rộng phần nội dung của phần
tử cha của nó.
- Ví dụ: Chúng ta có phần tử A là cha của phần tử B, chiều rộng phần nội dung của
phần tử A là 200px.
% o Nếu ta thiết lập thuộc tính margin cho phần tử B với giá trị 50% thì lề của phần
tử B sẽ có khoảng cách là 100px.
o Nếu ta thiết lập thuộc tính margin cho phần tử B với giá trị 20% thì lề của phần
tử B sẽ có khoảng cách là 40px.
o ....
- Thông thường, khi chúng ta gán giá trị này cho thuộc tính margin thì phần tử sẽ
auto
được canh nằm ở giữa phần nội dung của cha nó theo chiều ngang.
inheri
- Kế thừa giá trị thuộc tính margin từ phần tử cha của nó.
t
<!DOCTYPE html>
<html>
<head>
<style>
div{
width : 400px;
margin:100px;
}
</style>
</head>
<body>
<div>TÀI LIỆU HỌC LẬP TRÌNH WEB</div>
<hr> /*Gạch kẻ ngang*/
<p>- Lề của phần tử <div> phía
trên có khoảng cách là 100 pixel.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#a{
width:400px;
}
#b{
margin:10%;
}
</style>
</head>
<body>
<div id="a">
<div id="b">LẬP TRÌNH WEB</div>
</div>
<p>- Lề của phần tử #b phía trên có khoảng
cách là 40 pixel.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
#a{
width :600px;
}
#b{
width:400px;
margin:auto;
}
</style>
</head>
<body>
<div id="a">
<div id="b">LẬP TRÌNH WEB</div>
</div>
</body>
</html>
10. Thiết lập khoảng cách lề ở riêng từng phía

Cú pháp 1: margin: value1 value2 value3 value4;
- Lề phía trên (top) sẽ có khoảng cách là value1.
- Lề bên phải (right) sẽ có khoảng cách là value2.
- Lề phía dưới (bottom) sẽ có khoảng cách là value3.
- Lề bên trái (left) sẽ có khoảng cách là value4.
<!DOCTYPE html>
<html>
<head>
div{
margin:25px 300px 100px 50px;
}
</style>
</head>
<body>
<hr>
<p>- Lề phía trên 25 pixel</p>
<p>- Lề bên phải 300 pixel</p>
<p>- Lề phía dưới 100 pixel</p>
<p>- Lề bên trái 50 pixel</p>
</body>
</html>
Cú pháp 2: margin: value1 value2 value3;

- Lề phía trên (top) sẽ có khoảng cách là value1.
- Lề bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.
- Lề phía dưới (bottom) sẽ có khoảng cách là value3.
<!DOCTYPE html>
<html>
<head>
div{
margin:25px 200px 75px;
}
</style>
</head>
<body>
<hr>
<p>- Lề phía trên là 25 pixel</p>
<p>- Lề bên trái & bên phải là 200
pixel</p>
<p>- Lề phía dưới là 75 pixel</p>
</body>
</html>
Cú pháp 3: margin: value1 value2;

- Lề phía trên (top) & phía dưới (bottom) sẽ có khoảng cách là value1.
- Lề bên trái (left) & bên phải (right) sẽ có khoảng cách là value2.
11. Cách thiết lập màu nền cho một phần tử HTML : background-color: ………. ;
transparen
- Nền của phần tử sẽ trong suốt.
t
- Chỉ định một màu sắc cụ thể (màu sắc này có thể được xác định dựa theo tên
color
màu, giá trị rgb, giá trị hex, giá trị rgba, giá trị hsl, . . . .)
initial
(mặc định thì thuộc tính background-color có giá trị là transparent)
inherit - Kế thừa giá trị thuộc tính background-color từ phần tử cha của nó.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Học <span style="background-
color:red">CSS</span> miễn phí</p>
</body>
</html>
12. Cách thiết lập hình nền cho phần tử : background-image: value;
none - Không thiết lập hình nền cho phần tử.
- Chỉ định một tập tin hình ảnh dùng làm hình nền cho phần tử.
url()
(đường dẫn đến tập tin hình ảnh phải được đặt bên trong cặp dấu ngoặc)
(mặc định thì thuộc tính background-image có giá trị là none)
inherit - Kế thừa giá trị thuộc tính background-image từ phần tử cha của nó.
<!DOCTYPE html>
<html>
<head>
body{
background-image:initial;
background-image:ulr(……..); Ulr()
}
</style>
</head>
<body>
<h1>Tài liệu học lập trình web</h1>
</body>
</html>
13. Tùy chỉnh cách thức "lặp lại" của hình nền : background – repeat : ……… ;
repeat - Tấm hình lặp lại theo chiều ngang lẫn chiều dọc.
repeat-x
- Tấm hình chỉ lặp lại theo chiều ngang.
repeat-y
- Tấm hình chỉ lặp lại theo chiều dọc.
no-repeat
- Tấm hình không lặp lại.

initial
(mặc định thì thuộc tính background-repeat có giá trị là repeat)
inherit
- Kế thừa giá trị thuộc tính background-repeat từ phần tử cha của nó.
<!DOCTYPE html>
<html>
<head>
body{
background-
image:url(../image/flower.gif);
background-repeat:initial;
}
</style>
initial
</head>
<body>
<h1>Tài liệu học lập trình web</h1>
</body>
</html>
no - repeat
14. Thiết lập vị trí của hình nền : background-position: ………;

- X là vị trí của hình nền "xét theo chiều ngang", nó có thể được xác định dựa theo một
trong các loại giá trị như sau:
Tên vị
: Left – center - right
trí
Npx : Hình nền nằm cách vị trí gốc một khoảng N pixel.
N% : Hình nền nằm cách vị trí gốc một khoảng N %.
- Y là vị trí của hình nền "xét theo chiều dọc", nó có thể được xác định dựa theo một trong
XY
các loại giá trị như sau:
Tên vị
: Top – center - bottom
trí
Npx : Hình nền nằm cách vị trí gốc một khoảng N pixel.
N% : Hình nền nằm cách vị trí gốc một khoảng N %.
- Lưu ý: Đối với loại giá trị X Y, nếu chúng ta chỉ xác định một tham số thì tham số đó chính
là X, tham số Y sẽ mặc định là center.
inherit - Kế thừa giá trị thuộc tính background-position từ phần tử cha của nó.
<!DOCTYPE html> https://webcoban.vn/css/demo?file=3461

<html>
<head>
div{
margin:20px;
border:30px dotted black;
padding:25px;
background-image:url(gio.png);
background-repeat:no-repeat;
background-origin:border-box;
background-position:left 22px;
}
</style>
</head>
<body>
</body>
</html>
15. Chỉnh kích thước của hình nền : background-size: ……………. ;
- width là chiều rộng của hình nền, nó có thể được xác định dựa theo một trong các
loại giá trị như sau:
- Chiều rộng của hình nền sẽ tự động được xác định dựa
theo chiều cao của hình nền (với điều kiện là tỷ lệ chiều
auto :
rộng/cao của hình nền phải bằng với tỷ lệ chiều rộng/cao
của tấm hình được sử dụng làm hình nền)
Npx : - Hình nền sẽ có chiều rộng là N pixel.
- Hình nền sẽ có chiều rộng bằng N % chiều rộng của
N% :
vùng được dùng để thiết lập vị trí gốc.
width - height là chiều cao của hình nền, nó có thể được xác định dựa theo một trong các
height loại giá trị như sau:
- Chiều cao của hình nền sẽ tự động được xác định dựa
theo chiều rộng của hình nền (với điều kiện là tỷ lệ chiều
auto :
rộng/cao của hình nền phải bằng với tỷ lệ chiều rộng/cao
của tấm hình được sử dụng làm hình nền)
Npx : - Hình nền sẽ có chiều cao là N pixel.
- Hình nền sẽ có chiều cao bằng N % chiều cao của vùng
N% :
được dùng để thiết lập vị trí gốc.
- Lưu ý: Đối với loại giá trị width height, nếu chúng ta chỉ xác định một tham số thì
tham số đó chính là width, tham số height sẽ mặc định là auto.
- Hình nền sẽ tự động được phóng to ra hoặc thu nhỏ lại để lấp đầy vùng được dùng
để thiết lập vị trí gốc. Tuy nhiên, nếu gặp phải trường hợp tỷ lệ chiều rộng/cao của
cover phần tử khác với tỷ lệ chiều rộng/cao của tấm hình được dùng làm hình nền thì sẽ
xảy ra tình trạng hình nền bị tràn ra khỏi vùng được dùng để thiết lập vị trí gốc, dẫn
đến việc hình nền hiển thị không trọn vẹn (nó sẽ bị cắt xén phía dưới hoặc bên phải)
- Hình nền sẽ tự động phóng to ra hoặc thu nhỏ lại sao cho nó được hiển thị trọn vẹn
contain (không bị cắt xén) với kích thước lớn nhất có thể bên trong vùng được dùng để thiết
lập vị trí gốc.
- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính background-size có giá trị
initial
là auto)
inherit - Kế thừa giá trị thuộc tính background-size từ phần tử cha của nó.
https://webcoban.vn/css/demo?file=3462
16. Cách chỉnh độ cong cho các góc của một phần tử : border-radius: ………….. ;
width/height - Độ cong của góc được xác định dựa theo cặp giá trị width/height.
- Trong đó:
o Width là chiều rộng của góc, nó có thể được xác định dựa theo một giá trị
pixel cụ thể hoặc tỷ lệ phần trăm chiều rộng của phần tử.
o Height là chiều cao của góc, nó có thể được xác định dựa theo một giá trị
pixel cụ thể hoặc tỷ lệ phần trăm chiều cao của phần tử.
- Lưu ý: Nếu chúng ta chỉ xác định một giá trị thì giá trị đó sẽ đại diện cho cả width
& height
- Sử dụng giá trị mặc định của nó

initial
(mặc định thì thuộc tính border-radius có giá trị là 0px)
inherit - Kế thừa giá trị thuộc tính border-radius từ phần tử cha của nó.
- Lưu ý: Chiều rộng (chiều cao) của một góc không được vượt quá 50% chiều rộng (chiều cao)
của phần tử.
<!DOCTYPE html>
<html>
<head>
div{
background-color:violet;
width:400px;
height:200px;
border-radius:28px/20px;
}
</style>
</head>
<body>
<div></div>
<p>- Lưu ý: Chiều rộng (chiều cao) của
một góc không được vượt quá 50% chiều rộng
(chiều cao) của phần tử.</p>
</body>
</html>
17. Cách thiết lập độ cong cho từng góc
border-radius: bộ giá trị width / bộ giá trị height;
- Trong đó:
o Bộ giá trị width dùng để xác định chiều rộng của từng góc.
o Bộ giá trị height dùng để xác định chiều cao của từng góc.
- Mỗi một bộ giá trị width (height) có thể được xác định dựa theo:
- Giá trị 1 sẽ là chiều rộng (chiều cao) của góc (1)
Một tập hợp gồm bốn giá trị
Một tập hợp gồm ba giá trị - Giá trị 2 sẽ là chiều rộng (chiều cao) của góc (2) & (4)
- Giá trị 1 sẽ là chiều rộng (chiều cao) của góc (1) & (3)
Một tập hợp gồm hai giá trị
- Giá trị 2 sẽ là chiều rộng (chiều cao) của góc (2) & (4)
<!DOCTYPE html>
<html>
<head>
div{
border:1px solid black;
width:400px;
height:200px;
border-radius:75px 100px 20px / 50px
10px;
}
</style>
</head>
<body>
<div></div>
<ul>
<li>Góc (1) có chiều rộng là 75px,
chiều cao là 50px</li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
div{
width:400px;
height:200px;
border-radius:50px 100px 25px;
}
</style>
</head>
<body>
<div></div>
<ul>
</ul>
</body>
</html>
18. Thêm tên góc vào bên trong tên thuộc tính : border-TênGóc-radius: width height;
<!DOCTYPE html>
<html>
<head>
div{
width:400px;
height:200px;
border-top-left-radius:75px 50px;
border-top-right-radius:100px 10px;
border-bottom-right-radius:25px
25px;
border-bottom-left-radius:40px 20px;
}
</style>
</head>
<body>
<div></div>
<ul>
</ul>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
div{
width:400px;
height:200px;
border-top-left-radius:20px;
border-top-right-radius:40px;
border-bottom-right-radius:60px;
border-bottom-left-radius:80px;
}
</style>
</head>
<body>
<div></div>
<ul>
</ul>
</body>
</html>
19. Cách tạo một cái bóng cho phần tử HTML : box-shadow: ……….. ;
none - Không thiết lập cái bóng cho phần tử.
- Tham số x dùng để chỉ định khoảng cách mà cái bóng được nhích ra khỏi vị trí ban
đầu (xét theo chiều ngang)
xy
- Tham số y dùng để chỉ định khoảng cách mà cái bóng được nhích ra khỏi vị trí ban
đầu (xét theo chiều dọc)
x y color - Tham số color dùng để chỉ định màu sắc của cái bóng.
xy
- Tham số shadow dùng để chỉ định mức độ nhòe của cái bóng, giá trị càng lớn thì
shadow
cái bóng sẽ càng nhòe.
color
xy - Tham số size dùng để chỉ định việc tăng hay giảm kích thước của cái bóng.
shadow
o Nếu giá trị dương, kích thước cái bóng sẽ tăng lên.
size
color o Nếu giá trị âm, kích thước cái bóng sẽ giảm xuống.

initial
(mặc định thì thuộc tính box-shadow có giá trị là none)
inherit - Kế thừa giá trị thuộc tính box-shadow từ phần tử cha của nó.
- Lưu ý: Nếu các bạn muốn tạo nhiều "cái bóng" cho cùng một phần tử HTML thì các bạn cần
phải thêm một dấu phẩy nằm ngăn cách giữa mỗi hai bộ giá trị.
<!DOCTYPE html>
<html>
<head>
div{
margin:50px;
width:300px;
height:200px;
background-color:#73ad21;
box-shadow:5px -5px black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
div{
margin:50px;
width:300px;
height:200px;
box-shadow:7px 6px 5px black;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
div{
margin:65px;
width:300px;
height:200px;
box-shadow:20px 20px 10px
gray, -30px -30px 10px blue;
}
</style>
</head>
<body>
<div></div>
Đổ 2 bóng
</body>
</html>
20. Các thuộc tính dùng để định dạng cho văn bản
- color : Chỉnh màu sắc của văn bản.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:red">Lập Trình Web 01</h1>
<h1 style="color:#1224fb">Lập Trình Web 02</h1>
<h1 style="color:rgba(0,255,43)">Lập Trình Web 03</h1>
</body>
</html>
- word – spacing : Thiết lập khoảng cách nằm giữa mỗi hai từ (word)
normal - Sử dụng khoảng cách mặc định.
length - Chỉ định khoảng cách nằm giữa mỗi hai từ dựa theo một giá trị cụ thể. (giá trị này có thể được
xác định dựa theo một trong các loại đơn vị như: px, em, cm, . . . .)
initial
- Sử dụng giá trị mặc định của nó. (mặc định thì thuộc tính word-spacing có giá trị là normal)
inherit
- Kế thừa giá trị thuộc tính word-spacing từ phần tử cha của nó.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Tài liệu học Lập Trình Web</p>
<p style="word-spacing:normal">Tài liệu
học Lập Trình Web</p>
<p style="word-spacing:50px">Tài liệu học
Lập Trình Web</p>
<p style="word-spacing:initial">Tài liệu
học Lập Trình Web</p>
</body>
</html>
- word-break : Tùy chỉnh cách thức ngắt xuống dòng của một từ (word) trong trường hợp
khoảng trống của hàng hiện tại không đủ để chứa hết nó
- Một từ (word) sẽ được bắt đầu trên hàng mới nếu khoảng trống của hàng hiện tại
normal không đủ chỗ để chứa hết nó. Khi đã bắt đầu trên một hàng mới, nếu nó dài vượt
quá chiều rộng của phần tử thì nó sẽ bị tràn ra khỏi phần tử.
- Một từ (word) sẽ được bắt đầu trên hàng mới nếu khoảng trống của hàng hiện tại
break- không đủ chỗ để chứa hết nó. Khi đã bắt đầu trên một hàng mới, nếu nó dài vượt
word quá chiều rộng của phần tử thì những ký tự tràn ra ngoài sẽ tự động ngắt xuống
dòng.
- Một từ (word) sẽ được bắt đầu trên hàng hiện tại mặc cho khoảng trống của hàng
break-all hiện tại có đủ chỗ chứa hết nó hay không, những ký tự bị tràn ra ngoài sẽ tự động
ngắt xuống dòng.
initial
(mặc định thì thuộc tính word-break có giá trị là normal)
inherit - Kế thừa giá trị thuộc tính word-break từ phần tử cha của nó.
<!DOCTYPE html> Break - word

<html>
<head>
p{
border:1px solid gray;
width:200px;
height:300px;
font-size:18px;
word-break:break-word;
}
</style>
</head>
<body>
<p>Các bạn hoàn toàn có thể học và làm
được website nếu mỗi ngày chịu
dànhramộtítthờigianđểtìmhiểuvềlậptrìnhweb. Tùy
vào mức độ chăm chỉ, nhưng nếu trung bình mỗi
ngày bỏ ra 2 giờ thì không quá 06 tháng, các
bạn sẽ có đủ kiến thức để bắt tay vào việc xây
dựng một cái website.</p>
</body>
</html>
Break - all
- text-align : Canh lề (theo chiều ngang) cho văn bản.

left - Văn bản được canh nằm bên trái.
center - Văn bản được canh nằm giữa.
right - Văn bản được canh nằm bên phải.
justify - Văn bản được canh đều hai bên trái & phải.
initial
(mặc định thì thuộc tính text-align có giá trị là left)
inherit - Kế thừa giá trị thuộc tính text-align từ phần tử cha của nó.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="text-align:left">Lập Trình
Web</p>
<p style="text-align:center">Lập Trình
Web</p>
<p style="text-align:right">Lập Trình
Web</p>
<p style="text-align:justify">HTML là ngôn
ngữ đầu tiên mà một nhà
thiết kế web phải học. HTML được dùng
để tạo ra các nội dung
cho trang web, ví dụ như: hình ảnh, âm
thanh, video, các liên
kết, các đoạn văn bản. HTML cực kỳ dễ
học. Đồng thời, chúng tôi
xin giới thiệu đến các bạn loạt Tài
liệu hướng dẫn học HTML đã
được biên soạn kỹ lưỡng theo trình tự
từ cơ bản đến nâng cao kèm
theo nhiều ví dụ minh họa đơn giản dễ
hiểu. Hứa hẹn sẽ giúp bạn đọc
dễ dàng tiếp thu ngôn ngữ HTML trong
thời gian ngắn nhất với khối
lượng kiến thức đầy đủ nhất.</p>
</body>
</html>
- text-align-last : Canh lề (theo chiều ngang) cho dòng chữ cuối cùng của đoạn văn bản.
auto - Dòng chữ cuối cùng sẽ phụ thuộc vào việc canh lề của đoạn văn bản.
left - Dòng chữ cuối cùng sẽ được canh nằm bên trái.
center - Dòng chữ cuối cùng sẽ được canh nằm giữa.
right - Dòng chữ cuối cùng sẽ được canh nằm bên phải.
justify - Dòng chữ cuối cùng sẽ được canh đều hai bên trái & phải.
initial
(mặc định thì thuộc tính text-align-last có giá trị là auto)
inherit - Kế thừa giá trị thuộc tính text-align-last từ phần tử cha của nó.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p style="text-align-last:left">HTML là
ngôn ngữ đầu tiên mà một nhà thiết kế web phải
học.</p>
<p style="text-align-last:right">HTML là
học. </p>
<p style="text-align-last:center">HTML là
học.</p>
<p style="text-align-last:justify">HTML là
học. </p>
</body>
</html>
- text-indent : Thiết lập khoảng cách thụt đầu dòng của dòng chữ đầu tiên.
- text-overflow : Tùy chỉnh cách thức hiển thị của phần văn bản bị tràn ra khỏi phần tử.
- text-shadow : Tạo cái bóng cho văn bản.
- text-decoration-line : Thuộc tính text-decoration-line dùng để xác định vị trí của đường kẻ.
- text-decoration-style : Thuộc tính text-decoration-style dùng để xác định kiểu của đường kẻ.
- text-decoration-color : Thuộc tính text-decoration-color dùng để xác định màu của đường kẻ.
- text-decoration : thiết lập một cái đường kẻ lên văn bản.
- font-family : Chỉnh phông chữ cho văn bản.
- font-size : Chỉnh kích cỡ chữ của văn bản.
- font-weight : Chuyển đổi văn bản sang dạng chữ in đậm hay không in đậm.
https://webcoban.vn/css/cac-thuoc-tinh-dinh-dang-van-ban-text-trong-css.html

Xem VÍ D : "Text/css" Blue

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Xem VÍ D : "Text/css" Blue

Uploaded by

Copyright:

Available Formats

CSS

1. Xác định bộ chọn của phần tử

- Chọn các phần tử có class là html

- Chọn các phần tử <h1>

2. Cấu trúc của một phần tử HTML

CONTENT : Nội dung của phần tử.

3. Cách tạo đường viền cho một phần tử HTML

none - Không thiết lập đường viền cho phần tử.

dashed - Đường viền đứt

dotted - Đường viền chấm

double - 2 đường viền

2. Thiết lập "độ dày" của đường viền : border-width :…….. ;

medium - Độ dày của đường viền sẽ tương đương với 3 pixel.

thick - Độ dày của đường viền sẽ tương đương với 5 pixel.

- Sử dụng giá trị mặc định của nó.

initial - Sử dụng giá trị mặc định của nó.

4. Thiết lập đường viền cho từng cạnh

Cú pháp 1: border-style: value1 value2 value3 value4;

Cú pháp 2: border-style: value1 value2 value3;

Cú pháp 3: border-style: value1 value2;

6. Cách tạo đường viền hình ảnh cho một phần tử

8. Cách thiết lập vùng đệm ở riêng từng phía

o Cách 1: Thiết lập nhiều giá trị cho thuộc

o Cách 2: Thêm "tên vị trí" vào phía sau

Cú pháp 1: padding: value1 value2 value3 value4;

Cú pháp 2: padding: value1 value2 value3;

Cú pháp 3: padding: value1 value2;

9. Thiết lập khoảng cách lề cho một phần tử : margin : ……… ;

10. Thiết lập khoảng cách lề ở riêng từng phía

Cú pháp 2: margin: value1 value2 value3;

Cú pháp 3: margin: value1 value2;

none - Không thiết lập hình nền cho phần tử.

- Sử dụng giá trị mặc định của nó.

14. Thiết lập vị trí của hình nền : background-position: ………;

initial - Sử dụng giá trị mặc định của nó.

<!DOCTYPE html> https://webcoban.vn/css/demo?file=3461

- Sử dụng giá trị mặc định của nó

17. Cách thiết lập độ cong cho từng góc

border-radius: bộ giá trị width / bộ giá trị height;

none - Không thiết lập cái bóng cho phần tử.

- Sử dụng giá trị mặc định của nó.

normal - Sử dụng khoảng cách mặc định.

<!DOCTYPE html> Break - word

- text-align : Canh lề (theo chiều ngang) cho văn bản.

- text-shadow : Tạo cái bóng cho văn bản.

- text-decoration : thiết lập một cái đường kẻ lên văn bản.

- font-family : Chỉnh phông chữ cho văn bản.

- font-size : Chỉnh kích cỡ chữ của văn bản.

You might also like