Định nghĩa các style ở một file riêng biệt và được lưu lại dưới dạng file *.css, file này sẽ được liên kết vào trang web qua phần tử link.
file style.css element{ property : value;…. } file index.html <head>
<title> Style Sample </title>
<link rel="stylesheet" href="style.css" /> </head>
Hoặc
<head>
<title> Style Sample </title> <style type="text/css"> @import url(style.css); </style> </head> 12.3. Các định nghĩa CSS Định nghĩa cho tất cả các phần tử HTML. *{ property : value; … } Định nghĩa cho 1 phần tử HTML Element{ property : value; … }
Nếu bạn muốn tạo ra các định dạng khác nhau cho cùng một phần tử, hay muốn chia sẻ một định dạng cho nhiều phần tử khác nhau, ta sẽ định nghĩa các style dưới dạng class (lớp định dạng riêng). Sau đó, nhúng các định dạng đó vào trong trang web qua thuộc tính class của các phần tử.
o Định nghĩa một class : <style> .class1{ property : value; … } </style> o Nhúng class
<element class="class1"> … </element>
Định nghĩa class cho một phần tử
Element.class{
property : value; …
}
Định nghĩa class cho một phần tử, có một thuộc tính có giá trị được chỉ định
Element.class[property^=value] {
property : value; …
}
Các phép so sánh = (equal), ^=(begin with), ~= (contain space-separated), *=(contain) , |= (begin with), $= (file what)
Ngoài ra, nếu ta muốn định dang riêng cho element có id riêng nào đó, ta sẽ định nghĩa style dưới dạng id riêng, và trong trong web, phần tử nào muốn có định dạng ta sẽ đặt id cho phần tử đó tương tự id của style.
o Định nghĩa một id : <style> #id1{ property : value; … } </style> o Nhúng class
<element id="id1"> … </element>
Định nghĩa id cho một phần tử
Element#id{
}
Nhóm định nghĩa
Element1, Element2 {
property : value; …
}
Class# Element1, Class#Element2 {
property : value; …
}
Định nghĩa cho các phần tử con
Element1 Element2 {
property : value; …
}
Định nghĩa cho các phần tử con ngay sau
Element1>Element2 {
property : value; …
}
Định nghĩa cho một phần tử kế ngay sau
Element1+Element2 {
property : value; …
}
Định nghĩa cho các phần tử kế ngay sau
Element1~Element2 {
property : value; …
}
Định nghĩa lớp giả (Pseudo class),
Element:pseudo-class {
}
Các lớp giả :link, :visited, :active, :hover, :focus, :active, :lang, :first-child, :first- line, :first-letter.
12.4. Các thuộc tính
12.4.1. Thuộc tính kích thước
height : {length | percentage | auto | inherit} min-height : {length | percentage | inherit}
min-height : {length | percentage | inherit | none} width : {length | percentage | auto | inherit} min- width : {length | percentage | inherit}
min- width : {length | percentage | inherit | none}
12.4.2. Thuộc tính lề
margin-top : {length | percentage | auto | inherit} margin-right : {length | percentage | auto | inherit} margin-bottom : {length | percentage | auto | inherit} margin-left : {length | percentage | auto | inherit} margin : {[length | percentage | auto]1 to 4 values | inherit} padding-top : {length | percentage | auto | inherit} padding -right : {length | percentage | auto | inherit} padding -bottom : {length | percentage | auto | inherit} padding -left : {length | percentage | auto | inherit} padding : {[length | percentage | auto]1 to 4 values | inherit}
12.4.3. Thuộc tính khung viền
border-top-color : {color | transparent | inherit}
border-top-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-top-color-width : {thin | medium | thick | length | inherit} border-top : {border-width | border-style | border-color | inherit} border-right-color : {color | transparent | inherit}
border-right-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-right-color-width : {thin | medium | thick | length | inherit} border-right : {border-width | border-style | border-color | inherit} border-left-color : {color | transparent | inherit}
border-left-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-left-color-width : {thin | medium | thick | length | inherit} border-left : {border-width | border-style | border-color | inherit} border-bottom-color : {color | transparent | inherit}
border-bottom-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit} border-bottom-color-width : {thin | medium | thick | length | inherit} border-bottom: {border-width | border-style | border-color | inherit} border-color : {color | transparent | inherit}
border-color-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
border-color-width : {thin | medium | thick | length | inherit} border: {border-width | border-style | border-color | inherit} outline-color : {color | invert | inherit}
outline-style : {none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit}
outline-width : {thin | medium | thick | length | inherit}
outline : {outline-width | outlint-style | outline-color | inherit}
12.4.4. Thuộc tính bố cục
display : {block | inline | inline-block | inline-table | list-item | run-in | table | table-caption | table-cell | table-column | table-column- group | table-footer-group | table-header-group | table-row | table-row-group | none | inherit}
position : {absolute | fixed | relative | static | inherit} float : {left | right | none | inherit}
clear : {none | left | right | both | inherit}
visibility : {visible | hidden | collapse | inherit} top : {length | percentage | auto | inherit} right : {length | percentage | auto | inherit} bottom : {length | percentage | auto | inherit} left : {length | percentage | auto | inherit} z-index : {integer | auto | inherit}
overflow : {auto | hidden | scroll | visible | inherit} clip : {shape | auto | inherit}
12.4.5. Thuộc tính danh sách
list-style-type : {circle | disc | square | armenian | decimal | decimal- leading-zero | georgian | lower-alpha | lower-greek | lower- latin | lower-roman | upper-alpha | upper-latin | upper-roman | none | inherit}
list-style-image : {uri | none | inherit}
list-style : { list-style-type | list-style-position | list-style-image}
12.4.6. Thuộc tính bảng
table-layout : {auto | fixed | inherit}
border-collapse : {collapse | separate | inherit} border-spacing : {length [length] | inherit} empty-cells : {hide | show | inherit}
caption-side : {bottom | top | inherit}
12.4.7. Thuộc tính về màu sắc và nền
background-color : {color | transparent | inherit} background-image : {uri | none | inherit}
background-repeat : {repeat | repeat-x | repeat-y | no-repeat | inherit} background-position : {{percentage | length | left | right}1 or 2 values |
inherit }
background-attachment : {scroll | fixed | inherit}
background : {background-color background-image background-repeat background-attachment background-position | inherit}
color : {color | inherit}
12.4.8. Thuộc tính định dạng kí tự - văn bản
font-family : {family name, … | inherit}
font-size : {absolute-size | relative-size | length | percentage | inherit} font-weight : {100…900 | bold | bolder | lighter | normal | inherit} font-style : {italic | normal | oblique | inherit}
font-variant : {normal | small-caps | inherit}
font : {[font-style] [font-variant] [font weight] font-size [line-height] font-family | caption | icon | menu | message-box | small-caption | status-bar | inherit}
letter-spacing : {length | normal | inherit} word-spacing : {length | normal | inherit}
line-weight : {length | number | percentage | normal | inherit} text-align : {center | justify | left | right | inherit}
text-decoration : {blink | line-throught | overline | underline … | none | inherit}
text-indent : {length | percentage | inherit}
text-transform : {capitalize | lowercase | none | uppercase | inherit} text-shadow : {shahow, … | none | inherit}
vertical-align : {length | percentage | baseline | bottom | middle | sub | super | text-bottom | text-top | top | inherit}
white-space : {normal | nowrap | pre | pre-line | pre-wrap | inherit} direction : {ltr | trl | inherit}
unicode-bidi : {bidi-override | embed | normal | inherit}
12.4.9. Thuộc tính về giao diện người dùng
cursor : {[uri] | auto | crosshair | default | e-resize | help | move | n-resize | ne-resize | nw-resize | pointer | progress | s-resize | se-resize | sw-resize | text | w-resize | wait | inherit}
12.4.10. Thuộc tính phân trang
page-break-before : {always | auto | avoid | left | right | inherit} page-break-after : {always | auto | avoid | left | right | inherit}
12.4.11. Thuộc tính giàng riêng cho FireFox
-moz-border-radius : {length | percentage | inherit}
-moz-box-sizing : {content-box | border-box | padding-box}
12.4.12. Thuộc tính giàng riêng cho IE
zoom : {number | percentage | normal} filter : {filter}
behaviour : uri
12.5. Mô hình định dạng phần tử trong CSS
12.5.1. Mô hình hộp (box)
Các phần tử HTML được thể hiện trên web theo mô hình hộp (box). Mô hình hộp của một phần tử bao gồm : content (nội dung), padding, border, margin.
Kích thước của phần nội dung được xác định bởi thuộc tính width, cộng thêm kích thước của padding, border và margin sẽ ra tổng kích thước của box.
Vd : một class được định nghĩa như sau : #myBox {
margin: 10px; padding: 5px; width: 70px; }
12.5.2. Margin Collapsing (thu hẹp lề)
Khi một phần tử nằm trên một phần tử khác, lề trên của phần tử dưới sẽ bị hẹp
Khi một phần tử được chứa trong một phần tử khác, không có border hay padding phân cách, thì lề trên/dưới của phần tử trong sẽ bị thu hẹp.
Khi một phần tử không chứa nội dung nào (phần tử trống), cũng không có padding hay border, thì lề dưới của phần tử bị thu hẹp, chỉ còn lai lề trên.
Tương tự, khi hai phần tử trống nằm gần nhau, thì khi đó sẽ chỉ còn lại lề trên của phần tử trên.
Tổng quát, các phần tử sẽ được thu hẹp lề khi được sắp xếp gần nhau như sau :
12.5.3. Thiết lập vị trí
Thiết lập vị trí tương đối : các box được thiết lập vị trí tương đối (relative) sẽ có vị trí được tính toán theo các box xung quanh.
#myBox {
position: relative; left: 20px;
}
Thiết lập vị trí tuyệt đối : các box được thiết lập vị trí tuyệt đối (absolute) sẽ có vị trí được tính toán tuyệt đối dựa vào trình duyệt.
Thiết lập vị trí cố định : các box được thiết lập vị trí cố định (fixed) sẽ có vị trí luôn xuất hiện trên màn hình với vị trí xác định.
Một ví dụ về vị trí cố định (fixed positioning)
12.5.4. Thiết lập hộp nổi (float box)
Các box khi không được thiết lập chế độ float sẽ được xuất lên trang web lần lượt từ trên xuống. Tuy nhiên, khi được thiết lập chế độ float, các box sẽ được thể hiện nổi lên trên các phần tử không được thiết lập và có thể đẩy phần tử nổi qua trái hoặc qua phải.
Box 1 được nổi và đẩy qua phải
box 1 được đẩy qua trái và đè lên box 2
Tất cả các box được đẩy qua trái
Các box được nổi được đẩy qua trái khi chiều dài không đủ kích thước và với độ cao bằng và khác nhau
12.6. Sử dụng hình ảnh nền
12.6.1. Sử dụng ảnh nền cơ bản
Sử dụng ảnh nền cho cả trang web :
Sử dụng ảnh là bullet h1 {
padding-left: 30px;
background: url(/images/bullet.gif) no-repeat left center; }
12.6.2. Box viền bo tròn góc cố định kích thước
Sử dụng 2 ảnh nền như sau :
Các class được thiết lập : .box {
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom; /* màu nền của box trùng với màu của 2 ảnh nền */
}
.box h2 {
background: url(images/top.gif) no-repeat left top; } Code sử dụng : <div class="box"> <h2>Headline</h2> <p>Content</p> </div>
12.6.3. Box viền bo tròn góc có chiều cao thay đổi
Sử dụng 3 ảnh nền như sau : Các class được thiết lập :
.box {
width: 424px;
background: url(images/bg-tile.gif) repeat-y; }
.box h2 {
background: url(images/bg-top.gif) no-repeat left top; padding-top: 20px;
}
.box .last {
background: url(images/bg-bottom.gif) no-repeat left bottom; padding-bottom: 20px; } .box h2, .box p { padding-left: 20px; padding-right: 20px; } Code sử dụng : <div class="box"> <h2>Headline</h2> <p>Content</p> </div>
12.6.4. Box viền bo tròn góc có chiều rộng và cao thay đổi
Sử dụng 4 ảnh nền sau :
Các class được thiết lập .box2 {
width: 50em;
background: #e4dede url(images/bottom_left.gif) no-repeat left bottom; /* màu nền là màu của ảnh bottom-left */
}
.box2-outer {
background: url(images/bottom_right.gif) no-repeat right bottom; padding-bottom: 5%;
}
.box2-inner {
background: url(images/top_left.gif) no-repeat left top; }
background: url(images/top_right.gif) no-repeat right top; padding-top: 5%; } .box2 h2, .box2 p { padding-left: 5%; padding-right: 5%; } Code sử dụng : <div class="box2"> <div class="box2-outer"> <div class="box2-inner"> <h2>Headline</h2> <p>Content</p> </div> </div> </div>
12.6.5. Tạo bóng cho khung ảnh
Sử dụng ảnh bóng kích thước 800x800 :
Các class được thiết lập : .img-wrapper {
background: url(images/shadow.gif) no-repeat bottom right; clear: right; float: left; position: relative; } .img-wrapper img { background-color: #fff; border: 1px solid #a9a9a9; padding: 4px;
display: block;
position: relative; }
Code sử dụng:
<div class="img-wrapper">
<img src="images/MeManCoi.jpg" width="350" height="296" alt="Dunstan Orchard" />
</div>
12.6.6. Tạo liên kết với kĩ thuật rollover
Sử dụng 2 ảnh cho link (với kích thước 200x40) :
Các class sử dụng : a:link, a:visited { display: block; width: 200px; height: 40px; line-height: 40px; color: #000; text-decoration: none;
background: #94B8E9 url(images/button.gif) no-repeat left top; text-indent: 50px;
}
a:hover {
background: #369 url(images/button-hover.gif) no-repeat left top; color: #fff;
}
12.6.7. Tạo liên kết với kĩ thuật pixy
Sử dụng 1 ảnh liên kết sau (kích thước 400x40):
Các class thiết lập :
a.pixy:link, a.pixy:visited { display: block;
width: 200px; height: 40px; line-height: 40px; color: #000;
text-decoration: none;
background: #94B8E9 url(images/pixy.gif) no-repeat left top; text-indent: 50px;
}
a.pixy:hover {
background-color: #369;
background-position: right top; color: #fff;
}
Code sử dụng :
<a href="#" class="pixy">Test link style</a>
12.6.8. Tạo thanh menu dọc với kĩ thuật pixy
Sử dụng ảnh nền như kĩ thuật pixy. Các class được thiết lập :
ul.ver{ list-style:none; } ul.ver a { display: block; width: 200px; height: 39px; line-height: 39px; color: #000; text-decoration: none;
background: #94B8E9 url(images/pixy-navigate.gif) no-repeat left top; text-indent: 50px; } ul.ver li.first a { height: 40px; line-height: 40px; }
ul.ver a:hover, .selected a {
background-position: right top; color: #fff;
Code sử dụng :
<ul class="ver">
<li><a href="home.htm">Home</a></li> <li><a href="about.htm">About</a></li>
<li><a href="services.htm">Our Services</a></li> <li><a href="work.htm">Our Work</a></li> <li><a href="news.htm">News</a></li>
<li class="first"><a href="contact.htm">Contact</a></li> </ul>
Kết quả :
12.6.9. Tạo thanh menu ngang
Sử dụng một ảnh nền nhỏ (6x25) :
Và 1 ảnh làm dấu phân cách (2x25):
Các class được thiết lập : ul.horizon { margin: 0; padding: 0; list-style: none; width: 700px; float: left;
background: #FAA819 url(images/nav_bar.gif) repeat-x; }
ul.horizon a {
display: block; float: left;
padding: 0 1.5em; line-height: 29px;
background: url(images/nav_bar_divider.gif) no-repeat right top; text-decoration: none; color: #fff; } ul.horizon li.first a { background: none; } ul.horizon a:hover { color: #333; } Code sử dụng : <ul class="horizon">
<li class="first"><a href="home.htm">Home</a></li> <li><a href="about.htm">About</a></li>
<li><a href="services.htm">Our Services</a></li> <li><a href="work.htm">Our Work</a></li> <li><a href="news.htm">News</a></li> <li><a href="contact.htm">Contact</a></li> </ul> Kết quả : 12.6.10. Layout 2 cột Mô hình :
Code CSS : #wrapper{ width:720px; margin: 0 auto; } hoặc #wrapper { width: 720px; position: relative; left: 50%; margin: 0 0 0 -360px; } #content { width: 520px; float: right; } #mainNav { width: 180px; float: left; padding-top: 20px; padding-bottom: 20px; } #mainNav li { padding-left: 20px; padding-right: 20px; } #footer { clear: both; }
#content h1, #content h2, #content p {