Những thuộc tính của css

TRƯỜNG ĐẠI HỌC SƯ PHẠM HÀ NỘI Khoa công nghệ thơng tin =====o0o===== Báo cáo thuộc tính CSS Phạm Thị Yến I.CSS gì?  CSS thay cho cụm từ tiếng Anh "Cascading Style Sheet"  Styles định nghĩa cách thành phần HTML hiển thị  Các Styles thông thường lưu trữ Style Sheets  Các Style được thêm vào từ công bố HTML 4.0  Có ba cách chèn Style: 1.External Style Sheets 2.Internal Style Sheets 3.Inline Style giải thích loại  External Style Sheets tiết kiệm nhiều thời gian cho công việc bạn  External Style Sheets lưu tệp có phần mở rộng CSS Nhiều định nghĩa Style tệp gọi Cascade(xếp lớp) Style Sheet II.Các thuộc tính Border CSS 1.Thuộc tính Border: NN: Netscape, IE: Internet Explorer, W3C: Web Standard Thuộc tính Mơ tả Ví dụ NN IE W3C border Một thuộc tính tốc hành để thiết lập thuộc tính cho toàn đường bao khai báo border-width border-style border-color 4.0 4.0 CSS1 border-bottom Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao đáy khai báo border-bottom-width border-style border-color 6.0 4.0 CSS1 borderbottom-color Thiết lập màu sắc đường bao đáy border-color 6.0 4.0 CSS2 borderbottom-style Thiết lập kiểu cách đường bao đáy border-style 6.0 4.0 CSS2 borderbottom-width Thiết lập độ rộng đường bao đáy thin medium thick length 4.0 4.0 CSS1 border-color Thiết lập màu sắc bốn đường bao, đạt màu từ đến bốn color 6.0 4.0 CSS1 border-left Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao trái khai báo border-left-width border-style border-color 6.0 4.0 CSS1 border-leftcolor Thiết lập màu sắc đường bao trái border-color 6.0 4.0 CSS2 border-leftstyle Thiết lập kiểu cách đường bao trái border-style 6.0 4.0 CSS2 border-leftwidth Thiết lập độ rộng đường bao trái thin medium thick length 4.0 4.0 CSS1 border-right Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao phải khai báo border-right-width border-style border-color 6.0 4.0 CSS1 border-rightcolor Thiết lập màu sắc đường bao phải border-color 6.0 4.0 CSS2 border-rightstyle Thiết lập kiểu cách đường bao phải border-style 6.0 4.0 CSS2 border-rightwidth Thiết lập độ rộng đường bao phải thin medium thick length 4.0 border-style Thiết lập kiểu cách bốn đường bao, đạt kiểu từ đến bốn none hidden dotted dashed solid double groove ridge inset outset 6.0 4.0 CSS1 border-top Một thuộc tính tốc hành để thiết lập thuộc tính cho đường bao đỉnh khai báo border-top-width border-style border-color 6.0 4.0 CSS1 border-topcolor Thiết lập màu sắc đường bao đỉnh border-color 6.0 4.0 CSS2 border-topstyle Thiết lập kiểu cách đường bao đỉnh border-style 6.0 4.0 CSS2 border-topwidth Thiết lập độ rộng đường bao đỉnh thin medium thick length 4.0 4.0 CSS1 border-width Một thuộc tính tốc hành để thiết lập độ rộng bốn đường bao khai báo, có từ đến bốn giá trị thin medium thick length 4.0 4.0 CSS1 4.0 Vi du: CSS1 p { border: medium double rgb(400,0,400) { border-top-width:thin; border-top-color:#FF0000; border-top-style:solid; border-right-width:thick border-right-color:#AFAFAF; border-right-style:dotted; border-bottom-width:2px; border-bottom-color:blue border-bottom-style:double; border-left-width:5px; border-left-color:violet; border-left-style:groove }

Phần văn bản

2.Thuộc tính Font CSSNN: Netscape, IE: Internet Explorer, W3C: Chuẩn Web Thuộc tính Mơ tả Gía trị NN IE W3C font Một thuộc tính nhỏ để thiết lập tất thuộc tính cho phông khai báo font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar 4.0 4.0 CSS1 font-family Một danh sách ưu tiên họ phông cho thành phần family-name generic-family 4.0 3.0 CSS1 font-size Thiết lập kích cỡ cho phơng chữ xx-small x-small small medium large 4.0 3.0 CSS1 x-large xx-large smaller larger length % font-stretch Những rút gọn mở rộng phông normal wider narrower ultra-condensed extra-condensed condensed semi-condensed semi-expanded expanded extra-expanded ultra-expanded font-style Thiết lập kiểu cách phông normal italic oblique 4.0 font-variant Hiển thị văn phông chữ HOA NHỎ phông chữ thường normal small-caps 60 font-weight Thiết lập trọng lượng phông bold bolder lighter 100 200 300 400 500 4.0 Vd: { font-style: italic; font-variant:small-caps; font-weight: bold; font-size: 80px; font-family: arial,verdana,sans-serif; } CSS2 4.0 CSS1 CSS1 4.0 CSS1 3.Thuộc tính List CSS Thuộc tính List cho phép bạn thay đổi điểm_đánh_dấu_mục_danh_sách khác nhau, thiết lập ảnh điểm_đánh_dấu_mục_danh_sách thiết lập nơi để đặt điểm_đánh_dấu_mục_danh_sách N: Netscape, IE: Internet Explorer, W3C: Chuẩn Web Thuộc tính Mơ tả Gía trị NN IE W3C list-style A shorthand property for setting all of the properties for a list in one declaration Một thuộc tính ngắn gọn để thiết lập cho tồn thuộc tính danh sách khai báo Sets an image as the list-item marker Thiết lập ảnh điểm_đánh_dấu_mục_danh_sách Places the list-item marker in the list Đặt điểm_đánh_dấu_mục_danh_sách danh sách Sets the type of the list-item marker Thiết lập kiểu điểm_đánh_dấu_mục_danh_sách list-style-type list-styleposition list-styleimage 6.0 4.0 CSS1 none url 6.0 4.0 CSS1 inside outside 6.0 4.0 CSS1 none disc circle square decimal decimalleading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjkideographic hiragana katakana hiragana-iroha katakanairoha auto length 4.0 4.0 CSS1 list-styleimage list-styleposition list-style-type marker-offset CSS2 4.Thuộc tính Text CSS Thuộc tính Text cho phép bạn kiểm sốt diện mạo văn Nó thay đổi màu văn bản, tăng giảm khoảng cách ký tự văn bản, chỉnh văn bản, trang trí cho văn bản, thụt dịng nhiều hiệu ứng khác NN: Netscape, IE: Internet Explorer, W3C: Web Standard Thuộc tính Mơ tả Gía trị NN IE W3C color Thiết lập màu cho chữ color 4.0 3.0 CSS1 direction Thiết lập hướng cho chữ letter-spacing ltr rtl Tăng giảm khoảng normal trống ký tự length left text-align CSS2 Căn chỉnh văn right thành phần center 6.0 4.0 CSS1 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 4.0 CSS1 4.0 4.0 CSS1 justify none text- Thêm trang trí cho văn decoration underline overline line-through blink text-indent Thụt dòng đầu văn length thành phần % none text-shadow color length none text-transform Kiểm soát ký tự capitalize thành phần uppercase lowercase white-space word-spacing Thiết lập normal khoảng trắng pre thành phần nowrap Tăng giảm khoảng normal trống từ length Vd: { color:#000 } h1 { color:#0000FF } h2 { color:#00FF00 } p { text-indent:30px } h1, h2 { text-align:right } p { text-align:justify } h1, h2 { letter-spacing:7px } P { letter-spacing:5px } h1 { text-decoration:underline } h2 { text-decoration:overline 4.0 5.5 CSS1 6.0 6.0 CSS1 } h1 { text-transform:uppercase } h2 { text-transform:capitalize } 5.Thuộc tính Padding NN: Netscape, IE: Internet Explorer, W3C: Web Standard Thuộc tính Mơ tả Gía trị NN IE W3C Một thuộc tính ngắn gọn padding-top 4.0 4.0 CSS1 để thiết lập tất padding-right khoảng đệm với padding-bottom lần khai báo padding-left padding- Thiết lập khoảng đệm length 4.0 4.0 CSS1 bottom đáy phần tử % Thiết lập khoảng đệm phía length 4.0 4.0 CSS1 trái phần tử % Thiết lập khoảng đệm phía length 4.0 4.0 CSS1 phải phần tử % Thiết lập khoảng đệm length 4.0 4.0 CSS1 đỉnh phần tử % padding padding-left padding-right padding-top Vd: td {padding-right:5cm} o duoc panding-ringht mot khoang 5cm 6.Các thuộc tính Background CSS Thuộc tính cho phép bạn kiểm sốt màu thành phần, thiết lập ảnh văn bản, lặp lại ảnh theo chiều dọc chiều ngang vị trí ảnh trang Các thuộc tính Background NN: Netscape, IE: Internet Explorer, W3C: Web Standard Thuộc tính Mơ tả Gía trị NN IE W3C background Một thuộc tính ngắn gọn để thiết lập tất thuộc tính khai báo 6.0 4.0 CSS1 backgroundattachment 6.0 4.0 CSS1 backgroundcolor Thiết lập liệu ảnh có đứng cố định chỗ hay cuộn theo phần văn lại trang Thiết lập màu phần tử background-color background-image background-repeat background-attachment background-position scroll fixed 4.0 4.0 CSS1 backgroundimage backgroundposition Thiết lập ảnh trang Thiết lập điểm xuất phát ảnh color-rgb color-hex color-name transparent url none top left top center top right center left center center center right bottom left bottom center bottom right x-% y-% x-pos y-pos 4.0 4.0 CSS1 6.0 4.0 CSS1 backgroundrepeat Thiết lập cách ảnh lặp lại repeat repeat-x repeat-y no-repeat 4.0 4.0 CSS1 Vd: body {background-color: RED} h1 {background-color: #00ff00} h2 {background-color: transparent} p {background-color: rgb(250,0,255)} HAI YEN

7.Thuộc tính Margin CSS Thuộc tính Margin CSS xác định khoảng trống xung quanh phần tử NN: Netscape, IE: Internet Explorer, W3C: chuẩn Web Thuộc tính margin Mơ tả Gía trị NN IE W3C Một thuộc tính nhanh margin-top 4.0 4.0 CSS1 để thiết lập thuộc tính margin-right cho lề khai margin-bottom báo margin-left 4.0 4.0 CSS1 4.0 3.0 CSS1 4.0 3.0 CSS1 4.0 3.0 CSS1 margin- Thiết lập lề đáy bottom phần tử margin-left margin-right margin-top Thiết lập lề trái phần tử Thiết lập lề phải phần tử Thiết lập lề đỉnh auto length % auto length % auto length % auto phần tử length % Vd: p.margin {margin: 3cm 4cm 6cm 7cm}

dac ta thuoc tinh margin

hoa hong mau tranghoa hong mau tranghoa hong mau tranghoa hong mau tranghoa hong mau tranghoa hong mau tranghoa hong mau tranghoa hong mau trang

ko dac ta thuoc tinh margin

hoa hong mau trang hoa hong mau trang hoa hong mau tranghoa hong mau tranghoa hong mau tranghoa hong mau tranghoa hong mau tranghoa hong mau tranghoa hong mau trang