Đang tải... (xem toàn văn)
Css cung cấp thuộc tính color cho phép định nghĩa màu chữ và màu nền.Giá trị gán cho thuộc tính màu có thể là tên màu, giá trị RGB, hoặc giá trị hệ Hexa.Thuộc tính Background của CSS giúp bạn có thể xác định màu nền, ảnh nền cho trang Web.
Session Màu, viền Bố cục trang Vị trí phần tử Giới thiệu CSS3 Một số thành phần • Thuộc tính Color Background. • Thuộc tính Border. • Thuộc tính Box • Css cung cấp thuộc tính color cho phép định nghĩa màu chữ màu nền. • Giá trị gán cho thuộc tính màu tên màu, giá trị RGB, giá trị hệ Hexa. • Thuộc tính Background CSS giúp bạn xác định màu nền, ảnh cho trang Web. • Border viền hình chữ nhật bao quanh phần tử. • Thuộc tính border CSS cho phép tạo đường viền quanh văn bản, hay hình ảnh. • Thuộc tính border-style dùng để xác định kiểu đường viền (nét liền, nét đứt, nét đôi, chấm chấm …) Building Dynamic Web Sites / of 13 • Thuộc tính border-color màu đường viền • Thuộc tính border-width kích thước đường viền Giá trị cho thuộc tính • Lề (margin) khoảng trắng bao quanh nội dung nằm phần tử. • Thuộc tính margin dùng để xác định lề (trên, dưới, trái, phải) bao quanh nội dung. Giá trị cho thuộc tính giá trị tương đối tuyệt đối. • Tuy nhiên xác định riêng lề với thuộc tính cho bảng sau: Building Dynamic Web Sites / 10 of 13 • Padding khoảng trắng đường biên phần tử với nội dung nó. • Thuộc tính padding dùng để xác định tất cạnh (trên, dưới, trái, phải). Giá trị cho thuộc tính giá trị tương đối tuyệt đối. • Tuy nhiên xác định riêng padding cho cạnh với thuộc tính cho bảng sau: • Ví dụ • Ví dụ • • • Float (theo nghĩa tiếng Việt thả trôi) thuộc tính CSS dùng để cố định thành phần web bên trái hay bên phải không gian bao quanh nó. Đây thuộc tính cần thiết dàn trang (như tạo trang web column layout hay column layout), hiển thị văn thành cột. Thuộc tính float có giá trị: – Left: Cố định phần tử bên trái. – Right: Cố định phần tử bên phải. – None: Bình thường. • Đi với thuộc tính float, CSS có thuộc tính clear. • Là thuộc tính thường gán vào phần tử liên quan tới phần tử float để định hướng xử phần tử này. • Thuộc tính clear có thuộc tính: left (tràn bên trái), right (tràn bên phải), both (không tràn) none. • Trong CSS, có ba loại vị trí normal, absolute, relative. • Thuộc tính position CSS dùng để xác định vị trí nội dung. • Giá trị mặc định thuộc tính position static, có nghĩa nội dung trang Web đặt theo thứ tự tập tin mã nguồn HTML. • Vị trí tương đối nội dung phần tử định vị theo góc bên trái phần tử chứa (lấy góc bên trái phần tử cha làm gốc tọa độ để định vị). • Để định vị trí nội dung bên phần tử theo vị trí tương đối, bạn thiết lập giá trị relative cho thuộc tính position. bottom Hai hình minh họa dùng thuộc tính top, left right, bottom để định vị. Hình màu đỏ (phần tử con) lấy góc bên trái hình màu đen (phần tử cha chứa phần tử màu đỏ) làm gốc tọa độ để định vị. left right top #mauvang{ width:300px; height: 100px; border: 5px solid yellow; } #mauden{ width:300px; height: 300px; border: 10px solid black; } #hopmaudo{ position: relative; right: 80px; bottom: 100px; width:150px; height: 150px; border: 1px solid red; background:red; } bottom: 100px right:80px • Để định vị trí cho nội dung bên phần tử vị trí tuyệt đối, thiết lập giá trị absolute cho thuộc tính position. • Vị trí tuyệt đối thay đổi vị trí xuất nội dung phần tử theo cửa sổ trình duyệt (phần tử BODY). left right top top Các góc phần tử định vị theo góc phần tử cha. bottom bottom left right • Ví dụ [...]... version mới nhất của CSS • Bổ sung thêm các feature mới 24 • • • • • • • • • Selectors Box Model Backgrounds and Borders Image Values and Replaced Content Text Effects 2D/3D Transformations Animations Multiple Column Layout User Interface 25 • • • • • CSS animation (CSS hoạt h.nh) CSS transition (CSS chuyển đổi) CSS 2D/ 3D transformation: transform CSS3 background, border, RGAa color, gradient, drop Shadows,... #logo2 { #logo1 { position:absolute; top:50px; left:70px; } #logo3 { position:absolute; bottom:0px; left:0px; } position:absolute; top:0px; right:0px; } #logo4 { position:absolute; bottom:70px; right:50px; } • Là version mới nhất của CSS • Bổ sung... tính rất cần thiết khi dàn trang (như tạo các trang web 2 column layout hay 3 column layout), hiển thị văn bản thành cột Thuộc tính float có 3 giá trị: – Left: Cố định phần tử về bên trái – Right: Cố định phần tử về bên phải – None: Bình thường • Đi cùng với thuộc tính float, trong CSS còn có một thuộc tính là clear • Là một thuộc tính thường được gán vào các phần tử liên quan tới phần tử đã được float... trong phần tử là vị trí tuyệt đối, thiết lập giá trị absolute cho thuộc tính position • Vị trí tuyệt đối thay đổi vị trí xuất hiện nội dung của phần tử theo cửa sổ trình duyệt (phần tử BODY) left right top top Các góc của phần tử con định vị theo các góc phần tử cha bottom bottom left right • Ví dụ #hopmaudo{ position: relative; right: 80px; bottom: 100px; width:150px;... Thuộc tính padding được dùng để xác định tất cả 4 cạnh (trên, dưới, trái, phải) Giá trị cho thuộc tính có thể là giá trị tương đối hoặc tuyệt đối • Tuy nhiên có thể xác định riêng padding cho từng cạnh với các thuộc tính cho ở bảng sau: • Ví dụ • Ví dụ • • • Float (theo như nghĩa tiếng Việt là thả trôi) là một thuộc tính CSS dùng để cố định một thành phần web về bên trái hay bên phải không gian bao quanh... transition (CSS chuyển đổi) CSS 2D/ 3D transformation: transform CSS3 background, border, RGAa color, gradient, drop Shadows, góc bo tr.n, ….: border-radius, backgroundimage, • Border-image • Web font: @font-face 26 . Session 4 Màu, viền Bố cục trang Vị trí các phần tử Giới thiệu CSS3 Một số thành phần mới của • Thuộc tính Color và Background. • Thuộc tính Border. • Thuộc tính Box • Css cung. tính CSS dùng để cố định một thành phần web về bên trái hay bên phải không gian bao quanh nó. • Đây là một thuộc tính rất cần thiết khi dàn trang (như tạo các trang web 2 column layout hay 3. bên phải), both (không tràn) và none.