CSS tiếng Việt cơ bản

Ở ví dụ trên, khi chúng ta float tấm ảnh qua trái thì mặc nhiên văn bản sẽ được tràn 
lên để lắp vào chỗ trống. Nhưng khi chúng ta đặt vào văn bản thuộc tính clear thì 
chúng ta có quyền quyết định xem phần văn bản đó có được tràn lên hay không. 
Thuộc tính clear có tất cả 4 thuộc tính: left (tràn bên trái), right (tràn bên phải), 
both (không tràn) và none. 
Thử dùng thuộc tính clear với các giá trị khác nhau đối với đoạn văn bản trong ví 
dụ float ảnh logo ở trên. 
 Trang 53 
 Simple CSS Standard Edition WallPearl 
 Bài 14: Position 
  
Kết hợp với thuộc tính float đã học, thuộc tính position mang lại nhiều khả năng để 
tạo một cách trình bày tiên tiến và chính xác cho trang web. 
  Nguyên lý hoạt động của position: 
Hãy tưởng tượng cửa sổ trình duyệt của bạn giống như một hệ tọa độ và với 
position bạn có thể đặt một đối tượng web ở bất cứ vị trí nào trên hệ tọa độ này. 
Giả sử chúng ta muốn định vị một ảnh ở vị trí 70px cách đỉnh và 90px từ bên trái 
tài liệu, chúng ta sẽ viết CSS như sau: 
img { position:absolute; top:70px; left:90px } 
 Trang 54 
 Simple CSS Standard Edition WallPearl 
Như bạn đã thấy, sự định vị bằng CSS là một công nghệ chính xác để định vị một 
thành phần. Nó dễ dàng hơn so với việc dùng bảng, ảnh trong suốt hay bất kỳ thứ 
gì khác. 
14.1. Absolute position: 
Định vị tuyệt đối là sự định vị mà trong đó các thành phần được định vị không để 
lại bất cứ một khoảng trống nào trong tài liệu. Một thành phần được định vị tuyệt 
đối sẽ nhận giá trị position là absolute. Các đối tượng đã định vị tuyệt đối sẽ dùng 
kết hợp với các thuộc tính top, left, right, bottom để xác định tọa độ. 
Ví dụ sau sẽ chỉ cho chúng ta cách đặt bốn ảnh ở bốn góc tài liệu bằng định vị 
tuyệt đối. 
#logo1 { 
 position:absolute; 
 top:50px; 
 left:70px 
 } 
#logo2 { 
 position:absolute; 
 top:0; 
 right:0 
 } 
#logo3 { 
 position:absolute; 
 bottom:0; 
 left:0 
 } 
#logo4 { position:absolute; 
 bottom:70px; 
 right:50px } 
 Trang 55 
 Simple CSS Standard Edition WallPearl 
14.2. Relative position: 
Sự định vị tương đối cho một thành phần là sự định vị được tính từ vị trí gốc trong 
tài liệu. Các thành phần đã được định vị tương đối sẽ để lại khoảng không trong tài 
liệu. Các thành phần được định vị tương đối sẽ nhận giá trị position là relative. 
Chúng ta hãy làm lại ví dụ trên nhưng thay absolute thành relative. Các bạn ghi 
nhận lại vị trí 4 ảnh logo lúc áp dụng thuộc tính position là none, absolute và 
relative rồi rút ra nhận xét. 
Hai bài học trên, bạn đã được học về 2 thuộc tính CSS là float và position. Hai 
thuộc tính này mang lại cho bạn nhiều sự lựa chọn hơn trong việc dàn trang. Nó 
chính xác và dễ thực hiện hơn so với các phương pháp dùng bảng hay ảnh trong 
suốt. 
 Trang 56 
 Simple CSS Standard Edition WallPearl 
 Bài 15: Layers 
  
CSS hoạt động trên cả 3 chiều: cao, rộng, sâu. Hai chiều đầu tiên, chúng ta đã được 
nhìn thấy trong các bài học trước. Trong bài học này, chúng ta sẽ được học về cách 
đặt các thành phần web ở các lớp khác nhau với thuộc tính z-index. Nói đơn giản 
hơn thì đó là cách bạn đặt một thành phần này lên trên một thành phần khác. 
Với mục đích này, bạn sẽ gán cho mỗi phần tử một con số. Theo đó, phần tử có số 
cao hơn sẽ nằm trên, phần tử có số thấp hơn sẽ nằm dưới. 
Ví dụ sau chúng ta sẽ đặt 5 bức ảnh logo ở 5 lớp. 
#logo1 { 
 position:absolute; 
 top:70px; 
 left:50px; 
 z-index:1 
 } 
