Chuyên mục lưu trữ: CSS

Kiến thức cơ bản css: inline vs block vs inline-block

CSS được tạo ra với mục đích định dạng kiểu trình bày cho html. Với những lý do đó các phần tử html được chia ra thành nhiều loại khác nhau trong CSS. Hai trong loại đó là các phần tử thuộc Inline (nội tuyến) và Block-level (cấp độ khối). Đây cũng là những kiến thức mà những nhà thiết kế web mới bắt đầu học cần nắm vững.

Block-level Elements – (Các phần tử cấp độ khối)

Các phần tử Block có những đặc tính mặc định như sau:

  • Nếu không có thông số xác định chiều rộng width, bề ngang của block sẽ tự động mở rộng cho đến giới hạn của phần tử bọc bên ngoài nó (parent container)
  • Có thể xác định thông số lề margins và vùng đệm padding
  • Nếu không có thông số xác định chiều cao height, block sẽ tự động mở rộng giới hạn bằng chiều cao các phần tử con (child element) của nó.
  • Khi đứng cạnh nhau, các block sẽ xếp chồng lên nhau.
  • Không thể sử dụng thuộc tính vertical-align

Như vậy, đối với phần tử thuộc block-level, bạn không cần phải thiết lập thông số width:100% , vì nó đây là thuộc tính mặc định. Tương tự, bạn cũng không cần dùng clear để các phần tử xuống hàng (xếp chồng lên nhau).

Xem ví dụ, các phần tử div xếp chồng lên nhau và có chiều ngang 100% khi đặt kế nhau, (chọn tab html để xem code html)

Một số phần tử html thuộc block-level: <p>, <div>, <form>, <header>, <nav>, <ul>, <li>, <h1>.

Inline elements – phần tử nội tuyến

Các phần tử Inline có những đặc tính mặc định như sau:

  • Luôn nằm trên một dòng chữ hay nội dung, không có thuộc tính mặc định clear
  • Sử dụng thuộc tính white-space như text trong CSS
  • Không áp dụng được thuộc tính margin-topmargin-bottom, nhưng vẫn áp dụng được margin-left , margin-right và đầy đủ thuộc tính padding
  • Không áp dụng được thuộc tính width and height
  • Nếu sử dụng thuộc tính float, các phần tử inline sẽ tự động trở thành block-level
  • Sử dụng thuộc vertical-align như text trong CSS

Hiểu một cách đơn giản nhất, các phần tử thuộc inline được CSS xem như các ký tự hoặc cụm chữ, do đó nó luôn nối tiếp trên một dòng nếu đặt cạnh nhau.

Xem ví dụ: Các phần tử được tạo bằng span, xếp trên cùng 1 dòng và có chiều rộng bằng với nội dung bên trong nó. (Chọn tab html để xem code html)

Một số phần tử thuộc inline: <a>, <span>, <b>, <em>, <i>, <cite>, <mark>, and <code>.

Inline-Block elements – phần tử nội tuyến cấp độ khối

Đối với CSS, trong HTML không có bất cứ phần tử nào mặc định thuộc loại Inline-block, cơ bản các phần tử inline có thể chuyển đổi thành block-level thông qua thuộc tính display:block và ngược lại display:inline, do đó bất cứ phần tử nào cũng có thể chuyển thành loại inline-block thông qua thuộc tính display:inline-block . Inline-block là một định dạng đặc biệt, nó thuộc inline nhưng mang một số đặc tính của block.

  • Luôn nằm trên một dòng chữ hay nội dung như inline
  • Khi xếp cạnh nhau trên một dòng, có khoảng trắng mặc định giữa các phần tử
  • Sử dụng thuộc tính white-space như text trong CSS
  • Có thể áp dụng  đầy đủ thuộc tính margin và padding như block-level
  • Có thể áp dụng  đầy đủ thuộc tính width and height như block-level
  • Sử dụng thuộc vertical-align như text trong CSS

Xem ví dụ: Các phần tử div (block-level) nhưng có thuộc tính display:inline-block vẫn có thể xếp cạnh nhau như phần tử inline và có các đặc tính inline như khoảng trắng giữa các phần tử, chiều ngang bằng nội dung bên trong nó tuy nhiên nó có thể áp dụng được thông số width,height,padding, margin như block-level

Tóm lại, tùy theo ý đồ sử dụng các phần tử trong web layout, bạn có thể chọn phương pháp thích hợp để định dạng các phần tử thuộc loại inline, block hay inline-block. Cớ bản về web layout còn các thuộc tính quan trong khác thường dược sử dụng như như display:table, display:inline-table, display:inline-flex … và float. Chúng ta sẽ thảo luận và so sánh các phương pháp này trong một bài viết khác để giúp bạn chọn lựa phương pháp tối ưu khi tạo web layout.

CSS Attribute Selectors: Các bộ chọn thuộc tính CSS

Bạn đã biết gì về CSS Attribute Selectors? Có tất cả bao nhiêu loại? Có gì mới trong các bộ chọn thuộc tính CSS3? Sử dụng chúng như thế nào? Chúng ta sẽ cùng tham khảo bài viết dưới dây để có các câu trả lời cho những vấn đề nêu trên.

HTML Attributes – Thuộc tính HTML

Trước khi bắt dầu tìm hiểu về khái niệm CSS Attribute Selector, chúng ta nên nhớ lại xem HTML attribute là gì. Rất tốt, nêu bạn đã quen với các thể loại này trước đây như class, id, style và href …. Còn rất nhiều thứ tương tự, bạn có thể tìm hiểu thêm ở trang W3.org để có danh sách đầy đủ.

CSS tạo định dạng cho các thẻ khá dễ dàng, nếu bạn muốn định dạng một id hay class, chúng ta sẽ viết như sau

#someid {color: black}
.someclass {color: black}

Viết như trên xem như tạm ổn, nhưng nếu chúng ta muốn định dạng một vài thuộc tính khác hơn thì phải làm thế nào? Đây là các attribute selector mà chúng ta sẽ tìm hiểu trong bài này.

Attributes Selector – Bộ chọn thuộc tính

Như chúng dã biết, attribute selectors (Các bộ chọn thuộc tính) có giải nghĩa đúng như những gì chúng được đặt tên, đó là cách để chọn và nhắm đến các thuộc tính xác định trong CSS. Điều này thật ra cũng dễ thôi, nó liên quan đến mọi thứ nằm trong hai dấu <> của thẻ mở HTML mà bạn sử dụng. Nào chúng ta cùng xem xét vài trường hợp code HTML cơ bản.

 <li><a href="http://thietke.website/">Tự học thiết kế website</a></li>
	<li><a href="http://www.vnexpress.net/">Báo tin tức VNExpress</a></li>
	<li><a href="http://hocthietke.org/">Website dạy thiết kế</a></li>

Ví dụ, chúng ta chỉ muốn chọn liên kết “Tự học thiết kế website”. Bạn có thể dùng pseudo selectors, ví dụ: a:first-child, Tuy nhiên, đôi khi chúng ta không thể chọn theo cách này thì còn có 1 cách khác, như là cách dùng attribute selector để nhắm đến href xác định. Trong trường hợp này, bạn chỉ muốn liên kết “Tự học thiết kế website” có màu xanh. Chúng ta sẽ viết đoạn CSS như sau:

 a[href='http://thietke.website/'] {color: blue;}

Kết quả trên trình duyệt:

CSS-Attribute-Selectors-sample-1

XEM VÍ DỤ

Repeating Attributes – Thuộc tính có tính chất lập lại

Một ví dụ khác chúng ta có một danh sách liên lạc, và muốn vài mục trong danh sách có định dạng khác biệt so với những mục còn lại . Sử dụng attribute, chúng ta có thể tạo ra sự khác biệt bởi hai mục “friend”“contact” bên dưới:

<ul>
    <li><a href="#" rel="friend">Larry</a></li>
    <li><a href="#" rel="contact">Curly</a></li>
    <li><a href="#" rel="contact">Moe</a></li>
    <li><a href="#" rel="contact">Curly Joe</a></li>
    <li><a href="#" rel="friend">Shemp</a></li>
</ul>

Lần này chúng ta sẽ dựa vào thuộc tính rel để tạo định dạng cho hai mục tiêu lựa chọn. Cách thức cũng giống như ở ví dụ 1, nhưng chúng ta có thể cùng lúc chọn được cùng lúc nhiều mục khác nhau.

