Style & CSS Include

Có nhiều cách định dạng lại văn bản

Tuy nhiên có 3 cách cơ bản là

  • Viết trong từng elements với attribute "Style"
  • Viết trong thẻ [style]
  • Include "CSS"

Attribute Styles

index.html
[!DOCTYPE html]
[html]
*[body style="background: red;"]
*[/body]
[/html]
Độ ưu tiên cao nhất, tuy nhiên không có tính kế thừa.

Style Tag

index.html
[!DOCTYPE html]
[html]
*[head]
**[style]
***.mau-nen{
****background: red;
***}
**[/style]
*[/head]
*[body class="mau-nen"]
*[/body]
[/html]
Độ ưu tiên cao thứ 2, có tính kế thừa.

Include CSS

index.html
[!DOCTYPE html]
[html]
*[head]
**
*[/head]
*[body class="mau-nen"]
*[/body]
[/html]
style.css
.mau-nen{
	*background: red;
}
Độ ưu tiên thấp, có tính kế thừa, dễ quản lý.

Cách viết CSS 1 lớp

HTML CSS Hiển thị 
[html]
*[body]
**[h1]Nội dung văn bản[/h1]
**[div class="demo"]Nội dung văn bản[/div]
**[p class="baonguyen"]Nội dung văn bản[/p]
**[p class="demo"]Nội dung văn bản[/p]
*[/body]
[/html]
 
body {background: #5bc0def}
h1 {color: #000}
.demo {color: green}
p.baonguyen {color: red}

Nội dung văn bản

Nội dung văn bản

Nội dung văn bản

Nội dung văn bản

Cách viết CSS n lớp

HTML CSS Hiển thị 
[html]
*[body]
**[h1]Nội dung văn bản[/h1]
**[div class="demo"]Nội dung văn bản[/div]
**[p class="baonguyen"]Nội dung văn bản[/p]
**[p class="demo"]Nội dung văn bản[/p]
*[/body]
[/html]
 
body {background: #5bc0def}
body h1 {color: #000}
body .demo {color: green}
body p.baonguyen {color: red}
body p.demo {color: red}

Nội dung văn bản

Nội dung văn bản

Nội dung văn bản

Nội dung văn bản

 
[html]
*[body]
**[h1 id="title"]Nội dung văn bản[/h1]
**[div class="demo"]
***[p class="baonguyen"]Nội dung văn bản[/p]
***[p class="demo"]Nội dung văn bản[/p]
**[/div]
*[/body]
[/html]
 
body {background: #5bc0def}
#title {color: #000}
.demo .baonguyen {color: xanh}
.demo .demo {color: red}

Nội dung văn bản

Nội dung văn bản

Nội dung văn bản

 
[html]
*[body]
**[h1 id="title" class="red"]Nội dung văn bản[/h1]
**[p class="red underline"]Nội dung văn bản[/p]
*[/body]
[/html]
 
.red {color: red}
.underline {text-decoration: underline;}
#title:hover {
	*color: vang;
	*text-decoration: underline;
	*text-transform: uppercase
}

Nội dung văn bản

Nội dung văn bản
Home
TOP