21:05
Unknown
Chương 18: CSS float
float: value; định vị trí hiển thị của một đối tượng so với đối tượng chứa nó v� không l� m ảnh hưởng đến phần text/image trong đối tượng cha
value:
+ none
+ left
+ right
value:
+ none
+ left
+ right
** thường được dùng trong design web bằng div
Chương 19: OVERFLOW
Tạo thanh trượt ngang,dọc khi dữ liệu chứa trong nó lớn hơn kích thước của đối tượng(giống như thanh trượt ngang và dọc của trình duyệt)
overflow: value;
value:
+ auto
+ scroll
+ visible
+ hidden
giải thích:
- auto: thanh trượt chỉ xuất hiện khi dữ liệu nhiều
- sroll: thanh trượt luôn luôn xuất hiện
- visible: không có thanh trượt, và phần nội dung dư sẽ tràn ra ngòai khỏi đối tượng
- hidden: không có thanh trượt và phần nội dung dư sẽ bị ẩn đi (giống như nhìn qua ô cửa sổ)
value:
+ auto
+ scroll
+ visible
+ hidden
giải thích:
- auto: thanh trượt chỉ xuất hiện khi dữ liệu nhiều
- sroll: thanh trượt luôn luôn xuất hiện
- visible: không có thanh trượt, và phần nội dung dư sẽ tràn ra ngòai khỏi đối tượng
- hidden: không có thanh trượt và phần nội dung dư sẽ bị ẩn đi (giống như nhìn qua ô cửa sổ)
overflow-x: value; /* thanh ngang */
overflow-y: value; /* thanh dọc */
overflow-y: value; /* thanh dọc */
Chương 20: Visibility
Visibility
định thuộc tính ẩn hiện cho phần nội dung
visibility: value;
value:
+ hidden /* ẩn nội dung */
+ visible /* hiện nội dung */
định thuộc tính ẩn hiện cho phần nội dung
visibility: value;
value:
+ hidden /* ẩn nội dung */
+ visible /* hiện nội dung */
** display và visibility hòan tòan khác nhau:
display: ẩn hiện nguyên đối tượng
visibility: chỉ ẩn hiện phần nội dung
display: ẩn hiện nguyên đối tượng
visibility: chỉ ẩn hiện phần nội dung
Chương 21: z-index
Z-Index định thuộc tính chiều sâu(3d) của đối tượng
z-index: value;
với value l� một số nguyên ..-2,-1,0,1,2..
z-index: value;
với value l� một số nguyên ..-2,-1,0,1,2..
giống như 2 quyển sách chồng lên nhau, nếu quyển nào có z-index lớn thì nằm trên và ngược lạ (thường dùng trong thiết kế bằng div,layer)
Chương 22: Position
Position: xác định cách hiển thị của một đối tượng
position: value;
với value:
+ static
+ relative
+ absolute
+ fixed
position: value;
với value:
+ static
+ relative
+ absolute
+ fixed
giải thích:
- static(tương đối): đây là định dạng mặc định, nó không l� m ảnh hưởng đến cách hiển thị
- static(tương đối): đây là định dạng mặc định, nó không l� m ảnh hưởng đến cách hiển thị
- relative: kết hợp với top,left,right,bottom để định vị trí của phần content so với 4 cạnh của đối tượng
ví dụ:
<style>
.class { position: relative;
letf: 5px;
}
</style>
<div>abc</div> =>kết quả:
abc
<div class=”class”>abc</div> => kết quả:
abc
*nếu bỏ position: relative; thì các giá trị left,rightn,top,bottom không còn hiệu lực
ví dụ:
<style>
.class { position: relative;
letf: 5px;
}
</style>
<div>abc</div> =>kết quả:
abc
<div class=”class”>abc</div> => kết quả:
abc
*nếu bỏ position: relative; thì các giá trị left,rightn,top,bottom không còn hiệu lực
- absolute(tuyệt đối): với absolute một đối tượng có thể đặt ở bất kỳ vị trí n� o trên website bằng cách thay đổi các thuộc tính left,top,right,bottom
ví dụ:
<style>
.class { position: absolute;
left: 50px;
top: 20px;
</style>
<span>Before</span><span>After</span> => kết quả:
BeforeAfter
<span class=”class”>Before</span><span>After</span> => kết quả:
After
Before
ví dụ:
<style>
.class { position: absolute;
left: 50px;
top: 20px;
</style>
<span>Before</span><span>After</span> => kết quả:
BeforeAfter
<span class=”class”>Before</span><span>After</span> => kết quả:
After
Before
Chương 23: CSS Clip
Cắt một tấm ảnh
ví dụ:
<style>
.class {
position:absolute;
clip:rect(10px 20px 50px 5px)
}
</style>
<image src=”path_to_image” />
=> vùng ảnh hiển thị có kích thước 20×50 bắt đầu từ tọa độ (5,10) trên tấm ảnh
ví dụ:
<style>
.class {
position:absolute;
clip:rect(10px 20px 50px 5px)
}
</style>
<image src=”path_to_image” />
=> vùng ảnh hiển thị có kích thước 20×50 bắt đầu từ tọa độ (5,10) trên tấm ảnh
Chương 24: first-letter và first-line
Dùng để dịnh dạng ký tự đầu tiên(first-letter) hoặc dòng đầu tiên(first-line) cho phần content của đối tượng
ví dụ:
first-letter:
<style type=”text/css”>
p:first-letter
{
color: red;
}
</style>
<p> Abc</a>
kế quả: Abc
ví dụ:
first-letter:
<style type=”text/css”>
p:first-letter
{
color: red;
}
</style>
<p> Abc</a>
kế quả: Abc
first-line:
<style type=”text/css”>
p:first-line
{
color: red;
}
</style>
<p>Dùng để dịnh dạng ký tự đầu tiên(first-letter)
hoặc dòng đầu tiên(first-line) cho phần content của đối tượng</p>
<style type=”text/css”>
p:first-line
{
color: red;
}
</style>
<p>Dùng để dịnh dạng ký tự đầu tiên(first-letter)
hoặc dòng đầu tiên(first-line) cho phần content của đối tượng</p>
Chương 25: Clear
Để clear thuộc tính left,right của các đối tượng chứa nó
clear: value;
với value:
+ left
+ right
+ both
+ none
giải thích:
+ xóa thuộc tính canh trái
+ xóa thuộc tính canh phải
+ xóa cả 2 thuộc tính canh trái và phải
+ không xóa
ví dụ:
<span style=”text-align: right;”>
ABC1<br>
<span>ABC2</span>
</span>
kết quả:
ABC1
ABC2 (cả 2 cùng canh phải)
clear: value;
với value:
+ left
+ right
+ both
+ none
giải thích:
+ xóa thuộc tính canh trái
+ xóa thuộc tính canh phải
+ xóa cả 2 thuộc tính canh trái và phải
+ không xóa
ví dụ:
<span style=”text-align: right;”>
ABC1<br>
<span>ABC2</span>
</span>
kết quả:
ABC1
ABC2 (cả 2 cùng canh phải)
dùng clear
<span style=”text-align: right;”>
ABC1<br>
<span style=”clear: right”>ABC2</span>
</span>
ABC1
ABC2
<span style=”text-align: right;”>
ABC1<br>
<span style=”clear: right”>ABC2</span>
</span>
ABC1
ABC2
