Báo cáo Tìm hiểu về CSS - Nguyễn Thị Ngoãn

Tìm hiểu về CSS Giảng viên hướng dẫn: thầy Lê Nguyên Sinh Sinh viên thực hiện: Nguyễn Thị Ngoãn Lớp: K56A Khái niệm CSS CSS (Cascading Style Sheets) được hiểu một cách đơn giản đó là cách mà chúng ta thêm các kiểu hiển thị (font chữ, kích thước, màu sắc...) cho một tài liệu Web. Các thuộc tính của CSS: Thuộc tính Color. Thuộc tính Margin. Thuộc tính Padding. Thuộc tính Outline. Thuộc tính List Type. Thuộc tính Background. Thuộc tính Border. Thuộc tính Font. i. Thuộc tính Text. 2.Các thuộc tính của Margin Định nghĩa: Thuộc tính margin là khoảng trắng bao quanh phần tử. Nó có thể dùng giá trị âm để lồng nội dung vào với nhau. Lề trên, phải, dưới, trái có thể được thay đổi độc lập sử dụng các thuộc tính một cách tách rời. Cách viết ngắn gọn của một thuộc tính lề có thể sử dụng để thay cho tất cả các thuộc tính lề khác. Các trình duyệt hỗ trợ: IE – Internet Explorer, F – Firefox, N – Netscape. b. Các thuộc tính: Margin Top. Margin left. Margin right. Margin botton Margin Top Định nghĩa: Là thuộc tính đặt lề trên của một phần tử. Cho phép có giá trị âm, không có tính kế thừa. Margin Left Định nghĩa: Là thuộc tính đặt lề trái của một phần tử. Cho phép có giá trị âm, không có tính kế thừa Value Description auto Mặc đinh lề trên. length Định nghĩa một lề trên cố định. Giá trị ngầm định là 0. % Định nghĩa lề trên là giá trị % so với tổng chiều cao của tài liệu Margin Right Định nghĩa: Là thuộc tính đặt lề phải của một phần tử. Cho phép có giá trị âm, không có tính kế thừa. Margin botton Định nghĩa: Là thuộc tính đặt lề dưới của một phần tử. Cho phép có giá trị âm, không có tính kế thừa. c. Cách sử dụng Cú pháp của hàm margin như sau: Margin: [top] [right] [bottom] [left] Hoặc trong trường hợp lề trên dưới và trái phải bằng nhau, có thể dùng cú pháp sau: Margin: [top/bottom] [left/right] Thuộc tính Padding. a. Ý nghĩa CSS Padding định nghĩa khoảng trống giữa mép của các phần tử tới các phần tử con hoặc nội dung bên trong. Chúng ta không thể gán giá trị âm cho thuộc tính này Browser support: IE: Internet Explorer, F: Firefox, N: Netscape Tương ứng với 4 phía của phần tử chúng ta có 4 thuộc tính padding tương ứng tính đó là: 1. padding-top: 2. padding-right: 3. padding-bottom: 4. padding-left: Chú ý Shorthand td { padding: 5cm 3cm 2cm 8cm} - các giá trị này tương ứng trên- phải- dưới- trái. Khi muốn sử dụng nhiều thuộc tính của padding trong một trang ta phải khai báo style dưới dạng sau: td.ten1 {padding: 0.5cm 2.5cm} td.ten2 {padding: 3cm 3cm 5cm 5cm} Thuộc tính Outline. a. Định nghĩa. *) Thuộc tính Outline sẽ vẽ một đường bao ngoài toàn bộ một phần tử HTML, đối với phần tử có đường viền (border) thì đường bao này sẽ bao trọn đường viền của phần tử đó. Cũng tương tự như đường viền bạn có thể đặt cho nó các thuộc tính về màu săc, độ lớn và kiểu. *) Các phiên bản CSS có hỗ trợ thuộc tính outline: CSS1 CSS2 W3C *) Các thuộc tính trong Outline đều được hỗ trợ bởi FireFox fiên bản từ : 1.5 và từ CSS2 *) Các thuộc tính của đường bao này có thể không được hỗ trợ trên Internet Explorer(IE) , Netscape. b.Các thuộc tính của outline: Outline-colour: đặt màu cho đường bao. outline-width: độ rộng cho đường bao outline-style: chọn kiểu cho đường bao Cách sử dụng: outline-color: Cú pháp p { outline-color: #CC0000; } Các kiểu màu sắc mà CSS hỗ trợ được định nghĩa thông qua tên viết bằng tiếng Anh hoặc là viết dưới dạng hexa. Chẳng hạn ta có một số màu như sau: #FFFFFF = white = trắng #FF0000 = red = đỏ outline-width Cú pháp: p { outline-width: 2px; } các độ rộng của đường bao tương ứng với số 1px hay 2px, … outline-style: Cú pháp: p { outline-style: dotted; } *) CSS hỗ trợ các kiểu đường bao như sau: none - double Hidden - groove dotted - ridge dashed - inset solid - outset Để cho gọn chúng ta cũng có thể viết các giá trị của thuộc tính Outline dưới dạng shorthand như sau: p{ outline: green dotted thick } Thuộc tính List Type. Định nghĩa. Thuộc tính LIST cho phép bạn thay đổi giữa các điểm đánh dấu mục danh sách khác nhau, thiết lập một ảnh như một điểm đánh dấu mục danh sách và thiết lập nơi để đặt điểm đánh dấu mục danh sách. Các thuộc tính: List-stype List-stype-image List-stype-position List-stype-type Marker-offset +) LIST-STYPE Mô tả: Một thuốc tính ngắn gọn để thiết lập cho toàn bộ thuộc tính của danh sách trong một khai báo. Giá trị: + list-style-type + list-style-position + list-type-image Các trình duyệt hỗ trợ: IE 4.0; F 1.0; N 6.0 Phiên bản: CSS1 Demo J +) LIST-STYLE-IMAGE Mô tả: Thiết lập một ảnh như một điểm đánh dấu mục danh sách. Giá trị: + none + url Các trình duyệt hỗ trợ: IE 4.0; F 1.0; N:6.0 Phiên bản: CSS1 Demo: +) LIST-STYLE-POSITION Mô tả: Vị trí đặt một điểm đánh dấu mục danh sách trong danh sách. Giá trị: + inside + outside Các trình duyệt hỗ trợ: IE4.0; F1.0; N6.0 Phiên bản: CSS1 Demo: +) LIST-STYLE-TYPE Mô tả: Thiết lập kiểu của điểm đánh dấu mục danh sách. Giá trị: 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, cjk-ideographic, hiragana, katakana, hiragana-iroha, katakana-iroha . Các trình duyệt hỗ trợ: IE4.0; F1.0; N4.0 Phiên bản: CSS1 Demo: +) MARKER-OFFSET Mô tả: Mặc định là kiểu disc đối với danh sách không có thứ tự, là decimal với danh sách có thứ tự. Giá trị: + auto + length Các trình duyệt hỗ trợ: F1.0; N7.0 Phiên bản: CSS2 Demo: Thuộc tính Background. Ý nghĩa: Giúp ta xác định màu nền,hình nền trang trí cho một thành phần trên trang web Các giá trị của background và các phiên bản của trình duyệt , ngôn ngữ html, css hỗ trợ các thuộc tính Bảng phiên bản các trình duyệt và css tương ứng. Giá trị NN IE F w3c Background-color 4.0 4.0 1.0 Css1 Background-image 4.0 4.0 1.0 Css1 Background-attachment 6.0 4.0 1.0 Css1 Background-repeat 4.0 4.0 1.0 css1 Background-position 6.0 4.0 1.0 css1 a. Background-color Có các giá trị khả dụng sau: color-rgb: có dạng rgb(xxx,xxx,xxx) (rgb(xx%,xx%,xx%)  VD: rgb(234,115,201),        rgb(25%,90%,10%) color-hex: thường có dạng: #abcdef Trong 6 số phần Hex: ab quy định giá trị của màu đỏ, cd quy định giá trị của màu lục, ef quy định giá trị màu lam color-name: tên màu bằng tiếng anh transparent: dạng trong suốt Ví dụ: body {background-color: none} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} b. Background-image Các giá trị khả dụng : url : địa chỉ đến hình ảnh mà bạn muốn làm nền cho một thành phần nào đó trong trang web None: không xác định ảnh nền Chú ý: Bình thường thì mặc định ví trí của các ảnh là ở vị trí trên trái. Background-position Top left: trên trái. Top center: trên giữa Top right:trên phải. Center left: giữa trái Center center. Center right. Bottom left: dưới trái Bottom right: dưới phải Bottom center: dưới giữa x% y%: toạ độ x, y theo % xpos ypos: toạ độ x, y theo px 1.0em=10px Chú ý: Giá trị mặc định là top-left Nếu đặt rút gọn: Top: thì ảnh ở top-center Left: center-left Right: center-right; Bottom : bottom-center Tuy nhiên nếu cho ảnh lặp thì phải dùng các giá trị đầy đủ nếu không ảnh sẽ không hiển thị được. c. Background-repeat Ta xác định xem ảnh nền có lặp không và lặp thì lặp theo chiều nào? Repeat: lặp theo cả 2 trục Repeat-x: lặp theo trục ox. Repeat-y: lặp theo trục oy No-repeat: ko lặp. Chú ý: khi không gán giá trị cho thuộc tính background-repeat thì mặc định là kiểu giá trị repeat. d. Background-attachment Xác định xem ảnh nền là cố định hay là trượt Các giá trị của background-attachment : Fixed: cố định ảnh . Scroll: ảnh trượt. Chú ý: Giá trị mặc định khi không gán trị cho thuộc tính này là : Scroll. Thuộc tính Border. Thuộc tính Font. a. 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. body { font-family:”Times New Roman” } + Family-names: Arial, Verdana, Tohama,… + Generic families: sans-serif, serif,… b. Font Cấu trúc: Font : | | | | Ví dụ: h1 { font: italic bold 35px arial,verdana,sans-serif; } c. Font-style: Định nghĩa việc áp dụng các kiểu in lên các thành phần trang web. Các giá trị: normal, italic, oblique,… h1 { font-style:italic; } d. Font-variant Được dùng để chọn giữa chế độ bình thường và small-caps của một font chữ. Các giá trị: normal, small-caps. h1 { font-variant:small-caps } e. Font-weight Mô tả cách thức thể hiện của font chữ. Các giá trị: normal, bold, bolder, lighter,… p { font-weight:bold } f. Font-size: Kích thước của một font được định bởi thuộc tính font-size. Nhận các giá trị: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger. body { font-size:20px } Thuộc tính Text a. Định nghĩa Thuộc tính Text trong CSS xác định diện mạo của văn bản Nó cũng có thể thay đổi màu của văn bản, tăng hoặc giảm khoảng cách giữa các ký tự trong một văn bản, căn chỉnh một văn bản, trang trí cho văn bản, thụt dòng đầu tiên và nhiều hiệu ứng khác… IE: Internet Explorer, F: Firefox, N: Netscape , W3C: web standard b.Thuộc tính Text cơ bản : 1. Color Để định màu chữ cho một thành phần nào đó trên trang web Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ : + dạng tên: red,white...  + dạng hex: #000000,#ff00cc,...  + dạng rbg: rgb(255, 0, 0), rgb(0, 0, 0)... Ví dụ: Viết CSS để định màu chữ chung cho một trang web là xanh da trời , cho tiêu đề h1 màu xanh lá cây, cho tiêu đề h2 màu đỏ : h1 { color:#00ff00 } h2 { color = “red”} p { color : rbg(0,0,255)} 2.Text-indent Định dạng thụt đầu dòng cho dòng đầu tiên trong một đoạn văn Giá trị thuộc tính này là các đơn vị đo cơ bản dùng trong CSS: + length : 1px,1pt..  + percentage: 5%,10%.. VD: Định dạng thụt đầu dòng một khoảng 30px cho dòng văn bản đầu tiên trong mỗi đoạn văn bản đối với các thành phần p { text-indent:30px } 3.Text-align Căn chỉnh lề khối văn bản Gồm 4 giá trị : left (canh trái – mặc định), right (canh phải), center (canh giữa) và justify (canh đều). VD: Căn giữa cho h1,căn trái h2, căn phải cho h3 và canh đều đối với thành phần h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} p { text-align:justify } 4. Letter-spacing Dùng để định khoảng cách giữa các ký tự trong một đoạn văn bản. + normal(normal)  + length(1px,1pt...) VD: Muốn định khoảng cách giữa các ký tự trong thành phần h1, h2 là 7px và thành phần là 5px: h1 {letter-spacing: -3px} h2 {letter-spacing: 0.5cm} P {letter-spacing:7px} 5. Text-decoration Thêm các hiệu ứng gạch chân: + none   + underline (gạch chân)  + overline (gạch trên đầu)  + line- through (gạch xiên)  + blink  Ví dụ: Định dạng gạch đầu thành phần h1, gạch xiên cho h2, gạch chân cho thành phần h3 h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} 6. Text-transform Qui định chế độ in hoa hay in thường của văn bản mà không phụ thuộc vào văn bản gốc trên HTML. Thuộc tính này có tất cả 4 giá trị: + Uppercase (in hoa), + Lowercase (in thường), + Capitalize (in hoa ở ký tự đầu tiên trong mỗi từ) + None (không áp dụng hiệu ứng – mặc định). VD: Định dạng cho thành phần h1 là in hoa, h2 là in hoa đầu mỗi ký tự. h1 { text-transform:uppercase } h2 { text-transform:capitalize } 7. Direction Định hướng cho đoạn văn bản Giá trị : + ltr +rtl 8.Wh ite Space Thiết lập khoảng trắng giữa các từ Trong đó value gồm các giá trị:  + normal   + pre   + nowrap  9. Word Spacing Tăng hoặc giảm khoảng trống giữa các từ word-spacing: value; trong đó value gồm các giá trị  + normal   + length (1,2...) ví dụ: These words are spaced kết quả: These  words  are  spaced