Category Archives: HTML/CSS

Thiết kế giao diện với Div và CSS

Trước đây những người thiết kế hay sử dụng bảng (table) trong việc thiết kế giao diện cho website. Nhưng để đúng với chuẩn web standard (theo chuẩn) thì kỹ thuật thiết kế giao diện với thẻ div kết hợp với CSS đã dần thay thế bới những ưu việt và hiểu quả do nó mang lại.
Bài viết này mình sẽ hướng dẫn các bạn cách thiết kế một giao diện với thẻ div kết hợp với 2 thuộc tínhFloat và Clear trong CSS. Cấu trúc giao diện chúng ta sẽ thiết kế gồm có header, footer và 2 cột có kích thước cố định (fixed column)  như hình bên dưới, bài viết hơi dài vì một số phần mình phải giải thích kỹ.

Thiết kế giao diện với Div và CSS

DEMO DIV 2 CỘT    DEMO DIV 3 CỘT

Đầu tiên chúng ta sẽ dựng mã HTML như sau:

01 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
02 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
03 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
04 <head>
05     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
06     <title>Thiết kế giao diện với Div</title>
07     <link href="style.css" media="screen" rel="stylesheet" />
08 </head>
09 <body>
10     <div id="mainWap">
11       <div id="header">
12         <h1>Header</h1>
13      </div>
14      <div id="left">
15         Nội dung cột trái...
16      </div>
17      <div id="right">
18         Nội dung cột phải...
19      </div>
20      <div class="clr"></div>
21      <div id="footer">
22        Nội dung footer...
23      </div>
24    </div>
25 </body>
26 </html>

Lưu lại với tên div.html vào một thư mục nào đó trên máy tính của bạn.

Trước tiên chúng ta sẽ tạo ra một thẻ div lớn bao quanh toàn bộ trang web với id=”mainWap”. Bên nên thực hiện việc này trong các thiết kế tiếp theo của mình. Ví dụ bây giờ bạn muốn toàn bộ trang web của bạn được canh bên phải màn hình, thay vì phải đi căn chỉnh từng thành phần sang phải  thì bạn chỉ cần canh thẻ div này sang phải, toàn bộ các thành phần khác trong nó sẽ được canh phải theo thẻ div lớn. (Bạn cứ tưởng tượng rằng chúng ta có một cái hộp lớn và bỏ tất cả các hộp nhỏ vào bên trong và khi muốn thì chỉ cần di chuyển cái hộp lớn đi thôi). Đây cũng là cách để bạn quản lý độ lớn của Box tốt hơn.

Tiếp theo ta sẽ tạo các thành phần header, left, right, footer bên trong thẻ div lớn này với các id tương ứng.

Ta thêm vào thành phần <div class=”clr”></div> trước footer, ta sẽ xem phần này sau khi viết CSS.

Tạo một file style.css và lưu vào cùng thư mục chứa file div.html. chúng ta sẽ viết mã CSS trong file này.

Trong bài viết này có sử dụng đến Margin và Padding, tuy nhiên mỗi trình duyệt lại hiểu các giá trị này theo một kiểu, cho nên để tránh phiền toái việc đầu tiên chúng ta nên làm là reset 2 giá trị này về 0 với lệnh sau:

1 *{ margin0padding0 }

Tiếp theo chúng ta sẽ quy định cho độ rộng của toàn bộ trang là 950px và canh giữa màn hình bằng các viết mã cho thẻ div lớn bao quanh mà chúng ta đã tạo ra ban đầu.

1 #mainWap{
2     width950px;
3     margin0 auto;
4 }

Khi ta sử dụng

1 margin0 auto;

thì thẻ div lớn sẽ được canh giữa màn hình. Bạn có thể tìm hiểu thêm vấn đề này trong bài Margin và Padding trong CSS.

Theo hình trên ta thấy, thành phần header cách thành phần left và right 1 khoảng 10px, đó chính là margin-bottom của header đối left và right. Và ta sẽ viết mã cho header như sau:

1 #header{
2     backgroundgreen;
3     margin-bottom10px;
4     padding10px;
5 }

