Báo cáo Về các thuộc tính của CSS

BÁO CÁO VỀ CÁC THUỘC TÍNH CỦA CSS Tổng quan về CSS. 1. Giới thiệu: 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) Cú pháp định nghĩa một thuộc tính theo CSS: Tên_thuộc_tính: giá_trị; 2. Phân loại Có 4 loại style: 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) àThứ tự ưu tiên: Mức ưu tiên giảm dần từ trên xuống Các thuộc tính của CSS Các thuộc tinh về nền (CSS Background properties) Các thuộc tính về nền quy định các hiệu ứng liên quan đến nền của trang web sẽ được hiển thị. Cho phép bạn điều khiển màu nền của các đối tượng, thiết lập hình ảnh làm nền, lặp các hình ảnh nền theo chiều ngang hay chiều dọc và vị trí các hình ảnh trên một trang. 1.1 Thuộc tính background-color Tên thuộc tính: background-color Cú pháp: background-color: ; Tác dụng: Thuộc tính background-color giúp định màu nền cho một thành phần trên trang web. Các giá trị mã màu của background-color cũng giống như color (có thể lấy trong hệ hecxa hoặc rgb hoặc viết rõ tên màu theo Tiếng Anh. )nhưng có thêm giá trị transparent để tạo nền trong suốt. Ví dụ Tìm hiểu các thuộc tính của CSS à Sau định dạng trên thì thuộc tính background-color để định màu nền cho cả trang web, các thành phần h1, h2 lần lượt là xanh lơ, đỏ và cam. 1.2. Thuộc tính background-image Tên thuộc tính: background-image Cú pháp: background-image: Chúng ta sẽ phải chỉ định đường dẫn của ảnh trong cặp ngoặc đơn sau url. Do ảnh đặt trong cùng thư mục với file style3.css nên chúng ta chỉ cần ghi abc.jpg. Nhưng nếu chúng ta tạo thêm một thư mục img trong thư mục thì chúng ta sẽ phải ghi là background-image:url(img/abc.jpg). Đôi khi nếu không chắc lắm bạn có thể dùng đường dẫn tuyệt đối cho ảnh. Tác dụng:Việc sử dụng ảnh nền giúp trang web trông sinh động và bắt mắt hơn. Ví dụ: . Background-color { color:#336699; font-size:100px; font-family: Times New Roman; background-color: f99999; } Welcome to CSS 1.3 Thuộc tính background-repeat Tên thuộc tính: background-repeat Cú pháp: + Background-repeat:repeat; {nền được lặp theo cả hai chiều.} + Background-repeat:repeat-x; {nền được lặp theo chiều ngang} + Background-repeat:repeat-y; {nền được lặp theo chiều dọc} + Background-repeat:no-repeat; {không lặp lại} Tác dụng:Nếu sử dụng một ảnh có kích thước quá nhỏ để làm nền cho một đối tượng lớn hơn thì theo mặc định trình duyệt sẽ lặp lại ảnh nền để phủ kín không gian còn thừa. Thuộc tính background-repeat cung cấp cho chúng ta các điều khiển giúp kiểm soát trình trạng lặp lại của ảnh nền. Ví dụ: Tìm hiểu các thuộc tính của CSS background-image:url(logo.png); background-repeat:no-repeat; Thuộc tính background-attachment Tên thuộc tính: background-attachment Cú pháp: background-attachment: background-attachment:scroll +Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định. background-attachment:fĩxed +Cố định ảnh nền so với nội dung trang web. Tác dụng: Background-attachment là một thuộc tính cho phép xác định tính cố định của ảnh nền so với với nội dung trang web. Ví dụ: Thuộc tính background-position(Định vị ảnh nền) Tên thuộc tính: background-position Cú pháp: Tác dụng: Theo mặc định ảnh nền khi được chèn sẽ nằm ở góc trên, bên trái màn hình. Tuy nhiên với thuộc tính background-position bạn sẽ có thể đặt ảnh nền ở bất cứ vị trí nào (trong không gian của thành phần mà nó làm nền). Background-position sẽ dùng một cặp 2 giá trị để biểu diễn tọa độ đặt ảnh nền. Có khá nhiều kiểu giá trị cho thuộc tính position. Như đơn vị chính xác như centimeters, pixels, inches,… hay các đơn vị qui đổi như %, hoặc các vị trí đặt biệt như top, bottom, left, right. Ví dụ: Các thuộc tính về text 2.1 Textcolor Tên thuộc tính: Textcolor Cú pháp: Tác dụng:Thiết lập màu cho chữ Ví dụ: Tìm hiểu các thuộc tính của CSS h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} This is header 1 This is header 2 This is a paragraph 2.2TextDirection Tên thuộc tính: Text_direction Cú pháp: Direction: ltr à đặt hướng chữ từ trái qua phải Direction: rtl àdặt hướng chữ từ phải qua trái Tác dụng: Thiết lập hướng cho chữ Ví dụ .Background-color { font-size:40px; font-family:times new romand; background-image:url(nen.bmp); border-width:length; direction:ltr; } Thùy ơi cố lên! 2.3line_hight Tên thuộc tính: line_hight Cú pháp: + Line-height:normal; + Line-height:number; + Line-height:length(px); + Line-height:%; Tác dụng: Dùng để tạo khoảng cách giữa các dòng. Ví dụ Tìm hiểu các thuộc tính của CSS P{ line-height: 1.4} p{ line-height: 14pt}  p{ line-height: 140%}   2.4 lett er-spacing Tên thuộc tính: letter-spacing Cú pháp: + Letter-spacing:normal; + Letter-spacing:length(px); Tác dụng: thiết lập khoảng cách giữa các từ Ví dụ Tìm hiểu các thuộc tính của CSS h1{ letter-spacing: 12px} h1h2{ letter-spacing: -0.5px} h2  ví dụ về khoảng cách giữa các chữ ví dụ về khoảng cách giữa các chữ tiếp theo 2.5 text-align Tên thuộc tính: text-align Cú pháp: text-align: Các kieu_canh_le: có thể nhận là: +center: căn lề giữa +left: căn lề trái +right: căn lề phải Tác dụng: căn lề cho đối tượng văn bản Ví dụ: Tìm hiểu các thuộc tính cuả CSS h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} text-align: center text-align: left text-align: right 2.6 text-decoration Tên thuộc tính: text-decoration Cú pháp: textDecoration= Trong đó gia_trị: có thể nhận các giá trị sau: +none: không tạo hiệu ứng +underline: hiệu ứng gạch chân cho chữ +overline: hiệu ứng gạch trên cho chữ +line-through: hiệu ứng gạch xuyên chữ +Blink: hiệu ứng tạo nhấp nháy cho chữ Tác dung: Tạo các hiệu ứng sinh động cho chữ Ví dụ: Tìm hiểu các thuộc tính của css h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration: blink} a {text-decoration: none} chữ này sẽ bị gạch trên chữ này sẽ bi gạch xuyên chữ này sẽ bị gạch dưới chữ này hiệu ứng nhấp nháy liên kết này không có hiệu ứng 2.7 white-space Tên thuộc tính: white-space Cú pháp: whie-space=”gia_tri” Gia_tri có thể lấy: + normal: khoảng cách các từ không phụ thuộc vào trình duyệt +pre: có tác dụng như thẻ +nowrap: văn bản sẽ không xuống dòng trừ khi có thẻ xuất hiện Tác dụng: thiết lập khoảng trắng giữa các từ Ví dụ: tìm hiểu các thuộc tính của css p { white-space: nowrap } Dòng chữ này sẽ không xuống dòng Dòng chữ này sẽ không xuống dòng Dòng chữ này sẽ không xuống dòng Dòng chữ này sẽ không xuống dòng Dòng chữ này sẽ không xuống dòng 2.8 word-spacing Tên thuộc tính: word-spacing Cú pháp: word-spacing=”gia_tri” Gia_Tri có thể nhận: là một giá trị số mặc định do người viết chọn Tác dụng: thiết lập khoảng cách giữa các từ Ví dụ: p { word-spacing: 30px } This is some text. This is some text. 3 Thuộc tính về Font 3.1 font-family Tên thuộc tính: font-family Cú pháp font-family=”gia_tri” Gia_tri có thể nhận: +Family-names: Tên cụ thể của một font. +Generic families: Tên của một họ gồm nhiều font Tác dụng: Thuộc tính font-family định nghĩa một danh sách ưu tiên các font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy tính truy cập chưa cài đặt font này thì font thứ hai trong danh sách sẽ được ưu tiên…cho đến khi có một font phù hợp Ví dụ h3 {font-family: times} p {font-family: courier} p.sansserif {font-family: sans-serif} This is header 3 This is a paragraph This is a paragraph 3.2 font-size Tên thuộc tính: font-size Cú pháp: font-size=”gia_tri” Tác dụng: định kích cỡ cho font Ví dụ h1 {font-size: 150%} h2 {font-size: 130%} p {font-size: 100%} This is header 1 This is header 2 This is a paragraph </html 3.3 font-size-adjust Tên thuộc tính: font-size-adjust Cú pháp: font-size-adjust=”gia-tri” Có các giá trị: +none +number Tác dụng: thiết lập Ví dụ h1 {font-size-adjust: 0.50} h2 {font-size-adjust: 0.40} p {font-size-adjust: 0.60} Chữ bình thường chữ thử nghiệm cỡ chữ lớn 3.4font-stretch Tên thuộc tính: font-stretch Cú pháp: Tác dụng Ví dụ 3.5 font-style Tên thuộc tính: font-style Cú pháp: font-style=”gia_tri” Giá_tri: có thể nhận là: + normal +italic +obilque Tác dụng: Thuộc tính font-style định nghĩa việc áp dụng các kiểu in thường (normal), in nghiêng (italic) hay xiên (oblique) lên các thành phần trang web. Ví dụ h1 {font-style: italic} h2 {font-style: normal} p {font-style: oblique} This is header 1 This is header 2 This is a paragraph 3.6 font-weight Tên thuộc tính: font-weight Cú pháp font-weight=”gia_tri” Tác dụng: thiết lập độ rộng của các ksy tự trong văn bản Ví dụ p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900} This is a paragraph This is a paragraph This is a paragraph 4. thuộc tính về Border 4.1 boder-bottom-color Tên thuộc tính: boder-bottom-color Cú pháp: boder-bottom=”gia_tri” Tác dụng: thiết lập màu cho viền dưới của đối tượng Ví dụ p { border-style: solid; border-bottom-color: #ff0000 } đối tượng có viền dưới màu đỏ. 4.2 boder-bottom-style Tên thuộc tính: boder-bottom-style Cú pháp: boder-bottom-style:”kiêu_viên” Kieu_vien có các giá trị sau: +none +hiden +dotted +dashed +soid +double +groove +rigt +inset +outset Tác dụng: Thiết lập một kiểu viền cho viền dưới xung quanh đối tượng Ví dụ p.dotted {border-bottom-style: dotted} p.dashed {border-bottom-style: dashed} p.solid {border-bottom-style: solid} p.double {border-bottom-style: double} p.groove {border-bottom-style: groove} p.ridge {border-bottom-style: ridge} p.inset {border-bottom-style: inset} p.outset {border-bottom-style: outset} A dotted border A dashed border A solid border A double border A groove border A ridge border An inset border An outset border 4.3 boder-bottom-width Tên thuộc tính:boder-bottom-width Cú pháp:boder-bottom-width:’’ gia_tri” Gia_tri có các giá trị sau: +thin +thick +medium +lenght Tác dụng: thiết lập độ rộng của viền dưới Ví dụ p.one { border-style: solid; border-bottom-width: 15px } p.two { border-style: solid; border-bottom-width: thin } Note: The "border-bottom-width" property does not work if it is used alone. Use the "border-style" property to set the borders first. Some text. Some more text. 4.5 boder-right-color Tên thuộc tính:boder-right-color Cú pháp: boder-right-color: Tác dụng: thiết lập màu cho viền phải của đối tượng Ví dụ p { border-style: solid; border-right-color: #ff0000 } đối tượng có viền phải màu đỏ. 4.6 boder-right-style Tên thuộc tính: boder-right-style Cú pháp: boder-right-style:”kieu_viên” Tác dụng: thiết lập kiểu viền cho viền phải Ví dụ p.dotted {border-right-style: dotted} p.dashed {border-right-style: dashed} p.solid {border-right-style: solid} p.double{{border-right-style: double} p.groove{{border-right-style: groove} p.ridge {border-right-style: ridge} p.inset {border-right-style: inset} p.outset {border-right-style: outset} A dotted border A dashed border A solid border A double border A groove border A ridge border An inset border An outset border 4.7 boder-right-width Tên thuộc tính Cú pháp Tác dụng Ví dụ 4.8 boder-top-color Tên thuộc tính Cú pháp Tác dụng Ví dụ p { border-style: solid; border-left-color: #ff0000 } đối tượng có viền trái màu đỏ. 4.9 boder-top-style Tên thuộc tính Cú pháp Tác dụng Ví dụ p { border-style: solid; border-top-color: #ff0000 } đối tượng có viền trên màu đỏ. 4.10 boder-top-width Tên thuộc tính:boder-top-width Cú pháp: boder-top-width: “gia_tri” Tác dụng: thiết lập độ rộng đường viền trên cho dối tượng Ví dụ 5. Thuộc tính về outline 5.1 outline-color Tên thuộc tính: outline-color Cú pháp:outline-color: Tác dụng: thiết lập màu bao quanh phần tử Ví dụ p { border: red solid thin; outline-style: solid; outline-color: #00ff00 } Some text. 5.2 outline-style Tên thuộc tính: outline-style Cú pháp: outline-style: Kieu_bao_quanh có các giá trị: +none +dottoted +groove +inside +outside Tác dụng: thiết lập kiểu bao quanh các phần tử Ví dụ p { border: red solid thin; } p.dotted {outline-style: dotted} p.dashed {outline-style: dashed} p.solid {outline-style: solid} p.double {outline-style: double} p.groove {outline-style: groove} p.ridge {outline-style: ridge} p.inset {outline-style: inset} p.outset {outline-style: outset} A dotted outline A dashed outline A solid outline A double outline A groove outline A ridge outline An inset outline An outset outline 5.3outline-width Tên thuộc tính: outline-width Cú pháp: outline-width: Tác dụng:thiết lập độ rộng của viền bao quanh đối tượng Ví dụ p.one { border: red solid thin; outline-style: solid; outline-width: thick } p.two { border: red solid thin; outline-style: solid; outline-width: 2px } Some text. Some text. 6. Thuộc tính về margin- Dùng để căn lề cho cả trang web: Căn lề dưới (margin-bottom), căn lề trên (margin-top), căn lề trái (margin-left), căn lề phải (margin-right). Đơn vị để căn lề có thể là tự động (auto), đơn vị đo chiều dài (length), hay phần trăm (%). Cú pháp: margin: | | | 6.1 margin-bottom Tên thuộc tính: margin-bottom Cú pháp: margin-bottom: Tác dụng: thiết lập lề dưới đáy của trang web 6.2 margin-left Tên thuộc tính: margin-left Cú pháp:margin-left: Tác dụng: thiết lập lề trái cho trang Web 6.3 margin-right Tên thuộc tính: margin-right Cú pháp: margin-right: Tác dụng: thiết lập lề phải cho trang web 6.4 margin-top Tên thuộc tính: margin-top Cú pháp: margin-top: Tác dụng: thiết lập lề trên cho trang web Ví dụ: p.margin {margin: 6cm 7cm 8cm 9cm} đây là đoạn văn không được căn lề đây là đoạn văn được căn lề 7. thuộc tính về list 7.1 list-style-images Tên thuộc tính:list-style-images Cú pháp: list-style-images:”gia_tri” Các giá trị có thể có: +none; + disc; + circle; +square; + decimal; +decimal-leading-zero; + lower-roman; +upper-roman; + lower-alpha; + upper-alpha; + lower-greek; +lower-latin; + upper-latin; + Hebrew; + Armenian; + Georgian; +jk-ideographic; + hiragana; + katakana; + hiragana-iroha; + katakana-iroha; Tác dụng: Thiết lập kiểu của điểm đánh dấu mục trong danh sách 7.2 list-style-color Tên thuộc tính: list-style-color Cú pháp: +List-style-image: none; +List-style-image: Tác dụng: Thiết lập một ảnh như một điểm đánh dấu mục danh sách 7.3 list-style-position Tên thuộc tính: list-style-position Cú pháp: list-style-position:’gia_tri’ Giá_tri nhận các giá trị sau: +inside +outside Tác dụng: thiết lập vị trí đặt danh sách Ví dụ ul.inside { list-style-position: inside } ul.outside { list-style-position: outside } This list has a list-style-position with a value of "inside": Earl Grey Tea - A fine black tea Jasmine Tea - A fabulous "all purpose" tea Honeybush Tea - A super fruity delight tea This list has a list-style-position with a value of "outside": Earl Grey Tea - A fine black tea Jasmine Tea - A fabulous "all purpose" tea Honeybush Tea - A super fruity delight tea 8. thuộc tính về padding Dùng để xác định khoảng cách giữa viền và nội dung của một đối tượng 8.1 padding-bottom Tên thuộc tính: padding-bottom Cú pháp:padding-bottom=”gia_tri” Tác dụng: thiết lập khoảng cách dưới dáy của dối tượng Ví dụ td {padding-bottom: 2cm} This is a tablecell with a bottom padding 8.2 padding-left Tên thuộc tính: padding-left Cú pháp:padding-left=”gia_tri” Tác dụng: thiết lập khoảng cách bên trái của dối tượng và viền bên trái Ví dụ td {padding-left: 2cm} Bảng này có khaỏng cách của viền trái so với nội dung được chỉ định 8.3 padding-right Tên thuộc tính: padding-right Cú pháp:padding-right=”gia_tri” Tác dụng: thiết lập khoảng cách của dối tượng và viền bên phải của nó Ví dụ td {padding-right: 2cm} Bảng này có khaỏng cách của viền phải so với nội dung được chỉ định 8.4 padding-top Tên thuộc tính: padding-top Cú pháp: padding-top=”gia_tri’’ Tác dụng: thiết lập khoảng cách của nội dung so với nội dung Ví dụ td {padding-top: 2cm} Bảng này có khaỏng cách của đỉnh so với nội dung được chỉ định 9. Thuộc tính về table 9.1 boder-collapes Tên thuộc tính: boder-collapes Cú pháp boder-collapes=”gia_tri” Gia_tri có thể nhân các giá tri: +separate +collapse Tác dụng Ví dụ table.coll { border-collapse: collapse } table.sep { border-collapse: separate } Peter Griffin Lois Griffin Peter Griffin Lois Griffin 9.2 boder-spacing Tên thuộc tính: boder-spacing Cú pháp boder-spacing=”gia_tri” Gia_tri có thể nhận các giá trị: + là một số bất kỳ Tác dụng: thiết lập khoảng cách giữa hai bảng trong một trang web Ví dụ Tìm hiểu các thuọc tính của css table.one { border-collapse: separate; border-spacing: 10px } table.two { border-collapse: separate; border-spacing: 10px 50px } Peter Griffin Lois Griffin Cleveland Brown Glenn Quagmire 9.3 caption-side Tên thuộc tính: caption-side Cú pháp:caption-side=”gia_tri” Gia_tri: có thể nhận các giá trị +bottom: chú thích hiện lên dưới đáy bảng +center +left: +right: Tác dụng: thiết lập vị trí đặt chú thích cho bảng Ví dụ caption { caption-side:bottom } This is a caption Peter Griffin Lois Griffin 9.4 emty-cell Tên thuộc tính: empty-cell Cú pháp: empty-cell: Gia_tri có thể nhận: + show: hiển thị ô trống trong bảng +hide: không hiển thị ô trống trong bảng Tác dụng: quyết định có hiện thị hay không hiện ô trống trong bảng Ví dụ tìm hiểu các thuộc tính của css table { border-collapse: separate; empty-cells: show } Peter Griffin Lois 9.5 table-layout Tên thuộc tính: table-layout Cú pháp: table-layout: gia_tri có thể nhận : + automatic: độ rộng của cột sẽ được thiết lập tự động điều chỉnh với nội dung của ô +fixed: độ rộng của cột sẽ đực thiết lập do chỉ định sẵn của độ rộng bảng Tác dụng: thiết lập độ rộng cho cột Ví dụ tìm hiểu các thuộc tính của CSS table.one { table-layout: automatic } table.two { table-layout: fixed } 1000000000000000000000000000 10000000 100 1000000000000000000000000000 10000000 100