PHP Code Vn

Trong các bài học trước, chúng ta đã được học các thuộc tính CSS về background,
color, font,… Tuy nhiên, bạn cũng nhận ra là khi áp dụng một thuộc tính CSS cho
một  thành phần nào đó ví dụ như h1, h2, p, a,  img,…  thì  toàn bộ các  thành phần
này trong trang web đều nhận thuộc tính này. Vậy có các nào để nhóm lại một số
thành phần nào đó để áp dụng một  thuộc  tính đặc biệt. Ví dụ như bạn muốn các
liên kết trên menu trang web sẽ được in hoa, và có kích cỡ lớn hơn so với liên kết
trong nội dung thì phải làm thế nào? Đây chính là vấn đề mà chúng ta sẽ cùng giải
quyết trong chương này.
7.1.  Nhóm các phần tử với class :
Ví dụ chúng ta có một đoạn mã HTML sau đây :
<p>Danh Sách Các Tỉnh, Thành Phố Của Việt Nam</p>
<ul>
<li>Hà Nội</li>
<li>TP. Hồ Chí Minh</li>
<li>Đà Nẵng</li>
<li>Thừa Thiên Huế</li>
<li>Khánh Hòa</li>
<li>Quãng Ninh</li>
<li>Tiền Giang</li>
</ul>

Một  thành phần rất quan  trọng  trong mọi website chính là  liên kết.Cũng như một
đối tượng văn bản thông thường, chúng ta hoàn toàn có thể áp dụng các thuộc tính
định dạng đã học ở 2 bài trước như định font chữ, gạch chân, màu chữ,… cho một
liên kết. Hơn nữa, CSS còn cung cấp một điều khiển đặc biệt được gọi là pseudo-
classes. Pseudo-classes cho phép bạn xác định các hiệu ứng định dạng cho một đối
tượng liên kết ở một trạng thái xác định như khi liên kết chưa được thăm (a:link),
khi rê chuột  lên  liên kết (a:hover), khi  liên kết được  thăm (a:visited) hay khi  liên
kết đang được kích hoạt – đang giữ nhấn chuột (a:active). Với điều khiển pseudo-
classes  cùng  với  các  thuộc  tính CSS  đã  học  chắc  chắn  sẽ mang  lại  rất  nhiều  ý
tưởng về trang trí liên kết cho trang web.
Sau đây chúng ta sẽ tiến hành một số ví dụ để tìm hiểu thêm về các khả năng trang
trí cho một liên kết dựa trên pseudo-classes.
Ví dụ 1: Ví dụ này chúng  ta sẽ áp dụng 4 màu sắc khác nhau cho  từng trạng  thái
liên kết: các liên kết chưa thăm có màu xanh lá; các liên kết mouse over sẽ có màu
đỏ tươi; các liên kết đã thăm sẽ có màu đỏ và các liên kết đang kích hoạt có màu
tím.
a:link {  
               color:#00FF00
           }
a:hover {  
                  color:#FF00FF
              }
a:visited {  
                    color:#FF0000
               }
a:active { color:# 662D91 }

Định dạng và thêm vào các kiểu định dạng đặc biệt cho phần nội dung một trang
web là một vấn đề quan trọng cho bất cứ nhà thiết kế web nào. Như đã nói, ở bài
học này chúng ta sẽ được tìm hiểu về các thuộc tính CSS về định dạng văn bản.
5.1.  Màu chữ (thuộc tính color):
Để  định màu  chữ  cho một  thành  phần  nào  đó  trên  trang web  chúng  ta  sử
dụng thuộc tính color. Giá trị của thuộc tính này là các giá trị màu CSS hỗ trợ.
Ví dụ sau chúng ta sẽ viết CSS để định màu chữ chung cho một trang web là đen,
cho tiêu đề h1 màu xanh da trời, cho tiêu đề h2 màu xanh lá chúng ta sẽ làm như
body {  
              color:#000
           }
h1 {  
          color:#0000FF  
      }
h2 {  
          color:#00FF00
      }

Ở bài học trước, chúng ta đã được tìm hiểu về cách định dạng màu chữ bằng CSS.
Trong bài này, chúng ta sẽ tiếp tục tìm hiểu thêm về các thuộc tính CSS liên quan
tới font chữ của các thành phần trong một trang web.
4.1.  Thuộc tính font-family:
Thuộc tính font-family có công dụng định nghĩa một danh sách ưu tiên các
font sẽ được dùng để hiển thị một thành phần trang web. Theo đó, thì font đầu tiên
được liệt kê trong danh sách sẽ được dùng để hiển thị trang web. Nếu như trên máy
tính  truy  cập  chưa  cài  đặt  font  này  thì  font  thứ  hai  trong  danh  sách  sẽ  được ưu
tiên…cho đến khi có một font phù hợp.
Có  hai  loại  tên  font  được  dùng  để  chỉ  định  trong  font-family:  family-names  và
generic families.