bài giảng tìm hiểu về css
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.14 MB, 47 trang )
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,….ạ ả ể ế ư
Phiên b n m i nh t c a trình duy t web .ả ớ ấ ủ ệ
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 3
Có 3 cách khác nhau đ nhúng CSS vào m t đo n mã HTML.ể ộ ạ
Cách 1: Inline style sheet( N i tuy n)ộ ế
đây là ph ng pháp nguyên th y(không c n selecter trong cú pháp)ươ ủ ầ
Ví d : ụ <html>
<head>
<title>vi du</title>
</head>
<body style=“background-color:#FFF”;>
<p style=“color:green”> Welcome to Quy Nhon</p>
</body>
</html>
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 4
V trí đ t CSS trong HTML.ị ặ
V trí đ t CSS trong HTMLị ặ
Cách 2: Embedding style sheet( Bên trong th style)ẻ
ví d :ụ
<html>
<head>
<title> vi du</title>
<style type=“text/css”>
body{background:#FFF}
p{color:#00FF00}
</style>
</head>
<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>
</html>
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 6
V trí đ t CSS trong HTML.ị ặ
Sau đó t o m t file style.css v i n i dung :ạ ộ ớ ộ
body{background-color:#FFF}
p{color:#00FF00}
Đ t hai file vào trong m t th m c ,sau đó m file vidu.html ặ ộ ư ụ ở
trên trình duy t web đ xem k t qu .ệ ể ế ả
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 7
S u tiên trong CSSự ư
Thu c tính thay đ i đ u tiênộ ổ ọ ư : !important
Cú pháp: selector{ property :value !important}
Ví d : ụ p{width :500px ; text-align:left !important; color:#333 !important}
N u cùng ,m t thu c tính cho m t selector mà c 2 thu c tính cùng đ t !ế ộ ộ ộ ả ộ ặ
important thì u tiên cho cái sau.ư
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 8
Tìm hi u cú ph p c b n CSSể ấ ơ ả
Cú pháp CSS c b n:ơ ả
Selector { property : value;}
Selector : các đ i t ng mà ta s áp d ng các thu c tính trình bày.Nó là các ố ượ ẽ ụ ộ
tag HTML,class hay id.ví d : body,h2,h3,p,img,#title,…ụ
Ví d : ụ HTML :
< 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*/ộ
Đ n v CSS:ơ ị Đ n v đo chi u dài.ơ ị ề
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 11
Đ n v CSSơ ị
Đ n v màu s c:ơ ị ắ
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 12
1.Thu c tính brakgroundộ
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 13
1. Thu c tính brakgroundộ
Ví d 1:ụ
body{background-color:cyan}
body{background-image:url(dinhan.jpg);
background-repeat:no-repeat;}
h1{background-color:red;}
o
Khóa nh n n: background-attachment ả ề cho phép b n xát đ nh tính c đ nh c a ạ ị ố ị ủ
nh n n so v i n i dung trang web. ả ề ớ ộ
+ Sroll: nh n n s cu n cùng n i dung ,giá tr m c đ nh.ả ề ẽ ộ ộ ị ặ ị
+ fixed: C đ nh nh n n so v i n i dung trang web.(nghĩa là hình n n đ ng yên khi ố ị ả ề ớ ộ ề ứ
b n đang cu n trang web.)ạ ộ
o
Đ nh v nh n n:background-positionị ị ả ề
o
Vd: background-position:5cm2cm(5cm t trái qua và 2cm t ph i qua)ừ ừ ả
o
Background-position:bottom left( đ nh v góc trái phía d i)ị ị ở ướ
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 14
1. Thu c tính brakgroundộ
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
3.Thu c tính textộ
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 18
3.Thu c tính textộ
Ví du1:
text-transform: none;
text-transform: uppercase; /*in hoa*/
text-transform: lowercase; /*in th ng*/ườ
text-transform: capitalize;
text-transform: inherit; /*k th a*/ế ừ
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 19
3.Thu c tính textộ
Ví du2:
body{color:#000}
h1{color:#0000FF}/*xanh da tr i*/ờ
h2{color:#00FF00}/*xanh lá*/
p{text-indent:30px}/*th t đ u dòng cho dong đ u tiên trong văn b n*/ụ ầ ầ ả
h1,h2{text-align:right}
p{text-align:justify}/*canh đ u*/ề
h1,h2{letter-spacing:7px}
h1{text-decoration:blink}/*hi u ng nh p nháy*/ệ ứ ấ
h1{text-transform:capitalize}/*in hoa kí t đ u tiên trong m i t */ở ự ầ ỗ ừ
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 20
4.Thu c tính pseudo-classes for ộ
links
Cho phép b n xác đ nh hi u ng đ nh d ng cho m t đ i t ng liên k t m t ạ ị ệ ứ ị ạ ộ ố ượ ế ở ộ
tr ng thái xác đ nh .ạ ị
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 21
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
5.Class & ID
Nh n d ng v i ph n t ID:ậ ạ ớ ầ ử
Ví d : trong HTMLụ
<p> Danh sách các t nh ,thành ph c a Vi t Nam</p>ỉ ố ủ ệ
<ul>
<li id=“hanoi”> Hà N i</li>ộ
<li id=“hcm”> TP.HCM</li>
<li class=“tinh”> Bình Đinh</li>
<li class=“tinh”> Khánh Hòa</li>
</ul>
Trong CSS:
#hanoi{color: cyan}
#hcm{color:##662d91}
.tinh{color:#00FF00}
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 24
5.Class & ID
Class : dùng đ nhóm các đ i t ng cùng thu c tính, do tính ch t đó nên ể ố ượ ộ ấ
nó có th đ c s d ng nhi u l n.ể ượ ử ụ ề ầ
ID: dùng đ nh n d ng m t đ i t ng đ c tr ng ,id có tính duy nh t.ể ậ ạ ộ ố ượ ặ ư ấ
L u ý: ư không nên đ t tên id,class là các ch s cho kí t đ u .Nó s ặ ử ố ự ầ ẽ
không làm vi c v i firefox.ệ ớ
Vi d : ụ <li id=“2abc”> ha noi</li>
Tìm hi u CSS -Th c hi n :Nhóm 4 k2.101ế ự ệ 25