Tiếp theo để left và right tạo thành 2 cột nằm song song ta cần sử dụng đển thuộc tính Float để cố định 2 thành phần này, đồng thời gán cho chúng một kích thước (width) nào đó. Đầu tiên ta có cố định thành phần left về bên trái và gán thuộc tính width = 200px. Mã CSS như sau:

1 #left{
2      floatleft;
3      width:  200px;
4      background#f98000;
5      padding10px;
6      min-height450px;
7 }

Lúc này thành phần left sẽ được di chuyển về tận cùng bên trái của thẻ div mẹ (id=”mainWap”) và có độ lớn là:

200px + 10px left padding + 10px right padding = 220px; (1)

Tiếp theo ta viết mã CSS cho thành phần right như sau:

1 #right{
2     floatright;
3     width700px;
4     padding10px;
5     background#e4e4e4;
6     min-height450px;
7 }

Lúc này thành phần right  sẽ được di chuyển về tận cùng bên phải của thẻ div mẹ (id=”mainWap”) và có độ lớn là:

700px + 10px left padding + 10px right padding = 720px; (2)

Như ta đã biết khi thuộc tính float được khai báo cho một thành phần nào đó thì thành phần đó sẽ bị dịch chuyển tận cùng về phía bên trái nếu được float:left và bên phải nếu được float:right so với thành phần mẹ và tạo khoảng trống cho các thành phần khác di chuyển lên lấp đầy khoảng trống nếu còn.

Kết hợp (1) và (2) ta thấy rằng: Thành phần left được float left và có độ rộng 220px, như vậy nó được cố định về bên trái và tạo ra khoảng trống còn lại trong thẻ div mẹ là:

950 (độ rộng thẻ div bao quanh) – 220 (left) = 730px;

Như vậy đủ độ lớn để thành phần right (720px) di chuyển lên nằm song song với thành phần left và tạo thành 2 cột. Đương nhiên nó được cố định về bên phải vì có float:right.

Độ lớn của left và right = 220 + 720 = 940px, như vậy ta thấy còn dư 10px trong thẻ div bao quanh. Đó chính là khoảng cách 10px giữa left và right (như trên hình).

Khi sử dụng float, các thành phần bên dưới luôn luốn có xu hướng di chuyển lên trên. Và ở đây thì thành phần footer cũng vậy, nó tràn lên phía trên, và đó không phải là điều mà chúng ta mong muốn.

Do đó đây là lúc chúng ta cần sử dụng đến thuộc tính clear cho thành phần <div class=”clr”> nằm trước footer để ngăn cho footer không tràn lên trên.

1 .clr{clearboth;}

Và cuối cùng là CSS cho thành phần footer có khoảng cách 10px so với left và right, đó chính là margin-top của footer:

1 #footer{
2     backgroundgreen;
3     margin-top10px;
4     padding10px;
5 }

Thuộc tính min-height

Ở trên các bạn thấy mình có sử dụng thuộc tính min-height trong 2 thành phần left và right. Mục đích của việc này là để quy định chiều cao tối thiểu của một thành phần nào đó khi độ lớn về chiều cao của các thành phần bên trong nó chưa thực sự đủ lớn như mong muốn của ta. Nói đơn giản hơn, bây giờ trong các thành phần left và right chưa có nội dung gì cả, nhưng mình vẫn muốn nó có độ cao là 450px, lúc đó mình sẽ thêm thuộc tính min-height:450px. Khi độ cao của các thành phần bên trong nó vượt quá giá trị min-height, thì độ cao của một thành phần nào đó sẽ bằng tổng độ cao của các thành phần bên trong nó.

Chú ý: thuộc tính này không hoạt động trong trình duyệt Internet Explorer.

KẾT LUẬN

Như vậy là ta đã dựng được một khung giao diện với thẻ div kết hợp với CSS, đây chỉ là một khung giao diện đơn giản để các bạn có được những khái niệm về cách thiết kế giao diện với div. Qua bài học này chúng ta đã biết được:

  • Hiểu về cách thiết kế 1 giao diện với div
  • Hiểu thêm về Margin và Padding.
  • Cách tính toán độ lớn của Box.
  • Biết cách sử dụng Float và Clear, min-heịght.
  • Dựng được giao diện đơn giản với div.

