Báo cáo Tìm hiểu về CSS - Nguyễn Hữu Đạt

SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 1 TÌM HIỂU VỀ CSS 1. Tổng quan về CSS Được tạo ra vào năm 1990, và các nhà khoa học khám phá vào năm 1994, từ đó Web phát triển rất nhanh. Đó là một ứng dụng chạy trên mạng (client-server), được chia sẻ khắp toàn cầu. Trang web là một file văn bản chứa những thẻ HTML hoặc những đoạn mã đặc biệt mà trình duyệt web có thể hiểu và thông dịch được. Bảng kiểu (CSS) đã thể hiện một bước đột phá lớn về cách thức làm việc của các nhà thiết kế bằng mở rộng khả năng kiểm soát dạng thể hiện của các trang Web. Với CSS, chúng ta có thể xác định các kiểu như kích thước, màu và khoảng cách của văn bản cũng như bố trí văn bản, hình ảnh trong trang. CSS còn có thể làm được nhiểu hơn thế nữa. Tiện ích của CSS chính là tiết kiệm thời gian, khi thay đổi định dạng, chỉ cần thay đổi CSS, các trang khác sẽ tự động cập nhật sư thay đổi đó; chúng ta cũng có thể dùng các CSS để tạo ra các hiệu ứng đặc biệt. Tuy nhiên CSS cũng có bất lợi riêng của nó, đó chính là không một trình duyệt nào chấp nhận nó hoàn toàn. 2. Khai báo trong CSS Cú pháp khai báo trong CSS bao gồm 3 phần: Bộ chọn, thuộc tính và giá trị (a selector, a property and a value). selector {property: value} Ví dụ: body {color: black} Để khai báo một lớp:  Ta đặt cặp thẻ … vào giữa cặp thẻ …..  Cách khai báo: Lớp bắt đầu bằng dấu chấm (.), theo sau đó là tên lớp. SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 2  Danh sách các thuộc tính và giá trị của thuộc tính được bao quanh bởi cặp dấu {,} Sử dụng lớp: Ví dụ: .kichthuoc10 { Colour: #336699 Font_size:10px } Ta cũng có thể gộp nhóm các khai báo có liên quan đến cùng bộ chọn thành 1 danh sách phân cách với dấu chấm phẩy. Ví dụ: p { text-align: center; color: black; font-family: arial} Hay gom nhóm các bộ chọn thành danh sách phân cách bởi dấu phẩy và chỉ liệt kê khai báo 1 lần. Ví dụ: h1,h2,h3,h4,h5,h6 { color: green } SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 3 Để gắn 1 lớp với 1 thẻ xác định, ta dung cú pháp: Tên_thẻ.tên_lớp {danh_sách_thuộc tính: giá_trị} Ví dụ: p.right {text-align: right} p.center {text-align: center} 3. Thuộc tính ID trong CSS Thuộc tính ID hoạt động cũng giống như thuộc tính class nhưng có một điểm khác nhau quan trong đó là: Giá trị của thuộc tính ID phải là duy nhất, xuyên suốt hồ sơ. Điều này có nghĩa là mỗi phần tử bên trong BODY đều có một thuộc tính ID, nhưng các giá trị phải khác nhau. Cú pháp: # giá_trị_id {danh_sách_thuộc_tính: giá_trị} Ví dụ: #green {color: green} Hay: p#para1 { text-align: center; color: red } Bằng cách sử dụng các bộ chọn ID, ta có thể thiết lập các thuộc tính kiểu trên nền tảng từng phần tử. 4. Cách tạo một bảng mẫu: Có 3 cách như sau: a. External Style Sheet Là một bảng kiểu được lưu trữ thành một 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. SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 4 Cách tạo:  Tạo một tập tin văn bản mới  Nhập tên các thẻ muốn định dạng thuộc tính theo mẫu: Tên_thẻ {danh_sách_thuộc_tính: giá_trị}  Lưu tập tin với định dạng Textonly và có phần mở rộng .css Cú pháp: <link rel= StyleSheet Type="text/css" href="tên_tập_tin.css" /> Ví dụ: <link rel="stylesheet" type="text/css" href="mystyle.css" /> b. Internal Style Sheet 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 ra mẫu chung trên đầu trang và dùng cho cả trang HTML. Cú pháp: tên_thẻ {danh_sách_thuộc_tính: giá_trị} Ví dụ: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 5 hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} c. Inline Styles 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 tên thẻ muốn định dạng. Cú pháp: Nội dung văn bản muốn định dạng Ví dụ: This is a paragraph 5. CSS background. Thuộc tính background được dùng để thiết lập các khía cạnh khác nhau cho nền của phần tử (là bề mặt trên đó văn bản được hiển thị). Ở đậy, ta nghiên cứu 6 thuộc tính nền như sau: Thuộc tính Ý nghĩa Giá trị background Thiết lập tất cả các đặc tính về nền. background-color background-image background-repeat background-attachment background-position SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 6 background- attachment Xác định xem hình ảnh nền là cố dịnh hay có thể di chuyển được trên khung vẽ. scroll fixed background-color Thiết lập màu nền của phần tử. color-rgb color-hex color-name transparent background-image Cho phép ta thiết lập hình ảnh làm nền của phần tử url(URL) none background- position Cho phép ghi đè vị trí mặc định của hình ảnh và xác định vị trí ban đầu của hình ảnh này, cho dù nó là một hình ảnh cố định hay hình ảnh được lặp lại. top left top center top right center left center center center right bottom left bottom center bottom right x% y% xpos ypos background-repeat Thuộc tính này giúp xác định hình ảnh có được lặp lại trong phần tử không và như thế nào. repeat repeat-x repeat-y no-repeat Ví dụ: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 7 body {background-color: yellow} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} This is header 1 This is header 2 This is a paragraph Kết quả: Chú ý: Đối với thuộc tính Background-image, để xác định hình ảnh làm nền, lập URL của hình ảnh dưới dạng giá trị . Khi xác định hình ảnh làm nền, ta cũng nên xác định một màu (bằng cách sử dụng thuộc tính background-colour), khi hiển thị, hình ảnh sẽ bao phủ phía trên. Ví dụ: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 8 body { background-image: url('tinhyeu.jpg'); background-repeat: repeat } Kêys quả: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 9 Trong thuộc tính Background-attachment, ý nghĩa của 2 giá trị như sau:  Scroll: Hình ảnh sẽ cuộn cùng với nội dung. Đây là mặc định  Fixed: Hình ảnh là cố định so với khung vẽ. Giá trị này hữu dụng nhất đối với phần tử BODY. Giá trị này cũng được sử dụng để thiết lập “hình mờ” nằm yên tại chỗ và không phụ thuộc vào bất kỳ chuyển động của phần tử nào. Ví dụ về Background-position: a. Đặt hình ảnh bằng cách sử dụng phần trăm Ví dụ: body { background-image: url(‘tinhyeu.jpg’); background-repeat: no-repeat; background-attachment:fixed; background-position: 30% 20%; } Note: For this to work in Mozilla, the background- attachment property must be set to "fixed". SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 10 b. Đặt hình ảnh bằng cách sử dụng bố trí tuyệt đối Ví dụ: body { background-image: url(‘tinhyeu.jpg’); background-repeat: no-repeat; background-attachment:fixed; background-position: 50px 100px; } Note: For this to work in Mozilla, the background- attachment property must be set to "fixed". c. Đặt hình ảnh bằng cách sử dụng từ khóa Khi đặt hình ảnh bằng cách sử dụng các từ khóa, ta có thể sử dụng kết hợp bất kỳ của hai từ khóa. Một trong ba từ khóa (top, center and bottom) sẽ thể hiện chiều ngang. Một trong ba từ khóa (leít, center and right) sẽ thể hiện chiều đứng. Chú ý: ta không thể kết hợp các từ khóa với giá trị phần trăm hoặc giá trị tuyệt đối. Ví dụ về Background: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 11 { background: #00ff00 url(‘tinhyeu.jpg’) no-repeat fixed center; } This is some text This is some text 6. CSS text: Bảng thuộc tính. Thuộc tính Ý nghĩa Giá trị color Thiết lập màu của văn bản color direction Thiết lập hướng của văn bản ltr rtl line-height Thiết lập khoảng cách giữa các dòng normal number length % letter-spacing Tăng hoặc giảm khoảng cách giữa các kí tự normal length text-align Dàn trang văn bản Left, right, center, justify text-decoration Thiết lập trang trí cho văn bản None, underline, overline, blink, line- SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 12 through word-spacing Tăng hoặc giảm khoảng cách giữa các từ normal length Ví dụ 1: h1 {color: #00ff00} h2 {color: #dda0dd} p {color: rgb(0,0,255)} This is header 1 This is header 2 This is a paragraph Kết quả: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 13 Ví dụ 2: h1 {text-align: center} h2 {text-align: left} h3 {text-align: right} This is header 1 This is header 2 This is header 3 SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 14 Kết quả: 7. CSS font Việc xác định thuộc tính kiểu chữ là một trong những cách sử dụng bảng kiểu phổ biến nhất. Các thuộc tính này bao gồm kích thước phông chữ, chiều rộng, độ đậm, và dáng chữ. Thuộc tính Ý nghĩa Giá trị font Thiết lập tất cả các thuộc tính cho văn bản font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 15 small-caption status-bar font-family Xác định các họ phông chữ sẽ được sử dụng trong web family-name generic-family font-size Xác định kích thước của phông chữ. xx-small x-small small medium large x-large xx-large smaller larger length % font-style Xác định kiểu in nghiêng trong họ phông chữ hiện tại. normal italic oblique font-variant Xác định kiểu chữ hoa nhỏ trong họ phông chữ hiện tại normal small-caps font-weight Xác định độ đậm nhạt của văn bản normal bold bolder lighter từ 100 đến 900 SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 16 Ví dụ: BODY {font-famile: Times} BODY {font-famile: “Times New Roman”, serif} H1.chapter {font-size: 12px} H1 {font-size: 120%} H1 {font-size: xx-small} 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 Kết quả: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 17 Trong thuộc tính font-weight, có 9 mức độ:  9 giá trị từ 100 đến 900 tạo ra một chuỗi có thứ tự, trong đó mỗi số sẽ cho biết độ đậm của giá trị đứng ở đó.  Normal: tương đương với 400  Bold: tương đương 700 Ví dụ: p.normal {font-weight: normal} p.thick {font-weight: bold} p.thicker {font-weight: 900} SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 18 This is a paragraph This is a paragraph This is a paragraph Kết quả: Ví dụ về thuộc tính font: P { font: italic small-caps 900 12px arial} This is a paragraph SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 19 Kết quả: 8. CSS border Bảng giá trị Thuộc tính Ý nghĩa Giá trị border Thiết lập bốn cạnh với cùng kiểu, cùng màu và chiều rộng. border-width border-style border-color border-bottom Thiết lập giá trị cho đường viền bên dưới border-bottom-width border-style border-color border-bottom-color Thiết lập màu cho đường viền bên dưới border-color border-bottom-style Thiết lập kiểu cho đường viền bên dưới border-style border-bottom-width Thiết lập chiều rộng cho đường viền bên dưới Thin, medium, thick, length border-color Thiết lập màu cho đường viền color border-left Thiết lập giá trị cho đường viền bên trái border-left-width border-style border-color border-left-color Thiết lập màu cho đường viền bên trái border-color border-left-style Thiết lập kiểu cho đường viền bên trái border-style border-left-width Thiết lập chiều rộng cho đường viền bên trái Thin, medium, thick, length SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 20 border-right Thiết lập giá trị cho đường viền bên phải border-right-width border-style border-color border-right-color Thiết lập màu cho đường viền bên phải border-color border-right-style Thiết lập kiểu cho đường viền bên phải border-style border-right-width Thiết lập chiều rộng cho đường viền bên phải Thin, medium, thick, length border-style Thiết lập kiểu cho đường viền None, hidden, dotted, dashed, solid, double, groove, ridge, inset, outset border-top Thiết lập giá trị cho đường viền bên trên border-top-width border-style border-color border-top-color Thiết lập màu cho đường viền bên trên border-color border-top-style Thiết lập kiểu cho đường viền bên dưới border-style border-top-width Thiết lập chiều rộng cho đường viền bên trái Thin, medium, thick, length border-width Thiết lập chiều rộng cho đường viền bên dưới Thin, medium, thick, length Ví dụ 1: p { border: medium double rgb(250,0,255) } SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 21 Some text Kết quả: Ví dụ 2: p.one {border-style: solid; border-left-width: 15px} SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 22 p.two {border-style: solid; border-left-width: thin} Note: The "border-left-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. Kết quả: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 23 9. Các đường biên (CSS outline) Thuộc tính Ý nghĩa Giá trị outline Chiều rộng đường viền, kiểu đường viền, màu đường viền outline-color outline-style outline-width outline-color Màu đường viền color invert outline-style Kiểu đường viền None, dotted, dashed, solid, double, groove, ridge, inset, outset outline-width Chiều rộng đường viền Thin, medium, thick length Ví dụ 1: 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. SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 24 Kết quả: Lề trong CSS (CSS margin) Thuộc tính Ý nghĩa Giá trị margin Thiết lập các thuộc tính như lề trên, dưới, trái, phải. margin-top margin-right margin-bottom margin-left margin-bottom Thiết lập giá trị cho lề dưới auto length, % margin-left Thiết lập giá trị cho lề trái auto length, % margin-right Thiết lập giá trị cho lề phải auto length, % margin-top Thiết lập giá trị cho lề trên auto length, % SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 25 Ví dụ: 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 Kết quả: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 26 10. Thuộc tính padding Mô tả cách chèn khoảng trống giữa phần tử và lề hoặc giữa phần tử và đường biên của nó (nếu có đường biên). Thuộc tính Ý nghĩa Giá trị padding Thiết lập tất cả các thuộc tính về lượng vùng đệm ở trên, dưới, trái hay phải padding-top padding-right padding-bottom padding-left padding-bottom Thiết lập yếu tố vùng đệm ở phía dưới length % padding-left Thiết lập yếu tố vùng đệm ở bên trái length % padding-right Thiết lập yếu tố vùng đệm ở bên phải length % padding-top Thiết lập yếu tố vùng đệm ở phía trên length % Ví dụ: td.test1 {padding: 1.5cm} td.test2 {padding: 0.5cm 2.5cm} SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 27 This is a tablecell with equal padding on each side. This tablecell has a top and bottom padding of 0.5cm and a left and right padding of 2.5cm. Kết quả: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 28 11. CSS list: Bảng thuộc tính. Thuộc tính Ý nghĩa Giá trị list-style Thiết lập nhãn và vị trí list-style-type list-style-position list-style-image list-style-image Dùng để thay cho số hoặc biểu tượng được định nghĩa trước none url list-style-position Xác định vị trí của nhãn mục danh sách inside outside list-style-type Thiết lập tất cả các khía cạnh của nhãn 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 SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 29 hiragana katakana hiragana-iroha katakana-iroha marker-offset auto length Ví dụ: ul { list-style: square inside url('arrow.gif') } Coffee Tea Coca Cola Kết quả: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 30 12. CSS table: Bảng thuộc tính. Thuộc tính Chú thích Giá trị border-collapse Sets whether the table borders are collapsed into a single border or detached as in standard HTML collapse separate border-spacing Khoảng cách length length caption-side Tiêu đề bảng top bottom left right empty-cells Đường biên của ô rỗng show hide table-layout Tạo bảng nhanh auto fixed Ví dụ: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 31 Table { border-collapse: separate; empty-cells: show } Peter Griffin Lois Kết quả: SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 32 13. Đơn vị trong CSS Kích thước: Đơn vị Ý nghía % Phần trăm in Inch cm centimeter mm millimeter em Em là một đơn vị chung cho việc đo lường các độ dài, có thể sử dụng theo cả phương ngang và đứng. Đây là một đơn vị rất mạnh – mạnh đến nỗi ta hiếm khi phải sử dụng các đơn vị độ dài khác. ex 1 ex = chiều cao x của 1 phông chữ pt point (1 pt bằng 1/72 inch) pc pica (1 pc bằng 12 points) px pixels (1 điểm ảnh trên màn hình máy tính) Màu sắc và bảng giá trị các màu: Unit Ý nghĩa color_name Tên màu (e.g. red) rgb(x,x,x) Giá trị RGB (e.g. rgb(255,0,0)) rgb(x%, x%, x%) Giá trị % RGB (e.g. rgb(100%,0%,0%)) #rrggbb Giá trị HEX (e.g. #ff0000) Màu Mã màu Giá trị RGB #000000 rgb(0,0,0) #FF0000 rgb(255,0,0) SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 33 #00FF00 rgb(0,255,0) #0000FF rgb(0,0,255) #FFFF00 rgb(255,255,0) #00FFFF rgb(0,255,255) #FF00FF rgb(255,0,255) #C0C0C0 rgb(192,192,192) #FFFFFF rgb(255,255,255) 000000 000033 000066 000099 0000CC 0000FF 003300 003333 003366 003399 0033CC 0033FF 006600 006633 006666 006699 0066CC 0066FF 009900 009933 009966 009999 0099CC 0099FF 00CC00 00CC33 00CC66 00CC99 00CCCC 00CCFF 00FF00 00FF33 00FF66 00FF99 00FFCC 00FFFF 330000 330033 330066 330099 3300CC 3300FF 333300 333333 333366 333399 3333CC 3333FF 336600 336633 336666 336699 3366CC 3366FF 339900 339933 339966 339999 3399CC 3399FF 33CC00 33CC33 33CC66 33CC99 33CCCC 33CCFF 33FF00 33FF33 33FF66 33FF99 33FFCC 33FFFF 660000 660033 660066 660099 6600CC 6600FF 663300 663333 663366 663399 6633CC 6633FF 666600 666633 666666 666699 6666CC 6666FF SV: Nguyễn Hữu Đạt – K56A – Khoa CNTT – ĐHSP Hà Nội 34 669900 669933 669966 669999 6699CC 6699FF 66CC00 66CC33 66CC66 66CC99 66CCCC 66CCFF 66FF00 66FF33 66FF66 66FF99 66FFCC 66FFFF 990000 990033 990066 990099 9900CC 9900FF 993300 993333 993366 993399 9933CC 9933FF 996600 996633 996666 996699 9966CC 9966FF 999900 999933 999966 999999 9999CC 9999FF 99CC00 99CC33 99CC66 99CC99 99CCCC 99CCFF 99FF00 99FF33 99FF66 99FF99 99FFCC 99FFFF CC0000 CC0033 CC0066 CC0099 CC00CC CC00FF CC3300 CC3333 CC3366 CC3399 CC33CC CC33FF CC6600 CC6633 CC6666 CC6699 CC66CC CC66FF CC9900 CC9933 CC9966 CC9999 CC99CC CC99FF CCCC0 0 CCCC33 CCCC66 CCCC99 CCCCCC CCCCF F CCFF00 CCFF33 CCFF66 CCFF99 CCFFCC CCFFFF FF0000 FF0033 FF0066 FF0099 FF00CC FF00FF FF3300 FF3333 FF3366 FF3399 FF33CC FF33FF FF6600 FF6633 FF6666 FF6699 FF66CC FF66FF FF9900 FF9933 FF9966 FF9999 FF99CC FF99FF FFCC00 FFCC33 FFCC66 FFCC99 FFCCCC FFCCFF FFFF00 FFFF33 FFFF66 FFFF99 FFFFCC FFFFFF