#logo2 { 
 position:absolute; 
 top:140px; 
 left:100px; 
 z-index:2 
 } 
#logo3 { 
 position:absolute; 
 top:210px; 
 left:150px; 
 z-index:3 
 } 
 Trang 57 
 Simple CSS Standard Edition WallPearl 
#logo4 { 
 position:absolute; 
 top:280px; 
 left:200px; 
 z-index:4 
 } 
#logo5 { 
 position:absolute; 
 top:350px; 
 left:250px; 
 z-index:5 
 } 
 Trang 58 
 Simple CSS Standard Edition WallPearl 
 Bài 16: Web Standards 
  
Trong công việc thiết kế web thì một trong những vấn đề quan trọng đó là làm sao 
đảm bảo trang web của bạn có thể hiển thị tốt trên hầu hết các trình duyệt. Hiểu rõ 
vấn đề này W3C (World Wide Web Consortium) – một tổ chức có nhiệm vụ quản 
lý và đặc ra các tiêu chuẩn web cùng với các đối tác khác như Microsof, Mozilla 
Foundation,… đã đặt ra các tiêu chuẩn về mã cho web. Nó cho phép nhà phát triển 
web có thể tự tin hơn khi thực hiện dự án cũng như đảm bảo cho các trang web 
thỏa mãn tiêu chuẩn có thể hiển thị tốt ở nhiều trình duyệt. 
Để dễ dàng hơn. Trong CSS, W3C đã tạo ra một công cụ gọi là CSS Validator để 
đọc và thẩm định tính hợp chuẩn cho CSS của bạn. 
Đầu tiên, các bạn truy cập vào địa chỉ sau click here. 
Đặt url file CSS của bạn ở ô url rồi nhấn nút “click to check stylesheet” để chương 
trình đọc file CSS của bạn. Sau khi đọc xong, nếu file CSS của bạn không phù hợp 
tiêu chuẩn, chương trình sẽ hiển thị danh sách lỗi. Nếu file CSS của bạn hợp chuẩn 
thì chương trình sẽ hiện ra bức ảnh chứng nhận. Bạn có thể đặt bức ảnh đó trên 
trang web của bạn để thể hiện nó đã được xây dựng trên các mã chuẩn. 
 Trang 59 
 Simple CSS Standard Edition WallPearl 
Phụ Lục: Bảng Thuộc Tính & Giá Trị Thuộc Tính 
 Thuộc tính Mô tả Giá trị 
 Background 
background Thuộc tính rút gọn cho tất cả background-color 
 các thuộc tính nền. background-image 
 background-repeat 
 background-attachment 
 background-position 
background-color Thiết lập màu nền cho đối 
 tượng. transparent 
background-image Thiết lập ảnh nền cho đối url 
 tượng. none 
background-repeat Thiết lập chế độ lặp ảnh nền. repeat 
 repeat-x 
 repeat-y 
 no-repeat 
background- Thiết lập ảnh nền cuộn/cố scroll 
attachment định. fixed 
background-position Thiết lập vị trí thể hiện ảnh top left 
 nền. top center 
 top right 
 center left 
 center center 
 center right 
 bottom left 
 bottom center 
 bottom right 
 x% y% 
 x y 
 Font 
font Thuộc tính ngắn cho tất cả font-style 
 các thiết lập về font. font-variant 
 Trang 60 
 Simple CSS Standard Edition WallPearl 
 font-weight 
 font-size 
 font-family 
font-style Thiết lập chế độ in nghiêng, normal 
 xiên hay bình thường. italic 
 oblique 
font-variant Thiết lập font bình thường normal 
 hay small-caps small-caps 
font-weight Thiết lập in đậm, thường. normal 
 bold 
 bolder 
 lighter 
 100 – 900 
font-size Thiết lập kích cỡ font. xx-small 
 x-small 
 small 
 medium 
 large 
 x-large 
 xx-large 
 smaller 
 larger 
 % 
font-family Thiết lập loại font hiển thị family-name 
 trang web/ đối tượng web. generic-family 
 Text 
