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 ) 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”