CSS selectorts (Phần 1)

CSS selector là một khái niệm rất quan trọng trong CSS. Nắm vững CSS selector sẽ giúp sẽ là chìa khóa để học CSS.
Bài viết này mình sẽ giới thiệu với các bạn một số Selector hay được sử dụng trong việc viết mã CSS, Mình sẽ giữ nguyên những thuật ngữ chuyên môn mà không dịch sang Tiếng Việt để đảm bảo tính chính xác.

1, Universal selector

Universal là selector yếu nhất trong CSS, Universal selector thường được sử dụng để reset CSS.
Cấu trúc Universal selector như sau:

1 * {property 1: value 1 ;…; property n: value n }

Ví dụ sau ta sử dụng Universal selector để reset margin và padding của tất cả các thành phần về 0.

1 * {margin0padding0}

Khi ta khai báo các thuộc tính tương tự lên các thành phần khác thì những gì đã khai báo trong Universal selector sẽ không còn tác dụng.

2, Type selectors

Type selector là các chỉ định tên của các thẻ HTML sẽ bị ảnh hưởng bởi các câu lệnh CSS. Cú pháp Type selectors như sau:

1 A {colorred}

Với A: là tên thẻ HTML
Ví dụ sau quy định tất cả các thành phần h2 được hiển thị với màu đỏ:

1 h2 {colorred}

3, Descendant selectors

Descendant selectors là cách chọn thành phần B là con hoặc cháu (và các cấp sâu hơn) của thành phần A nào đó.
Cú pháp Descendant selector như sau:

1 A B {property 1: value 1 ;…; property n: value n }
  • A: Là thành phần cha
  • B: là thành phần con, hoặc cháu,… của A

Chúng ta cùng xem xét ví dụ sau, dưới đây chúng ta có 3 thành phần <em>:

1 <p><em>Thành phần em thứ nhất là con của p</em></p>
2 <div>
3 <ul>
4 <li><em>Thành phần em thứ 2 là con của li, là cháu của ul và div</em></li>
5 </ul>
6 <em>Thành phần em thứ 3 là con của div</em>
7 </div>

Giả sử bây giờ ta chỉ muốn thành phần <em> thứ nhất được hiển thị với màu đỏ? thành phần <em> thứ 2 và thứ 3 có màu xanh:

1 p em {colorred}
2 div em{colorblue}

Chỉ có thành phần <em> thứ nhất thỏa điều kiện là con của <p> lên được hiển thị với màu đỏ.
Thành phần <em> thứ 2 là cháu của <div> và thành phần <em> thứ 3 là con của div lên được hiển thị với màu xanh

4, Child selectors

Khác với Descendant selectors, Child selector là cách chọn thành phần B là con của thành phần A nào đó, cú pháp Child selector như sau:

1 A > B {property 1: value 1 ;…; property n: value n }
  • A: Là thành phần cha
  • B: là con của A

Xét lại ví dụ trên, giả sử bây giờ ta chỉ muốn thành phần <em> thứ 3 có màu xanh, còn thành phần thứ 2 thì không bị ảnh hưởng, ta viết CSS như sau:

1 div > em {colorblue }

Chỉ có thành phần <em> thứ 3 là con của div nên được hiển thị với màu xanh. Thành phần em thứ 2 không bi ảnh hưởng vì là cháu của <div>

5, Adjacent sibling selectors

Chúng ta cùng xem xét ví dụ sau:

1 <p>Đoạn văn bản này là thành phần A</em></p>
2 <span>Thành phần span này là B</span>
3 <div>Thành phần div là C</div>

Câu hỏi đặt ra là có cách nào chọn được C dựa vào A hoặc B không? Câu trả lời là có, trong CSS đó chính là Adjacent sibling selectors (có thể gọi tắt là Sibling selectors) . Nó cho phép chọn một thành phần B ở gần thành phần A nhât trong tài liệu HTML, mà giữa A và B không có một thành phần D nào khác.

1 A + B {property 1: value 1 ;…; property n: value n }

Bây giờ chúng ta sẽ chọn thành phần  <div> C dựa vào thành phần <span> B và hiển thị với màu đỏ:

1 span + div {property colorred }

