Tổng Quan Về Css: Giảng viên: Nguyễn Thị Hồng Yến

TỔNG QUAN VỀ CSS
Giảng viên: Nguyễn Thị Hồng Yến

CHÈN CSS
▪ Inline style
▪ Internal style
▪ External style
2 Giảng viên: Nguyễn Thị Hồng Yến

INLINE STYLE
▪ Sử dụng nhiều trong trường hợp một thẻ HTML

nào đó cần có style riêng cho nó.
▪ Áp dụng cho chính thẻ HTML.
Dấu nháy
▪ Độ ưu tiên lớn nhất. đơn
▪ Cú pháp:
<tag_HTML style=“ property_1:value_1;
property_2:value_2”>

INLINE STYLE
▪ Ví dụ:
<p style="color:red; margin-left:
20px“>Đoạn văn bản có chứa 2 định dạng</p>
▪ Chú ý:
<p style="background:
url(“images/yellow_rock.gif");">Kết quả sẽ
như thế nào khi có 2 cặp dấu nháy đơn ?</p>
<p style="background:
url(images/yellow_rock.gif);"> Kết quả sẽ như
thế nào ? </p>

ƯU NHƯỢC INLINE STYLE
▪ Ưu điểm
▪ Đơn giản, dễ hiểu, dễ sử dụng
▪ Nhược điểm
▪ Cồng kềnh
▪ Khó bảo trì, nâng cao.
▪ Không phù hợp cho các thiết kế phức tạp

INTERNAL STYLE
▪ Chèn thẳng CSS trong tài liệu.

▪ Áp dụng riêng cho tài liệu.
▪ Phải khai báo thẻ style nằm giữa cặp thẻ head
▪ Cú pháp:
<style type=“text/css”>
/* Code css */
</style>

INTERNAL STYLE
<html>
<head>
<style type="text/css">
hr {color:red;}
p {margin-left:20px;}
</style>
</head>
<body>
</body>
</html>
ƯU NHƯỢC ĐIỂM INTERNAL STYLE
▪ Ưu điểm
▪ Hiệu quả hơn Inline style.
▪ Cho phép thay đổi hàng loạt các elements
▪ Thích hợp cho thử nghiệm ban đầu
▪ Chỉ có giá trị cho trang chứa nó
▪ Nạp lại tài liệu hoàn toàn khi trang web được load lại

EXTERNAL STYLE
▪ Mã code css được đặt trong 1 tập tin riêng

▪ Ví dụ: templates.css, mystyle.css…
▪ Sử dụng khai báo phù hợp đặt trong cặp thẻ
<head>.
▪ Chèn vào trang web thông qua cặp thẻ <link>
▪ Cú pháp:
<link rel="stylesheet" type="text/css"
href=“url”>
Thay đổi đường
dẫn tập tin CSS

EXTERNAL STYLE
Ví dụ :
<html>
<head>
<link rel="stylesheet"
type="text/css" href="mystyle.css">
</head>
<body>
</body>
Trang web và
</html> tập tin CSS ở
cùng thư mục

ƯU NHƯỢC ĐIỂM EXTERNAL STYLE
▪ Ưu điểm
▪ Không nằm trong trực tiếp trên trang web nên không
cần phải dowload lại dữ liệu
▪ Có tác dụng cho nhiều trang
▪ Sửa chửa, bảo trì dễ dàng
▪ Đảm bảo sự liên kết đến tập tin đang sử dụng

CHÚ THÍCH
▪ Sử dụng cặp dấu /* và */ để đóng khối nội dung

chú thích
▪ Ví dụ:
/*Đây là chú thích*/
p
{
text-align:center;
/*Đây là chú thích khác*/
color:black;
font-family:arial;
}
CÚ PHÁP CSS
▪ Gồm 3 phần:
▪ Phần thẻ chọn – đối tượng áp dụng (selector)
▪ Phần thuộc tính (property)
▪ Phần giá trị (value).
▪ Cú pháp:
selector
{
property_1:value_1;
property_2:value_2;
/* .... */
}
VÍ DỤ

ĐỊNH NGHĨA LẠI THẺ HTML
▪ Định nghĩa từng thẻ

p{color:blue;}
img
{
display:none;
}
a
{
text-decoration:none;
}

BÀI TẬP
▪ Định nghĩa lại thẻ <div> và <span>

▪ <div>: canh đều, thụt lề
▪ <span>: hoa ký tự đầu tiên của mỗi từ.

ĐỊNH NGHĨA LẠI THẺ HTML
▪ Nhóm nhiều selector lại với nhau

h1, h2, h3, h4, h5, h6
{
text-align:right;
color:blue;
}
p, div
{ color:green; }
h1
{ font-weight:bold;
text-transform:uppercase;
}
BÀI TẬP
▪ Định nghĩa lại các thẻ với định dạng sau:

▪ <i>: chữ màu xanh dương, kích thước 20 pixels, in
đậm.
▪ <b>: chữ màu xanh dương, kích thước 20 pixels, in
hoa
▪ <u>: chữ màu xanh dương, kích thước 20 pixels,
không có đường gạch chân
▪ <p>, <h6>: kích thước chữ 30 pixels, văn bản canh
đều.

ID VÀ CLASS
▪ Định dạng thông qua thuộc tính id và class của

element HTML
▪ ID:
▪ Mỗi element có 1 id duy nhất (1-1)
▪ Mỗi trang chỉ có 1 element có id đó (1-1)
▪ Class
▪ Sử dụng 1 class cho nhiều element (1-n)
▪ Một element được phép sử dụng nhiều class (1 – n)
Một đối tượng có quyền áp dụng nhiều class, nhưng
chỉ sử dụng được id duy nhất
SỬ DỤNG ID
▪ Cú pháp
#id_name
{
property:value;
/* ….*/
}
▪ Áp dụng:
<tag_name id=“id_name”> Nội
dung[</tag_name>]

VÍ DỤ ID
▪ Tạo id tên là para

#para Có 2 thẻ
{ HTML cùng
text-align:center; áp dụng id
color:red; para, chuyện
} gì sẽ xảy ra ?
▪ Áp dụng id vào thẻ HTML

<h1 id=“para”>Đoạn văn bản</h1>
<div id=“para”>Đoạn văn bản</div>

BÀI TẬP
▪ Tạo id tên tieude chứa các định dạng sau: chữ

màu đỏ, gạch chân, canh giữa. Áp dụng id
tieude cho thẻ <h1>, <h2>. Cho nhận xét
▪ Tạo id tên noidung chứa định dạng: canh đều,
thụt lề dòng đầu tiên của đoạn văn bản, giãn
dòng. Áp dụng id noidung cho thẻ <p>, <div>
▪ Cho biết kết quả trình duyệt của đoạn code
HTML sau:

KẾT HỢP ID VÀ SELECTOR
▪ Ta có thể định nghĩa 1 id giành riêng cho một tag

HTML
▪ Cú pháp: tag_name#id_name
▪ Ví dụ
h1#header
{
color:red; font-size:20px;
}

KẾT HỢP ID VÀ SELECTOR
▪ Áp dụng cho thẻ HTML

<h1 id= “header”> Kết quả văn bản 1
sẽ như thế nào ? </h1>
<h1> Kết quả văn bản 2 sẽ như thế
nào ? </h1>
▪ Thêm đoạn code CSS:

h1{
text-decoration:underline;
color:blue;
}
BÀI TẬP
▪ Tạo id tieude chỉ sử dụng cho thẻ h1 chứa định

dạng sau: chữ in hoa, màu xanh.
▪ Định nghĩa lại thẻ h1 chứa: chữ màu vàng, canh
giữa, gạch chân.
▪ Cho biết kết quả trình duyệt của đoạn code:
<h1 id=“tieude”>Nội dung h1 </h1>
<h1>Nội dung khác của h1</h1>
<p id=“tieude”>Nội dung đoạn văn bản</p>

CLASS
▪ Cú pháp
.class_name
{
property:value;
/* … */
}
▪ Áp dụng:
<tag_name class=“class_name”>Nội
dung[</tag_name>]

VÍ DỤ CLASS
▪ Tạo 2 lop canhgiua và canhbao

.canhbao
{
color:red;
font-weight:700;
}
.canhgiua
{
text-align:center ;
}

VÍ DỤ CLASS
▪ Áp dụng 2 lớp đã tạo

<h1 class= “canhbao”>Cảnh báo </h1>
<p class= “canhbao”> Chú ý ! cẩn thận </p>
<p class=”canhgiua”>Lớp canh giữa</p>
<div class=“canhbao”><p
class=“canhgiua”>Áp dụng 2 lớp</p></div>
<div class=“canhbao canhgiua”>Áp dụng 2
lớp</p></div>
<div class=“canhgiua canhbao”>Áp dụng 2
lớp</p></div>

BÀI TẬP
▪ Tạo class noidung chứa: chữ in đậm, canh giữa

▪ Tạo id noidung chứa: chữ màu xanh, in hoa
▪ Áp dụng id và class noidung cho thẻ p, kết quả
nội dung nằm trong thẻ <p> sẽ như thế nào ?
Rút ra qui luật

ưu tiên

VÍ DỤ
.maudo
{
text-align:center ;
color:blue;
font-weight:100;
}
.khac
{
color:red;
font-weight:700;
}
<div class=“maudo khac”>Nội dung </div>
VÍ DỤ
▪ Thêm id chinh
#chinh { color:yellow; }
<div class=“maudo khac”
id=“chinh”>Nội dung 1 </div>
<div id=“chinh” class=“maudo
khac” >Nội dung 2 </div>

KẾT HỢP CLASS VÀ SELECTOR
▪ Ta có thể định nghĩa riêng 1 lớp chỉ áp dụng cho

1 selector nào đó
▪ Cú pháp: tag_name.class_name
▪ Ví dụ:
h1.canhbao{
color: red;
word-spacing:20px;
}
.canhbao{ font-weight:900;
}

KẾT HỢP CLASS VÀ SELECTOR
▪ Áp dụng class vừa tạo

<h1 class= “canhbao”> Kết quả 1 ???</h1>
<h1>Kết quả 2 ???</h1>
<div class=“canhbao”>Kết quả 3 ???</div>
▪ Thêm định nghĩa id #tieude { color:yellow; }

▪ Kết quả đoạn code sau ? => Luật ???
<h1 class= “canhbao” id=“tieude”> Kết quả
1 ???</h1>
<div class=“canhbao” id=“tieude”>Kết quả 3
???</div>
BỘ KẾT HỢP (COMBINATOR)
▪ Con cháu (Descendant combinator)

▪ Con (Child combinator)
▪ Anh em liền kề (Next-sibling combinator)
▪ Anh em theo sau (Following-sibling combinator)

CON - CHÁU
▪ Cú pháp:
Con cháu:
Selector_1 [selector_2 ....]
{
property:value;
}
Con:
Selector_1 > [selector_2 ....]
{
property:value;
}
VÍ DỤ CON - CHÁU
p strong{
color: yellow;
font-size:20px; Luật
} ???
p > strong {
color:blue;
}
<p><strong>Kết quả 1 ? </strong></p>
<p><i><strong>Kết quả 2 ?
</strong></i></p>

ANH EM
▪ Cú pháp:
Anh em liền kề:
Selector_1 + [selector_2 ....]
{
property:value;
}
Anh em theo sau:
Selector_1 ~ [selector_2 ....]
{
property:value;
}
VÍ DỤ ANH EM
p ~ strong{
color: yellow;
font-size:20px; Luật
} ???
p + strong {
color:blue;
}
<p></p><h1></h1><strong>Kết quả
1?</strong>
<p></p><strong>Kết quả 2?</strong

VÍ DỤ BỘ KẾT HỢP
▪ Trong phần css

p{color:red;}
#a p {color:yellow;font-wieght: bold;}
p > .a { color:green; }
p + #a {color: blue; font-weight:bold;}
p ~ .a {color:black; font-style:italic}

VÍ DỤ BỘ KẾT HỢP
▪ Áp dụng
<p>Kết quả 1</p>
<div id=“a”><p> Kết quả 2 </p></div>
<div class=”a”></div><p>Kết quả 3 </p>
<p><u><i class=“a”> Kết quả 4
</u></i></p>
<div class=”a”> Kết quả 5 </div>

THUỘC TÍNH THẺ
▪ Định nghĩa lại thuộc tính cụ thể của 1 phần tử

tag_HTML[attribute]
{
property:value;
}
▪ Dùng dấu * cho tất cả các thẻ HTML

THUỘC TÍNH THẺ
▪ Ví dụ
a[target]
{
color:red;
}
<a href= “#” target= “_blank”>Liên kết

có target</a>
<a href= “#”> Liên kết không có
target</a>

THUỘC TÍNH THẺ
▪ Thêm đoạn code CSS:

a.lienket
{
color:red;
}
<a target= “_blank”>Liên kết 1</a>

<a target= “_blank” class=“lienket”>Liên
kết 2</a>
<a class=“lienket”>Liên kết 3</a>

THUỘC TÍNH THẺ
*[title]
{
color:red;
}
<a href= “#” title= “liên kết 1”>Liên

kết có màu đỏ </a>
<a href= “#”> Liên kết không title</a>

LỚP GIẢ
▪ Chỉ định trạng thái đặc biệt của phần tử được

chọn
▪ Cú pháp:
selector:pseudo-class {
property: value;
}

PSEUDO-CLASSES
pseudo-class Ý nghĩa
a:link,
a:visited,
Các sự kiện của liên kết
a:hover,
a:active
:first-child Con đầu tiên của phần tử khác
:checked,
giành cho các <input>
:focus
:nth-child(n) Phần tử thứ n

PHẦN TỬ GIẢ (PSEUDO-
ELEMENTS)
pseudo-elements Ý nghĩa
1
::after Chèn thêm nội dung phía sau
1
::before Chèn thêm nội dung phía trước
2
::first-letter Định dạng ký tự đầu tiên
3
::first-line Định dạng dòng đầu tiên
::selection Định dạng phần được chọn
1
content
2
font, color, background, margin, padding, border, text-decoration, vertical-
align(float:none), text-transform, line-height, float, clear
3
font, color, background, word-spacing, letter-spacing, text-decoration,
vertical-align, text-transform, line-height, clear

TRẬT TỰ ƯU TIÊN
▪ Thứ 1: !important
▪ Thứ 2: Inline style
▪ Thư 3: Độ mạnh
▪ Thứ 4: Internal style sheet
độ mạnh bằng nhau
▪ Thứ 5: External style sheet

▪ Thứ 6: Mặc định trình duyệt.

ĐƠN VỊ TRONG CSS
▪ Có 2 loại chiều dài

▪ Tương đối
▪ Tuyệt đối
▪ Chiều dài tương đối
▪ %: percentage
▪ em: ứng kích thước của font size hiện tại
▪ rem: ứng kích thước của font size phần tử gốc
▪ ex: theo chiều cao x-height của font hiện tại
▪ vh,vw: ứng với 1% chiều cao/rộng của viewport
▪ vmin, vmax: ứng với 1% nhỏ/lớn nhất của viewport
ĐƠN VỊ TRONG CSS
▪ Chiều dài tuyệt đối

▪ in: inche (1in=96px=2.54cm)
▪ cm: centimeter
▪ mm: milimeter
▪ pt: point (1pt=1/72in)
▪ pc: pica (1pc=12pt)
▪ px: pixel – (1px=1/96in

BOX MODEL

DISPLAY
▪ Chỉ định loại hiển thị của phần tử

▪ Cú pháp:
▪ display: inline | block | inline-block | none
▪ Giá trị khác
▪ flex, inline-flex, grid
▪ inherit, initial
▪ inline-table, table, table-caption, table-column-group,
table-header-group, table-footer-group, table-row-
group, table-cell, table-column, table-row
▪ list-item, run-in

BLOCK-LEVEL ELEMENTS
▪ Những phần tử dạng này như: paragraph,

heading, div
▪ Tạo ra dòng mới trước và sau chỗ khối hộp của
chúng trong normal flow
▪ Những phần tử này được sắp xếp trong normal
flow theo dạng stack vertical
▪ Một phần tử có thể tạo thành block-level box
bằng cách:
▪ display: block;

INLINE ELEMENTS
▪ Là các phần tử như strong hoặc span

▪ Không có dòng trắng trước và sau chúng
▪ Là descendant của block-level element
▪ Để tạo ra một inline-level box, ta khai báo
▪ display: inline;

MÔ HÌNH HỘP
Margin
Border
Padding
Content
height
width

BOX-SIZING
▪ box-sizing là mặc định, thì content được điều

khiển bởi
▪ width, min-width, max-width, height, min-height, max-
height
▪ Cú pháp
▪ box-sizing: content-box | border-box | initial | inherit

CONTENT
▪ Ví dụ: width: 250px;

padding: 10px;
border: 5px solid gray;
margin: 10px;
box-sizing:content-box;
▪ Công thức tổng quát là:

▪ Tổng chiều ngang/dọc = width/height + padding-
left/top + padding-right/bottom + border-left/top +
border-right/bottom + margin-left/top + margin-
right/bottom
CONTENT
▪ Ví dụ: width: 220px;

padding: 10px;
border: 5px solid gray;
margin: 0px;
box-sizing:border-box;

OVERFLOW
▪ Ứng xử nếu nội dung tràn ra khỏi hộp phần tử

(element’s box).
▪ Chỉ dành cho chiều cao (height)
▪ Giá trị
▪ visible | hidden | scroll | auto | initial | inherit

MARGIN
▪ Margin là lề xung quanh của 1 element.

▪ Áp dụng cho cả element dạng block hoặc inline.
▪ Margin không có màu nền
▪ Giá trị margin
▪ auto
▪ length: px, cm, em…
▪ %
▪ Cú pháp: margin: top right bottom left

MARGIN
▪ Bốn lề độc lập

▪ margin-top
▪ margin-right
▪ margin-bottom
▪ margin-left

MARGIN
▪ Khai báo với margin

.father
{
width:200px;
margin-top:50px;
margin-right:auto;
margin-bottom:5em; /* 5 * 16px */
margin-left:30%;
border:2px groove #33F;
padding:10px;
background-color:#CFF;
}
MARGIN
▪ Shorthand property
▪ margin:top right bottom left;
▪ margin:top right-left bottom;
▪ margin:top-bottom right-left;
▪ margin:top-right-bottom-left;
▪ Cú pháp
top right bottom left

VÍ DỤ MARGIN
▪ margin:25px 50px 75px 100px;

▪ margin:25px 50px 75px;
▪ margin:25px 50px;
▪ margin:25px;

BORDER
▪ Nằm trong margin

▪ Gồm 3 thành phần
▪ width: độ dày đường kẻ. Giá trị mặc định là 2px
(medium)
▪ style: kiểu đường kẻ. Giá trị mặc định là none.
▪ color: màu đường kẻ. Màu mặc định là foreground
color của element (màu cận cảnh)

BORDER STYLE
▪ none: không đường viền

▪ dashed: đường đứt khúc
▪ dotted: đường chấm chấm.
▪ double: đường viền nét đôi.
▪ groove: tạo đường 3D
▪ inset: tạo đường 3D
▪ outset: tạo đường 3D
▪ ridge: tạo đường 3D
▪ solid: đường nét đơn
▪ hidden: ẩn. IE không hỗ trợ
▪ inherit: thừa kế từ element cha. IE không hỗ trợ

BORER STYLE
▪ Bốn đường kẻ độc lập

▪ border-top-style
▪ border-right-style
▪ border-bottom-style
▪ border-left-style
▪ Gom nhóm cùng 1 thuộc tính border-style
▪ Ví dụ: border-style: dotted solid
▪ Tuân thủ qui tắc giống margin

BORDER STYLE
▪ Khai báo cho các kiểu trình bày sau

BORDER WIDTH
▪ Thiết lập độ dày đường kẻ

▪ Giá trị:
▪ length (px, pt, %, em …)
▪ thin ≤ medium ≤ thick (user agent)
▪ initial, inherit.
▪ Ví dụ:
p.one{ p.two{
border-style:solid; border-style:solid;
border-width:5px;} border-width:medium;}

BORDER WIDTH
▪ Chúng ta cũng có thể thiết lập thuộc tính border-

width cho từng đường kẻ
▪ border-left-width
▪ border-right- width
▪ border-top- width
▪ border-bottom- width
▪ Gom nhóm các thuộc tính vào cùng thuộc tính
border-width, tuân thủ qui tắc giống margin

BORDER COLOR
▪ Màu đường kẻ
▪ Sử dụng các giá trị (xem chương 4)
▪ name: sử dụng tên màu như red, yellow…
▪ RGB: sử dụng giá trị màu rgb như rgb(255,0,1)…
▪ Hex: sử dụng giá trị hệ cơ số 16 như #ff0012, #39C…
▪ inherit: thừa kế màu từ element cha. Không có biên
bản IE nào (kể cả phiên bản 8) hỗ trợ giá trị này.
▪ transparent: chỉ định màu trong suốt. IE từ phiên bản
6 trở về trước không hỗ trợ giá trị này.

BORDER COLOR
▪ Ví dụ
p.one
{
border-style:solid;
border-color:red;
}
p.two
{
border-style:solid;
border-color:#98bf21;
}
BORDER COLOR
▪ Có thể thiết lập thuộc tính border-color cho từng

đường kẻ
▪ border-left-color
▪ border-right-color
▪ border-top-color
▪ border-bottom-color
▪ Gom nhóm các đường kẻ trong cùng thuộc tính
border-color tuân thủ theo qui tắc giống margin

BORDER VẮN TẮT
▪ Sử dụng thuộc tính border trình bày cùng lúc 3

thuộc tính:
▪ border-width
▪ border-style
▪ border-color
▪ Bên cạnh đó ta vẫn có thể sử dụng border từng
phía như sau:
▪ border-top
▪ border-right
▪ border-bottom
▪ border-left Giảng viên: Nguyễn Thị Hồng Yến
74
<html>
<head>
<style>
h2 { border-bottom: 3px solid red; }

p { border: 1px solid black; }
table { border: 8px outset green; }
td { border: 3px dotted green; }
</style>
</head>
<body>
<h2>CSS Borders</h2>
<p>This paragraph has a black border.</p>
<table>
<tr><td>This table has an outset border</td></tr>
<tr><td>and each cell has</td></tr>
<tr><td>a dotted border.</td></tr>
</table>
</body>
</html>
PADDING
▪ Là vùng khoảng trống xung quanh nội dung

(content) của element
▪ Các giá trị
▪ length: sử dụng px, pt, em, % … (không sử dụng giá
trị âm)
▪ inherit
▪ Ví dụ
h1 {
padding: 10px;
background-color: pink;}

PADDING
▪ Thiết lập các padding từng phía độc lập

▪ padding-top
▪ padding-right
▪ padding-bottom
▪ padding-left
▪ Shorthand property: gom trong 1 thuộc tính
padding, tuân thủ qui tắc giống margin

<html>
<head>
p
{
background-color:yellow;
}
p.padding
{
padding-top:25px;
padding-bottom:25px;
padding-right:50px;
padding-left:50px;
}
</style>
</head>
<body>
<p>Đây là đoạn văn bản không chỉ định giá trị padding.</p>
<p class="padding">Đoạn văn bản có chỉ định thuộc tính
padding.</p>
</body>
</html>
BORDER-RADIUS
▪ Thêm góc bo cho đường kẻ của phần tử

▪ Đại diện cho 4 gốc:
▪ border-bottom-left-radius
▪ border-bottom-right-radius
▪ border-top-left-radius
▪ border-top-right-radius
▪ Cú pháp:
▪ border-*-*-radius: [ <length> | <%> ] [ <length> | <%> ] ;
▪ border-radius: 1-4 length|% / 1-4 length|%|initial|inherit;

BORDER-RADIUS
▪ Nếu bottom-left bỏ qua  top-right

▪ Nếu bottom-right bỏ qua  top-left
▪ Ví dụ:
▪ border-radius:2em;

BORDER-RADIUS
▪ Ví dụ:
border-radius: 2em 1em 4em / 0.5em 3em;
border-top-left-radius: 2em 0.5em;

border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;

BORDER-RADIUS
▪ Hỗ trợ từ trình duyệt:

BOX-SHADOW
▪ box-shadow: none | [inset? && [ <offset-x>

<offset-y> <blur-radius>? <spread-radius>?
<color>? ] ]
▪ inset: bóng ở trong (inset) hay ở xa (mặc định) khối

▪ blur-radius : khoảng cách của độ mờ của bóng
▪ spread-radius: kích thước của bóng

div#myDIV {
background-color:yellow;
width:200px;
height:100px;
box-shadow:50px 50px 50px 5px black;
}

LOGIC LAYOUT

NORMAL FLOW
▪ Dòng chảy tự nhiên

▪ Tùy thuộc vào ngôn ngữ được sử dụng, có 2
hướng chính
▪ left-to-right
▪ top-to-bottom
▪ Ví dụ
▪ Tiếng việt: từ trái sang phải, từ trên xuống dưới
▪ Tiếng Trung quốc: từ trên xuống dưới, từ phải sang
trái.

VÍ DỤ 1
▪ Kết quả trình duyệt

FLOAT
▪ Cố định một thành phần web về bên trái hay bên

phải không gian bao quanh nó
▪ Tách phần tử ra khỏi cách hiển thị thông thường
của nó =>tạo đk cho các phần tử phía sau di
chuyển lên và lắp đầy chỗ trống
▪ Thường áp dụng cho hình ảnh.
▪ Một thuộc tính cần thiết khi thiết kế dàn trang

FLOAT
▪ Cú pháp: float:left | right | none;

▪ left: cố định phần từ về phía bên trái
▪ right: cố định phần tử về phía bên phải
▪ none: mặc định, không được float
▪ Chú ý: hiện tượng tràn chỉ xảy ra theo:
• Vị trí mặc định đối với phần tử cấp dòng (cố định về phải ->
tràn trái, nhưng không có ngược lại)
• Văn bản (không chứa trong thẻ) và phần tử cấp dòng

VÍ DỤ 2
▪ Thêm đoạn code CSS sau vào ví dụ 1

img{ float:left }

VÍ DỤ FLOAT
Slide 92 Giảng viên: Nguyễn Thị Hồng Yến

CLEAR
▪ Là thuộc tính luôn đi kèm thuộc tính float

▪ Thường gắn vào các phần tử liên quan tới các
phần tử đã được float => quyết định ứng xử của
phần tử này
▪ Ví dụ:
▪ Chúng ta có thể đặt thuộc tính clear vào văn bản ở ví
dụ trên để quyết định văn bản có được tràn lên hay
không

CLEAR
▪ Cú pháp: clear: none | left | right |

both;
▪ left: tràn lên bên trái
▪ right: tràn lên bên phải
▪ both: không tràn
▪ none: bình thường

KẾT HỢP FLOAT - CLEAR

POSITION
▪ Xác định vị trí của một phần tử có quan hệ với

phần tử xung quanh nó, với phần tử cha, với cửa
sổ trình duyệt
▪ Cú pháp:
position: absolute | fixed | relative |
static;

STATIC POSITIONING
▪ Theo giá trị mặc định.

▪ Vị trí mặc định thường theo normal flow của
trang.
▪ Không bị ảnh hưởng bởi các thuộc tính top,
bottom, left, right

ABSOLUTE POSITIONING
▪ Xác định vị trí so với phần tử cha đầu tiên.

(position của phần tử không được phép là static)
▪ Nếu không có, xét so với phần tử html
▪ Được đặt ở vị trí top, left, right, bottom.
▪ Vị trí của phần tử sẽ bị đưa ra khỏi normal flow.
Vì vậy, không bị ảnh hưởng bởi các phần tử anh
em (subsequent sibling elements) đi sau nó.
▪ Các phần tử này có thể overlap những phần tử
khác

FIXED POSITIONING
▪ Phần tử có quan hệ với cửa sổ trình duyệt

▪ Không lệ thuộc vào việc scroll của cửa sổ trình
duyệt
▪ IE >=7 chỉ hỗ trợ khi thuộc tính !DOCTYPE được
chỉ định
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

RELATIVE POSITIONING
▪ Phần tử được đặt ở top, bottom left, right so với

trạng thái mặc định của nó.
▪ Giữ chỗ cho các phần tử khác

OFFSET PROPERTIES
▪ Top, right, bottom, left

▪ Value: length | percentage | auto | inherit
▪ Percentage: so với phần tử chứa
▪ Áp dụng: cho tất cả phần tử có thiết lập position
(trừ position: static)

Z-INDEX
▪ Chỉ định trật tự của các elements.

▪ Những phần tử có z-index lớn sẽ đứng trên
những phần tử có z-index nhỏ hơn
▪ Z-index chỉ đi kèm các phần tử có thuộc tính
position là fixed, position, absolute

Z-INDEX
▪ Tạo code css

img
{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}

Z-INDEX
▪ Tạo trang HTML sử dụng code css

<h1>This is a heading</h1>
<img src="w3css.gif" width="100"
height="140" />
<p>Because the image has a z-index of -1,
it will be placed behind the text.</p>

Flexbox
FLEX CONTAINER
▪ display: flex;
▪ Ví dụ:
▪ .flex-container {
display: flex;
}

FLEX CONTAINER
▪ flex-direction: hướng của các flex items

▪ column | column-reverse | row | row-reverse
▪ flex-wrap: các flex items có nên bọc (wrap)
không
▪ wrap | nowrap | wrap-reverse
▪ flex-flow: flex-direction flex-wrap
▪ justify-content: canh lề các flex items theo
phương ngang
▪ center | flex-start | flex-end | space-around | space-
between
FLEX CONTAINER
▪ align-items: canh lề các flex items theo phương

dọc (khi flex container có height)
▪ center | flex-start | flex-end | stretch | baseline
▪ align-content: canh lề giữa các dòng flex
▪ space-between | space-around | stretch | center | flex-
start | flex-end

FLEX ITEMS
▪ flex-grow: độ giãn của flex item so với item gốc

▪ flex-shrink: độ co của flex item so với item gốc.
▪ Ví dụ:
<div class="flex-container">
<div style="flex-grow: 1">1</div>
</div>

FLEX ITEMS
▪ flex-basis: chỉ định chiều dài của item.

▪ flex: flex-grow flex-shrink flex-basis
▪ order: chỉ định vị trí của item trong container
▪ Ví dụ:
div#myRedDIV {order: 2;}
div#myBlueDIV {order: 4;}
div#myGreenDIV {order: 3;}
div#myPinkDIV {order: 1;}

Grid
GRID

GRID CONTAINER
▪ display:grid;
▪ grid-template-columns: chỉ định độ rộng của các
cột (auto, fr, px, pt... )
▪ grid-gap: khoảng cách giữa các dòng (grid-row-
gap) và các cột (grid-column-gap)
▪ Ví dụ:
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}

