Đề tài Các thuộc tính của CSS

TRƯỜNG ĐẠI HỌC SƯ PHẠM HÀ NỘI Khoa công nghệ thông tin =====o0o===== Báo Cáo Đề tài: Các thuộc tính của CSS Sinh viên thực hiện: Mạc Thị Mai NỘI DUNG Định kiểu trình bày trang Web bằng CSS I . Giới thiệu về CSS: 1. CSS là cái gì? - CSS viết tắt của Cascading Style Sheet - CSS là mẫu quy định cách thức thể hiện các thẻ HTML - CSS được đưa vào HTML 4.0 để giải quyết một số vấn đề về trình bày dữ liệu - Giúp tiết kiệm được rất nhiều thời gian và công sức cho việc thiết kế web. - Có thể định nghĩa nhiều style vào một thẻ HTML (Cascading) - Định dạng một số tính chất thông thường được lưu trữ trong style Sheet. 2. Style (định dạng mẫu) giải quyết một số vấn đề thông thường: (Styles solve a common problem) - Các thẻ HTML chuẩn được thiết kế để định nghĩa nội dung của một văn bản. Đầu tiên các thẻ HTML hỗ trợ cách viết "Đây là tiêu đề", "Đây là đoạn", "Đây là bảng".... bằng cách sử dụng các thẻ , , ... Cách bố trí văn bản này được qui định bởi trình duyệt web và không có bất cứ một thẻ nào để định dạng văn bản. - Nescape và Internet Explorer là một trong hai trình duyệt chính tiếp tục đưa thêm vào các thẻ HTML mới cùng các thuộc tính (như các thẻ và thuộc tính Color..). Do đặc điểm kỹ thuật ban đầu, nó đã trở thành trở khó khăn hơn cho vệc tạo ra các web site có nội dung rõ ràng, tách khỏi cách bố trí. - Để giải quyết vấn đề này World Wide Web Consortium (W3C) đã tạo ra STYLE để đưa thêm vào trong HTML 4.0 - Tất cả các trình duyệt được hỗ trợ CSS. 3. Style Sheets có thể tiết kiệm được nhiều cho công việc thiết kế: (Style Sheets can save a lot of work) - Style thường được lưu trong các file nằm ngoài trang web. Chúng giúp bạn có thể thay đổi cách thức định dạng và cách bố trí các trang web chỉ bằng cách thay đổi riêng file CSS. Chỉ khi bạn muốn thay đổi lại toàn bộ màu sắc, cách định dạng của các tiêu đề, nội dung bạn mới hiểu rõ tác dụng thực sự của CSS. - CSS cho phép chúng ta điều khiển cách định dạng và cách bố trí của cùng lúc nhiều web site với chỉ duy nhất web site với chỉ duy nhất 1 lần thay đổi tại một vị trí. Là một người thiết kế web, bạn có thể định nghĩa 1 file CSS cho các thẻ HTML và áp dụng nó vào nhiều trang - CSS cho phép chúng ta điều khiển cách định dạng và cách bố trí của cùng lúc nhiều web mà bạn muốn. Để thay đổi tổng thể các trang web này bạn chỉ đơn giản là thay đổi file CSS và tất cả các trang đã áp dụng sẽ được thay đổi một cách tự động. 4. Nhiều Style xếp tầng vào một (Multiple Styles will cascade into one) - CSS cho phép bạn đưa các thông tin định nghĩa thẻ thông qua nhiều con đường khác nhau. Style có thể được qui định ở trong chỉ một thẻ HTML, được qui định trong 1 trang web hoặc ở trong một file CSS bên ngoài. Thậm chí nhiều Style Sheet bên ngoài có thể tham chiếu trong một tài liệu HTML. -Có 4 loại: Trong đó mức ưu tiên giảm dần từ trên xuống 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: d. Browser Default - Là cách thiết lập mặc định của trình duyệt. II.Cú pháp của CSS 1.Cú pháp Cú pháp của CSS gồm có 3 phần: Selector, Property, Value. -Selector: Đối tượng bị ảnh hưởng, có thể là tên thẻ, có thể là một lớp hoặc một định danh. -Property: Tên thuộc tính -Value: Giá trị thiết lập cho thuộc tính Cách khai báo Style: selector { Property1: Value1; Property2: Value2; } Chú ý: Nếu Value1 là nhiều từ ngữ phải đặt dấu ngoặc kép (“ “) quanh giá trị. Nếu muốn chỉ định nhiều hơn một property bạn phải tách riêng từng sở hữu với một dấu chấm phẩy. Có thể nhóm các Selector, được phân tách bằng dấu phẩy: Ví dụ: h1,h2,h3,h4,h5,h6 { color: green } Ví dụ: Đối tượng là tên 1 thẻ: P { Text-align:center ; Color: red; Font-family:arial } Đối tượng là 1 nhóm các thẻ: h1, h2, h3, h4, h5, h6 { Color:red; } 2. Đối tượng 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. a.Tạo lớp: - Trường hợp 1: gắn với thẻ cụ thể: đặt selector là 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; } b. 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. 3.Đối tượng đị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; } Chú ý: 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. III.Các thuộc tính của CSS 1.CSS và 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 Ví dụ: Các bạn có thể xem ví dụ tại 2. CSS và văn bản (Text) Cung cấp cho chúng ta các thuộc tính làm thay đổi màu sắc, tăng hoặc giảm khoảng trống giữa các kí tự trong một văn bản, canh lề , trang trí một văn bản, thụt dòng đầu tiên trong một văn bản … 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 chữ normallength Ví dụ: Các bạn có thể xem ví dụ tại: 3 . CSS và 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 normalsmall-caps font-weight Tạo độ đậm, nhạt của font chữ normalbold (đậm)bolderlighter (mỏng, nhạt)100200300400500600700800900 Ví dụ: Các bạn có thể xem ví dụ tại: 4 . CSS và phân cấp (outline) Giúp xác định cá thuộc tính về màu sắc, kiểu, chiều rộng của các outline. Thuộc tính Miêu tả Giá trị outline outline-coloroutline-styleoutline-width outline-color Đặt màu sắc của khung colorinvert outline-style Kiểu khung nonedotteddashedsoliddoublegrooveridgeinsetoutset outline-width Đặt chiều rộng của khung thinmediumthicklength Ví dụ: Các bạn có thể xem ví dụ tại đây: 5. CSS và đường viền Cho phép xác định được kiểu và màu sắc đường viền… Thuộc tính Miêu tả Giá trị border A shorthand property for setting all of the properties for the four borders in one declaration border-width border-width border-style border-style border-color đường viền màu border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-width border-bottom-width border-style border-style border-color đường viền màu border-bottom-color Sets the color of the bottom border border-color đường viền màu border-bottom-style Sets the style of the bottom border border-style border-style bordor-bottom-width Sets the width of the bottom border thin mỏng medium trung thick dày length chiều dài border- color Sets the color of the four borders, can have from one to four colors color màu sắc border-left A shorthand property for setting all of the properties for the left border in one declaration border-left-width border-left-width border-style border-style border-color đường viền màu border-left-color Sets the color of the left border border-color đường viền màu border-left-style Sets the style of the left border border-style border-style border-left-width Sets the width of the left border thin mỏng medium trung thick dày length chiều dài border-right A shorthand property for setting all of the properties for the right border in one declaration border-right-width border-right-width border-style border-style border-color đường viền màu border-right-color Sets the color of the right border border-color đường viền màu border-right-style Sets the style of the right border border-style border-style border-right-width Sets the width of the right border thin mỏng medium trung thick dày length chiều dài border-style Sets the style of the four borders, can have from one to four styles none không cái nào hidden ẩn dotted yêu thương dashed dashed solid rắn double đôi groove groove ridge cây rơm inset inset outset outset border-top A shorthand property for setting all of the properties for the top border in one declaration border-top-width border-top-width border-style border-style border-color đường viền màu border-top-color Sets the color of the top border border-color đường viền màu border-top-style Sets the style of the top border border-style border-style border-top-width Sets the width of the top border thin mỏng medium trung thick dày length chiều dài border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values thin mỏng medium trung thick dày length chiều dài Ví dụ: Các bạn có thể xem ví dụ tại đây: 6. CSS và canh lề Giúp xác định lề của trang: canh lề trái, lề phải, phía trên, phía dưới. Thuộc tính Miêu tả Giá trị margin A shorthand property for setting the margin properties in one declaration margin-topmargin-rightmargin-bottommargin-left margin-bottom Sets the bottom margin of an element autolength% margin-left Sets the left margin of an element autolength% margin-right Sets the right margin of an element autolength% margin-top Sets the top margin of an element autolength% Ví dụ: Các bạn có thể xem ví dụ tại đây: 7. CSS và danh sách Cho phép đặt, thay đổi giữa các mục trong danh sách hoặc thiết đặt hình ảnh trong danh sách. Thuộc tính Miêu tả Giá trị list-style A shorthand property for setting all of the properties for a list in one declaration list-style-typelist-style-positionlist-style-image list-style-image Sets an image as the list-item marker noneurl list-style-position Sets where the list-item marker is placed in the list insideoutside list-style-type Sets the type of the list-item marker nonedisccirclesquaredecimaldecimal-leading-zerolower-romanupper-romanlower-alphaupper-alphalower-greeklower-latinupper-latinhebrewarmeniangeorgiancjk-ideographichiraganakatakanahiragana-irohakatakana-iroha  marker-offset autolength 8. CSS và bảng Thuộc tính Miêu tả Giá trị border-collapse Sets whether the table borders are collapsed into a single border or detached as in standard HTML collapseseparate border-spacing Sets the distance that separates cell borders (only for the "separated borders" model) length length caption-side Sets the position of the table caption topbottomleftright empty-cells Sets whether or not to show empty cells in a table (only for the "separated borders" model)  showhide table-layout Sets the algorithm used to display the table cells, rows, and columns autofixed Ví dụ: Các bạn có thể xem ví dụ tại đây: Tài liệu tham khảo: Nội dung chủ yếu của bài được dịch từ , phần còn lại từ... một số nguồn khác. Mục lục I.Giói thiệu về CSS 1.CSS là cái gì? 2. Style (định dạng mẫu) giải quyết một số vấn đề thông thường: 3. Style Sheets có thể tiết kiệm được nhiều cho công việc thiết kế: 4.Nhiều Style xếp tầng vào một a. Inline Style b .Internal Style: c. External Style: d. Browser Default II.Cú pháp của CSS 1.Cú pháp 2. Đối tượng lớp a.Tạo lớp: b. Sử dụng lớp: 3.Đối tượng định danh III.Các thuộc tính của CSS 1.CSS và nền (background): 2. CSS và văn bản (Text) 3 . CSS và font 4 . CSS và phân cấp (outline) 5. CSS và đường viền 6. CSS và canh lề 7. CSS và danh sách 8. CSS và bảng