Tương tự ta có thể chọn được B dựa vào A

1 p + span {property colorred }

Nhưng không thể chọn C dựa vào A bởi vì giữa A và C có thành phần <span> B.

6, Classs selectors và ID selectors

Bạn vui lòng xem bài viết về Class và ID tại đây: Class và ID trong CSS

Bài viết này mình xin dừng lại ở đây, phần tiếp theo chúng ta sẽ cùng tìm hiểu về: Attribute selectors. Cám ơn các bạn đã quan tâm theo dõi.

7, Group selector

Group selector là cách nhóm các selector có cùng chung một quy luật giúp file CSS được gọn gàng hơn, mỗi selector sẽ được ngăn cách nhau bởi dấu , (Phẩy).

1 h1{colorblue}
2 h2{colorblue}
3 h3{colorblue}

Chúng ta có thể nhóm chung 3 selector trên lại như sau:

1 h1, h2, h3 colorblue }

Float và Clear trong CSS

Float và clear là hai thuộc tính quan trọng của CSS, Float và Clear ngày càng được sử dụng nhiều trong việc thiết kế giao diện, trình bày và dàn trang.

1. Float

Với CSS float, một thành phần có thể được hiển thị ở bên trái hay bên phải của thành phần mẹ, cho phép các thành phần khác di chuyển lên lấp đầy khoảng trống nếu có.
Float thường được sử dụng để căn chỉnh hình ảnh, nhưng nó cũng được sử dụng nhiều trong thiết kế giao diện (layout).

Ví dụ: ở ví dụ sau tôi có một tấm hình và một đoạn văn bản, tôi sẽ float:left cho tấm hình này với mã CSS như sau:

1 img{floatleft}

Code HTML

1 <div id="wapper">
2     <img src="logo.jpg" />
3     <p>Ở đây tôi sử dụng một tấm hình có chiều rộng 200px. Thành phần mẹ (div) có chiều rộng 350px, như vậy còn trống 150px bên phải tấm hình. Khi cho hình <em>float: left</em>, nội dung văn bản sẽ được di chuyển lên để lấp đầy khoảng trống 150px trong thành phần mẹ wapper. Do đó tạo nên hiệu ứng bao quanh hình ảnh</p>
4 </div>

Ta có kết quả như sau:

Vậy: khi ta float:left cho một thành phần nào đó, thì thành phần đó sẽ di chuyển tận cùng về bên trái (hoặc phải nếu được float:right) so với thành phần mẹ. Các thành phần khác sẽ được di chuyển lên phía trên để lấp đầy khoảng trống còn lại.

Ứng dụng float trong việc thiết kế giao diện.

Ví dụ sau là cách sử dụng thẻ <div> kết hợp với float để thiết kế một giao diện có hai cột song song nhau:

1 <div id="wapper">
2    <div id="left">
3       <img src="logo.jpg" />
4       <p>Cột thứ nhất có độ rộng 200px và được float: left</p>
5    </div>
6    <div id="right">
7       <p>Ở ví dụ này tôi có một thành phần mẹ (div) có chiều rộng 400px. Trong đó tôi có một thành phần div có có độ rộng 200px và được float: left, một thành phần div có có độ rộng 200px và được float: right.</p>
8    </div>
9 </div>

Và code CSS như sau:

1 #wapper{width400px}
2 #left{floatleftwidth200px}
3 #right{floatrightwidth200px}

Ứng dụng float tạo giao diện

Ứng dụng float trong thiết kế giao diện

Khi thành phần left (id=”left”) được gán float:left thì nó sẽ được dịch chuyển về tận cùng bên trái. Do nó có chiều rộng 200px nên còn trống 200px bên phải trong thẻ div mẹ. Do đó khi gán float:right cho thành phần right thì nó bị lệch về tận cùng phía bên phải, thành phần right này có độ rộng 200px (bằng độ rộng phần trống trong thành phần div mẹ) nên nó sẽ di chuyển nên và nằm song song với thành phần left tạo thành một giao diện có hai cột.
Ta nhận thấy rằng, khi mỗi thành phần float đều có kích thước cố định thì nó sẽ được xếp song song nhau để tạo ra các cột khi thành phần mẹ đủ rộng. Đây chính là nguyên lý để thiết  các giao diện nhiều cột sử  dụng float.

Clear trong CSS

Clear trong CSS

Ta thấy hình và đoạn văn bản thứ 2 di chuyển lên trên mà không nằm trên một hàng. Để làm được điều này ta thêm vào một thành phần div có class=”clear” sau đoạn văn bản thứ nhất.

1 <div id="wapper">
2     <img src="logo.jpg" />
3     <p>Đoạn văn bản thứ nhất được float:left</p>
4     <div class="clear"></div><!-- Thẻ div trống được thêm vào -->
5     <img src="logo.jpg" />
6     <p>Đoạn văn bản thứ 2 được float:left</p>
7 </div>

Và viết CSS cho class này như sau

1 .clear{clearboth}

Với việc thêm vào một thành phần div trống (không có nội dung) và code CSS ta có kết quả như mong muốn, tấm hình và đoạn văn bản thứ 2 đã nằm trên một hàng riêng biệt.

Clear trong CSS

Clear trong CSS

Các giá trị của Clear

Clear có 4 giá trị sau: left, right, both và none.

KẾT LUẬN

Qua bài viết này chúng ta đã biết được cách sử dụng float và clear, bài viết sau mình sẽ ứng dụng hai thuộc tính này để xây dựng một khung giao diện gồm header, footer và có 2 cột.

Các giá trị của Float

Float có 3 giá trị sau
+ Left: Cố định phần tử về bên trái.
+ Right: Cố định phần tử về bên phải.
+ None: Không thay đổi . (Khi không được khai báo thì giá trị float bằng none).

2. Clear

Clear luôn đi cùng với float. Có thể coi clear là ngược lại của float. Khi float thì các thành phần bên dưới di chuyển nên trên để lấp đầy khoảng trống. Nhưng không phải lúc nào chúng ta cũng muốn như vậy, do đó ta sử dụng clear để ngăn không cho các thành phần phía dưới tràn lên trên. Bạn cứ hình dung rằng khi một thành phần nào đó được gán thuộc tính clear thì nó sẽ giống như một bức tường ngăn các thành phần bên dưới di chuyển lên trên.
Ở ví dụ bên dưới tất cả các thành phần đều được float:left, ta có kết quả sau:

Độ lớn thực sự của Box

Ở bài viết về Box Model trong CSS, mình đã giới thiệu với các bạn về các thành phần của Box Model, nhưng đó chỉ là những khái niệm cơ bản. Bài viết này chúng ta sẽ cùng tìm hiểu về độ lớn thực sực sự của Box (ta có thể gọi là các tính toán trong Box model). Vậy:

  1. Tại sao phải tính toán độ lớn của Box?
  2. Cách tính độ lớn của Box như thế nào?

Trong thiết kế giao diện chúng ta luôn phải biết được thành phần bên trái rộng bao nhiêu px hay bao nhiêu %, rồi header, footer, right. . . Lúc đó chúng ta phải biết được độ lớn của các thành phần này để bố trí chúng cho hợp lý.

Khi chúng ta khai báo thuộc tính width và height của một thành phần nào đó trong CSS. Thì đó là độ lớn của vùng hiển thị dữ liệu (content area – là phần nằm trong cùng trong mô hình Box Model) chứ không phải độ lớn của Box. Chúng ta hãy cùng đi trả lời câu hỏi thứ 2 để biết được độ lớn của Box (độ lớn thực sự).

Giả sử chúng ta có một thành phần <div id=”mybox”> và khai báo CSS cho thành phần này như sau:

1 #mybox{
2     width150px;
3     height100px;
4     padding:10px;
5     border5px solid black;
6     margin:10px
7 }

Thì Box này có độ lớn: rộng 200px và cao 150px.

Tại sao không phải là 150x100px như ta đã khai báo width và height. Như đã nói thì đây chỉ là độ lớn của vùng hiển thị dữ liệu mà thôi. Chúng ta đã biết mô hình Box Model gồm có padding, border, margin và vùng hiển thị dữ liệu. Do đó độ lớn của Box phải là tổng các giá trị này.

Như vậy thì ví dụ trên được tính toán như sau:

150px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 200px (chiều rộng)

Tương tự thế ta tính được chiều cao là 150px.

Công thức chung để tính độ lớn của Box như sau:

  • Rộng = width + left padding + right padding + left border + right border + left margin + right margin
  • Cao = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

KẾT LUẬN

Vậy là chúng ta đã trả lời được 2 câu hỏi đã đưa ra, qua bài này chúng ta đã biết được:

  • Cách tính toán độ lớn của Box (độ lớn thực sự của một thành phần nào đó).
  • Thuộc tính width và height trong CSS.

Thuộc tính Border trong CSS

Tiếp theo loạt bài viết về Box Model, hôm nay chúng ta sẽ cùng tìm hiểu về thuộc tính Border trong CSS. Đây cũng là một thuộc tính khá quan trọng. Khi thuộc tính Border được khai báo cho phép chúng có thể quy định độ dày, màu sắc và kiểu hiện thị đường viền của một thành phần nào đó, tạo ra sự phân biệt giữa các thành phần với nhau trong trang web được rõ ràng hơn.
Các giá trị của border bao gồm: border-style, border-width và border-color
Để đường viền được hiện thị thì giá trị border-style luôn phải được khai báo.

Border style

Border-style sẽ quy định kiểu dáng hiển thị của đường viền, những ví dụ bên dưới cho thấy kiểu dáng hiện thị tương ứng của chúng.

none: không hiển thị đường viền (mặc định khi không được khai báo)

Hiển thị với giá trị solid
Hiển thị với giá trị dashed
Hiển thị với giá trị dotted
Hiển thị với giá trị double
Hiển thị với giá trị groove
Hiển thị với giá trị ridge
Hiển thị với giá trị inset
Hiển thị với giá trị outset

Border Width

Border-width sẽ quy định độ dày của đường viền.

Các giá trị của border-width được tính bằng px, hay có thể sử dụng 1 trong 3 giá trị: thin, medium, thick.

Ví dụ

1 p{ border-stylesolidborder-width1px;}

Đoạn văn bản này được hiển thị với giá trị solid và có border-width: 1px

Border Color

Border-color sẽ quy định màu sắc của đường viền được hiển thị. Giá trị màu có thể là:

  • Tên màu (tên tiếng anh): red, white, black . . .
  • Hệ RGB – ví dụ: rgb(255,155,0)
  • Hệ Hex – ví dụ: #ff0000

Ngoài ra border-color còn có giá trị  ”transparent” (trong suốt). Tuy nhiên thì giá trị này không mấy khi được dùng tới. Bởi vì mục đích của chúng ta là muốn đường viền được hiển thị.

Ví dụ:

