Tr ng ĐH Quang Trungườ
Khoa: KT-CN
L p: K2-101ớ
TÌM Hi U V CSSỂ Ề
Môn: Thi t K Webế ế
GV: Đ Minh Đ cỗ ứ
Nhóm 4 :
1. Nguy n Th L iễ ị ạ
2. Tr ng N Thu Hi nươ ữ ề
3. Đ Vũ Quyênỗ
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 1
TÌM HI U V CSSỂ Ề
CSS là gì?
CSS là vi t t t c a ế ắ ủ Casscading style sheets ,dùng đ mô t cách hi n th các ể ả ể ị
thành ph n trên web. CSS dùng đ quy đ nh cách trình bày cho các tài li u vi t ầ ể ị ệ ế
b ng HTML,xHTML,XML,SVG hay UML,…ằ
•
Ví d : ụ đ đ nh màu n n cho trang web là xanh nh t(cyan) ta dung đo n mã ể ị ề ạ ạ
sau:
HTML:< body bgcolor=“#00BFF3”>
CSS: body{background-color: #00BFF3;}
Cú pháp CSS c b n:ơ ả
Selector { property : value;}
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 2
H c CSS c n nh ng gì?ọ ầ ữ
HTML
Trình so n th o đ vi t CSS nh : notepad,wordpad,….ạ ả ể ế ư
<body>
<p>Welcome to Quy Nhon </p>
</body>
</html>
L u ý: ư th style nên đ t trong th head. Đ i v i nh ng trình duy t không nh n ra đ c ẻ ặ ẻ ố ớ ữ ệ ậ ượ
<style> ta làm nh sau: đ a ư ư <! tr c và ở ướ > sau kh i css.ở ố
Ví dụ: <style type=“text/css”>
<!- - body{background-color:#FFF}
p{color:#00FF00}- ->
</style>
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 5
V trí đ t CSS trong HTML.ị ặ
Cách 3: External style sheet ( liên k t v i m t file CSS bên ngoài )ế ớ ộ
T ng t cách 2 nh ng ta đ t mã css vào m t th style và đ a chúng trong m t ươ ụ ư ạ ộ ẻ ư ộ
file css(có ph n m r ng .css) bên ngoài và liên k t nó v i trang web b ng thu c ầ ở ộ ế ớ ằ ộ
tính href trong th ẻ link .Đây là cách làm đ c khuy n cáo.ượ ế
Ví d : ụ
Đ u tiên t o m t file vidu.html có n i dung:ầ ạ ộ ộ
<html>
<head>
<title> vi du</title>
<link rel=“stylesheet” type=“text/css” href=“style.css”/>
</head>
<body>
<p>Welcome to Quy Nhon </p>
</body>
< input name=“seach” type=“text” value=“key word”>
CSS: input [name=“seach”]
Ví d : ụ Đ làm cho t t c các ch có trên trang web đ u màu đ .ể ấ ả ử ề ỏ
CSS: *{color : red}
Trong class th img và “a” đ u có cùng tên visitors nh ng đây là 2 đ i t ng ẻ ề ư ố ượ
khác nhau .ta mu n dùng CSS riêng cho ph n nh thì dùng nh sau:ố ầ ả ư
img.visitors {width:50}
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 9
Tìm hi u cú ph p c b n CSSể ấ ơ ả
Property: là thu c tính quy đ nh cách trình bày.ộ ị
Ví d : ụ background-color,font-family,color,padding,margin,…
N u có nhi u h n 1 thu c tính trong 1 selecter thì ta dung d u “;” đ phân cách và ế ề ơ ộ ấ ể
đ c đ t trong d u ngo c nh n sau selecter.ượ ặ ấ ặ ọ
Ví d : ụ
body{background-color:#FFF;font-size:14px}
Đ i 1 trang web có nhi u thành ph n có cùng m t só thu c tính ta có th gom g n ố ề ầ ộ ộ ể ọ
l i nh sau:ạ ư
h1{color:#0000FF;text-transform:uppercase} /*transform: ch đ in hoa ,in ế ộ
th ng ườ uppercase: in hoa*/
h2{color:#0000FF;text-transform:uppercase}
h3{color:#0000FF;text-transform:uppercase}
=> h1,h2,h3{color:#0000FF;text-transform:uppercase}
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 10
Tìm hi u cú pháp c b n CSSể ơ ả
Value: giá tr c a thu c tínhị ủ ộ
Ví d : h3{color:ụ #0000FF;font-family:”Times New Roman”;}
Ghi chú trong CSS: /* n i dung chú thích*/ộ
Thu c tính background rút g nộ ọ
Ví d : ụ
background-color:cyan;
background-image:url(dinhan.jpg) ;
background-repeat:no-repeat;
background-attachment:fixed;
background-position:right bottom;
background: cyan url(dinhan.jpg) no-repeat fixed right bottom;
C u trúc khái quát rút g n cho nhóm background.ấ ọ
background:<background-color>|<background-image>|<background-repeat> |
<background-attachment>|background-position>
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 15
2. Thu c tính fontộ
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 16
2.Thu c tính fontộ
Ví d : ụ body{ font-family:”Times New Roman”,Tohana,San-serif}
h1{ font-style: italic;
font-variant: small-caps; /*ch in hoa kích c nh h n in hoa chu n*/ử ở ỏ ơ ẩ
font-weight: bold;
font-size:35px;
font-family: arial,verdana,sans-serif;
}
Hay : h1 { font: italic bold 35px arial,verdana,sans-serif }
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 17
4.Thu c tính pseudo-classes for ộ
links
Ví d :ụ
a:link{color:#00FF00}
a:hover{color:#FF00FF}
a:visited{color:#FF0000}
a:active{color:#662d91}
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 22
5.Class & ID
Nhóm các ph n t trong class:ầ ử
Dùng đ nhóm m t s thành ph n nào đó đ áp d ng 1 thu c tính đ c bi t.ể ộ ố ầ ể ụ ộ ặ ệ
Ví d : ụ T o 2 nhóm các t nh có màu xanh da tr i và thành ph có màu đ .trong ạ ỉ ờ ố ỏ
HTML nh sau:ư
<p> Danh sách các t nh ,thành ph c a Vi t Nam</p>ỉ ố ủ ệ
<ul>
<li class=“tp”> Hà N i</li>ộ
<li class=“tp”> TP.HCM</li>
<li class=“tp”> Đà N ng</li>ẵ
<li class=“tinh”> Bình Đinh</li>
<li class=“tinh”> Khánh Hòa</li>
<li class=“tinh”> Th a Thiên Hu </li>ừ ế
</ul>
Trong CSS nh sau:ư
li.tp{color:FF0000}
li.tinh{color:0000FF}
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 23
Copyright: Tài liệu đại học ©