Tìm hiểu về CSS

Báo cáo CSS Họ và tên: Bùi Thị Bích Diệp Lớp: K56A - CNTT I. CSS Background Properties Thuộc tính CSS Background cho phép đặt màu nền của một phần tử, thiết lập một hình ảnh như là nền tảng, lặp lại một nền tảng hình ảnh theo chiều dọc hoặc theo chiều ngang, và vị trí của một hình ảnh trên một trang. 1. Background-colour: - Dùng để đặt màu nền cho đối tượng; - Cú pháp: background-color: ; Trong mã tên_màu có thể lấy trong hệ hecxa hoặc rgb hoặc viết rõ tên màu theo Tiếng Anh. + Background-color: f99999; + Background-color: red; + Background-color:f66; VD: . Background-color { color:#336699; font-size:100px; font-family: Times New Roman; background-color: f99999; } Welcome to CSS 2. Background-attachment: - Dùng để đăt ảnh nền ở chế độ cuộn hay không cuộn của trang; - Cú pháp: Background-attachment:; + Background-attachment:fixed Cố định ảnh nền so với nội dung trang web. Khi áp dụng giá trị này, ảnh nền sẽ đứng yên khi bạn đang cuộn trang web. + Background-attachment:scroll Ảnh nền sẽ cuộn cùng nội dung trang web, đây là giá trị mặc định. VD: body { background-image:url('Picture 054.jpg'); background-repeat:no-repeat; background-attachment:fixed } The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. The CSS background properties define the background effects of an element. 3. Background-image: - Dùng để đặt ảnh làm nền cho đối tượng; - Cú pháp: + Background-image:url(Địa_chỉ_ảnh); + Background-image:none; VD: body { background-image: url('future.bmp') } 4. Background-position: - Dùng để đặt vị trí bắt đầu của ảnh nền; Nếu không có thuộc tính này thì ảnh nền sẽ được chèn mặc định ở góc trên bên trái; - Cú pháp: + Background-position: top left;// + Background-position: top center; + Background-position: top right; + Background-position: center left; + Background-position: center center; + Background-position: center right; + Background-position: bottom left; + Background-position: bottom center; + Background-position: bottom right; + Background-position: x% y%; + Background-position: xpos ypos; 5. Background-repeat: Dùng để đặt phương thức lặp của ảnh nền; 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} VD: background-position: 40% 20%; II. CSS Text: 1. Text_Color: Dùng để đặt màu cho chữ; Cú pháp: Color:; Tên màu có thể lấy trong hệ hecxa hoặc trong hệ rgb hoặc lấy theo tên Tiếng Anh. + Color:f99999; + Color:green; + Color:f00; VD: (Text_colour.html) h1 {color: #00ff00} h2 {color: #223388} p {color: rgb(0,0,255)} Set the colour of the text Set the colour of the text 2. Text_Direction: Dùng để chỉnh hướng chữ cho văn bản; Cú pháp: + Direction:ltr; + Direction:rtl; VD: (Text_Direction.html) .Background-color { font-size:40px; font-family:times new romand; background-image:url(nen.bmp); border-width:length; direction:ltr; } Examples All the border properties in one declaration This example demonstrates a shorthand property for setting all of the properties for the four borders in one declaration, can have from one to three values. Set different borders on each side This example demonstrates how to set different borders on each side of the element. All the top border properties in one declaration This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration. Set the style of the four borders This example demonstrates how to set the style of the four borders. Set the style of the bottom border This example demonstrates how to set the style of the bottom border. All the width of the border properties in one declaration This example demonstrates a shorthand property for setting the width of the four borders in one declaration, can have from one to four values. Set the width of the left border This example demonstrates how to set the width of the left border. Set the color of the four borders This example demonstrates how to set the color of the four borders. It can have from one to four colors. Set the color of the right border This example demonstrates how to set the color of the right border. CSS Border Properties The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). 3. Line-height: Dùng để đặt khoảng cách giữa các dòng; Cú pháp: + Line-height:normal; + Line-height:number; + Line-height:length(px); + Line-height:%; VD: Line-height:2; Line-height:150%; 4. Letter-spacing: Dùng để đặt khoảng cách giữa các ký tự; Cú pháp: + Letter-spacing:normal; + Letter-spacing:length(px); VD: (Letter_spacing.html) h1 {letter-spacing: -3px} h4 {letter-spacing: 0.5cm} Letter-spacing Letter-spacing 4. Text-align: Dùng để căn lề cho văn bản; Cú pháp: + Text-align:left; {Căn lề trái} + Text-align:right; {Căn lề phải} + Text-align:center; {Căn lề giữa} + Text-align:justify; {Căn đều hai bên} VD: (text_align.html) h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} text-align: center text-align: left text-align: right 4. Text-decoration: Dùng để trang trí cho văn bản; Cú pháp: + Text-decoration:none; + Text-decoration:underline; {Gạch dưới} + Text-decoration:overline; {Gạch trên} + Text-decoration:line-through; {Gạch ngang} + Text-decoration:blink; {Chữ nhấp nháy} VD: (decorate.html) h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} h4 {text-decoration: blink} text-decoration: overline text-decoration: line-through text-decoration: underline text-decoration: blink 4. Text-indent: Xác định khoảng cách lùi đầu dòng cho văn bản; Cú pháp: + Text-indent:length(px); + Text-indent:%; VD: (Text_indent.html) p {text-indent: 2cm} Ho va ten: Bui Thi Bich Diep Lop: K56A Khoa CNTT 5. Text-shadow: Dùng để xác định chế độ bảng của văn bản; Cú pháp: + Text-shadow:none; + Text-shadow:color; + Text-shadow:length; 6. Text-transform: Dùng để định dạng chữ hoa, chữ thường; Cú pháp: + Text-transform:none; + Text-transform:capitalize; {Các chữ cái đầu tiên của một từ thì viết hoa} + Text-transform: uppercase; {Chuyển tất cả thành chữ in hoa} + Text-transform: lowercase; {Chuyển tất cả thành chữ thường} VD: (text_transform.html) h3.uppercase {text-transform: uppercase} h3.lowercase {text-transform: lowercase} h3.capitalize {text-transform: capitalize} text-transform: uppercase text-transform: uppercase text-transform: capitalize 7. Unicode-bidi: Cú pháp: + Unicode-bidi:normal; + Unicode-bidi:embed; + Unicode-bidi:bidi-override; 8. White-space: Cú pháp: + White-space:nomal; + White-space:pre; + White-space:nowrap; {Không xuống dòng} 9. Word-spacing: Dùng để xác định khoảng cách giữa các ký tự; Cú pháp: + Word-spacing:normal; + Word-spacing:length; VD: .Body { font-size:40px; font-family:times new romand; background-image:url(nen.bmp); border-width:length; direction:ltr; line-height:length; letter-spacing:2; Text-decoration:none; text-indent:10length; text-shadow:red; Text-transform:capitalize; unicode-bidi:embed; White-space:pre; } Examples All the border properties in one declaration This example demonstrates a shorthand property for setting all of the properties for the four borders in one declaration, can have from one to three values. Set different borders on each side This example demonstrates how to set different borders on each side of the element. All the top border properties in one declaration This example demonstrates a shorthand property for setting all of the properties for the top border in one declaration. Set the style of the four borders This example demonstrates how to set the style of the four borders. Set the style of the bottom border This example demonstrates how to set the style of the bottom border. All the width of the border properties in one declaration This example demonstrates a shorthand property for setting the width of the four borders in one declaration, can have from one to four values. Set the width of the left border This example demonstrates how to set the width of the left border. Set the color of the four borders This example demonstrates how to set the color of the four borders. It can have from one to four colors. Set the color of the right border This example demonstrates how to set the color of the right border. CSS Border Properties The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). III. CSS Border: 1. Border-bottom-color: - Đặt màu cho đường viền phía dưới; - Cú pháp: Border-bottom-color:; VD: Border-bottom-color: f66666; 2. Border-bottom-style: - Đặt kiểu cho đường viền phía dưới; - Border-bottom-style:; 3. Border-bottom-width: - Đặt bề rộng cho đường viền phía dưới; - Cú pháp: + Border-bottom-width:thin; + Border-bottom-width:medium; + Border-bottom-width:thick; + Border-bottom-width:length ; 4. Border-color: - Đặt màu cho đường viền, có thể có 4 màu; - Cú pháp: Border-color:; VD: Border-color:f99999; 4.1. Border-left-color: - Đặt màu cho đường viền bên trái; - Cú pháp: Border-left-color:; 4.2. Border-left-style: - Đặt kiểu cho đường viền bên trái; - Cú pháp: Border-left-style:; 4.3. Border-left-width: - Đặt độ rộng cho đường viền bên trái; - Cú pháp: Border-left-width:thin; Border-left-width:medium; Border-left-width:thick; Border-left-width:length; VD: (botder_left.html) p { border-left: medium solid #223388 } CSS Border Properties The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). 4.4. Border-right-color: - Đặt màu cho đường viền bên phải; - Cú pháp: Border-right-color:; 4.5. Border-right-style: - Đặt kiểu cho đường viền bên phải; - Cú pháp: Border-right-style:; 4.6. Border-right-width: - Đặt độ rộng cho đường viền bên phải; - Cú pháp: Border-right-width:thin; Border-right-width:thick; Border-right-width:length; Border-right-width:medium; VD: p { border-right: medium solid #223388 } CSS Border Properties The CSS border properties allow you to specify the style and color of an element's border. In HTML we use tables to create borders around a text, but with the CSS border properties we can create borders with nice effects, and it can be applied to any element. Browser support: IE: Internet Explorer, F: Firefox, N: Netscape. W3C: The number in the "W3C" column indicates in which CSS recommendation the property is defined (CSS1 or CSS2). 4.7. Border-top-color: - Đặt màu cho đường viền bên trên; - Cú pháp: Border-top-color:; 4.8. Border-top-style: - Đặt kiểu cho đường viền bên trên; - Cú pháp: Border-top-style:; 4.9. Border-top-width: - Đặt độ rộng cho đường viền bên trên; - Cú pháp: Border-top-width:thin; Border-top-width:thick; Border-top-width:medium; Border-top-width:length; Vd: (border_top.html) p { border-top: medium solid #223388 } My birthday 4.10. Border-style: - Đặt kiểu cho đường viền, có thể có 4 kiểu; - Các thuộc tính của Border: none,hidden,dotted,dashed,solid,double,groove,ridge,inset,outset. IV. CSS Outlines: Thuộc tính đường bao ngoài. 1. Outline-color: - Đặt màu bao quanh 1 phần tử. - Cú pháp: Outline-color:; Outline-color:; VD: (outline_colour.html) p { border: green solid thin; outline-style: solid; outline-color: #220388; } Bui Thi Bich Diep 2. Outline-style: - Đặt kiểu bao quanh 1 phần tử; - Cú pháp: Outline-style: none; Outline-style: hidden; Outline-style: dotted; Outline-style: dashed; Outline-style: solid; Outline-style: double; Outline-style: groove; Outline-style: ridge; Outline-style: inset; VD: (outline_style.html) p { border: blue 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} outline-style: dotted outline-style: dashed outline-style: solid outline-style: double outline-style: groove outline-style: ridge outline-style: inset outline-style: outset 3. Outline-width: - Đặt bề rộng cho phần tử; - Cú pháp: Outline-width: thin; Outline-width: thick; Outline-width: medium; Outline-width: length; V. CSS 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: | | | VD: (margin.html) p.margin {margin: 2cm 4cm 3cm 4cm} This is a paragraph with no specified margins This is a paragraph with specified margins This is a paragraph with no specified margins VI. CSS Padding - Dùng để xác định khoảng cách giữa phần nội dung và viền của một đối tượng. - Cú pháp: Padding: | | | VD: (padding.html) td.test1 {padding: 1.5cm} td.test2 {padding: 1.5cm 2.5cm} This is a tablecell with equal padding on each side. This tablecell has a top and bottom padding of 1.5cm and a left and right padding of 2.5cm. VII. CSS List 1. List-style-type: - Thiết lập kiểu của điểm đánh dấu mục trong danh sách - Cú pháp: List-style-type: none; List-style-type: disc; List-style-type: circle; List-style-type: square; List-style-type: decimal; List-style-type: decimal-leading-zero; List-style-type: lower-roman; List-style-type: upper-roman; List-style-type: lower-alpha; List-style-type: upper-alpha; List-style-type: lower-greek; List-style-type: lower-latin; List-style-type: upper-latin; List-style-type: Hebrew; List-style-type: Armenian; List-style-type: Georgian; List-style-type: cjk-ideographic; List-style-type: hiragana; List-style-type: katakana; List-style-type: hiragana-iroha; List-style-type: katakana-iroha; 2. List-style-position: - Đặt một điểm đánh dấu mục danh sách trong danh sách - Cú pháp: List-style-position: inside; List-style-position: outside; 3. List-style-image: - Thiết lập một ảnh như một điểm đánh dấu mục danh sách - Cú pháp: List-style-image: none; List-style-image: VD: (list_style.html) ul { list-style-image: url('diep.jpg') } Coffee Tea Coca Cola VIII. CSS Table: Thiết lập cách bố trí của một bảng 1. Border-collapse: - Thuộc tính nhận giá trị là seprate (các đường viền là riêng biệt) hay collapse (đây là giá trị mặc định, đường viền là duy nhất). VD: border-collapse: separate; border-spacing: 10px; 2. Caption-Side: - Thiết lập chú thích cho bảng. - Cú pháp: Caption-Side:top: đây là giá trị mặc định. Chú thích nằm phía trên bảng. Caption-Side: bottom: Chú thích nằm phía dưới bảng. Caption-Side: left: Chú thích nằm phía trái bảng. Caption-Side: right: Chí thích nằm phía bên phải bảng. 3. Empty-cells: - Thuộc tính nhận các giá trị: show: đường biên vẫn được bao quanh một ô rỗng. hide: Mặc định. Ẩn đường biên bao quanh ô rỗng. VD: (padding.html) table { border-collapse: separate; empty-cells: show } East west south north 4. Table–Layout: - Sử dụng để hiển thị bảng, các thành phần của bảng, các cột và các dòng. Thuộc tính nhận các giá trị: automatic: Đây là giá trị mặc định. Cột được thiết kế theo chiều rộng của nội dung của cột đó. fixed: Chiều rộng của cột được thiết lập dựa vào chiều rộng của bảng và chiều rộng của các cột khác trong bảng. IX. CSS FONT. 1. Font-Family: 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. Có hai loại tên font được dùng để chỉ định trong font-family: family-names và generic families. 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. VD: (font_family.html) h3 {font-family: Times New Roman} p {font-family: Vntime} p.sansserif {font-family: Arial} This is header 3 This is a paragraph This is a paragraph 2. Font-Size: Kích thước của một font được định bởi thuộc tính font-size. Thuộc tính có thể nhận các giá trị: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, %. VD: (font_size.html) h1 {font-size: 150%} h2 {font-size: 130%} p {font-size: 100%} This is header 1 This is header 2 This is a paragraph 3. Font-Size-Adjust: Xác định một khía cạnh khác nhau có giá trị cho một yếu tố mà sẽ bảo x-chiều cao của sự lựa chọn đầu tiên-font chữ. Thuộc tính nhận hai giá trị: none, number. 4. Font-Style: 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. 5. Font-Variant: Thuộc tính font-variant được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ. Một font small-caps là một font sử dụng chữ in hoa có kích cỡ nhỏ hơn in hoa chuẩn để thay thế những chữ in thường. Nếu như font chữ dùng để hiển thị không có sẵn font small-caps thì trình duyệt sẽ hiện chữ in hoa để thay thế. Ví dụ: p.normal {font-variant: normal} p.small {font-variant: small-caps} font-variant: normal font-variant: small-caps 6. Font-Weight: Thuộc tính font-weight mô tả cách thức thể hiện của font chữ là ở dạng bình thường (normal) hay in đậm (bold). Ngoài ra, một số trình duyệt cũng hỗ trợ mô tả độ in đậm bằng các con số từ 100 – 900.