GRID CONTAINER
▪ grid-template-rows: chỉ định chiều cao của các

dòng
▪ justify-content: canh lề toàn bộ grid trong khối
container (

GRID ITEMS

GRID ITEMS
▪ grid-column: định nghĩa cột bắt đầu (grid-

column-start) và cột kết thúc (grid-column-end)
đặt một item. Dùng span để gộp nhiều cột cho
đặt một item.
▪ Ví dụ:
.item2 {
grid-column: 2 / span 3; // 2/5 Demo

GRID ITEMS

GRID ITEMS
▪ grid-row: chỉ định dòng đặt 1 item gồm grid-row-

start và grid-row-end, dùng span để gộp nhiều
dòng
▪ Ví dụ:
.item1 {
grid-row: 1 / 4;
}

GRID ITEMS
▪ grid-area: grid-row-start grid-column-

start grid-row-end grid-column-end
▪ Ví dụ:
.item8 {
grid-area: 1 / 2 / 5 / 6;
}

TEXT

FONT - FAMILY
▪ Chỉ định tên font sẽ áp dụng cho đối tượng

▪ Chỉ định qua:
▪ Name
▪ Font category
▪ Cú pháp:
font-family: family name,… | inherit
;

FONT - FAMILY
▪ List category
▪ cursive
▪ fantasy
▪ monospace
▪ sans-serif
▪ serif

FONT - FAMILY
/* Code CSS */
p
{
font-family: “Times New Roman”, Times,
serif
}


<div style="font-family:'Courier New',
Courier, monospace"> font-family: 'Courier
New', Courier, monospace </div>

FONT-SIZE
▪ Thiết lập kích thước trình bày của text

▪ Cú pháp:
font-size:absolute-size | relative-size
| length | percentage | inherit ;
▪ Ví dụ:
p {
font-size: 10pt;
}
p { font-size: 80%; }

FONT-SIZE
▪ Absolute size
▪ xx-small, x-small, small, medium, large, x-large, xx-
large
▪ Relative
▪ smaller
▪ larger
▪ Units
▪ pt, px, in, cm, mm, pc, em, ex, %.

FONT -STYLE
▪ Cú pháp
font-style:italic | normal | oblique |
inherit;
▪ italic: chỉ định những font có nhãn là “italic”. Nếu
không có, sử dụng những font có nhãn “oblique”
▪ normal: chỉ định font chữ của class normal
• Roman font
▪ oblique: chỉ định những font có nhãn “oblique”. Nếu
không có, sử dụng font “ngiêng (xiên)” của Roman
font.

FONT-WEIGHT
▪ Cú pháp:
font-weight:100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900 | bold | bolder |
lighter | normal | inherit;
▪ Ví dụ:
em { font-weight: bolder; }

FONT-VARIANT
▪ Cú pháp:
font-variant: normal | small-caps |
inherit;
▪ Chú ý:
▪ IE<=7 => buggy
▪ Ví dụ:
h1 { font-variant: small-caps; }
h2 { font-variant: normal; }

FONT
▪ Cú pháp:
font: { [ font-style ] [ font-variant ]
[ font-weight ] font-size [ /line-
height ] font-family [| caption | icon
| menu | message-box | small-caption |
status-bar |] inherit } ;

FONT
p
{
font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
font-family:verdana, arial, sans-serif;
line-height:150%;
}
FONT
▪ Rút gọn:
p
{
font:italic small-caps bold 12px/150% verdana, arial,
sans-serif;
}
body
{
font:12px “Lucida Grande”, Arial, Sans-serif;
}

LINE-HEIGHT
▪ line-height:normal | <number> | <length> |

<percentage>
▪ Có tác dụng với phần tử: cấp khối, non-replaced
inline elements
▪ Ví dụ:
line-height: normal
line-height: 3.5 /* <number> values */
line-height: 3em /* <length> values */
line-height: 34% /* <percentage> values */

TEXT-ALIGN
▪ text-align: start | end | left | right | center | justify |

match-parent

@FONT-FACE
▪ Qui tắt:
1. Định nghĩa tên font
2. Chỉ định đường dẫn của tập tin (lowercase)
▪ Sử dụng:
▪ Tham chiếu qua tên font đã khai báo
▪ Ví dụ:
@font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
@FONT-FACE

HÌNH ẢNH VÀ MÀU SẮC

ĐẶC TẢ COLOR
▪ Có nhiều cách thể hiện

▪ Dùng tên tiếng anh
• Ví dụ: red, green, blue...
▪ Dùng mã Hexa: RRGGBB
• Byte 1: giá trị Red
• Byte 2: giá trị Green
• Byte 3: giá trị Blue
• Ví dụ: #FFCCBB = #FCB
▪ Cách viết RGB
• rgb(255,0,0), rgb(100%,0%,0%)....

BẢNG MÀU
17 màu chuẩn trong HTML và 123 màu phụ

Color Name Hex Color name Hex
black #000000 yellow #FFFF00
white #FFFFFF blue #0000FF
green #008000 teal #008080
maroon #800000 lime #00FF00
olive #808000 aqua #00FFFF
navy #000080 fuchsia #FF00FF
purple #800080 silver #C0C0C0
grey #808080 orange #FFA500
red #FF0000
Hệ thống không gian 140 màu

MÀU CỦA TEXT
▪ Có 2 cách khai báo

▪ Dùng mã màu
▪ Dùng tên màu:
▪ Cú pháp:
▪ color: color | inherit ;
▪ Ví dụ:
▪ p { color:red;}
▪ h1{color:#F00;}
▪ Chú ý: màu có tính kế thừa

BACKGROUND-COLOR
▪ Chỉ định màu nền của 1 đối tượng

▪ block
▪ inline
▪ Cú pháp:
background-color: color | transparent |
inherit
▪ Ví dụ:
#example{
background-color: #fff;
}
<html><head><style type="text/css">
body { background-color:red ; }
h1 { background-color:#6495ed ; }
p { background-color:#e0ffff ; }
div { background-color:#b0c4de ; }
</style></head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has it's own background color.</p>
We are still in the div element.
</div>
</body>
</html> 143 Giảng viên: Nguyễn Thị Hồng Yến
IMAGE
▪ GIF
▪ JPEG
▪ PNG
▪ BMP
▪ …

BACKGROUND-IMAGE
▪ Thiết lập ảnh nền cho một đối tượng

▪ Chú ý đến tốc độ đường truyền, không phù hợp
với ảnh kích thước lớn
▪ Ảnh nền không được xem là nội dung
▪ Có một số trình duyệt vô hiệu hóa ảnh nền

BACKGROUND-IMAGE
▪ Cú pháp:
background-image:url(“url”) | none |
inherit;
▪ Ví dụ:
#example {
background-image:url(‘images/bg.gif’);
}
body
{
background-image:url(bg.gif);
}
BACKGROUND-IMAGE
▪ Chú ý:
▪ Nằm theo lề top-left
▪ Lặp theo x và y
▪ Cuộn cùng với tài liệu
▪ Ví dụ:
body
{
margin:10px;
background-color:#CCC;
}
BACKGROUND-IMAGE
#container
{
height:200px;
border:1px solid #000;
background-color:#FFF;
background-image:url(bg.gif);
}

BACKGROUND-SIZE
▪ Chỉ định kích thước của ảnh nền

▪ Giá trị:
▪ auto: mặc định.
▪ length: width height (bỏ qua giá trị thứ 2  auto)
▪ cover: giãn hình nền lắp đầy khối (một phần hình nền
có thể không hiển thị)
▪ contain: giãn theo chiều rộng – cao lớn nhất có thể
sao cho vừa với nội dung của khối
▪ initial, inherit;

BACKGROUND-REPEAT
▪ Cú pháp:
background-repeat: repeat | repeat-x |
repeat-y | no-repeat | inherit ;
▪ Ví dụ:
▪ Thêm đoạn code sau vào id container ở slide trước:
background-repeat:repeat-x; .Cho biết kết quả trình
duyệt ???
▪ Thêm: background-repeat:none; Kết quả trình duyệt
như thế nào ???

<html>
<head>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it
is disturbing the reader!</p>
</body>
</html>
BACKGROUND-REPEAT

BACKGROUND-ORIGIN
▪ Chỉ định mối quan hệ với vị trí của hình nền.

▪ Giá trị:
▪ padding-box: mặc định
▪ border-box
▪ content-box
▪ initial
▪ inherit

BACKGROUND-POSITION
▪ Đặc tả chính xác vị trí xuất hiện của ảnh so với

phần tử chứa nó.
▪ Cú pháp
background-position: { percentage |
length | left | center | right } 1 or 2
values | inherit ;
▪ Ví dụ:
#example{
background-position: 100px 200px;
}

<html>
<head>
body
{
background-image:url('img_tree.png');
background-position:right top;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set postion example.</p>
<p>Now the background image is only show once, and
positioned away from the text.</p>
<p>In this example we have also added a margin on the right
side, so the background image will never disturb the
text.</p>
</body>
</html>
BACKGROUND-ATTACHMENT
▪ Cú pháp:
background-attachment: scroll | fixed |
inherit ;
▪ Chú ý:
▪ Sử dụng cho body
▪ Fixed cố định trên màn hình nền của cửa sổ trình
duyệt
▪ Scroll: mặc định
▪ Ví dụ:

<html>
<head>
body
{
background-image:url('smiley.gif');
background-attachment:fixed;
}
</style>
</head>
<body>
<p>Copy nhiều đoạn văn bản và xem kết quả</p>
</body>
</html>
SHORD-HAND
▪ Cú pháp:
background: background-color background-
image background-repeat background-
attachment background-
position/background-size | inherit ;
▪ Ví dụ
body {background:#ffffff
url('img_tree.png') no-repeat right
top;}

SHORD-HAND
▪ Ví dụ:
#example{
background: #fff url(image.gif) no-
repeat fixed left top;
}

LINK và LIST

NHẮC LẠI LIÊN KẾT
<a href=“trangchu.htm” title=“Nội dung

trang chủ”>Quay về trang chủ</a>
<a href=“xemanh.htm” title=“Xem kích

thước ảnh thật><img src=“image.gif”
alt=“Ảnh bông hồng xanh”></a>

LIÊN KẾT
▪ Thông số mặc định

▪ unvisited: màu xanh
▪ visited: màu đỏ sậm
▪ link: có đường gạch dưới

LIÊN KẾT
▪ Cách trình bày định dạng của liên kết theo nhiều
cách khác nhau
▪ Chỉ định thuộc tính thẻ link thông qua bốn trạng
thái sau:
▪ a:link - a normal, unvisited link
▪ a:visited - a link the user has visited
▪ a:hover - a link when the user mouses over it
▪ a:active - a link the moment it is clicked
=>Trật tự rất quan trọng

CÚ PHÁP
▪ a:(STATE'S NAME) { attribute: value;

}
▪ Ví dụ:
a:link { color: white; }
a:visited { color: white; }
a:hover { color: red; }
a:active {color:yellow;}

LIST
▪ Trong HTML, có 2 dạng list

▪ Có thứ tự
▪ Không có thứ tự
▪ Css cho phép thiết lập lại các thuộc tính cho list

LIST-STYLE-TYLE
▪ Cú pháp:
list-style-type: circle | disc | square
lower-alpha | upper-alpha| upper-roman |
none;
▪ Ví dụ:
ul.a {list-style-type: circle;}
ol.d {list-style-type: lower-alpha;}

LỀ MẶC ĐỊNH
▪ Các phần tử trong ul cách 30px từ phía bên trái

(padding)
▪ ul cách 10px từ đỉnh container (margin)
▪ Mỗi phần tử trong list là phần tử cấp khối.

MENU
▪ Code HTML như sau:

<ul id="mainMenu">
<li><a href="home.html">Home</a></li>
<li><a
href="services.html">Services</a></li>
<li><a
href="products.html">Products</a></li>
<li><a href="support.html">Support</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
MENU
▪ Kết quả trình duyệt (không có css)

MENU NGANG
▪ Tạo menu như hình sau:

MENU
▪ Bước 1: loại bỏ thuộc tính mặc định của list

ol, ul { list-style: none; }
▪ Bước 2: thiết lập thuộc tính width và margin cho
menu
#mainMenu {
margin:10px;
width:900px;
font-family: "Trebuchet MS";
}

MENU NGANG
▪ Bước 3: thiết lập các items thể hiện theo block

#mainMenu li {
display:block;
width:120px;
float:left;
margin-left:2px;
border:1px solid #000;
}

MENU NGANG
▪ Bước 4: chuyển đổi định dạng của các phần tử

về dạng cấp độ khối
#mainMenu a {
display:block;
padding:3px;
text-decoration:none;
background-color:#fff;
color:#009;
}

