This is a normal text.
This is another normal text Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Bộ chọn theo thuộc tính • Chọn đối tượng có thuộc tính thỏa [thuoctinh] [thuoctinh = giatri] [thuoctinh *= giatri] (chứa giá trị) [thuoctinh ~= tu] (chứa từ) [thuoctinh |= tu] (bắt đầu từ) Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Địng dạng bảng • border-collapse:collapse; Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Hiển thị miếng ảnh • background:url(img_navsprites.gif) 0; • width:46px; • height:44px; • Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ví dụ: Dàn trang #container #top #middle #left #container #center #bottom Lê Đình Thanh, Bài giảng Phát triển ứng dụng web #right Ví dụ: Dàn trang HTML CSS #left, #right, #center { display: inline; float:left; } spacer {clear:both;} Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Ví dụ: Thực đơn • • • • • Single vertical Single horizontal Dropdown Flyout Dropline Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Tạo viền trịn góc • border:2px solid; • border-radius:25px; • -moz-border-radius:25px; /* Old Firefox */ Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Tạo bóng • box-shadow: 10px 10px 5px #888888; Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Sử dụng ảnh làm viền • border-image:url(border.png) 30 30 round; • -moz-border-image:url(border.png) 30 30 round; /* Old Firefox */ • -webkit-border-image:url(border.png) 30 30 round; /* Safari and Chrome */ • -o-border-image:url(border.png) 30 30 round; /* Opera */ Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Định dạng • • • • background:url(img_flwr.gif); background-repeat:no-repeat; background-size:100% 100%; -webkit-background-origin:content-box; /* Safari */ • background-origin:content-box; Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Hiệu ứng văn • • • • text-shadow: 5px 5px 5px #FF0000; word-wrap: normal|break-word; word-break: normal|break-all|hyphenate; text-overflow: clip|ellipsis|string; Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Biến đổi 2D • transform: rotate(30deg); • -ms-transform: rotate(30deg); /* IE */ • -webkit-transform: rotate(30deg); /* Safari and Chrome */ • -o-transform: rotate(30deg); /* Opera */ • -moz-transform: rotate(30deg); /* Firefox */ • transform: translate(50px,100px); • -ms-transform: translate(50px,100px); /* IE */ • -webkit-transform: translate(50px,100px); /* Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Biến đổi 3D • transform: rotateX(120deg); • -webkit-transform: rotateX(120deg); /* Safari and Chrome */ • -moz-transform: rotateX(120deg); /* Firefox */ • transform: rotateY(130deg); • -webkit-transform: rotateY(130deg); /* Safari and Chrome */ • -moz-transform: rotateY(130deg); /* Firefox */ Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Chuyển kiểu • transition: property1 time1, property2 time2, property3 time3; • -moz-transition: width 2s, height 2s, -moztransform 2s; • -webkit-transition: width 2s, height 2s, webkit-transform 2s; • -o-transition: width 2s, height 2s,-o-transform 2s; Lê Đình Thanh, Bài giảng Phát triển ứng dụng web Hoạt cảnh • Định nghĩa cảnh hoạt cảnh @keyframes kfname { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } • Sử dụng hoạt cảnh animation-name: kfname; animation-duration:5s; Lê Đình Thanh, Bài giảng Phát triển ứng dụng web animation-timing-function:linear; Tiếp theo Thiết kế đáp ứng Lê Đình Thanh, Bài giảng Phát triển ứng dụng web