Đang tải... (xem toàn văn)
This is a paragraph.
Độ ưu tiên Khi có nhiều kiểu áp dụng lên phần tử, độ ưu tiên tăng dần theo thứ tự External < Internal < Inline External CSS Internal CSS Inline CSS Cascading Style Sheets BỘ CHỌN (SELECTORS) ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Selectors Html selector: tên thẻ html dùng làm tên selector áp dụng kiểu cho thẻ html h1 {text-align:center;} áp dụng kiểu cho nhiều thẻ html h1, h2 {text-align:center;} Border Ví dụ box { height: 150px; width: 150px; position: absolute; left: 200px; top: 200px; background-color: #99CCFF; border-width: thick; border-style: dotted; border-top-color: #990000; border-right-color: #0000FF; border-bottom-color: #FF9900; border-left-color: #00FF00; } Padding Thuộc tính Ý nghĩa padding thiết lập khoảng cách từ đường viền đến nội dung padding-top padding-bottom padding-left padding-right khoảng cách trên, dưới, trái, phải Giá trị pixel % Outline Thuộc tính Ý nghĩa Giá trị outline thiết lập thuộc tính outline outline-color màu màu invert kiểu none / solid /double dotted / dashed groove / ridge inset / outset độ dày thin medium thick giá trị cụ thể outline-style outline-width Cascading Style Sheets CÁC THUỘC TÍNH VỊ TRÍ ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Positioning Thuộc tính Ý nghĩa Giá trị position kiểu vị trí đặt phần tử static fixed relative absolute top bottom left right khoảng cách trên, dưới, trái, phải so với phần tử chứa pixel % float vị trí phần tử đẩy sang trái phải left right display hiển thị phần tử theo khối (riêng dòng), dòng, ẩn block inline none z-index thứ tự phần tử (khi có nhiều phần tử chồng lên nhau) auto số thứ tự Positioning Thuộc tính Ý nghĩa Giá trị clip hình dạng xén phần tử auto shape overflow thiết lập nội dung vượt phần auto / scroll visible / hidden vertical-align canh lề theo chiều đứng baseline / sub / super top / middle / bottom Positioning Ví dụ thuộc tính position p.fix{ position: fixed; top: 10px; left: 10px; color: red; }Đoạn văn có đặt thuộc tính position
Đoạn văn bình thường
Đoạn văn bình thường
Đoạn văn bình thường
Đoạn văn bình thường
Positioning Ví dụ thuộc tính float img{ float: right; width: 100; height: 50; border: 1px solid silver; } Positioning Ví dụ thuộc tính display a{ display: block; width: 150px; border-bottom: thin solid white; background-color: silver; padding: 5px; } PHP-MySQL Cascading Style Sheets MỘT SỐ THUỘC TÍNH NÂNG CAO ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Border Bo tròn góc: border-radius div { border:2px solid; border-radius:25px; } Bóng viền: box-shadow div { box-shadow: 10px 10px 5px #888888; } Image Độ suốt ảnh: opacity (0.0 – 1.0) img { opacity:0.4; filter:alpha(opacity=40); /* IE8 trước */ } Kích thước ảnh nền: background-size div { background:url('hinh.jpg'); background-size:600px 600px; background-repeat:no-repeat; } Text Bóng chữ: text-shadow h1 { text-shadow: 5px 5px 5px #FF0000; /* bóng ngang - bóng dọc – độ mờ - màu */ } Bộ chọn thuộc tính Định dạng phần tử kiểu text input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; } Định dạng phần tử kiểu button input[type="button"] { width:120px; margin-left:35px; display:block; } Ẩn phần tử: display:none; /* Ẩn phần tử không chiếm không gian */ visibility:hidden; /* Ẩn phần tử chiếm không gian */ ... Sheets MỘT SỐ THUỘC TÍNH NÂNG CAO ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Border Bo trịn góc: border-radius div { border:2px solid; border-radius :25 px; } Bóng vi? ??n: box-shadow div { box-shadow:... href="http://enews.agu.edu.vn">Báo sinh vi? ?n | href="http://lms.agu.edu.vn">Lớp học ảo Cascading Style Sheets CÁC THUỘC TÍNH VI? ??N, LỀ, … ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Box model... } Cascading Style Sheets CÁC THUỘC TÍNH CƠ BẢN ThS Nguyễn Minh Vi BM Tin học – ĐH An Giang Background Thuộc tính Giá trị Ý nghĩa background thiết lập tất thuộc tính khai báo background-attachment