MENU NGANG
▪ Bước 5: chuyển đổi trạng thái hover

#mainMenu a:hover {
background-color:#009;
color:#fff;
}

MENU DỌC
▪ Tạo menu dọc như sau:

MENU 2 CẤP
▪ Tạo menu kết hợp ngang và dọc

MENU ĐA CẤP – PHÂN
NHÓM

Tổng Quan Về Css: Giảng viên: Nguyễn Thị Hồng Yến

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

Tổng Quan Về Css: Giảng viên: Nguyễn Thị Hồng Yến

Uploaded by

Copyright:

Available Formats

TỔNG QUAN VỀ CSS

Giảng viên: Nguyễn Thị Hồng Yến

2 Giảng viên: Nguyễn Thị Hồng Yến

▪ Sử dụng nhiều trong trường hợp một thẻ HTML

3 Giảng viên: Nguyễn Thị Hồng Yến

4 Giảng viên: Nguyễn Thị Hồng Yến

5 Giảng viên: Nguyễn Thị Hồng Yến

▪ Chèn thẳng CSS trong tài liệu.

6 Giảng viên: Nguyễn Thị Hồng Yến

8 Giảng viên: Nguyễn Thị Hồng Yến

▪ Mã code css được đặt trong 1 tập tin riêng

9 Giảng viên: Nguyễn Thị Hồng Yến

