Tìm hiểu CSS

Tìm hiểu CSS CSS Background: gồm các thuộc tính sau: Background-color (Màu nền) Thuộc tính: color-rgb (ví dụ: rgb(255,0,0)) color-hex (ví dụ: #FF0000) color-name (ví dụ: red) transparent (không màu) Ví dụ: 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ả hiển thị: 2. Background-image (Dùng hình ảnh làm nền) Thuộc tính: url(chỉ ra đường dẫn tới hình ảnh dùng làm nền) none: mặc định, không có hình nền. Ví dụ: body { background-image: url('bgdesert.jpg') } →Kết quả: 3. Background-attachment Thuộc tính: scroll: nền vị cuộn theo fixed: nền không bị cuộn theo Ví dụ: body { background-image: url('smiley.gif'); background-repeat: no-repeat; background-attachment: fixed } The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page The image will not scroll with the rest of the page →Kết quả: nền không bị cuộn 4. Background – position: Thiết lập vị trí bắt đầu của nền Thuộc tính: top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom rightx% y% : x là hoành độ, y là tung độ. Ở góc trên cùng bên trái là 0% 0%. Góc dưới cùng bên phải là 100% 100%.If you only specify one value, the other value will be 50%. Nếu bạn chỉ xác định một giá trị, giá trị còn lại sẽ là 50%.xpos ypos : x là hoành độ, y là tung độ. Ở góc trên cùng bên trái là 0 0The top left corner is 0 0. Các đơn vị có thể là điểm ảnh (0px 0px) hoặc bất kì đơn vị CSS nào khác. Nếu bạn chỉ xác định một giá trị, các giá trị còn lại sẽ là 50%. Có thể kết hợp % và vị tríYou can mix % and positions.. Ví dụ: đặt vị trí ảnh trên trang web ở trung tâm html> body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; background-position:center; } Note: For this to work in Mozilla, the background-attachment property must be set to "fixed". →Kết quả: Đặt vị trí ảnh dùng %: body { background-image: url('smiley.gif'); 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". →Kết quả: Đặt vị trí ảnh dùng pixel: body { background-image: url('smiley.gif'); 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". →Kết quả: 5. Background – repeat: Lặp lại ảnh nền Thuộc tính: repeat : Lặp theo cả chiều dọc và ngangrepeat-x : Lặp theo chiều ngangrepeat-y : Lặp theo chiều dọcno-repeat : Không lặp Ví dụ: Lặp theo chiều dọc body { background-image: url('bgdesert.jpg'); background-repeat: repeat-y } →Kết quả: CSS Text: gồm các thuộc tính sau: -Ví dụ color: Ví dụ align the text: Ví dụ decorate the text: CSS font Các thuộc tính: Ví dụ: CSS Border: Thuộc tính: Property Description Values IE F N W3C border A shorthand property for setting all of the properties for the four borders in one declaration border-widthborder-styleborder-color 4 1 4 1 border-bottom A shorthand property for setting all of the properties for the bottom border in one declaration border-bottom-widthborder-styleborder-color 4 1 6 1 border-bottom-color Sets the color of the bottom border border-color 4 1 6 2 border-bottom-style Sets the style of the bottom border border-style 4 1 6 2 border-bottom-width Sets the width of the bottom border thinmediumthicklength 4 1 4 1 border-color Sets the color of the four borders, can have from one to four colors color 4 1 6 1 border-left A shorthand property for setting all of the properties for the left border in one declaration border-left-widthborder-styleborder-color 4 1 6 1 border-left-color Sets the color of the left border border-color 4 1 6 2 border-left-style Sets the style of the left border border-style 4 1 6 2 border-left-width Sets the width of the left border thinmediumthicklength 4 1 4 1 border-right A shorthand property for setting all of the properties for the right border in one declaration border-right-widthborder-styleborder-color 4 1 6 1 border-right-color Sets the color of the right border border-color 4 1 6 2 border-right-style Sets the style of the right border border-style 4 1 6 2 border-right-width Sets the width of the right border thinmediumthicklength 4 1 4 1 border-style Sets the style of the four borders, can have from one to four styles nonehiddendotteddashedsoliddoublegrooveridgeinsetoutset 4 1 6 1 border-top A shorthand property for setting all of the properties for the top border in one declaration border-top-widthborder-styleborder-color 4 1 6 1 border-top-color Sets the color of the top border border-color 4 1 6 2 border-top-style Sets the style of the top border border-style 4 1 6 2 border-top-width Sets the width of the top border thinmediumthicklength 4 1 4 1 border-width A shorthand property for setting the width of the four borders in one declaration, can have from one to four values thinmediumthicklength 4 1 Ví dụ: CSS Outline: Thuộc tính: Value Description outline-coloroutline-styleoutline-width A shorthand property for setting all the outline properties in one declaration. Default value: invert none medium Ví dụ: button{ outline: red solid thin} CSS Margin Thuộc tính: Value Description margin-topmargin-rightmargin-bottommargin-left Sets the properties for the margins. The values comes in % (defines a margin in % of the total height/width of the document), length (defines a fixed margin), and auto (the browser sets a margin). Default value: Not defined Ví dụ: CSS Padding Thuộc tính: Value Description padding-toppadding-rightpadding-bottompadding-left Sets the padding. The values comes in % (defines padding in % of the width of the closest element) and length (defines a fixed padding). Default value: Not defined Ví dụ: CSS List Thuộc tính: Value Description list-style-typelist-style-positionlist-style-image Sets the properties for a list. Default value: Not defined Ví dụ: CSS Table Thuộc tính: Property Description Values IE F N W3C border-collapse Sets whether the table borders are collapsed into a single border or detached as in standard HTML collapseseparate 5 1 7 2 border-spacing Sets the distance that separates cell borders (only for the "separated borders" model) length length 5M 1 6 2 caption-side Sets the position of the table caption topbottomleftright 5M 1 6 2 empty-cells Sets whether or not to show empty cells in a table (only for the "separated borders" model)  showhide 5M 1 6 2 table-layout Sets the algorithm used to display the table cells, rows, and columns autofixed 5 1 6 2 Ví dụ: