Tài liệu Báo cáo VỀ CÁC THUỘC TÍNH CƠ BẢN TRONG CSS: BÁO CÁO VỀ CÁC THUỘC TÍNH CƠ BẢN TRONG CSS
Sinh viên: Nguyễn Thị Loan.
Lớp: K56A_CNTT_ĐHSPHN.
I . Giới thiệu về CSS:
- CSS (Cascading Style Sheet) là mẫu quy định cách thức thể hiện các thẻ HTML. Nó cho phép định dạng một số tính chất thông thường cùng một lúc cho tất cả các đối tượng trên trang được đánh dấu bằng tag đặc biệt.
- Tiện ích của CSS:
+ Tiết kiệm thời gian.
+ Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang khác sẽ tự động cập nhật sự thay đổi đó.
+ Có thể dùng các CSS cùng với JavaScript để tạo ra các hiệu ứng đặc biệt.
Bất lợi của CSS:
+ Không một trình duyệt nào chấp nhận nó hoàn toàn.
+ phải mất thời gian để học cách sử dụng.
II . Cách tạo:
Một bảng mẫu được tạo bằng một tên tag và một hay nhiều các định nghĩa để xác cách thức hiển thị của các đối tượng được đánh dấu bằng tag đó.
Phân loại và cách tạo:
Có 4 loại:
Inline Style (Style được qui định trong 1 thẻ HTML cụ thể)
Internal Style (Style được qui định trong phần của 1 trang HTML )
Ext...
14 trang |
Chia sẻ: hunglv | Lượt xem: 1428 | Lượt tải: 0
Bạn đang xem nội dung tài liệu Báo cáo VỀ CÁC THUỘC TÍNH CƠ BẢN TRONG CSS, để tải tài liệu về máy bạn click vào nút DOWNLOAD ở trên
BÁO CÁO VỀ CÁC THUỘC TÍNH CƠ BẢN TRONG CSS
Sinh viên: Nguyễn Thị Loan.
Lớp: K56A_CNTT_ĐHSPHN.
I . Giới thiệu về CSS:
- CSS (Cascading Style Sheet) là mẫu quy định cách thức thể hiện các thẻ HTML. Nó cho phép định dạng một số tính chất thông thường cùng một lúc cho tất cả các đối tượng trên trang được đánh dấu bằng tag đặc biệt.
- Tiện ích của CSS:
+ Tiết kiệm thời gian.
+ Khi thay đổi định dạng chỉ cần thay đổi CSS, các trang khác sẽ tự động cập nhật sự thay đổi đó.
+ Có thể dùng các CSS cùng với JavaScript để tạo ra các hiệu ứng đặc biệt.
Bất lợi của CSS:
+ Không một trình duyệt nào chấp nhận nó hoàn toàn.
+ phải mất thời gian để học cách sử dụng.
II . Cách tạo:
Một bảng mẫu được tạo bằng một tên tag và một hay nhiều các định nghĩa để xác cách thức hiển thị của các đối tượng được đánh dấu bằng tag đó.
Phân loại và cách tạo:
Có 4 loại:
Inline Style (Style được qui định trong 1 thẻ HTML cụ thể)
Internal Style (Style được qui định trong phần của 1 trang HTML )
External Style (style được qui định trong file .CSS ngoài)
Browser Default (thiết lập mặc định của trình duyệt)
a . Inline Style: là kiểu được gán cho một dòng hoặc một đoạn văn bản bằng cách sử dụng thuộc tính style bên trong tag muốn định dạng.
cú pháp:
Nội dung văn bản muốn định dạng
Ví dụ : TU BACH.
b . Internal Style: là bảng mẫu thích hợp cho trang riêng lẻ với nhiều văn bản, bằng cách tạo bảng mẫu chung trên đầu trang và dùng chung cho cả trang HTML.
Cú pháp:
Tên_thẻ{thuộctính1:giátrị1; thuộctính2:giátrị2;…}
c . External Style: là bảng kiểu được lưu trữ thành 1 file bên ngoài và được liên kết với trang HTML. Bảng kiểu này sẽ được áp dụng và ảnh hưởng cho tất cả các trang của một Website
- Cách tạo:
+ tạo một tập tin văn bản mới
+ nhập tên các tag muốn định dạng thuộc tính theo mẫu:
Tên_thẻ{thuộctính1:giátrị1; thuộctính2:giátrị2;…}
+lưu tập tin với định dạng Text Only và có phần đuôi mở rộng .css
- Cách dùng:
Cú pháp:
2. Cú pháp của CSS: cú pháp của CSS gồm có 3 phần: đối tượng bị ảnh hưởng (có thể là tên thẻ, lớp hoặc định dang), tên thuộc tính và giá trị của thuộc tính.
Đối_tượng { thuộctính:giátrị}
Ví dụ:
Đối tượng là tên 1 thẻ:
P
{
Text-align:center ;
Color: balck;
Font-family:arial
}
Đối tượng là 1 nhóm các thẻ:
h1, h2, h3, h4, h5, h6
{
Color:green
}
- Đối tượng là lớp: Với lớp , ta có thể xác định các Style khác nhau cho cùng một loại phần tử HTML.
Tạo lớp:
+ trường hợp 1: gắn với thẻ cụ thể: tên_thẻ . tên_lớp
Ví dụ:
p.kich_thuoc_12
{
color:#336699;
font-size:12px;
}
p. kich_thuoc_10
{
color:#336677;
font-size:10px;
}
+ trường hợp 2: không gắn với thẻ cụ thể: bỏ tên thẻ, chỉ có dấu chấm và tên lớp.
Ví dụ: . kich_thuoc_10
{
color:#336677;
font-size:10px;
}
Sử dụng lớp: Đặt thuộc tính class của thẻ=“tên_lớp”:
Ví dụ:
Đoạn này có cỡ chữ là 10 pixel
Để áp dụng nhiều hơn 1 lớp cho một thẻ, cú pháp là:
Đoạn này sẽ dùng lớp center và dùng lớp bold.
- Đối tượng là định danh: được xác định bởi #.
Tạo định danh: tương tự như lớp(class) nhưng ta thay dấu chấm(.) thành dấu (#) và định danh chỉ được sử dụng 1 lần.
Ví dụ: p# kich_thuoc_10
{
color:#336677;
font-size:10px;
}
#kich_thuoc_10
{
color:#336677;
font-size:10px;
}
Không được bắt đầu tên định danh với 1 số, nó sẽ không làm việc trong Mozilla / Firefox.
Các thuộc tính định dạng nền(background):
CSS cung cấp cho chúng ta các thuộc tính để ta có thể chọn lựa màu nền, thiết lập 1 hình ảnh làm nền, lặp lại hình nền theo chiều dọc , ngang và vị trí của 1 ảnh trên 1 trang…
Thuộc tính
Mô tả
Giá trị
background
Cài đặt tất cả các thuộc tính cho nền
background-color
background-image
background-repeat
background-attachment background-position
background-attachment
Thiết lập một nền với hình ảnh được cố định hoặc di chuyển với phần còn lại của trang web
Scroll (cuốn)fixed (cố định)
background-color
Thiết lập màu sắc cho nền
(Màu sắc có giá trị có thể là một tên màu (red), một giá trị rgb (rgb (255,0,0)), hoặc một số hex (# FF0000))
color-rgbcolor-hexcolor-nametransparent (mặc định. Màu nền là trong suốt)
background-image
Thiết lập hình ảnh cho nền
url(URL) (URL: thay thế bằng tên ảnh)none (không có hình ảnh)
background-repeat
Cách thiết lập cho hình ảnh lặp lại
Repeat ( lặp cả ngang lẫn chiều dọc)repeat-x ( lặp theo tọa độ ngang)repeat-y( lặp theo tọa độ dọc)no-repeat ( không lặp)
background-position
Thiết lập các vị trí bắt đầu của hình nền
top left (trên, bên trái)top center (trên, ở giữa)top right (trên, bên phải)center left (giữa trái)center center (giữa giữa)center right (giữa phải)bottom left (đáy, trái)bottom center (đáy , giữa)bottom right (đáy, phải)x% y%
xpos ypos
3 . Các thuộc tính định dạng cho văn bản(text):
Thuộc tính
Mô tả
Giá trị
color
Đặt màu cho văn bản
Màu sắc(có giá trị có thể là một tên màu (red), một giá trị rgb (rgb (255,0,0)), hoặc một số hex (# FF0000))
direction
Đặt hướng của văn bản
ltr ( từ trái sang phải) rtl (từ phải sang trái)
line-height
Đặt khoảng cách giữa các dòng.
Normal ( mặc định khoảng cách hợp lý)number length ( có thể là 1px, 2px…)% (Thiết lập một khoảng cách giữa các dòng là % kích thước hiện tại của phông chữ)
letter-spacing
Tăng hoặc giảm khoảng trống giữa các ký tự
normallength
text-align
Căn chỉnh văn bản
leftrightcenterjustify
text-decoration
Thêm trang trí cho văn bản
noneunderline ( gạch chân)overline (gạch trên đầu)line-through ( gạch xuyên chữ)blink
text-indent
Thụt lề dòng đầu tiên của văn bản.
length%
text-shadow
nonecolorlength
text-transform
Định dạng chữ hoa hay chữ thường
None ( mặc định chữ bình thường)capitalize (mỗi từ bắt đầu bởi 1 chữ cái viết hoa)uppercase (tất cả các chữ cái đều viết in)lowercase ( tất cả đều là chữ thường)
unicode-bidi
normalembedbidi-override
white-space
Tạo khoảng trống
normalprenowrap
word-spacing
Khoảng cách giữa các từ trong văn bản
normallength
4 . Thuộc tính định dạng font:
Cho phép ta thay đổi font chữ, in đậm, kích thước và kiểu chữ.
Thuộc tính
Miêu tả
Giá trị
font
font-stylefont-variantfont-weightfont-size/line-heightfont-familycaptioniconmenumessage-boxsmall-captionstatus-bar
font-family
Định dạng font
family-namegeneric-family
font-size
Định dạng kích thước của 1 font chữ
xx-smallx-smallsmallmediumlargex-largexx-largesmallerlargerlength%
font-size-adjust
Điều chỉnh kích thước font chữ
nonenumber
font-stretch
normalwidernarrowerultra-condensedextra-condensedcondensedsemi-condensedsemi-expandedexpandedextra-expandedultra-expanded
font-style
Thiết đặt kiểu của font chữ
normalitalic ( chữ nghiêng)oblique (chữ xiên)
font-variant
để hiển thị văn bản theo chữ hoa hay chữ thường.
Normal ( bình thường)small-caps
font-weight
Tạo độ đậm, nhạt của font chữ
normalbold (đậm)bolderlighter (mỏng, nhạt)100200300400500600700800900
5 . Thuộc tính định dạng đường viền(outline):
Thuộc tính
Miêu tả
Giá trị
outline
outline-coloroutline-styleoutline-width
outline-color
Đặt màu sắc của đường viền
colorinvert
outline-style
Kiểu đường viền
nonedotteddashedsoliddoublegrooveridgeinsetoutset
outline-width
Đặt chiều rộng của đường viền
Thin (mỏng)medium (trung bình)thick (dày)length
6 . Thuộc tính định dạng khung (border)
Thuộc tính
Miêu tả
Giá trị
border
Thiết lập thuộc tính cho 4 đường của khung
border-widthborder-styleborder-color
border-bottom
Thiết đặt cho đường khung ở phía dưới
border-bottom-widthborder-styleborder-color
border-bottom-color
Đặt màu cho đường khung ở phía dưới
border-color
border-bottom-style
Đặt kiểu cho đường khung ở phía dưới
border-style
border-bottom-width
Đặt độ rộng cho đường khung ở phía dưới
thinmediumthicklength
border-color
Đặt màu sắc của bốn đường biên , có thể có từ một đến bốn màu
color
border-left
Thiết đặt cho đường biên ở bên trái
border-left-widthborder-styleborder-color
border-left-color
Thiết đặt màu cho đường biên ở bên trái
border-color
border-left-style
Thiết đặt kiểu cho đường biên ở bên trái
border-style
border-left-width
Thiết đặt độ rộng cho đường biên ở bên trái
thinmediumthicklength
border-right
Thiết đặt cho đường biên ở bên phải
border-right-widthborder-styleborder-color
border-right-color
Thiết đặt màu sắc cho đường biên ở bên phải
border-color
border-right-style
Thiết đặt kiểu cho đường biên ở bên phải
border-style
border-right-width
Thiết đặt độ rộng cho đường biên ở bên phải
thinmediumthicklength
border-style
Thiết đặt kiểu cho đường biên ở bên phải
nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset
border-top
Thiết đặt cho đường biên ở trên
border-top-widthborder-styleborder-color
border-top-color
Thiết đặt màu cho đường biên ở trên
border-color
border-top-style
Thiết đặt kiểu cho đường biên ở trên
border-style
border-top-width
Thiết đặt độ rộng cho đường biên ở trên
thinmediumthicklength
border-width
Thiết đặt độ rộng cho 4 đường biên có thể có 4 giá trị
thinmediumthicklength
7 . Thuộc tính định dạng lề( Margin):
Thiết lập không gian xung quanh văn bản. Phía trên, bên phải, dưới cùng, bên trái lề có thể thay đổi bằng cách sử dụng độc lập riêng biệt thuộc tính. Thuộc tính định dạng Margin cũng có thể được dùng để thay đổi tất cả các lề cùng một lúc.
Thuộc tính
Miêu tả
Giá trị
margin
Thiết lập các thuộc tính lề
margin-topmargin-rightmargin-bottommargin-left
margin-bottom
Đặt lề dưới cùng
Auto (trình duyệt sẽ tự động thiết lập)length ( định nghĩa chiều dài cố định.mặc định là 0)% ( lề bằng phần trăm của tổng số chiề cao văn bản)
margin-left
Đặt lề bên trái
autolength%
margin-right
Đặt lề bên phải
autolength%
margin-top
Đặt lề trên cùng
autolength%
8 . Thuộc tính Padding:
Gồm các thuộc tính xác định không gian giữa các đường biên và các yếu tố nội dung.
Phía trên, bên phải, dưới cùng, bên trái và padding có thể thay đổi bằng cách sử dụng độc lập riêng biệt thuộc tính. Thuộc tính padding cũng được tạo ra để kiểm soát nhiều bên cùng một lúc.
Thuộc tính
Miêu tả
Giá trị
padding
padding-toppadding-rightpadding-bottompadding-left
padding-top
Xác định không gian giữa đường biên trên cùng và các yếu tố nội dung.
Length %
padding-right
Xác định không gian giữa đường biên bên phải và các yếu tố nội dung.
length%
padding-bottom
Xác định không gian giữa đường biên dưới cùng và các yếu tố nội dung.
length%
padding-left
Xác định không gian giữa đường biên bên trái và các yếu tố nội dung.
length%
9 . Thuộc tính định dạng danh sách( list):
Thuộc tính danh sách cho phép bạn đặt các mục đánh dấu trong danh sách, thay đổi giữa các mục đánh dấu trong danh sách, hoặc thiết lập một hình ảnh làm mục đánh dấu
Thuộc tính
Miêu tả
Giá trị
list-style
Bao gồm các thuộc tính cài đặt cho danh sách
list-style-typelist-style-positionlist-style-image
list-style-image
Đặt ra một hình ảnh như là danh sách đánh dấu-mục
None (không có hình ảnh)url (đường dẫn tới hình ảnh)
list-style-position
Đặt ra những nơi mà các điểm đánh dấu mục danh sách được đặt
Inside (bên trong)outside (bên ngoài)
list-style-type
Đặt ra những loại trong danh sách-mục đánh dấu
nonedisc (Các điểm đánh dấu là một vòng tròn đầy)
circle (Các điểm đánh dấu là một vòng tròn)square (là một hình vuông)decimal (là số)decimal-leading-zero (01, 02, 03…)lower-roman (i, ii, iii, iv, v, ...)upper-roman (I, II, III, IV, V...)lower-alpha (a, b, c, d, e,...)upper-alpha (A, B, C, D, E...)lower-greek (alpha, beta, gamma ...)lower-latinupper-latinhebrewarmeniangeorgiancjk-ideographichiragana (a, i, u, e, o, ka, ki...)katakana (A, I, U, E, O, KA, KI, …)hiragana-iroha (i, ro, ha, ni, ho, he, to…)katakana-iroha (I, RO, HA, NI, HO, HE, TO...)
marker-offset
autolength
.
10. Thuộc tính bảng (table):
Các bảng thuộc tính bảng cho phép bạn thiết lập cách bố trí của một bảng.
Thuộc tính
Miêu tả
Giá trị
border-collapse
Có hay không có ranh giới
Collapse ( có ranh giói)separate (không có ranh giới)
border-spacing
Khoảng cách
length length (khoảng cách bề ngang và bề dọc.tính bằng:px,cm…)
caption-side
Thiết lập vị trí của bảng chú thích
topbottomleftright
empty-cells
ô rỗng
Show ( rỗng)hide (không có ô rỗng)
table-layout
để hiển thị bảng, các ô, các hàng, và các cột
Auto (Mặc định. Cột được thiết lập bởi chiều rộng của nội dung trong ô)
Fixed
Ví dụ demo cho các thuộc tính trong foder “Ví dụ demo”
Các file đính kèm theo tài liệu này:
- BÁO CÁO VỀ CÁC THUỘC TÍNH CƠ BẢN TRONG CSS.doc