1 p{ border-stylesolidborder-width1pxborder-color#000000 }

Giá trị border của cạnh riêng biệt

Chẳng hạn khi viết mã CSS như sau:

1 .myborder{ border-stylesolid }

Thì tất cả các cạnh sẽ được hiển thị với giá trị solid, nhưng có lúc nào đó trong thiết kế của bạn, bạn chỉ muốn một cạnh nào đó được hiện thị mà thôi, hay mỗi cạnh có một kiểu hiện thị khác nhau thì sao?

Để giải quyết vấn đề này thì chúng ta sẽ viết mã CSS cho từng cạnh riêng biệt.

Ví dụ sau thì mỗi cạnh sẽ được hiển thị với một kiểu khác nhau.

1 .myborder{
2    border-top-stylesolid;
3    border-right-styledashed;
4    border-bottom-styledotted;
5    border-left-styledouble;
6 }

Khi chỉ muốn cạnh nào đó hiển thị thì bạn chỉ cần viết CSS cho cạnh đó thôi.

Ví dụ sau chỉ hiện thị cạnh trên cùng.

1 .myborder{ border-top-stylesolid }

Cách viết tắt đối với thuộc tính border

Xét lại ví dụ sau:

1 p{
2    border-stylesolid;
3    border-width1px;
4    border-color#000000;
5 }

Ta nhận thấy các thành phần border-style, border-width, border-color được viết riêng biệt với các giá trị tương ứng.
Để đơn giản hơn chúng ta sẽ gộp chung lại để tiện cho việc chỉnh sửa cũng như làm giảm tối đa dung lượng của file CSS xuống mức thấp nhất có thể. Và đây cũng là cách hay được sử dụng nhất.
Từ ví dụ trên, ta sẽ viết chung tại như sau, đây gọi là cách viết tắt trong CSS.

1 p { border1px solid #000000 }

Như vậy đoạn mã nhìn gọn gàng hơn rất nhiều. Thứ tự để viết tắt cho thuộc tính border như sau:

  • border-width
  • border-style
  • border-color

Chúng ta cũng có thể viết tắt cho từng cạnh riêng biệt như sau:

1 p{ border-top1px solid red }

Margin và Padding trong CSS

Trong bài Box Model trong CSS mình cũng có giới thiệu qua về Margin và Padding, bài viết này chúng ta sẽ tìm hiểu kỹ hơn và cách viết tắt đối với margin và padding.

1. Margin

Khi ta khai báo thuộc tính Margin (canh lề) cho một thành phần nào đó, thì nó sẽ tạo ra một khoảng cách giữa thành phần đó với các thành phần xung quanh nó (top, right, bottom và left). Tạo ra sự phân chia giữa các thành phần trong trang web được thể hiện rõ ràng hơn.

Giá trị của margin

  • auto: tự động canh đều 2 bên left và right, thường được sử dụng để canh giữa màn hình cho toàn bộ trang web.
  • Kích thước (pixels, pt, em . . .)
  • % kích thước của thành phần chứa nó.

Cách khai báo margin

Ví dụ bên dưới sẽ khai báo margin (top, right, left, bottom) cho thành phần <p> có class=”first”

1 p.first{
2    margin-top:10px;
3    margin-right:10px;
4    margin-bottom:15px;
5    margin-left:15px;
6 }
1 <p class="first">
2     Đoạn văn bản này cách phía trên 10px, bên trái 15px, bên phải 10px; phía dưới 15px, không có padding
3 </p>

Kết quả

Đoạn văn bản này cách phía trên 10px, bên trái 15px, bên phải 10px; phía dưới 15px, không có padding

2. Padding

Padding là phần nằm giữa phần hiển thị nội dung và đường viền (border). Khi một thành phần được khai báo padding thì sẽ tạo ra một khoảng trống với dường viền giúp nội dung dễ nhìn hơn.
Giá trị của padding

  • Kích thước (pixels, pt, em . . .)
  • % kích thước của thành phần chứa nó.

Cách khai báo padding

Ví dụ sau khai báo padding cho thành phần <p> có class=”two”

1 p.two{
2    padding-top:2px;
3    padding-right3px;
4    padding-bottom:4px;
5    padding-left:5px
6 }

Đoạn văn bản này có padding-top:5px, padding-bottom:5px, padding-right: 5px, padding-left:5px và không có margin.

Ta thấy giữa đoạn văn bản và đường viền có một khoảng cách là 5px nên dễ nhìn hơn đoạn văn bản thứ nhất, không có padding.

3. Cách viết tắt đối với Margin và Padding

ở các ví dụ trên ta nhận thấy, margin và padding được khai báo cho từng cạnh (top, right, bottom, left) riêng biệt. Để đơn giản hơn chúng ta gộp chung tất cả các cạnh lại, đây chính là cách viết tắt đối với margin và padding.
Giả sử bây giờ ta viết margin cho thành phần p, chúng ta có thể viết đầy đủ như sau:

1 p{ margin-top10pxmargin-right10pxmargin-left15pxmargin-bottom:15px}

Nhưng để đơn giản hơn chúng ta có thể viết như sau:

1 p{ margin10px 10px 15px 15px}

Thứ tự của các cạnh ở cách viết này tuân theo chiều kim đồng hồ bắt dầu từ : top – right – bottom – left.
Tuy nhiên chúng ta có thể không cần phải viết đầy đủ giá trị cho bốn cạnh mà có thể viết 3, hoặc 2, hay thậm chí chỉ một giá trị. Nếu một trong 4 giá trị bị thiếu, thì nó sẽ lấy giá trị của cạnh đối diện.
Ví dụ

1 p{ margin10px 10px 7px}

ở ví dụ này ta thấy bị thiếu một giá trị của cạnh bên trái, do đó nó sẽ lấy giá trị của cạnh bên phải, do đó có giá trị là 10px.

1 p{ margin10px 5px}

ở ví dụ này ta thấy thiếu cạnh bên trái và cạnh dưới, do đó cạnh dưới sẽ lấy giá trị của cạnh trên (10px), cạnh bên trái sẽ lấy giá trị của cạnh bên phải (5px).
Trong trường hợp chỉ có một giá trị được khai báo:

1 p{ margin5px}

Thì tất cả các cạnh đều có margin là 5px.
Cách viết tắt cho padding cũng tương tự đối với margin.

Box model trong CSS

Box model (mô hình hộp)  là cách mà CSS định dạng khối không gian bao quanh một thành phần. Trong HTML tất cả các thành phần đều tồn tại một hộp bao quanh nó.

Mô hình Box model bao gồm padding (vùng đệm), border (đường viền) và margin (canh lề). Mặc định thì tất cả các giá trị này đều bằng 0, do đó chỉ khi nào các thuộc tính này được khai báo thì ta mới nhìn thấy sự thay đổi của chúng.

 

Box model

Padding: là vùng nằm giữa nội dung và đường viền (border), nó tạo ra một khoảng trống giúp cho nội dung được trình bày rõ ràng hơn .

Các giá trị của padding: bao gồm padding-top; padding-right; padding-bottom; và padding-left.

Ví dụ

1 .myclass{ padding-top5pxpadding-right7pxpadding-bottom7pxpadding-left5px}

Border: sẽ quy định độ dày, màu sắc và kiểu hiện thị cũng như kiểu của đường viền.

Các giá trị của border bao gồm: border-width; border-style và border-color, chúng ta luôn phải khai báo border-style, nếu không được khai báo thì nó sẽ có giá trị bằng 0, lúc đó các giá trị của border-with và border-color sẽ không được hiển thị.

Chúng ta khai báo trong CSS như sau

1 p{ border-width1pxborder-stylesolidborder-colorgreen }

Margin: margin là phần nằm ngoài cùng trong mô hình Box model. Nó sẽ tạo ra khoảng các giữa các thành phần với nhau

Các giá trị của margin: bao gồm margin-top; margin-right; margin-bottom; và margin-left.

Ví dụ

1 .myclass{ margin-top5pxmargin-right7pxmargin-bottom7pxmargin-left5px}

Ví dụ về Box model

Đoạn văn bản này được hiển thị với đường viền và có padding 5px

Đoạn văn bản này được hiển thị với đường viền và có margin-top 20px

Cú pháp CSS (CSS Syntax)

Cách viết một lệnh trong CSS.

Như đã viết ở bài trước (CSS là gì?). Mỗi câu lệnh CSS sẽ định dạng một thành phần nhất định trong tài liệu HTML, thành phần HTML được định dạng được gọi là đối tượng của CSS (CSS selector).

Để hiểu rõ hơn về cú pháp của CSS ta xét ví dụ sau:

Giả sử ta muốn quy định tất cả các thành phần <h1> có màu đen, cỡ chữ 14px; font Arial thì ta sẽ viết CSS như sau:

1 h1 {color#000font-size14pxfont-familyarial }

Như vậy ta thấy cú pháp một lệnh CSS như sau

 

Cu phap css

Đối tượng  { thuộc tính 1: giá trị 1; thuộc tính 2: giá trị 2; … ; thuộc tính n: giá trị n }

–    Đối tượng: là các thành phần của tài liệu HTML (các thẻ) .

–    Thuộc tính: các thuộc tính định dạng của phần tử như màu sắc, font chữ, kích thước, . . ., ở các bài viết sau chúng ta sẽ lần lượt tìm hiểu về các thuộc tính này

–    Giá trị: giá trị của các thuộc tính trên.

Ghi chú trong CSS (CSS comment)

Trong CSS ta sử dụng  /* */ để ghi chú hay bỏ qua một lệnh nào đó mà ta không muốn thực hiện

Ví dụ:

1 p{
2 /* Nội dung ghi chú */
3 color:red;
4 text-align:center;
5 }