V trí bên trong tài li u mà các ph n t ki u m u đ c ch ra (ho c là ph n t <style> ho c là <link> c n đ c chú ý: Các ph n t ki u m u đ c đ a ra tr c
tiên s b đè lên b i chính các ph n t m u đ c đnh ngh a sau đó trong th t c a tài li u. B t c m t thi t l p thu c tính m u nào áp d ng cho m t ph n t XHTML riêng bi t s có quy n cao h n t t c các thi t l p tr c cho thu c tính đó trên ph n t đó.
Ví d gi s r ng m t tài li u XHTML MP ch a m t n i k t đ n m t b ng m u ngoài nh sau:
<link rel="stylesheet" href="your-style-sheet-url.css" type="text/css"/>
và gi đnh r ng b ng m u đ c tham chi u đ n ch a đnh ngh a sau:
p {font-family: arial; color: black}
Bây gi , n u nh m t ph n t <style> nh sau đ c đ a ra trong tài li u trên m t dòng ti p sau dòng có ch c ph n t <link>:
<style> p {color: blue} </style>
khi đó các ph n t <p> trong tài li u s s d ng font ch Arial, nh ng màu ch s là màu xanh.
Tuy nhiên, n u nh th t b đ o l i:
<style> p {color: blue} </style>
<link rel="stylesheet" href=" style-sheet-url.css" type="text/css"/>
Khi đó màu c a ch s là màu đen.
e. S d ng các thu c tính c a XHTML
style
Thu c tính style cho phép đ t ki u m u cho m t ph n t đ n l t i m t đi m trong tài li u t i n i ph n t đ c đ a ra. Tham chi u đ n nh là m t ki u m u bên trong (“inline style”), đ c tr ng này là m t ph n m r ng trong XHTML MP. Nó cho phép áp d ng các ki u m u cho các ph n t riêng l , do đó đ c u tiên h n b t
k ki u m u nào khác đ c đnh ngh a trong các ph n t <style> tr c đó hay các b ng m u ngoài:
<p style="color:red”>red</p>
M t h n ch c a vi c ch ra các ki u m u bên trong là nó làm cho vi c tìm ki m và thay đ i t t c s c c a m u khó kh n. M t h n ch khác là vi c s d ng chúng có th làm t ng kích th c c a tài li u n u nh đ c s d ng nhi u l n đ thay đ i các ki u m u c a cùng m t ph n t t i nh ng n i khác nhau bên trong tài li u.
S t t h n n u đnh ngh a m t l p ch a các ki u m u mà ta mu n áp d ng cho nhi u ph n t , ch ng h n nh sau:
.class1 {padding-bottom:4px}
Lúc này ta có th áp d ng ki u m u đnh d ng m t cách d dàng ch c n đnh ngh a đnh d ng t i m t v trí (trong b ng m u). Ví d , đ áp d ng ki u m u này cho m t phân đo n riêng bi t nào đó, b n có th s d ng thu c tính class bên trong ph n t đo n và ch ra giá tr c a thu c tính này ch ng h n là “class1” nh đ c mô t bên d i:
<p class="class1">This paragraph will have bottom padding. </p>
id
XHTML cùng v i WAP CSS có th cho phép b n gi các đnh ngh a m u c a mình t i cùng m t đi m (trong m t b ng m u hay trong m t đo n m u bên trong ph n t <head>), ngay c khi b n mu n áp d ng m t m u cho m t ph n t đ n nh ng không nh h ng đ n các ph n t khác cùng m t l ai.
Ví d nh b n có th đnh ngh a m t m u cho m t ph n t <h1> riêng l trong m t đo n m u bên trong ph n t <head> nh sau:
<head> <style>
#myid {border-width: 1; border: solid; text-align: center}
<style> </head>
và sau đó áp d ng m u này cho m t ph n t <h1> riêng nh sau:
<h1 id=”myid”> This heading has a solid order.</h1> (adsbygoogle = window.adsbygoogle || []).push({});
div và span
Ngoài vi c áp d ng các ki u m u cho m t n i dung đ c đ a ra b ng m t hay nhi u ph n t nh đã đ c bàn đ n trên, b n c ng có th s d ng các m u, đ c đnh ngh a trong b ng m u hay bên trong ph n t <head>, cho m t chu i các ph n t s d ng ph n t div hay m t chu i các các ký t bên trong s d ng ph n t span. Ví d m t b ng m u ch c các giá tr sau:
<style type=”text/css”>
div.test-case {text-align: center; color: blue} span.test-id {color: red}
</style>
Bên trong ph n thân tài li u, b n có th áp d ng ki u m u đ c đ a ra b i ph n t div cho m t chu i các đo n v n và ki u m u đ c đ a ra b i ph n t span cho m t chu i các ký t nh sau:
<div class=”test-case”>
<p>This paragraph is blue.</p>
<p>Here are <span class=”test-id”>Test51 and Test52</span> specs.</p>
Trong đo n code trên, ph n n i dung c a c hai đo n v n đ c canh gi a và s d ng font ch màu xanh, ngo i tr chu i ký t “Test51 and Test52”, đ c s d ng font màu đ .