li a[rel='friend'] {font-weight: bold;}
li a[rel='contact'] {font-weight: 200;}

Sử dụng code như ở trên chúng ta sẽ có kết quả như bên dưới, còn một cách khác có thể đạt kết quả như trên như là :nth-child , bộ chọn theo thứ tự . Tuy nhiên :nth-child đôi lúc sẽ cho kết quả sai nếu bạn viết không đúng cách khi danh sách này được thêm hoặc bớt đi. Điều tuyệt vời hơn nữa, là cách viết Repeating Attributes như trên ví dụ được cả các trình duyệt cũ hỗ trợ như IE version 7,8.

CSS-Attribute-Selectors-sample-2

XEM VÍ DỤ

Multiples Values – Thuộc tính có nhiều giá trị

Đôi khi, không phải lúc nào mọi chuyện cũng thuận lợi như hai trường hợp trên. Bạn sẽ gặp rắc rối nếu muốn chọn một thuộc tính có nhiều giá trị cùng lúc. Ví dụ:

<ul>
    <li><a href="#" rel="friend nofollow">Larry</a></li>
    <li><a href="#" rel="contact">Curly</a></li>
    <li><a href="#" rel="contact">Moe</a></li>
</ul>

Bạn sẽ nghĩ rằng muốn chọn mục đầu tiên “Larry”, chúng ta sẽ tiến hành như cách thức đã biết ở trên, tuy nhiên không phải như vậy. Nếu chỉ đơn giản sử dụng a[rel='friend'], thì bạn sẽ không thực hiện được điều đó. Tuy nhiên, chúng ta sẽ tiến hành như sau, theo cách xem như “friend” chỉ là một trong nhiều giá trị của thuộc tính đó.

li a[rel~='friend'] {font-weight: bold;}

Kết quả, từ “Larry” sẽ dược in đậm mà trước đó cách dùng a[rel='friend'] không thể thực hiện được.

CSS3 Attribute Selectors – Bộ chọn thuộc tính CSS3

CSS3 cung cấp cho chúng ta nhiều chức năng và công cụ mới tuyệt vời. Chẵng có gì ngạc nhiên khi một số Attribute Selector mới được thêm vào CSS3 để giúp chúng ta thêm nhiều cách xác định mục tiêu chọn lựa. Hãy cũng chúng tôi khám phá một vài món thú vị của CSS3 mà bạn sẽ thích thú.

Similarly Named Attributes – Bộ chọn thuộc tính có tên gần giống nhau

Đây là thứ tốt nhất mà CSS3 mang lại. Hãy hình dung, bạn có đoạn code HTML bên dưới và chỉ muốn nhắm đến các id có tên “upperSection”“lowerSection”, bạn sẽ làm điều đó như thể nào?

<div id="upperSection">
    <p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div id="somethingElse">
    <p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div id="lowerSection">
    <p>Lorem ipsum dolor sit amet...</p>
</div>
 
<div id="footer">
    <p>Lorem ipsum dolor sit amet...</p>
</div>

Câu trả lời là bộ chọn mới “Arbitrary Substring Attribute Value Selector” hay còn gọi là bộ chọn sử dụng ký tự * để đại diện cho những cụm chữ giống nhau. Như ví dụ, chúng ta thấy hai id mà bạn muốn chọn có tên là “upperSection”“lowerSection” có cùng một cụm chữ giống nhau đó là “Section”. Dựa vào điều này ta có thể chọn ra hai mục mong muốn trong danh sách bằng cách viết như sau:

div[id*='Section'] {color: red;}

Thật tuyệt vời phải không các bạn, bằng cách này bạn có thể gán định dạng cho nhiều ID bằng cách đặt cho chúng một cái tên có một cụm từ nào đó giống nhau. Điều này cũng mở ra nhiều khả năng tạo các bộ chọn phức tạp chỉ với ít dòng code dễ dàng hơn.

Beginning and Ending – Bộ chọn Bắt đầu và Kết thúc

Nếu bộ chọn Arbitrary Substring Attribute Value Selector chỉ nhắm đến các giá trị giống nhau ở một cụm chữ và nằm bất kỳ vị trí nào, thì bộ chọn Bắt đầu và Kết thúc sẽ được áp dụng trong các trường hợp khó hơn là chỉ nhắm đến những từ đứng trước tiên hoặc sau cùng trong chuỗi giá trị thuộc tính. Ví dụ:

<ul>
    <li><a href="#" title="stooge one">Larry</a></li>
    <li><a href="#" title="the second stooge">Curly</a></li>
    <li><a href="#" title="stooge three">Moe</a></li>
    <li><a href="#" title="impostor">Curly-Joe</a></li>
</ul>

Hãy hình dung, bạn muốn chọn các mục có giá trị “stooge”, nhưng hai mục “Larry”“Moe” có màu đỏ và mục “Curly” có màu vàng. Để làm điều này bạn phải dùng cách viết [title^=’stooge’] để nhắm đến các mục có chứa giá trị “stooge” là từ ở vị trí đầu tiên và [title$=’stooge’] để xác định các mục có chứa giá trị “stooge”, là từ ở vị trí cuối cùng trong chuỗi giá trị.

li a[title^='stooge'] {color: red} /*Beginning - Chọn các liên kết có giá trị từ bắt đầu = stooge*/
li a[title$='stooge'] {color: yellow} /*Ending - - Chọn các liên kết có giá trị từ cuối cùng = stooge*/

XEM VÍ DỤ

Chaining Attribute Selectors – Bộ chọn theo chuỗi

Nào bây giờ chúng ta sẽ đặt ra mục tiêu phức tạp hơn. Ví dụ như là một loạt các thuộc tính có chuỗi giá trị như đoạn code HTML dưới đây:

<ul>
    <li><a href="#" title="stooge one">Larry</a></li>
    <li><a href="#" title="the second stooge">Curly</a></li>
    <li><a href="#" title="stooge three">Moe</a></li>
    <li><a href="#" title="the impostor">Curly-Joe</a></li>
</ul>

Mục tiêu đặt ra là chọn tất cả các mục liên kết có giá trị title chứa từ “stooge”, nhưng chỉ với những thuộc tính có giá trị chứa từ “the” ở vị trí đầu tiên. Có lẽ bạn dang nghĩ đến cách làm này a[title^='the'], tuy nhiên đừng quên ở mục cuối cùng, liên kết đó cũng có giá trị chứa từ “the” ở vị trí đầu tiên nhưng không chứa từ “stooge”! Do đó, cách viết bộ chọn thuộc tính đúng như sau:

li a[title*='stooge'][title^='the'] {color: red;}

XEM VÍ DỤ

Đơn giản không các bạn? Tất cả những gì chúng ta cần là đặt hai bộ chọn có điều kiện khác nhau trên cùng 1 dòng. Điều quan trọng bạn cần chú ý là sự kết hợp này không phải là điều kiện EITHER/OR (chỉ cần đáp ứng 1 trong 2 điều kiện) mà là BOTH/AND (buộc đáp ứng đủ cả hai điều kiện). Nếu mục nào đáp ứng cả hai điều kiện trên đều là mục tiêu của được lựa chọn.

Tìm hiểu thêm

Nếu bắt đầu thích thú với những thủ thuật CSS, chúng tôi sẽ viết thêm những bài có chủ đề tương tự trong tương lai. Còn nhiều điều thú vị sẽ khiến bạn ngạc nhiên. Ví dụ như bộ chọn Adjacent Sibling Combinators, nhắm vào các đối tượng có quan hệ anh/em liền kề trong cây phân nhánh DOM và General Sibling Combinators , nhắm vào các đối tượng có quan hệ anh/em ở vị trí bất kỳ. Chúng ta thử lướt qua trường hợp sau đây:

<div id="combinators">
    <p>Not this one.</p>    
    <h1>Gibberish</h1>
    <p>Pick me!</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
    <p>Lorem ipsum dolor sit amet...</p>
</div>

Giả sử chúng ta chỉ muốn chọn đoạn văn bản “Pick me!” , bộ chọn Adjacent Sibling Combinators sẽ giúp ta làm điều đó. Nó sẽ chọn bất kỳ đoạn văn bản p nào trên trang mà có thẻ h1 đứng liền kề trên nó, có nghĩa là đoạn văn bản p đầu tiên ngay sau tiêu đề h1.

h1 + p {color: orange;}