10 Giảng viên: Nguyễn Thị Hồng Yến

11 Giảng viên: Nguyễn Thị Hồng Yến

▪ Sử dụng cặp dấu /* và */ để đóng khối nội dung

14 Giảng viên: Nguyễn Thị Hồng Yến

▪ Định nghĩa từng thẻ

15 Giảng viên: Nguyễn Thị Hồng Yến

▪ Định nghĩa lại thẻ <div> và <span>

16 Giảng viên: Nguyễn Thị Hồng Yến

▪ Nhóm nhiều selector lại với nhau

▪ Định nghĩa lại các thẻ với định dạng sau:

18 Giảng viên: Nguyễn Thị Hồng Yến

▪ Định dạng thông qua thuộc tính id và class của

20 Giảng viên: Nguyễn Thị Hồng Yến

▪ Tạo id tên là para

▪ Áp dụng id vào thẻ HTML

21 Giảng viên: Nguyễn Thị Hồng Yến

▪ Tạo id tên tieude chứa các định dạng sau: chữ

22 Giảng viên: Nguyễn Thị Hồng Yến

▪ Ta có thể định nghĩa 1 id giành riêng cho một tag

23 Giảng viên: Nguyễn Thị Hồng Yến

▪ Áp dụng cho thẻ HTML

