Chương 18 đến 25: float, OVERFLOW, Visibility, z-index, Position, Clip, first-letter và first-line, Clear

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

** 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ổ)

overflow-x: value; /* thanh ngang */
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 */

** 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

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..

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

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ị

- 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

- 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

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

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

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>

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)

dùng clear
<span style=”text-align: right;”>
ABC1<br>
<span style=”clear: right”>ABC2</span>
</span>
ABC1
ABC2

Posted in: CSS