XEM VÍ DỤ

Tương tự, General Sibling Combinator giúp chúng ta nhắm đến tất cả các thẻ p đứng sau tiêu đề h1, do vậy đoạn văn bản đầu tiên trên tiêu đề sẽ không được chọn còn lại tất cả đều được áp dụng.

h1 ~ p {color: orange;

XEM VÍ DỤ

Đây chỉ là vài món khai vị hấp dẫn của CSS3, chúng ta sẽ còn tìm hiểu thêm về chúng đầy đủ hơn ở một bài viết khác.

Nguồn: CSS Attribute Selectors: How and Why You Should Be Using Them
by Joshua Johnson

Tìm hiểu về Float, Block, Inline-Block trong CSS

Ngày nay, chúng ta thường sử dụng phần tử float (trôi nổi) khi tạo layout khá phổ biến kể từ cách layout bằng phần tử table đã đi vào quá khứ. Đó là một giải pháp lạ lùng và thường gây không ít rắc rối cho chúng ta, nhưng nếu bạn thật sự nắm rõ về nó, đó là một cách làm hiệu quả.

Một phương pháp thường được thay thế cho float đó là dùng inline-block cùng các thiết lập các giá trị display cho nó. Chính xác là phải làm thế nào? Làm thế nào để nó hoạt động giống float? Sự khác nhau? Hãy cũng tôi đào sâu hơn và khám phá các phần tử này.

Tìm hiểu thuộc tính display

Trình duyệt web biên dịch các thành phần khác nhau theo nhiều các khác nhau. Một số phần tử là cấp độ khối (block-level), nghĩa là mặc định chúng có thuộc tính displayblock (khối). Những phần tử cấp độ khối có thể được xác định chiều ngang và chiều cao và sẽ tự động thêm một dòng (hàng) mới trên trang tài liệu nếu được thêm vào.

Một ví dụ cho phần tử khối đó là đoạn văn bản (paragraph). Nếu bạn có hai đoạn văn bản đặt kế nhau, chúng sẽ xếp chồng lên nhau chứ không phải đứng cạnh nhau. Bạn có thể tự do thiết lập kích thước cho các đoạn văn bản và xem nó như những viên gạch xây dựng để sắp xếp hình thù xếp theo ý muốn.

inlineBlock-1

Một số phần tử khác có giá trị display được thiết lập nội tuyến (inline) mặc định. Điều này có nghĩa là chúng không thể xác định được chiều cao và chiều ngang và cũng không tạo thêm dòng (hàng) trong layout (vì thế chúng mới có tên là inline – nội tuyến). Những phần tử inline thường có biên chế trong một đoạn văn bản hoặc hoặc các phần tử cấp độ khối (block-level) khác như strong, em , anchor

Đây là những gì sẽ xảy ra đối với các phần tử nội tuyến (inline) khi xếp chúng cạnh nhau. Ví dụ như ta có một số phần tử anchor (thẻ a) trong trang HTML, không giống như các đoạn văn bản ở trên, chúng sẽ xếp chồng lên nhau, ở đây các phần tử được tạo ra sẽ xếp cạnh nhau. Chiều cao và rộng sẽ được quyết định bởi nội dung bên trong nó và không thể thay đổi như các phần tử cấp độ khối (block-level)

inlineBlock-2

Trên đây là một vài giá trị mặc định của display chắc hẵn các bạn cũng đã quen thuộc. Tương tự ở phần head giá trị display luôn mặc định là none.

Thiết lập giá trị display  riêng cho bạn

Một trong những tính năng thú vị của CSS chính là khả năng thay đổi cách hiển thị (display ) của các phần tử. Mặc dù mỗi phần tử được gán cho một giá trị display mặc định, nhưng chúng ta vẫn buộc chúng hiển thị theo ý muốn của mình.

Vi dụ, chúng ta có thể dể dàng buộc các thẻ anchor có giá trị mặc định là nội tuyến (inline) ở ví dụ 2 để bắt chúng có những tính chất như các đoạn văn bản (pagragraph) có cấp độ khối (block-level) như ở ví dụ 1. Để thực hiện điều này, chúng ta sẽ thiết lập thuộc tính block trong CSS.

Bây giờ các thẻ anchor có tính chất giống như các phần tử cấp độ khối (block-level), chúng sẽ tạo thêm dòng mới và có thể xác định chiều cao và chiều ngang.

inlineBlock-3

Như bạn cũng hình dung ra, sẽ khó hơn nếu chúng ta làm ngược lại, buộc phần tử có giá trị cấp độ khối (block-level) có tính chất như của phần tử nội tuyến (inline). Thông thường bạn sẽ nghĩ ngay đến cách thiết lập display: inline để buộc hai đoạn văn bản (paragraph) xếp cạnh nhau, nhưng khi thực hiện, kết quả là cả hai nối lại với nhau thành một đoạn văn bản (paragraph)

inlineBlock-4

Vào lúc này, chúng ta đã mất hết khả năng thiết lập chiều ngang và chiều cao (tính chất của inline), do đó hai đoạn văn bản (paragraph) sát nhập lại với nhau không như ý muốn.

Phần tử trôi nổi – Floating Elements

Như ví dụ ở trên, chúng ta muốn hai đoạn văn bản (paragraph) vẫn giữ tách biệt nhưng phải hiển thị xếp cạnh nhau theo cột chứ không phải xếp chồng lên nhau. Câu trả lời đa số cho trường hợp này đó là chuyển sang sử dụng float. Chúng ta có thiết lập float:left để các đoạn văn bản (paragraph) vẫn duy trì tính năng của một phần tử cấp độ khối (block-level) đồng thời hiển thị theo từng cột nội dung như ý muốn.

inlineBlock-5
Phần tử cha (container hay parent) chứa các phần con có tính năng float sẽ bị xem như rỗng.

Float có nhiều tính năng phải lưu ý. Ví dụ, những phần tử float sẽ khiến cho phần tử chứa nó (container element) bị co lại (colapsed – rỗng nội dung và gây vỡ layout), kèm theo đó là vô số những rắc rối khác nếu bạn áp dụng màu nền (backgound color) và đường biên (border) cho phần tử chứa nó (container element). Để làm đúng cách, bạn phải sử dụng vài mánh khóe. Chúng ta sẽ xóa tính năng float trên các phần tử mới (ngày nay thường áp dụng phần tử lớp giả – pseudo-element) ở cuối phần tử chứa nó (container element) hoặc sử dụng overflow:auto ở phần tử cha mẹ parent của nó. Cả hai cách đều sửa được rắc rối cho phần tử chứa float (container element), nếu bạn biết cách làm thế nào để sử dụng đúng cách, bạn sẽ có thể xây dựng một layout như ý mà không gặp quá nhiều phiền toái.

display: inline-block

Có vô số giá trị cho thuộc tính display như chúng ta đã biết ở trên, một số thật sự hữu dụng, một số khác, tôi cá là bạn chưa bao giờ đụng đến. Cuộc thảo luận của chúng ta đã đi đến một trong những giá trị hữu dụng nhất của display đó là inline-block (khối nội tuyến)

Hãy xem chuyện gì sẽ xảy ra nếu chúng ta lấy hai đoạn văn bản ở ví dụ trên và gán giá trị displayinline-block

inlineBlock-6

Trông chúng giống float phải không nào? OK, vậy thì chuyện gì sẽ xảy ra với phần tử chứa nó (container hay parent) ? Không sao cả! Mọi thứ đều hoạt động như ý muốn của chúng ta.

inlineBlock-7

Những gì xảy ra ở đây đó là chúng ta khai báo cho trình duyệt hiển thị các đoạn văn bản nội tuyến (paragraph inline) nhưng cho phép chúng có thuộc tính của cấp độ khối (block-level). Có nghĩa là chúng ta có thể xác định chiều cao và chiều ngang tùy ý và vẫn có hai phần tử tách biệt, nhưng còn giữ cho chúng xếp cạnh nhau thành cột. Thật tuyệt vời!

Vấn đề so hàng (alignment)

Nhìn bề ngoài, có vẻ như inline-block là vị cứu tinh mà chúng ta chờ đợi. Chẳng ai muốn phiền toái phải dùng thủ thuật clearfix nếu áp dụng float. Phải chăng đây là phương pháp thay thế float hữu hiệu? Không hẵn như vậy, inline-block cũng có những vấn đề gây đau đầu không kém.

Điều đầu tiên, những phần tử floatinline-block sẽ trông khác nhau nếu bạn mỗi phần tử có chiều cao khác nhau. Ví dụ, đây là những gì bạn sẽ thấy nếu áp dung float:left cho loạt loạt văn bản (paragraph)

inlineBlock-8

Còn đây là những gì sẽ xảy ra nếu bạn áp dụng inline-block tên cùng các đoạn văn bản (paragraph). Bạn có nhận thấy rằng các đoạn văn bản so hàng theo đáy (bottom) với nhau thay vì so hàng theo đỉnh (top) như ở trên.

inlineBlock-12

May mắn đây không phải là vấn đề quá khó khăn, chúng ta có thể giải quyết bằng cách thiết lập thuộc tính so hàng theo chiều đứng (vertical-align) là đỉnh (top)

inlineBlock-11

Vấn đề khoảng trắng

Một vấn đề quan trong khác mà giữa inline-blockfloat có sự khác biệt. Đây cũng là vấn đề chung thường thấy của HTML và CSS đó là khoảng trắng trong thiết kế web layout. Hãy xem ví dụ sau đây:

inlineBlock-13

Chúng ta có thể thấy rằng, đối với một nhóm list-items khi được gán float, chúng xếp hàng sát cạnh nhau như chúng ta trông đợi, điều này cho phép chúng ta có thể thiết lập các khoảng hở giữa từng item chính xác mà không phát sinh thêm khoảng trắng dư thừa nào. Tuy nhiên, nếu thực hiện tương tự với cách dùng inline-block, có một khoảng hở mặc định không cách nào loại trừ ngay cả khi bạn thiết lập lề (margin) bằng 0.

Như các bạn có thể thấy, chúng ta cần một giải pháp để loại trừ các khoảng trắng trong trang HTML và đẩy các phần tử đứng ngay sát cạnh nhau. Một lần nữa, tôi tìm thấy một cách hơi có một chút rối rắm nhưng hiệu quả. Giải pháp này cho kết quả tốt mà không xáo trộn hệ thống phân cấp trong HTML đó là áp dụng lề (margin) -4px lên mỗi item.

inlineBlock-14

Sự hỗ trợ của các trình duyệt

Bây giờ bạn đã biết inline-block có tính năng khác biệt với float như thế nào, đây là lúc thảo luận chủ đề ưa thích của mọi người: sự hỗ trợ của các trình duyệt. Những kỹ thuật nêu trên có thật sự là giải pháp tốt để chúng có thể hoạt động tốt trên mọi trình duyệt ? Kết quả thật sự tốt hơn những gì chúng ta mong chờ.

inlineBlock-15

Chúng ta có thể thấy hầu hết các trình duyệt đều hỗ trợ tốt cho giải pháp trên ngoại trừ IE7 (đã bị loại bỏ trong danh sách trình duyệt phổ biến ngày nay), nếu bạn muốn cả IE6 và 7 hỗ trợ, bạn có thể dùng thủ thuật với thuộc tính zoom và dùng dấu * để nhắm đến chỉ áp dụng cho trình duyệt IE6/7 (ngày nay không còn cần thiết).

 li {
 display: inline-block;
 width: 100px;
 vertical-align: top;
 
 /*Dirty IE Hack - chỉ áp dụng cho IE6 và 7*/
 zoom: 1;
 *display: inline;
}

Xem thêm

Nếu bạn muốn nghiên cứu thêm về những gì chúng ta đã thảo luận, các bạn có thể xem thêm các bài viết sau:

Nguồn: biên dịch theo “What’s the Deal With Display: Inline-Block?” | Joshua Johnson | Designshack.net

Giới thiệu bài học CSS cơ bản

Tự học CSS

Cascading Style Sheets ( viết tắt: CSS) là một công cụ tuyệt vời để trợ giúp công việc dàn trang, thiết kế web của bạn. Nó giúp bạn tiết kiệm nhiều thời gian và có thể nâng cao việc thiết kế trang web của bạn theo cách hoàn toàn mới. Có thể nói CSS là một môn bắt buộc nếu bạn muốn làm công việc thiết kế web.

Những bài học nhập môn với CSS chỉ chiếm chút ít thời gian của bạn. Các bài học rất dễ hiểu và sẽ giúp bạn học tất cả các kỹ thuật phức tạp.

Học CSS rất thú vị. Cùng với việc theo suốt tất cả các bài hướng dẫn, bạn nên dành thời gian để thực hành sau mỗi bài đã học.

Sử dụng CSS đòi hỏi những kiến thức cơ bản về HTML, nếu bạn chưa từng học qua HTML, chúng tôi khuyên bạn nên bắt đầu từ các bài học về HTML trước khi bắt đầu học CSS

Bạn cần những phần mềm nào?

Bạn không nên sử dụng các phần mềm như FrontPage, DreamWeaver hay Word trong thời gian học. Các phần mềm nâng cao sẽ không giúp bạn học CSS, thay vì đó, chúng sẽ giới hạn và làm chậm tiến trình tiếp thu của bạn.

Những gì bạn cần sẽ là một chương trình soạn thảo văn bản cơ bản như Notepad có sẳn trong WindowPico của Linux hoặc Simple Text trên Macintosh.

Một phần mềm soạn thảo văn bản sơ khai sẽ là sự trợ giúp lý tưởng cho việc học HTML và CSS bởi vì nó sẽ không tự động thay đổi code bạn viết. Nhờ đó, việc viết đúng hoặc sai sẽ được quyết định do chính bạn chứ không phải phần mềm.

Bạn có thể sử dụng bất cứ trình duyệt nào trong bài học này. Chúng tôi khuyên bạn nên luôn cập nhật các phiên bản mới nhất của trình duyệt.

Một trình duyệt và một chương trình soạn thảo văn bản như Notepad là quá đủ để học CSS.

Nào chúng ta cùng bắt đầu!

Mục lục

Tài liệu học được biên soạn và được tác giả bổ sung dựa theo nguồn từ trang html.net

Học CSS cơ bản – Bài 1

Giới thiệu về CSS

CSS là gì

Có lẽ bạn đã từng được nghe nói về CSS nhưng không thực sự hiểu rõ. Trong bài học này, bạn sẽ tìm hiểu xem CSS là gì và nó có thể giúp ích như thế nào cho bạn ở lĩnh vực thiết kế website.
CSS ( viết tắt của Cascading Style Sheets)

Bạn có thể làm được gì với CSS?

CSS ( viết tắt của Cascading Style Sheets) là một ngôn ngữ dùng để xác định bố cục, định dạng, kiểu cách của những trang HTML. Ví dụ, CSS có thể xác định font chữ, chiều cao, chiều rộng, màu sắc phông nền, vị trí và nhiều thứ khác trên tài liệu HTML.

Nếu HTML có thể được sử dụng để xây dựng cấu trúc trang web thì CSS cung cấp nhiều lựa chọn, chính xác và chi tiết hơn. CSS được hỗ trợ bởi tất cả các trình duyệt đang có hiện nay. 

Sau khi xem qua một vài bài hướng dẫn dưới đây, tôi tin rằng bạn có thể tạo ra một phong cách riêng biệt để giúp cho trang web của bạn nhìn sinh động hơn.

Sự khác biệt giữa CSS và HTML là gì?

HTML được sử dụng để cấu trúc nội dung. CSS được sử dụng để định dạng nội dung đã được cấu trúc.

Có vẻ một số thuật ngữ kỹ thuật làm bạn khó hiểu. Nhưng hãy yên tâm và tiếp tục đọc. Tất cả sẽ dễ hiểu hơn ở các phần sau.

Trở về lịch sử một chút khi ông Tim Berners Lee phát minh ra World Wide Web, vào thời ấy, ngôn ngữ HTML chỉ được sử dụng để tạo ra cấu trúc văn bản. Tác giả có thể đánh dấu (marked up) các phần tử trong trang tài liệu của mình bằng cách chỉ định “đây là một tiêu đề” hoặc “đây là một đoạn văn bản” bằng cách sử dụng các thẻ HTML như <h1><p>.

Khi Web trở nên phổ biến hơn, các nhà thiết kế bắt đầu tìm kiếm các khả năng bố cục trang chi tiết hơn. Để đáp ứng nhu cầu này, các nhà cung cấp trình duyệt (tại thời điểm đó là Netscape và Microsoft) đã phát minh ra các thẻ HTML mới, ví dụ như <font> một thẻ khác hoàn toàn với các thẻ HTML trước đó, được dùng để định dạng việc định dạng trang chứ không phải dùng để cấu trúc trang.

Điều này cũng dẫn đến một số tình huống không lường trước, ví dụ như thẻ <table> là một thẻ cấu trúc, sau này được lạm dụng một cách phổ biến để định dạng việc dàn trang thay vì sử dụng để cấu trúc văn bản. Tuy nhiên, một số thẻ dùng cho việc này như <blink> chỉ được hỗ trợ bởi một loại trình duyệt. Câu cảnh báo “Bạn cần trình duyệt X để xem trang này” đã trở thành một loại tuyên bố từ chối chịu trách nhiệm phổ biến trên các trang web thời bấy giờ.

CSS được phát minh để khắc phục tình trạng này bởi nó cung cấp cho các nhà thiết kế web những cách dàn trang và bố cục tinh tế, hơn nữa điều quan trọng là css được hỗ trợ bởi tất cả các trình duyệt. Đồng thời, sự xuất hiện của css cũng giúp tách các kiểu trình bày ra khỏi nội dung của các trang web, giúp việc bảo trì trang web dễ dàng hơn rất nhiều.

Những lợi ích từ CSS sẽ giúp gì cho bạn?

CSS là một cuộc cách mạng trong thế giới của ngành thiết kế web. Những lợi ích cụ thể của CSS bao gồm:

  • Bố trí kiểm soát nhiều tài liệu theo một phong cách đồng nhất.
  • Kiểm soát bố cục dàn trang chính xác hơn
  • Áp dụng để kiểm soát các cách dàn trang hiển thị phù hợp trên từng thiết bị ngoại vi xác định như (màn hình, in ấn, vv);

Trong bài học tiếp theo chúng ta có một cái nhìn sâu hơn về cách CSS thực sự hoạt động và bạn cũng sẽ biết bắt đầu sử dụng CSS từ đâu.

Học CSS cơ bản – Bài 2

CSS hoạt động như thế nào?

Trong bài học này bạn sẽ học cách để tạo ra một trang CSS đầu tiên. Bạn sẽ biết được một vài đoạn code CSS mẫu cơ bản và cần thiết để sử dụng trên trang HTML .

Có rất nhiều các thuộc tính được sử dụng trong Cascading Style Sheets (CSS) tương tự như HTML. Vì vậy, nếu bạn đã sử dụng HTML để dàn trang bạn có thể dễ dàng làm quen với chúng. Nào, bây giờ chúng ta hãy xem xét một ví dụ cụ thể.

Cú pháp CSS cơ bản

Bạn nói với chúng tôi, bạn thích một trang web có phông nền màu đỏ, vậy thì tôi sẽ làm điều đó như thế nào?

Nếu sử dụng HTML chúng ta có thể thực hiện như sau:

<body bgcolor="#FF0000"></body>

Kết quả tương tự nếu bạn sử dụng CSS như thế này

body {background-color: #FF0000;}

Cú pháp của CSS được chia làm 3 phần. phần bộ chọn (selector), phần thuộc tính (property), phần giá trị (value).

selector {property: value}

css

 

Cách áp dụng CSS vào tài liệu HTML

Có tất cả 3 cách để áp dụng CSS vào tài liệu HTML, tất cả sẽ được trình bày tiếp theo, tuy nhiên chúng tôi khuyến nghị bạn nên dùng cách thứ 3, lý do cũng sẽ được giải thích ở dưới đây.

Phương pháp 1: Kiểu nội tuyến / In-line (the attribute style)

Nếu bạn chọn cách này, để có kết quả tương tự như ví dụ ở trên, bạn sẽ phải làm như sau

<html> 
<head> 
<title>Example</title> 
</head> 

<body style="background-color: #FF0000;"> 
<p>This is a red page</p> 
</body> 

</html>
Phương pháp 2: Kiểu cục bộ / Internal (the tag style)

Đây cũng là một cách để áp dụng CSS vào trang HTML bằng cách sử dụng thẻ <style> trong đoạn <head></head>

<html> 
<head> 
<title>Example</title>
<style type="text/css"> body {background-color: #FF0000;} </style> 
</head> 

<body> 
<p>This is a red page</p> 
</body> 

</html>

Phương pháp 3: Ngoại tuyến, liên kết ngoài / External (link to a style sheet)

Đây cũng là cách phổ biến nhất được nhà thiết kế web sử dụng, trong suốt các bài hướng dẫn tiếp theo, chúng tôi khuyến khích bạn sử dụng phương pháp External. Lợi thế khi sử dụng phương pháp này đó là bạn có thể kiểm soát các kiểu trình bày hoặc bố cục dàn trang tất các văn bản HTML một cách thống nhất bằng cách thay đổi trên một trang CSS.

CSS liên kết ngoài thật chất là một tập tin văn bản (text) có phần mở rộng là .css, cũng như các tập tin khác, nó có thể được lưu trữ trên ổ cứng hoặc trên máy chủ tùy theo mục đích sử dụng của bạn.

Trong ví dụ dưới đây chúng ta sẽ đặt tên tập tin CSS này là style.css ở trong thư mục style như sau:

figure002

Để liên kết tập tin style.css vào tài liệu HTML có tên default.htm, chúng ta có thể chèn đoạn code bên dưới vào phần header của tập tin HTML, giữa hai thẻ  <head></head>, thuộc tính href chính là đường dẫn liên kết đến vị trí của tập tin style.css

<html> 
<head> 
<title>My document</title> 
<link rel="stylesheet" type="text/css" href="style/style.css" /> 
</head> 
<body> ...
</body></html>

Liên kết này khai báo cho trình duyệt biết rằng phải tham chiếu  tập tin CSS trước khi hiển thị trang HTML. Cách sử dụng này sẽ giúp chúng ta có thể liên kết một tập tin CSS đến nhiều trang HTML. Nói một cách khác, chỉ với một tập tin CSS, chúng ta có thể kiểm soát bố cục, dàn trang trên rất nhiều tài liệu HTML khác nhau.

figure003

Nếu một thẻ HTML cùng thừa hưởng một thuộc tính CSS khai báo giống nhau , mức độ ưu tiên của CSS trên các kiểu sẽ theo thứ tự sau.
1. Kiểu nội tuyến / In-line (the attribute style)
2. Kiểu cục bộ / Internal (the tag style)
3. Kiểu liên kết ngoài / External (link to a style sheet)
4. Kiểu mặc định của trình duyệt
Mức độ ưu tiên sẽ giảm dần từ trên xuống dưới.
Hãy thực hành những gì bạn vừa học

Bạn hãy mở chương trình Notepad download và tạo ra hai tập tin với nội dung bên dưới, chắc chắn rằng bạn phải lưu đúng tên và phần mở rộng .html.css 

default.htm
<html> 

<head> 
<title>My document</title> 
<link rel="stylesheet" type="text/css" href="style.css" /> 
</head> 

<body>
<h1>My first stylesheet</h1> 
</body> 

</html>
style.css
body { background-color: #FF0000;}

Bây giờ bạn hãy lưu cả hai cùng một thư mục, sau đó mở tập tin default.htm với trình duyệt bất kỳ, bạn sẽ có được một trang web với màu đỏ với phông nền như ý muốn. Chúc mừng bạn đã tạo thành công tập tin CSS đầu tiên, hãy xem tiếp bài 3 để tìm hiểu thêm các thuộc tính của CSS nhé!

Học CSS cơ bản – Bài 3

Màu sắc và phông nền

Trong bài hướng dẫn này, bạn sẽ được học cách làm thế nào để định dạng màu sắc và phông nền trên trang web. Chúng ta sẽ cùng xem xét các phương pháp để định vị trí và kiểm soát các hình ảnh dùng làm nền qua các thuộc tính CSS sau đây:

Màu: thuộc tính ‘color’

Thuộc tính color dùng để mô tả màu sắc của các phần tử HTML phía trên nền (foreground elements)

HTML elements sẽ được tạm dịch là những phần tử bao gồm thẻ HTML và nội dung bên trong của nó. Ví dụ
<p>đây là phần tử HTML</p>

Ví dụ bạn muốn tất cả tiêu đề đều có màu đỏ. Các tiêu đề này đều thuộc phần tử HTML <h1>. Đoạn code bên dưới định nghĩa phần tử <h1> có màu đỏ.

h1 {color: #ff0000;}

Giá trị thuộc tính colors có thể sử dụng hệ thập lục phân như ví dụ trên (#ff0000), hoặc sử dụng tên chuẩn  (“red”) hoặc giá trị theo hệ màu rgb (rgb(255,0,0)).

Thuộc tính ‘background-color’

Thuộc tính background-color dùng để xác định màu nền của các phần tử HTML.

Thẻ <body> chứa tất cả nội dung của tài liệu HTML. Do vậy, để thay đổi màu nền của toàn trang HTML, chúng ta sẽ áp dụng thuộc tính background-color cho nó.

Bạn cũng có thể sử dụng màu nền cho các tiêu đề và chữ. Trong ví dụ dưới đây hai màu khác nhau được áp dụng cho các phần tử <body> và <h1>.

body {background-color: #FFCC66;}
h1  {   color: #990000; background-color: #FC9804;}

Bạn lưu ý nếu có trên 2 thuộc tính, các thuộc tính phải kết thúc bằng dấu chấm, phẩy (;) như ví dụ như thẻ  <h1> ở trên.

Thuộc tính ảnh nền [background-image]

Thuộc tính CSS background-image thường được sử dụng để nhúng ảnh vào nền.

Bạn có thể sử dụng ảnh dưới đây để thử, click chuột phải và chọn “save image as

css3-logo

body {
  background-color: #FFCC66;
  background-image: url("css3-logo-300x300.png");
     }

 h1 {
  color: #990000;
  background-color: #FC9804;
    }
Lưu ý ví dụ trên, ảnh css3-logo-300×300.png được lưu cùng thư mục chứa tập tin CSS, bạn có thể sử dụng đường dẫn tương đối nếu ảnh nằm ở thư mục khác, vi dụ: ../images/ss3-logo-300×300.png hoặc dùng đường dẫn tuyệt đối, ví dụ http://thietke.website/images/css3-logo-300×300.png

XEM VÍ DỤ

Tùy chỉnh lập lại ảnh nền [background-repeat]

Ở ví dụ trên, bạn có nhận thấy rằng ảnh nền được lập lại theo chiều dọc và chiều ngang trên toàn trang, làm thế nào để kiểm soát nó? Thuộc tính background-repeat chính là cách để bạn xác định ảnh nền sẽ lập lại như thế nào hoặc không cho phép lập lại.

Bản bên dưới mô tả các giá trị khác nhau của thuộc tính background-repeat.

Value Description Example
background-repeat: repeat-x Ảnh nền lập lại theo chiều ngang Xem ví dụ
background-repeat: repeat-y Ảnh nền lập lại theo chiều dọc Xem ví dụ
background-repeat: repeat Ảnh nền lập lại theo cả chiều ngang và dọc Xem ví dụ
background-repeat: no-repeat Ảnh nền không được lập lại Xem ví dụ

Ví dụ để tránh ảnh nền lập lại, đoạn code sẽ như dưới đây:

body {
  background-color: #FFCC66;
  background-image: url("css3-logo-300x300.png");
  background-repeat: no-repeat;
    }

h1 {
  color: #990000;
  background-color: #FC9804;
   }

XEM VÍ DỤ

Cố định vị trí ảnh nền [background-attachment]

Thuộc tính background-attachment dùng để khai báo cố định vị trí ảnh nền hoặc phụ thuộc theo vị trí phần tử chứa nó.

Một ảnh nền được xác định vị trí cố định sẽ không di chuyển theo các đoạn văn bản khi người dùng di chuyển thanh cuộn của trang HTML

Bảng dưới đây mô tả 2 giá trị khác nhau của thuộc tính background-attachment.

Giá trị Mô tả
Background-attachment: scroll Ảnh sẽ di chuyển theo văn bản khi di chuyển thanh cuộn màn hình
Background-attachment: fixed Ảnh sẽ được khóa ở vị trí cố định

Đoạn code dưới đây khai báo vị trí cố định của ảnh, không di chuyển khi người xem di chuyển thanh cuộn.

 body {
   background-color: #FFCC66;
   background-image: url("css3-logo-300x300.png");
   background-repeat: no-repeat;
background-attachment: fixed;
    }

 h1 {
   color: #990000;
   background-color: #FC9804;
   }

XEM VÍ DỤ

Định vị trí ảnh nền [background-position]

Mặc định, một ảnh nền có trí ở góc trái phía trên màn hình. Thuộc tính background-position cho phép bạn thay đổi vị trí của hình nền và đặt nó ở bất cứ vị trí nào bạn muốn trên màn hình cửa sổ trình duyệt.

Có nhiều cách để xác định giá trị của thuộc tính background-position. Nhưng tất cả đều là một cặp đôi giá trị xác định tọa độ của ảnh trên màn hình. Ví dụ, giá trị ‘100px 200px’ khai báo cho trình duyệt biết rằng ảnh nền nằm ở vị trí cách lề trái 100px và lề trên 200px của cửa sổ trình duyệt.

Tọa độ cũng có thể xác định bằng giá trị phần trăm, hoặc các đơn vị (pixels, centimetres, points ….) hoặc dùng các từ mô tả chuẩn như top, bottom, center, left và right. Ảnh minh họa bên dưới sẽ giúp bạn hình dung ra các giá trị tọa độ tương đương với vị trí nào trên cửa sổ trình duyệt:

Bảng giá trị thuộc tính dưới đây cũng cho bạn những ví dụ về tọa độ

Giá trị Mô tả
background-position: 2cm 2cm Ảnh nền cách lề trái 2 cm và lề trên 2 cm Xem ví dụ
background-position: 50% 25% Ảnh nền nằm giữa hai lề trái phải và thấp hơn 1/4 lề cửa sổ trình duyệt từ trên xuống Xem ví dụ
background-position: top right Ảnh nền nằm ở góc trên bên phải cửa sổ trình duyệt Xem ví dụ

Đoạn code bên dưới khai báo ảnh nền nằm ở vị trí sát lề dưới và bên phải

 body {
     background-color: #FFCC66;
     background-image: url("css3-logo-300x300.png");
     background-repeat: no-repeat;
     background-attachment: fixed;
     background-position: right bottom;
     }

 h1 {
     color: #990000;
     background-color: #FC9804;
    }

XEM VÍ DỤ

Thuộc tính background rút gọn [background]

Thuộc tính background có thể khái báo tất cả các thuộc tính của hình nền đã liệt kê ở trên.

Sử dụng thuộc tính background bạn có thể tiết kiệm được số ký tự khai báo và dễ hiệu chỉnh hơn.

Ví dụ, hãy xem đoạn code dưới đây

 background-color: #FFCC66;
 background-image: url("css3-logo-300x300.png");
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-position: right bottom;

Nếu sử dụng thuộc tính background bạn sẽ có kết quả tương tự nhưng đoạn code sẽ ngắn hơn nhiều

 background: #FFCC66 url("css3-logo-300x300.png") no-repeat fixed right bottom;

Các thuộc tính được liệt kê theo thứ tự:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

Nếu có bất kỳ thuộc tính nào không được khai báo, giá trị mặc định sẽ được sử dụng. Ví dụ, nếu background-attachment và background-position không được khai báo trong đoạn code dưới đây:

background: #FFCC66 url("css3-logo-300x300.png") no-repeat;

Hai thuộc tính không được khai báo , nên giá trị mặc định của background-attachment là  scroll  và background-position là top left

Tổng kết

Trong bài học này, bạn đã học được một số kỹ thuật cần thiết để kiểm soát hiển thị hình nền trên các trang HTML bằng CSS. Bài tiếp theo, các bạn chắc chắn sẽ hứng thú với những kỹ thuật CSS để định dạng font chữ theo cách riêng của mình.

Học CSS cơ bản – Bài 4

Font chữ

Trong bài này bạn sẽ được học về font chữ và cách thức nó được áp dụng CSS. Chúng ta cũng sẽ xem xét cách thức chọn một số font đặc biệt dành cho web và đối mặt với các vấn đề khi sử dụng các loại font chỉ có thể hiển thị trên trang web nếu chúng được cài đặt sẵn trong máy tính cá nhân của người truy cập. Những thuộc tính CSS sau đây sẽ được phân tích:

Hệ Font [font-family]

Thuộc tính font-family được dùng để khai báo danh sách các kiểu chữ theo thứ tự ưu tiên khi được gán cho các phần tử HTML. Nếu font chữ đầu tiên được khai báo không được cài đặt sẵn trong máy tính người truy cập, trình duyệt sẽ dùng những font chữ kế tiếp trong danh sách khai báo để hiển thị.

Có hai loại tên được dùng để phân loại font chữ : family-names (tên font chữ) và generic families. (Họ font chữ). Hai tên này được giải thích dưới đây

Family-name
Thường là tên của kiểu font chữ như  “Arial”, “Times New Roman” hoặc “Tahoma”.
Generic family
Generic families là tên mô tả theo nhóm kiểu chữ có hình thức bên ngoài tương tự nhau. Thí dụ  sans-serif, đây là nhóm của các kiểu chữ không “chân”.

Bạn có thể hình dung như hình sau:

font

Khi bạn khai báo danh sách font chữ trên website, font ưu tiên sẽ được đưa lên đầu tiên, tiếp sau đó là các font chữ thay thế, thông thường danh sách font này nên cùng một generic families vì như vậy các font chữ thay thế sẽ đồng nhất kiểu dáng trong trường hợp font chữ ưu tiên không có sẵn trong máy người truy cập

Bạn hãy xem ví dụ một cách khai báo danh sách font dưới đây:

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif;}

XEM VÍ DỤ

Ở ví dụ trên, tiêu đề được đánh dấu bằng thẻ H1 sẽ hiển thị theo kiểu chữ “Arial“. Nếu font chữ này không có sẵn trong máy tính người truy cập, “Verdana” là font chữ kế tiếp được lựa chọn. Nếu tất cả font chữ này đều không có sẵn, một font bất kỳ cùng họ sans-serif sẽ được áp dụng cho các dòng tiêu đề.

Lưu ý phía trên, font chữ “Times New Roman” có vẫn khoảng trắng và đặt trong hai dấu ngoặc kép.

Font style [font-style]

thuộc tính font-style  xác định kiểu chữ có dạng normal, italic hay oblique. Ví dụ tiêu đề <h2> sẽ được hiển thị theo bằng font chữ “Times New Romance”

h1 {font-family: arial, verdana, sans-serif;}
h2 {font-family: "Times New Roman", serif; font-style: italic;}

XEM VÍ DỤ

Font variant [font-variant]

Thuộc tính font-variant dùng để xác định font chữ có kiểu normal hay small-capssmall-caps là kiểu chữ in hoa nhưng các ký tự nhỏ hơn kiểu chữ in hoa chuẩn. Xem ví dụ:

Four examples of fonts in small caps

Trong trường hợp font-variant được khai báo là  small-caps nhưng font chữ không có kiểu small-caps trình duyệt sẽ hiển thị font chữ in hoa chuẩn (uppercase).

h1 {font-variant: small-caps;}
h2 {font-variant: normal;}

XEM VÍ DỤ

Thuộc tính in đậm hoặc mảnh của font [font-weight]

Thuộc tính font-weight nhằm xác định kiểu chữ  sẽ được in đậm hoặc mảnh. Font chữ có thể được khái báo normal hoặc bold. Một vài trình duyệt chấp nhận khai báo độ in đậm của kiểu chữ bằng số từ 100-900.

p {font-family: arial, verdana, sans-serif;}
td {font-family: arial, verdana, sans-serif; font-weight: bold;}

XEM VÍ DỤ

Kích cỡ font chữ [font-size]

Kích cỡ font chữ được quyết định bởi thuộc tính font-size.

Có nhiều loại đơn vị tính như pixels, point  hay phần trăm … . Ví dụ dưới đây sẽ cho bạn hình dung ra một vài đơn vị phổ biến được sử dụng để khai báo kích cỡ font

h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

XEM VÍ DỤ

Có những điểm khác nhau then chốt  giữa các đơn vị này. Các đơn vị ‘px‘ and ‘pt‘ tạo ra các font chữ có kích cỡ cố định, trong khi đó ‘%‘ và ‘em‘ cho phép người truy cập tùy chỉnh.  Nhiều truy cập có thể là người tàn tật, người già, người có thị lực yếu hoặc do màn hình quá xấu, sử dụng đơn vị ‘%‘ or ‘em‘ sẽ giúp họ tùy chỉnh kích cỡ font chữ phù hợp.

Dưới đây là hình minh họa cách người truy cập có thể điều chỉnh kích cỡ font chữ để xem trên trình duyệt Internet Explorer

font-resize2

Thuộc tính font rút gọn [font]

Sử dụng thuộc tính font nếu bạn muốn kết hợp tất cả thuộc tính trên vào một selector để tiết kiệm dung lượng tập tin và dễ dàng quản lý.

Vi dụ đây là những thuộc tính font được áp dụng cho tag <p>:

p {
   font-style: italic;
   font-weight: bold;
   font-size: 30px;
   font-family: arial, sans-serif;
  }

Sử dụng thuộc tính rút gọn ta sẽ có dòng code gọn như sau:

p { font: italic bold 30px arial, sans-serif;  }

Thứ tự các giá trị của thuộc tính font sẽ là:

font-style | font-variant | font-weight | font-size | font-family

Tổng kết

Bạn vừa hoàn tất bài học về các thuộc tính liên quan đến font chữ trên web. Hãy nhớ rằng sử dụng CSS để quản lý cách thức hiển thị font chữ trên web sẽ giúp bạn tiết kiệm nhiều thời gian và tiện lợi. Chỉ cần thay đổi kích cỡ, kiểu font trên tập tin CSS bạn có thể thay đổi cách hiển thị của font chữ trên hàng loạt các trang web được liên kết với tập tin CSS này. Trong bài tiếp theo chúng ta sẽ học cách CSS được áp dụng vào chữ như thế nào

Học CSS cơ bản – Bài 5

Chữ

Định dạng và sắp xếp chữ luôn là vấn đề quan tâm hàng đầu đối với các nhà thiết kế web lẫn đồ họa. Trong bài học này chúng ta sẽ được học cách sử dụng CSS để chữ trên trang web được trình bày hấp dẫn và mạch lạc hơn. Những thuộc tính CSS được đề cập trong bài này bao gồm:

Thụt lề đầu dòng cho chữ  [text-indent]

Thuộc tính text-indent  điều chỉnh khối chữ trong một đoạn văn bản nhìn lịch thiệp hơn bằng cách thụt đoạn text đầu dòng trong một đoạn văn bản. Ví dụ bên dưới là cách viết  CSS để buộc đoạn văn bản có dòng đầu tiên thụt lề trái 30px được áp dụng cho phần tử <p>:

p {
  text-indent: 30px;
  }

XEM VÍ DỤ

Căn lề chữ văn bản [text-align]

Thuộc tính CSS text-align tương đương với thuộc tính HTML cũ trước kia. Chữ có thể căn theo lề trái – left, hay phải – right hoặc giữa – centred. Ngoài ra còn có căn đều – justify giúp đoạn văn bản có có lề  trái phải đều nhau. Kiểu sắp xếp văn bản này tương tự cách thức dàn trang trong các tạp chí.

Dưới đây là ví dụ các cách căn lề được áp dụng, lề phải cho chữ trong thẻ th, lề giữa cho chữ trong thẻ td và căn đều cho chữ thuộc thẻ p/code> :

th {
    text-align: right;
   }

td {
   text-align: center;
   }

p {
   text-align: justify;
  }

XEM VÍ DỤ

Trang trí chữ [text-decoration]

Thuộc tính text-decoration có thể tạo kiểu trang trí hoặc hiệu ứng cho chữ.Bạn có thể tạo các chữ có gạch dưới, gạch ngang hoặc gạch trên chữ, Ví dụ thẻ tiêu đề <h1> sẽ được gạch dưới, thẻ tiêu đề <h2> sẽ được gạch trên và thẻ tiêu đề <h3> sẽ được gạch ngang chữ.

h1 {
   text-decoration: underline;
   }

h2 {
    text-decoration: overline;
    }

 h3 {
    text-decoration: line-through;
    }

XEM VÍ DỤ

Khoảng cách chữ [letter-spacing]

Khoảng cách giữa các chữ có thể xác định thông qua thuộc tính letter-spacing. Giá trị của thuộc tính chính là khoảng cách của 2 chữ. Ví dụ, nếu bạn muốn các chữ cách nhau 3px trong các đoạn văn bản của thẻ <p> và 6px tđối với thẻ tiêu đề <h1> bạn sẽ phải việt đoạn code css như sau.

h1 {
    letter-spacing: 6px;
    }
p {
    letter-spacing: 3px;
    }

XEM VÍ DỤ

Chuyển đổi chữ  [text-transform]

Thuộc tính text-transform có thể chuyển đổi một từ thành in hoa chữ đầu tiên của một từ, in hoa tất cả chữ và ngược lại. Bạn có thể chọn kiểu chữ là capitalizeuppercase hay lowercase mà không cần quan tâm chữ gốc ở code HTML như thế nào.

Ví dụ chữ “website” có thể chuyển đổi thành “WEBSITE” hoặc  “Website”. Có tất cả 4 kiểu chuyển đổi:

capitalize
In hoa chữ đầu tiên của một từ. Ví dụ: “john doe”  sẽ trở thành “John Doe”.
uppercase
Chuyển tất cả các chữ một từ thành in hoa. Ví dụ: “john doe” sẽ trờ thành “JOHN DOE”.
lowercase
Chuyển đổi các chữ một từ bất kể có in hoa hay không trở thành bình thường. Ví dụ: “JOHN DOE” sẽ trở thành “john doe”.
none
không chuyển đổi, từ chối bất kỳ thuộc tính chuyển đổi khác – các từ sẽ trở về nguyên gốc như trong code HTML.
h1 {
    text-transform: uppercase;
   }

 li {
    text-transform: capitalize;
    }

XEM VÍ DỤ

Tổng kết

Bạn đã biết tương đối các thuộc tính của CSS, trong bài kế tiếp chúng ta sẽ học về thuộc tính CSS áp dụng cho các liên kết link

Học CSS cơ bản – Bài 6

Các liên kết – Links

Ở bài này bạn sẽ học các thuộc tính tương tự những gì bạn đã biết trong các bài trước, chúng được áp dụng lên các liên kết tạo sự thay với colors, fonts, underline, … Có một điều rất mới mà có lẽ bạn có thể chưa biết, đó là CSS cho phép bạn xác định những thuộc tính dựa vào sự tương tác của người xem với các liên kết, ví dụ như các link chưa được xem – unvisited, đã xem – visited, đang kích hoạt – active, hoặc con trỏ của chuột có đang ở trên liên kết đó không – hover . Điều này sẽ mang lại cho trang web của bạn sinh động và thú vị hơn. Để áp dụng những điều này chúng ta sẽ sử dụng một thứ được gọi là pseudo-classes (lớp giả)

pseudo-class là gì ?

pseudo-class cho phép bạn đưa vào các điều kiện hoặc sự kiện khác nhau khi định nghĩa một thuộc tính cho thẻ HTML.

Hãy xem xét ví dụ này. Như bạn đã biết, liên kết được xác định trong thẻ HTML  <a>. Do đó chúng ta có thể dùng thẻ a với vai trò là một selector trong CSS:

a {
   color: blue;
  }

Một liên kết có các trạng thái khác nhau, như liên kết đó đã được nhấp chuột vào xem hay chưa, pseudo-classes sẽ cho phép bạn định giá trị dựa vào các trạng thái này

a:link {
	color: blue; /* liên kết chưa được nhấp chuột vào xem */
	}

a:visited {
	color: red; /* liên kết đã  được nhấp chuột vào xem */
	}

Sử dụng  a:link và a:visited đúng cách để hiển thị các tình trạng liên kết chưa xem và đã xem. Nếu bạn muốn thay đổi giá trị CSS cho hành động nhập chuột trên liên kết, bạn hãy dùng pseudo-class a:active và khi chuột chỉ để trên liên kết và chưa nhấp chuột  a:hover . khi bạn sử dụng cùng lúc  a:active và a:hover .thì nên sắp xếp theo thứ tự a:hover .trước a:active sau để áp dụng đúng cách.

Bây giờ chúng ta sẽ cùng xem xét bốn trường hợp pseudo-classes cụ thể.

Pseudo-class: link

pseudo-class :link được áp dụng cho các liên kết chưa được nhấp chuột vào xem.

Đoạn code bên dưới định dạng các liên kết trong trang sẽ có màu xanh nếu chưa được xem

a:link {
	color: #6699CC;
	}

XEM VÍ DỤ

Pseudo-class: visited

pseudo-class :visited được áp dụng cho các liên kết đã được nhấp chuột vào xem, đoạn code bên dưới sẽ định dạng màu sắc các liên kết đã xem trong trang có màu tím đậm:

a:visited {
	color: #660099;
	}

XEM VÍ DỤ

Pseudo-class: active

pseudo-class :active được áp dụng các liên kết đang được nhấp chuột và được giữ trên liên kết).

Ví dụ này áp dụng liên kết có nền màu vàng khi đang nhấp chuột và giữ trên liên kết

a:active {
	   background-color: #FFFF00;
	 }

XEM VÍ DỤ

Pseudo-class: hover

pseudo-class :hover được áp dụng khi con trỏ được đặt trên liên kết

Ví dụ này cho thấy các liên kết rong trang sẽ có kiểu chữ nghiêng và màu cam khi con trỏ đặt trên liên kết:

a:hover {
	color: orange;
	font-style: italic;
	}

XEM VÍ DỤ

Ví dụ 1: Hiệu ứng khi con trỏ đặt trên liên kết

Có rất nhiều hiệu ứng thú vị khi đặt con trỏ của chuột lên liên kết. Vì thế chúng ta cùng xem xét các hiệu ứng có thể áp dụng với pseudo-class :hover.

Ví dụ 1a: khoảng cách chữ

Nếu bạn còn nhớ ở bài số 5, chúng ta đã làm quen với định dạng  khoảng cách chữ bằng thuộc tính letter-spacing. Đây là lúc chúng ta kết hợp thuộc tính này cùng với pseudo-class :hover

a:hover {
	letter-spacing: 10px;
	font-weight:bold;
	color:red;
	}

XEM VÍ DỤ

Ví dụ 1b: Chữ IN HOA và chữ thường

Cũng ở ở bài số 5 bạn đã được biết đến thuộc tính text-transform, dùng để thay đổi giữa chữa IN HOA và chữ thường, chúng ta cũng có thể áp dụng thuộc tính này vào bên dưới:

a:hover {
	text-transform: uppercase;
	font-weight:bold;
	color:blue;
	background-color:yellow;
	}

XEM VÍ DỤ

Hai ví dụ ở trên cho thấy khả năng áp dụng nhiều hiệu ứng khác nhau trên các trạng thái liên kết thông qua việc kết hợp các thuộc tính của CSS. Hãy thử một vài hiệu ứng khác mà bạn đã học.

Ví dụ 2: loại bỏ gạch dưới underline khỏi liên kết.

Một câu hỏi mà đa số các bạn gặp phải đó là làm sau bỏ dấu gạch dưới các liên kết mặc định trên trình duyệt?

Tuy nhiên, bạn nên xem xét vấn đề này kỹ lưỡng, vì dấu gạch dưới giúp cho người dùng nhận ra đâu là các liên kết trên trang web của bạn. Do đó, khi bạn có ý định loại bỏ gạch dưới của liên kết, thì hãy dùng một màu sắc nổi bật khác để giúp người dùng phân biệt rõ ràng.

Đây là lúc bạn quay về bài học số 5 về thuộc tính text-decoration , nó quyết định một liên kết sẽ có gạch dưới hay không. Nếu bạn muốn loại bỏ, đơn giản hãy thiết lập text-decoration:none .

a {
  text-decoration:none;
   }

Mặt khác, bạn có thể thiết lập text-decoration cùng với các lớp giả pseudo-classes.

a:link {
	color: blue;
	text-decoration:none;
	}

a:visited {
	color: purple;
	text-decoration:none;
	}

a:active {
	background-color: yellow;
	text-decoration:none;
	}

a:hover {
	color:red;
	text-decoration:none;
	}

XEM VÍ DỤ

Tổng kết

Trong bài này bạn đã được biết thêm về pseudo-classes, cùng với việc kết hợp các thuộc tính CSS đã học trước đó. Điều này giúp bạn hình dung những gì mà CSS có thể mang lại chó bạn trong việc thiết kế web.

Trong bài học kế tiếp, chúng tôi sẽ tiếp tục hướng dẫn bạn cách định nghĩa thuộc tính cho những phần tử cá biệt và nhóm các phần tử (ID và class)