color Thiết lập màu chữ. 
text-indent Thiết lập khoảng thụt đầu 
 dòng. % 
text-align Thiết lập chế độ canh văn left 
 bản. right 
 center 
 justify 
letter-spacing Thiết lập khoảng cách giữa normal 
 các ký tự. 
text-decoration Thêm hiệu ứng đặc biệt cho none 
 văn bản. underline 
 Trang 61 
 Simple CSS Standard Edition WallPearl 
 overline 
 line-through 
 blink 
text-transform Change case văn bản. none 
 upper 
 lower 
 capitalize 
 Pseudo-classes 
:link Liên kết chưa thăm. 
:hover Mouse over 1 thành phần. 
:visited Liên kết đã thăm. 
:active Kích hoạt 1 thành phần 
 Margin 
margin Thuộc tính ngắn cho các thiết margin-top 
 lập margin. margin-right 
 margin-bottom 
 margin-left 
margin-top Thiết lập canh lề trên cho một auto 
 thành phần. 
 % 
margin-right Thiết lập canh lề phải cho auto 
 một thành phần. 
 % 
margin-bottom Thiết lập canh lề dưới cho auto 
 một thành phần. 
 % 
margin-left Thiết lập canh lề trái cho một auto 
 thành phần. 
 % 
 Padding 
padding Thuộc tính ngắn cho các thiết padding-top 
 lập padding. padding -right 
 padding -bottom 
 padding -left 
padding-top Thiết lập đệm trên cho một 
 thành phần. % 
padding-right Thiết lập đệm phải cho một 
 thành phần. % 
 Trang 62 
 Simple CSS Standard Edition WallPearl 
padding-bottom Thiết lập đệm dưới cho một 
 thành phần. % 
padding-left Thiết lập đệm trái cho một 
 thành phần. % 
 Border 
border Thuộc tính ngắn cho tất cả border-width 
 các thiết lập border cho một border-color 
 thành phần. border-style 
border-width Thiết lập độ rộng đường viền. thin 
 medium 
 thick 
border-color Thiết lập màu cho đường 
 viền. 
border-style Thiết lập kiểu đường viền. none 
 hidden 
 solid 
 dotted 
 dashed 
 double 
 groove 
 ridge 
 inset 
 outset 
border-top-width Thiết lập độ rộng viền phía 
 trên. 
border-top-color Thiết lập màu viền phía trên. 
border-top-style Thiết lập kiểu viền phía trên. 
border-right-width Thiết lập độ rộng viền phải. 
border-right-color Thiết lập màu viền phải. 
border-right-style Thiết lập kiểu viền phải. 
border-bottom-width Thiết lập độ rộng viền bên 
 dưới. 
border-bottom-color Thiết lập màu viền bên dưới. 
border-bottom-style Thiết lập kiểu viền bên dưới. 
border-left-width Thiết lập độ rộng viền trái. 
border-left-color Thiết lập màu viền trái. 
 Trang 63 
 Simple CSS Standard Edition WallPearl 
border-left-style Thiết lập kiểu viền trái. 
 Width 
width Thiết lập chiều rộng đối auto 
 tượng. 
 % 
max-width Thiết lập chiều rộng tối đa none 
 cho đối tượng. 
 % 
min-width Thiết lập chiều rộng tối thiểu 
 cho một đối tượng. % 
 Height 
height Thiết lập chiều cao cho một auto 
 đối tượng. 
 % 
max-height Thiết lập chiều cao tối đa cho none 
 một đối tượng. 
 % 
min-height Thiết lập chiều cao tối thiểu 
 cho một đối tượng. % 
 Layout Position 
float Cố định đối tượng. left 
 right 
 none 
clear Cách thức xử sự của một đối left 
 tượng liên quan với đối tượng right 
 floated. both 
 none 
position định vị đối tượng relative 
 absolute 
top Thiết lập tọa độ đỉnh đối auto 
 tượng. 
 % 
right Thiết lập tọa độ bên phải đối auto 
 tượng. 
 % 
bottom Thiết lập tọa độ đáy đối auto 
 tượng. 
 % 
 Trang 64 
 Simple CSS Standard Edition WallPearl 
left Thiết lập tọa độ bên trái đối auto 
 tượng. 
 % 
z-index Định lớp đối tượng. auto 
 number 
 Trang 65