Lessons VI : Bài 3: Các công nghệ trong AJAX – CSS – Cú pháp & thuộc tính CSS Style

Bài 3: Các công nghệ trong AJAX – CSS – Cú pháp & thuộc tính CSS Style.

 

Cú pháp cơ bản của CSS
Cú pháp của CSS gồm ba thành phấn:

  • Thành phần lựa chọn (thường là một thẻ HTML) (Selector)
  • Thuộc tính (Property)
  • Giá trị (Value)

Thể hiện của cú pháp CSS

Code:

Selector {

Property1: Value1;

Property2: Value2;

}

Selector có thể là các thẻ/nhóm thẻ HTML, các lớp khai báo, hay bằng định danh duy nhất của phần tử.
Khi chèn các đoạn mã CSS vào trang web, trình duyệt sẽ hiển thị trang web theo cách CSS đã qui định cho nó, có ba cách để chèn CSS vào trang web.

a. External Style Sheet (sử dụng file CSS được định nghĩa thành trong file riêng)
Mỗi trang web sử dụng file CSS ngoài này đều phải sử dụng thẻ <LINK>. Thẻ <LINK> được đặt bên trong thẻ <HEAD>.

Code:

<head>

<link rel=”stylesheet” type=”text/css”

href=”mystyle.css” />

</head>

b. Internal Style Sheet (định nghĩa các style sheet ngay trong trang web)
Trong trường hợp mỗi trang web của sử dụng các định dạng khác nhau, dùng Internal Style Sheet. Để định nghĩa Internal Style Sheet, sử dụng thẻ <STYLE> đặt bên trong thẻ <HEAD>.

Code:

<head>

<style type=”text/css”>

hr {color: sienna}

p {margin-left: 20px}

body {background-image: url(“images/back40.gif”)}

</style>

</head>

c. Internal Style Sheet (style được qui định ngay trong mỗi thẻ HTML)
Đây là phương pháp kém hiệu quả nhất, không nên sử dụng phương pháp này vì đã làm mất các ưu điểm của CSS.

Code:

<p style=”color: sienna; margin-left: 20px”>

This is a paragraph

</p>

Các thuộc tính của CSS Style

Mỗi phần tử trong trang HTML có thể được qui định theo nhiều kiểu. Một phần text của một phần tử có thể được quy định theo các thuộc tính color, font size, độ đậm của phông, và kiểu chữ sử dụng. Có rất nhiều tùy chọn được áp dụng cho thuộc tính trên. Ví dụ để qui định cho một paragraph:

Code:

.robotic{

font-size: 14pt;

font-family: courier new, courier, monospace;

font-weight: bold;

color: gray;

}

 

ngocha85(Updatesofts.com)

 

  1. Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: