Bài giảng môn Thiết kế web - Phần 3: Ngôn ngữ định dạng CSS trình bày tổng quan về CSS, các thuộc tính định dạng, các thuộc tính khác. Đây là tài liệu hữu ích với các bạn chuyên ngành Công nghệ thông tin và những ngành có liên quan.
Nội dung Text: Bài giảng môn Thiết kế web - Phần 3: Ngôn ngữ định dạng CSS
Bài Gi ng Môn Thi t K Web
Ph n 3 : Ngôn Ng
nh D ng CSS
Chương 1:
T NG QUAN V CSS
Gi i thi u
M t s quy ư c v cách vi t CSS
I. GI I THI U
1. CSS là gì?
Trong lĩnh v c xây d ng, chúng ta có trang trí n i th t, trong lĩnh v c th m m - làm p,
chúng ta có k thu t make-up; còn trong lĩnh v c thi t k web chúng ta có CSS. CSS
(Cascading Style Sheets) là m t ngôn 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,…
2. T i sao CSS?
Ngôn ng HTML cũng có s thu c tính nh d ng cơ b n cho text, picture, table, …
nhưng nó không th t s phong phú và chính xác như nhau trên m i h th ng. CSS cung c p
cho b n hàng trăm thu c tính trình bày dành cho các i tư ng v i s sáng t o trong k t h p
các thu c tính giúp mang l i hi u qu cao. Ngoài ra, CSS ã ư c h tr b i t t c các trình
duy t, nên b n hoàn toàn có th t tin trang web c a mình có th hi n th “như nhau” trên m i h
i u hành.
S d ng các mã nh d ng tr c ti p trong HTML t n hao nhi u th i gian thi t k cũng
như dung lư ng lưu tr . Trong khi ó CSS ưa ra phương th c áp d ng m t khuôn m u chu n
t m t file CSS ngoài. Có hi u qu
ng b khi b n t o m t website có hàng trăm trang hay c
khi b n mu n thay i m t thu c tính trình bày nào ó.
CSS ư c c p nh t liên t c mang l i các trình bày ph c t p và tinh vi hơn.
3. H c CSS c n nh ng gì?
- Có là m t ki n th c v HTML.
- M t trình so n th o văn b n
b n có th vi t mã CSS. Nên s d ng m t trình so n
th o ơn gi n như Notepad trong Windows hay Pico trong Linux, Simple Text trong Mac. Hay t
các chương trình như khi dùng DreamWeaver, FrontPage, Golive,…
- M t trình duy t web.
II. M T S
QUY Ư C V CÁCH VI T CSS
1. Cú pháp CSS:
tìm hi u cú pháp CSS chúng ta hãy th xem m t ví d sau.
Ví d :
nh màu n n cho m t trang web là xanh nh t (light cyan):
+ Trong HTML:
+ Trong CSS:
body { background-color:#00BFF3; }
Qua ví d trên ta th y ư c m i tương
Cú pháp CSS cơ b n:
ng gi a các thu c tính trong HTML và CSS.
Selector { property:value; }
Trong ó:
+ Selector: Các
i tư ng mà chúng ta s áp d ng các thu c tính trình bày.
+ Property: Chính là các thu c tính quy
family, color, padding, margin,…
nh cách trình bày. Như: background-color, font-
M i thu c tính CSS ph i ư c gán m t giá tr . N u có nhi u hơn m t thu c tính cho m t
selector thì chúng ta ph i dùng m t d u ; (ch m ph y)
phân cách các thu c tính. T t c các
thu c tính trong m t selector s ư c t trong m t c p ngo c nh n sau selector.
Biên s an: Dương Thành Ph t
Trang 60
Bài Gi ng Môn Thi t K Web
Ph n 3 : Ngôn Ng
nh D ng CSS
Ví d : body { background:#FFF; color:#FF0000; font-size:14pt }
d
c hơn, b n nên vi t m i thu c tính CSS
dung lư ng lưu tr CSS c a b n.
m t dòng. Tuy nhiên, nó s làm tăng
i v i m t trang web có nhi u thành ph n có cùng m t s thu c tính, chúng ta có th
th c hi n gom g n l i như sau:
h1 { color:#0000FF; text-transform:uppercase }
h2 { color:#0000FF; text-transform:uppercase; }
h3 { color:#0000FF; text-transform:uppercase; }
h1, h2, h3 { color:#0000FF; text-transform:uppercase; }
+ Value: Giá tr c a thu c tính. Như ví d trên value chính là #FFF dùng
tr ng cho n n trang.
i v i m t giá tr có kho ng tr ng, b n nên
nh màu
t t t c trong m t d u ngo c kép.
Ví d : font-family:”Times New Roman”
i v i giá tr là ơn v
o, không nên
t m t kho ng cách gi a s
o v i ơn v c a nó.
Ví d : width:100 px. Nó s làm CSS b vô hi u trên Mozilla/Firefox hay Netscape.
Chú thích trong CSS:
Cũng như nhi u ngôn ng web khác. Trong CSS, chúng ta cũng có th vi t chú thích cho
các o n code như sau /* N i dung chú thích */
Ví d : /* Màu ch cho trang web là màu
*/
body { color:red }
2. ơn v CSS:
B ng li t kê các ơn v chi u dài và màu s c dùng trong CSS.
ơn v chi u dài
ơn v
Mô t
%
Ph n trăm
in
Inch (1 inch = 2.54 cm)
cm
Centimeter
mm
Millimeter
pc
Pica (1 pc = 12 pt)
px
Pixels ( i m nh trên màn hình máy tính)
pt
Point (1 pt = 1/72 inch)
em
1 em tương ương kích thư c font hi n hành, n u font hi n hành có kích c 14px thì
1 em = 14 px. ây là m t ơn v r t h u ích trong vi c hi n th trang web.
ơn v màu s c
ơn v
Color-name
RGB (r,g,b)
RGB (%r,%g,%b)
Hexadecimal RGB
3. V trí
Mô t
Tên màu. Ví d : black, white, red, green, blue, cyan, magenta,…
Màu RGB v i 3 giá tr R, G, B có tr t 0 – 255 k t h p v i nhau t o ra vô
s màu.
Màu RGB v i 3 giá tr R, G, B có tr t 0 – 100% k t h p.
Mã màu RGB d ng h th p l c. Ví d : #FFFF: tr ng, #000: en,
t CSS:
Chúng ta có ba cách khác nhau
nhúng CSS vào trong m t tài li u HTML
+ Cách 1: N i tuy n (ki u thu c tính) ây là m t phương pháp nguyên th y nh t
nhúng CSS vào m t tài li u HTML b ng cách nhúng vào t ng th HTML mu n áp d ng.
Biên s an: Dương Thành Ph t
Trang 61
Bài Gi ng Môn Thi t K Web
Ph n 3 : Ngôn Ng
nh D ng CSS
Lưu ý: N u b n mu n áp d ng nhi u thu c tính cho nhi u th HTML khác nhau thì không
nên dùng cách này.
Ví d
nh n n màu en cho trang và màu ch tr ng cho o n văn b n như sau:
Ví d
^_^ Welcome To MyWebsite ^_^
+ Cách 2: Bên trong (th style) b ng cách rút t t c các thu c tính CSS vào trong th
style ( ti n cho công tác b o trì, s a ch a v sau).
Ví d
nh n n màu tr ng cho trang và màu ch xanh lá cho o n văn b n như sau:
Ví d
^_^ Welcome To MyWebsite ^_^
Lưu ý: Th style nên
t trong th head.
+ Cách 3: Bên ngoài (liên k t v i m t file CSS bên ngoài) Thay vì t t t c các mã CSS
trong th style chúng ta s ưa chúng vào trong m t file CSS (có ph n m r ng .css).
ây là cách làm ư c khuy n cáo,
website l n s d ng cùng m t ki u m u.
Cú pháp
Ho c
c bi t h u ích cho vi c
ng b hay b o trì m t
chèn file css vào trang là:
+
u tiên chúng ta s t o ra m t file html
Ví d
^_^ Welcome To MyWebsite ^_^
Biên s an: Dương Thành Ph t
Trang 62
Bài Gi ng Môn Thi t K Web
Ph n 3 : Ngôn Ng
nh D ng CSS
+ Sau ó hãy t o m t file style.css lưu cùng thư m c v i file htm trên v i n i dung:
body { background-color:#000 }
p{ color:White }
4. S
ưu tiên:
Trư c khi th c thi CSS cho m t trang web. Trình duy t s
c toàn b CSS mà trang web
có th ư c áp d ng, bao g m: CSS m c nh c a trình duy t, file CSS bên ngoài liên k t vào
trang web, CSS nhúng trong th
Thêm vào BST
Báo xấu
Download
Vui lòng tải xuống để xem tài liệu đầy đủ