▪ Thêm đoạn code CSS:

▪ Tạo id tieude chỉ sử dụng cho thẻ h1 chứa định

25 Giảng viên: Nguyễn Thị Hồng Yến

26 Giảng viên: Nguyễn Thị Hồng Yến

▪ Tạo 2 lop canhgiua và canhbao

27 Giảng viên: Nguyễn Thị Hồng Yến

▪ Áp dụng 2 lớp đã tạo

28 Giảng viên: Nguyễn Thị Hồng Yến

▪ Tạo class noidung chứa: chữ in đậm, canh giữa

Rút ra qui luật

29 Giảng viên: Nguyễn Thị Hồng Yến

31 Giảng viên: Nguyễn Thị Hồng Yến

▪ Ta có thể định nghĩa riêng 1 lớp chỉ áp dụng cho

32 Giảng viên: Nguyễn Thị Hồng Yến

▪ Áp dụng class vừa tạo

▪ Thêm định nghĩa id #tieude { color:yellow; }

▪ Con cháu (Descendant combinator)

34 Giảng viên: Nguyễn Thị Hồng Yến

36 Giảng viên: Nguyễn Thị Hồng Yến

38 Giảng viên: Nguyễn Thị Hồng Yến

▪ Trong phần css

39 Giảng viên: Nguyễn Thị Hồng Yến

40 Giảng viên: Nguyễn Thị Hồng Yến

▪ Định nghĩa lại thuộc tính cụ thể của 1 phần tử

▪ Dùng dấu * cho tất cả các thẻ HTML

41 Giảng viên: Nguyễn Thị Hồng Yến

<a href= “#” target= “_blank”>Liên kết

42 Giảng viên: Nguyễn Thị Hồng Yến

▪ Thêm đoạn code CSS:

<a target= “_blank”>Liên kết 1</a>