Báo cáo Tìm hiểu về CSS - Đoàn Xa Thích

BÁO CÁO TÌM HIỂU VỀ CSS GV hướng dẫn: Thầy Lê Nguyên Sinh SV thực hiện: Đoàn Xa Thích I. FONT 1. 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,… 2. 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; } 3. 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 } 4. 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 } 5. 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. 6. Font Cấu trúc: Font : | | | | Ví dụ: h1 { font: italic bold 35px arial,verdana,sans-serif; } } II. Background trong CSSÝ 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 1. 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)} 2. 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. 3. 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. 4. 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. 5. 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. III. TÌM HIỂU CSS MARGIN Margin là khoảng cách từ phần tử đến các phần tử xung quanh. Nó được sử dụng cho mọi đối tượng trên trang web cho dù là mảng lớn hay những chi tiết nhỏ. Các thuộc tính của Margin margin-top: Thiết lập lề đỉnh của một phần tử. margin-bottom: Thiết lập lề dưới của một phần tử. margin-left: Thiết lập lề trái của một phần tử. margin-right: Thiết lập lề phải của một phần tử. Các giá trị của Margin Margin có thể nhận 3 giá trị: Auto. Length(cm,dm,px…). percent%. Cú pháp: margin-top: length/percent/auto margin-bottom: length/percent/auto margin-left: length/percent/auto margin-right: length/percent/auto margin: length/percent/auto Margin được thiết lập với giá trị âm: margin: -10px 5px 5px 5px Margin được thiết lập với 1 giá trị margin: 0px à Tất cả các lề đều được xác định một khoảng cách 0px. Margin được thiết lập với 2 giá trị margin: 30px 20px à Lề trên và dưới được xác định: 30px. Lề trái và phải được xác định : 20px Margin được thiết lập với 3 giá trị margin: 30px 20px 70px à Lề trên, phải, dưới, trái được xác định lần lượt theo các khoảng cách 30px, 20px, 70px, 20px . Margin được thiết lập với 4 giá trị margin: 10px 5px 0px 3px à dòng này tương đương: margin-top: 10px;  margin-right: 5px;  margin-bottom: 0px;  margin-left: 3px Có thể thiết lập giá trị cho từng vị trí: margin-top: 10px margin-right: 20px margin-bottom: 30px margin-left: 40px IV. LIST 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 1. 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 2. 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 3. 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 4. 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 . 5. 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 V. Table Border – collapse Ý nghĩa: thiết lập viền của table là đơn hay là được tách ra như trong HTML chuẩn. Các giá trị khả dụng: Separate: Mặc định. Viền được tách ra. Collapse: Viền được gộp vào thành một viền đơn khi hiển thị. Cách dùng: table.coll { border-collapse: collapse } table.sep { border-collapse: separate } Border – spacing Ý nghĩa: thiết lập khoảng cách tách nhau giữa các đường viền ô. Các giá trị khả dụng: Độ dài khoảng cách tính theo đơn vị px, cm, … Nếu truyền 1 tham số: các ô sẽ giãn theo cả chiều ngang và chiều dọc theo giá trị đó. Nếu truyền 2 tham số: chiều ngang sẽ giãn theo tham số thứ nhất, chiều dọc sẽ giãn theo tham số thứ 2. Cách dùng: .spacing1 { border-spacing: 10px} .spacing2 { border-spacing: 10px 50px} Caption – side Ý nghĩa: thiết lập vị trí của caption so với các phía của bảng. Các giá trị khả dụng: Top: Mặc định. Caption ở phía trên bảng. Bottom: Caption ở phía dưới bảng. Left: Caption ở phía trái so với bảng. Right: caption ở phía phải so với bảng. Cách dùng: caption.Top { caption-side: Top} caption.Bottom { caption-side: Bottom} caption.Left { caption-side: Left} caption.Right { caption-side: Right} Empty – cells Ý nghĩa: thiết lập có hay không hiển thị các ô trống trong bảng. Các giá trị khả dụng: Hide: Quanh các ô rỗng không có border. Show: Mặc định .Quanh các ô rỗng có border. Cách dùng: table.ShowEmptyCells { empty-cells: show} table.HideEmptyCells { empty-cells: hide} Table – layout Ý nghĩa: thiết lập thuật toán được sử dụng để hiển thị các ô, các dòng, các cột. Các giá trị khả dụng: Auto: Mặc định. Độ rộng của cột khi hiển thị phụ thuộc vào nội dung của ô. Fixed: Độ rộng của cột khi hiển thị chỉ phụ thuộc vào độ rộng của bảng và độ rộng của các cột mà không phụ thuộc vào nội dung của ô. Cách dùng: table.FixedLayout { table-layout: fixed} table.AutoLayout { table-layout: auto} Việc trình bày bảng với thuật toán fixed sẽ nhanh hơn với thuật toán auto, vì: Với fixed: bảng sẽ được hiển thị ngay khi trình duyệt nhận được toàn bộ dòng đầu tiên của bảng. Với auto: nó cần truy cập tất cả nội dung của bảng trước khi quyết định cách trình bày cuối cùng. Tóm lại: Tên thuộc tính Các giá trị IE F N Border-collapse Collapse Separate (mặc định) 5 1 7 Border-spacing Length Length length 5M 1 6 Caption-side Top (mặc định) Bottom Left Right 5M 1 6 Empty-cells Show (mặc định) Hide 5M 1 6 Table-layout Auto (mặc định) Fixed 5 1 6 VI. Text 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… 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)} h1 {color: #00ff00} h2 {color="red"} p {color: rgb(0,0,255)} This is header 1 This is header 2 Cho em mùa xuân Chào tất cả các em thân yêu 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} h1 {letter-spacing: -3px} h2 {letter-spacing: 0.5cm} p {letter-spacing: 7px} Đoàn Xa Thích Nguyễn Thị Thu Hằng Lê Thị Hằng Nguyễn Thị Hoa 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} h1 {text-decoration: overline} h2 {text-decoration: line-through} h3 {text-decoration: underline} Đoàn Thích Nguyễn Thị Hoa Đào Thị Hằng 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 } h1 {text-transform: uppercase} h2 {text-transform: capitalize} h3 {text-transform: lowercase} Trần Cam Mạnh Phạm Trịnh Anh Đào Thị Hằng 7. Direction Định hướng cho đoạn văn bản Giá trị : + ltr +rtl Ví dụ : div.one { direction: rtl } div.two { direction: ltr } Some text. Right-to-left direction. Some text. Left-to-right direction. 8. White 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   VD: p { white-space: normal } Xa nhau chưa mà lòng nghe quạnh vắng, Đường thênh thang gió lộng một mình ta Rượu cạn li lòng còn giá, Lá trên cành một chiếc cuối bay xa. 8. 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 VII. Border Các thuộc tính Property Description Values IE F N W3C Border Một thuộc tính ngắn gọn (a shorthand property) thiết đặt cho tất cả các thuộc tính của 4 đường viền trong khai báo. border-widthborder-styleborder-color 4 1 4 1 Border-bottom Một thuộc tính ngắn gọn thiết đặt cho tất cả các thuộc tính của đường viền đáy trong khai báo. border-bottom-width border-styleborder-color 4 1 6 1 Border -bottom-color Thiết lập màu cho đường viền đáy border-color 4 1 6 2 Border -bottom - style Thiết lập kiểu đường viền đáy border-style 4 1 6 2 border-bottom-width Thiết lập độ rộng cho đường viền đáy Thinmediumthick length 4 1 6 1 border-color Thiết lập màu cho 4 đường viền, có thể có từ 1 đến 4 màu Color 4 1 4 1 border-left Một thuộc tính ngắn gọn thiết đặt cho tất cả các thuộc tính của đường viền trái trong khai báo. border-left-width border-style border-color 4 1 6 1 border-left-color Thiết lập màu cho đường viền bên trái border-color 4 1 6 2 border-left-style Thiết lập kiểu cho đường viền bên trái border-style 4 1 6 2 border-left-width Thiết lập độ rộng cho đường viền bên trái Thinmedium length Thick 4 1 4 1 border-right Một thuộc tính ngắn gọn thiết đặt cho tất cả các thuộc tính của đường viền phải trong khai báo. border-right-width border-style border-color 4 1 6 1 border-right-color Thiết lập màu cho đường viền bên phải border-color 4 1 6 2 border-right-style Thiết lập kiểu cho đường viền bên phải border-style 4 1 6 2 border-right-width Thiết lập độ rộng của đường viền bên phải Thin medium thick Length 4 1 4 1 border-style Thiết lập kiểu của 4 đường viền, có thể nhận từ 1 đến 4 kiểu. Nonehidden dotteddashed Outset insetsolid doublegroove Ridge 4 1 6 1 border-top Một thuộc tính ngắn gọn thiết đặt cho tất cả các thuộc tính của đường viền đỉnh trong khai báo. Border-top-widthborder-styleborder-color 4 1 6 1 border-top-color Thiết lập màu cho đường viền trên đỉnh border-style 4 1 6 2 border-top-style Thiết lập kiểu cho đường viền trên đỉnh border-color 4 1 6 2 border-top-width Thiết lập độ rộng cho đường viền trên đỉnh Thinmediumthicklength 4 1 4 1 border-width Một thuộc tính ngắn gọn thiết đặt cho tất cả các thuộc tính của đường viền đáy trong khai báo. Có thể nhận từ 1 đến 4 giá trị. Thinmediumthicklength 4 1 4 1 VIII. OUTLINE Outline-colour: đặt màu cho đường bao. 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: độ rộng cho đường bao 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: chọn kiểu cho đường bao 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