Css

Css Styling !

Ngồi buồn nên đọc lại về Css tý . Mình đọc đến đâu tổng hợp lại đến đó luôn để cần xem lại cho dể .
Bài này mình sẽ viết về các thuộc tính liên quan đến Css styling trong css .

A. TEXT 
1. Text color : Dùng để định dạng color cho văn bản .

body { color : red; }
p1 { color : #FFFFFF;}
p2 { color : rgb(255,0,0);}

Chúng ta có thể định nghĩa thuộc tính color theo 3 cách trên . Cách nào cũng được tùy theo màu bạn muốn .
2 . Text Alignment : Thuộc tính này đùng để căn ví trí cho đoạn text .

h1 {text-align:center;}  : dùng để căn giửa .
p.date {text-align:right;}  : dùng để căn phải .
p.main {text-align:justify;}  : dùng để căn trái .

3 . Text Decoration : Thuộc tính này được sử dụng khi ta dùng thẻ <a> để tạo link . Nó sẽ mặc định là có gạch dưới link . Nếu chúng ta không muốn có gạch dưới này thì ta có thể sử dụng nó để bỏ gạch dưới đi .

a {text-decoration:none;}

Ngoài ra chúng ta còn có thể dùng để :

h1 {text-decoration:overline;}    -  Tạo gạch ngang trên đầu của text.
h2 {text-decoration:line-through;}  -  Tạo gạch ngang giữa text.
h3 {text-decoration:underline;}    - Tạo gạch chân dưới text.

4 . Text Transformation : Dùng để chuyển đổi kí tự thành chử hoa , chử thường .

p.uppercase {text-transform:uppercase;} - Chuyển kí tự sang hoa .
p.lowercase {text-transform:lowercase;} - sang chữ thường .
p.capitalize {text-transform:capitalize;} - Kí tự đầu tiên là chử hoa .

5 . Text Indentation : Dùng để định khoảng cách của dòng đầu tiền so với lề bền trái .

p {text-indent:50px;}

B . FONT 
6 . Font Family : định dạng font cho text .

p{font-family:"Times New Roman", Times, serif;}

7 . Font Style : Định dạng style cho text .

p.normal {font-style:normal;}  - Chữ thường
p.italic {font-style:italic;}  - Chữ in nghiêng
p.oblique {font-style:oblique;} - Cái này nhìn giống italic

8 . Font Size : Dùng để định kích thước cho text . Cái này có thể dùng đơn vị pixel hoặc em hoặc phần trăm …. Mình thường dùng pixel , cũng không có lý do gì đặc biệt chỉ là thói quen thôi . Hihi.

body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
h3 {font-size:40px;}

Phần trăm thì không có gì để nói rồi . Còn pixel và em thì ta có thể so sánh và đổi qua lại bằng công thức : 1pixel = 16 * 1em.
C . LINKS
9. Styling links : Dùng để tạo hiệu ứng cho link của bạn .

a:link {color:#FF0000;}      /* lúc ban đầu link */
a:visited {color:#00FF00;}  /* Khi người dùng thăm link */
a:hover {color:#FF00FF;}  /* Khi người dùng rê chuột vào link */
a:active {color:#0000FF;}  /* Khi người dùng đã chọn link */

Ở một số site người ta sử dụng decoration để tạo link cho site của họ .

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

10 . Background Color : tạo màu nền .

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

D . LIST
11 . Css List : Cái này dùng để tạo ra các biểu tượng đẹp cho list . Nói thế không biết các bạn có hiểu không . Mình cũng không biết nói sao . Các bạn có thể xem minh họa thế này .

<html>
<head>
<style type="text/css">
ul.a {list-style-type:circle;}
ul.b {list-style-type:square;}
ol.c {list-style-type:upper-roman;}
ol.d {list-style-type:lower-alpha;}
</style>
</head>

<body>
<p>Example of unordered lists:</p>

<ul class="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<ul class="b">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ul>

<p>Example of ordered lists:</p>

<ol class="c">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

<ol class="d">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Coca Cola</li>
</ol>

</body>
</html>

Kết quả sẽ xuất ra như vậy đó : Nói chung là nó tạo ra các giống như trong microsoft word nó có để chúng ta chọn sẳn .
Example of unordered lists:

  • Coffee
  • Tea
  • Coca Cola
  • Coffee
  • Tea
  • Coca Cola

Example of ordered lists:

  1. Coffee
  2. Tea
  3. Coca Cola
  1. Coffee
  2. Tea
  3. Coca Cola

Hoặc chúng ta cũng có thể dùng 1 images để làm biểu tượng :

ul
{
list-style-image: url(‘sqpurple.gif’);
}

Còn phần table nửa mà chán rồi , để khi khác tiếp tục vậy .
Phù … tạm ổn .
Tài liệu tham khảo : w3school. Ai muốn tìm hiểu chi tiết hơn thì vào đó nha.

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s