Đang tải... (xem toàn văn)
css hay
I. Pseudo Class Pseudo (phát âm là: sju:dou) ting Vit có ngh a là “gi, không tht”, s ĩ d nó c t tên là Pseudo Class hay gi là “Class gi” là vì nó ĩ đ đ không c gn lin vi nhng th XHTML nh nhng class đ thông th ng bn ã bit đ bài trc . Pseudo Class s to ra thay iđ ti thành phn ca XHTML khi mt s kin nào ó s xy ra. đ Pseudo Class c s dng thông dng nht vi các ng liên đ đ kt khi ng i dùng di chut qua hoc nhp vào nó. Vi nhng trình duyt mi hn (tr Internet Explorer 6) bn có th d dàng to ra hiu ng Rollover vi bt c thành phn nào trên trang ch không ch th <a>. Pseudo Class cho n g liên k tđ Pseudo Class c s dng nhiu nht vi các ng liên kt đ đ (th <a>) to ra hiu ng thay i trng thái ch mi khi ng i đ đ dùng di chut qua nó ví d nh nhng ng liên kt trên izwebz, đ khi bn di chut qua s có màu nn là màu xanh nht. Có tt c 4 trng thái ca n g liên ktđ • Link: n thun là ng liên kt báo cho ngi c bit nó là ng liên kt.đ đ đ đ đ • Visited: Ng i c ã tng nhp chut vào link này ri.đ đ • Hover: Ng i c di chut qua ng liên ktđ đ • Active: ng liên kt ang c ng i c nhp chut.Đ đ đ đ T ng ng vi 4 Pseudo Class.đ • a:link {color:blue;} • a:visited {color:gray;} • a:hover {color:red; text-decoration:none;} • a:active {color:navy;} Bây gi hãy tm gác chuyn màu nào hay hiu ng nào thì thích hp cho ng liên kt li, chúng ta hãy xem on code trên nh đ đ h ng ti n g liên kt nh th nào. o n code trên nh ngh a đ Đ đ ĩ ng liên kt lúc:đ • Bình th ng s có màu xanh và gch chân là giá tr mc nh.đ • ng liên kt ã c ng i dùng nhp vào, nó s có màu xám.Đ đ đ • Ng i dùng di chut lên (cha nhp) nó s có màu và không có gch chânđ • Ng i dùng ch nhp và gi chut nó s có màu xanh m (ít khi xy ra)đ Trên ây ch là nhng hiu ng c bn nht ca Pseudo Class đ cho ng liên kt. Sau này bn có th s dng Pseudo Class đ nh là 1 dng Contextual Selector h ng ti nhng i t ng đ đ c th và to ra nhng hiu ng khác nhau cho các ng link đ nhng phn khác nhau nh thanh di chuyn, footer, liên kt bn bè … Trong 4 trng thái trên thì bn không nht thit phi khai báo c 4 trng thái. Th ng thì ng i ta ch khai báo 2 trng thái ch yu là :link và :hover. Còn :visited và :active thì c ng không thc s cn ũ thit lm. Trình duyt s b qua nhng trng thái không c khaiđ báo. L u ý: Tuy nhiên có hiu ng Rollover, bn phi khai báo :hoverđ sau :link hoc :visited. Hoc bn có th nh theo kiu LoVe Hate Pseudo Class còn có th c áp dng cho bt c thành phn đ nào to hiu ng Rollover ch không ch vi các ng liên đ đ kt. Ví d h1:hover {background-color:green;} L u ý: IE6 không h tr Pseudo Class nhng thành phn khác ngoi tr ng liên kt. IE7đ có h tr Pseudo Class nhng bn phi khai báo là Strict DOCTYPE thì nó mi hot ng.đ First Child x:first-child Tính n ng này dùng h ng i t ng là con “tr ng” ca mt ă đ đ thành phn “ ông con”, niđ x là con uđ Ví d: .vi_du em:first-child {color:red;} vi code xhtml nh sau <p style="em:first-child: color: red;" class="vi_du">Tính năng này <em>chủ yếu</em> dùng để hướng <em>đối tượng</em></p> on code trên thì hai th <em> u là con ca th <p> nhng đ đ th <em> ng tr c là con u, cho nên nó b nh h ng bi đ đ lut trên và kt qu bn s có Tính n ng nàyă ch yu dùng hngđ i t ngđ Pseudo Elements Pseudo Elements cho phép bn to ra nhng hiu ng c bit đ mà bn không cn phi thêm markup vào code. x:first-letter óđ x là tên th b nh h ng p:first-letter {font-size:300%;} Vi markup t ng ng <p>Trên đây chỉ là những hiệu ứng cơ bản nhất của Pseudo Class cho đường liên kết.</p> x:first-line <– ni x là tên th b nh h ng p:first-line {font-variation:small-caps;} Cái hay ca dòng code này là nu ca s trình duyt ln thì bt c ch nào nm va dòng u tiên s b IN HOA nh hình trên. đ Nu ca s bé hn, nó s y ch xung d i và nhng ch còn đ li vn s c IN HOA.đ II. Thành ph n Block và Inline Khái nim v Inline và Block là mt khái nim ht sc c bn nhng c ng cc k quan trng trong CSS. Hiu c tng c ũ đ đ im ca mi thành phn là chìa khóa quan trng bn có th đ đ vn hành CSS theo ý mun. Trong bài này tôi s nói v chc n ngă ca tng thành phn. Tuy nhiên tôi s vn gi nguyên t chuyên ngành là Block và Inline mà không dch ra ting Vit là “khi” và “trong dòng” nghe cùi quá. Khi các thành phn HTML c hin th trên trình duyt nó th ngđ có 2 cách hin th là theo Block và Inline. Nói hình t ng bn đ d hiu thì các thành phn Block ging nh mt bàn c và các thành phn Inline là quân c. Các quân c nm trong bàn c và bàn c thì không bao gi nm trong quân c. ây c ng là mt Đ ũ nguyên tc c bn nht ca Inline và Block. Thành phn inline có th nm trong thành phn Block, nhng Block không th nm trong thành phn Inline. Lý thuyt thì là vy nhng hi m h khó hiu, cách tt nht là chúng ta hc t ví d d i. Ví d v Block Th <p> và <div> là hai thành phn mc nh Block ph bin đ nht. Ch khi bn khai báo trong CSS và mun bin nó thành inline vi Property là Display: inline thì nó mi thành inline. Ví d tôi có mt th <div> nh sau: Bn s thy dòng ch này chim ht rng ca thành phn m cha nó và t ng xung hàng miđ đ Nu tôi vit tip thì dòng mi s b y xung d i dù cho nó đ c vit cùng hàng vi dòng trên nm trong th <div>đ Các thành ph n Block bao g m <div>: Là thành phn trng dùng làm “hp” cha.đ <h1> ….<h6>: Các headings <p>: Th này dùng m u và kt thúc mt o n v n bn.đ đ đ ă <li>, <dt>, <dd>: hin th danh sách. <table>, <blockquote>, <pre> và <form> Ví d v thành ph n Inline Ví d tôi có mt on v n nh sau, và trong ó tôi có mt cp th đ ă đ <strong>, nó không bt thành phn nm trong nó phi xung hàng mà nó ch “nh nhàng” chui vào gia và sng hnh phúc trong ó. đ C ng ging nh quân c nm trong bàn c vy.ũ Các thành ph n inline bao g m <span>, <a>, <em>, <br /> <img> Ví d hình mt c i này s xut hin trong dòng mà không ép ch xung hàng mi. Nó ch chim khong không gian ti thiu mà nó cn. Ging nh quân c ch chim mt khong không gian nht nh ca nó mà thôi. Ch nó không nh h ng n bàn c.đ đ <input> dây là inline button Display Property Cái hay ca CSS là bn không ch b ép buc s dng giá tr mc nh ca tng thành phn. Mà bn có th thay i cách hin th đ đ ca nó theo ý mình. Ví d mt thành phn <li> theo mc nh là đ dng Inline nhng bn có th bin nó thành block vi CSS t ng ng là Display: block. ây chính là mt phn rt quan trng trong Đ thit k giao din. Nó m ra mt chân tri mi vi các cách sp xp thành phn mà ch b gii hn bng kh n ng thit k ca ă bn. c áp dng nhiu nht là khi bn s dng <li> làm menu nh Đ rt nhiu trang web. mc nh nu bn có mt list nh sau:đ <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Contact</a></li> </ul> Nó s xut hin nh sau trình duyt • Home • About • Services • FAQs • Contact Nu bn mun nó xut hin trong cùng mt hàng thì bn có th khai bao CSS nh sau: .menuNav li { display:inline; background-color:#eee; border:1px solid red; margin:0; padding:0px 10px; } III. Box Model Bt c thành phn nào bn to ra trong code XHTML u c đ đ bao quanh bi mt hp k c dòng ch bn gõ ra c ng có mt hpũ bao quanh nó. giá tr mc nh ng vin c ng nh màu sc đ đ ũ ca hp là trong sut do vy bn không thy c. Nhng vi đ CSS bn có th cho hin th ng vin c ng nh màu nn ca đ ũ bt c i t ng nào trong trang mà bn mun. ví d d i ây đ đ tôi cho hin th ng vin ca thđ p và th h1 và màu nn là màu #EEE bn thy c khái nim hp bao quanh i t ng.đ đ đ 1 2 p {border: solid 1px red; background-color:#bbeeff;} h1 {border: solid 1px red; background-color:#bbeeff;} Dòng ch vi ng vin và màu nnđ Nh ng v i CSS b n có th cho hi n th ng vi n c ng đ ũ nh màu n n c a b t c i t ng nào trong trang mà đ b n mu n. ví d d i ây tôi cho hi n th ng vi nđ đ c a th Box Model Box Model là khái nim rt c bn và c ng là quan trng nht ca ũ CSS. Bi vì nó quyt nh các thành phn trên trang web s c đ đ xut hin nh th nào và chúng t ng tác vi nhau ra làm sao. D i ây là hình minh ho cho bn thy rõ c nhng thành đ đ phn ca hp và chúng ta có th tác ng n nó nh th nàođ đ Padding: là vùng nm gia ng vin và ni dung. Padding đ th ng c s dng to ra khong trng gia ng biên và đ đ đ ch nh 2 ví d di ây.đ on v n này có ng vin mà không có paddingĐ ă đ on v n này có ng vin và giá tr padding là 5px.Đ ă đ Rõ ràng bn thy on v n th 2 d c hn và nhìn nó c ng đ ă đ ũ “d th” hn. o n v n th 2 khi giá trđ ă border-style c khai đ báo, nó s to ra mt ng vin bao quanh ly vùng padding.đ Border Khi khai báo ng vin, bn nên nh luôn phi khai báo giá đ tr border-style. Nu giá tr này không c khai báo, tt c nhng đ giá tr nh màu sc, dày s không c hin th. n gin là vìđ đ Đ khi giá tr border-style không c khai báo, trình duyt s cho rng đ nó bng 0. Mt khi ã bng 0 ri thì màu sc c ng nh dày đ ũ đ không c xut hin là iu tt nhiên. ví d d i ây bn thy đ đ đ các thành phn s c hin th nh th nào khi bn tác ng đ đ n ng vin ca nóđ đ Hin th ng vin vi giá tr là solidđ Hin th ng vin vi giá tr là dottedđ Hin th ng vin vi giá tr là dashedđ Hin th ng vin vi giá tr là doubleđ Hin th ng vin vi giá tr là grooveđ Hin th ng vin vi giá tr là ridgeđ Hin th ng vin vi giá tr là insetđ Hin th ng vin vi giá tr là outsetđ nhng ví d trên mi mt loi u có 3 giá tr t ng ng và theođ th t là: border-style,border-width và border-color. Bn có th khai báo chúng riêng bit nh sau: 1 p {border-style: dashed; border-width: 3px; border-color: yellow;} hoc gp chung vào mt nh sau 1 p {border: 3px dashed yellow;} Margin Bên ngoài border là margin, nó c dùng to khong cách đ đ gia các thành phn. Các thành phn margin, border và padding u c mc nh là 0. Nhng mi trình duyt li mc nh mt đ đ đ đ kiu, do vy khi vit code CSS bn nên luôn reset các giá tr này li thành 0 tránh phin phc sau này.đ 1 * {margin: 0; padding: 0;} Tính bù c a Margin Tính n ng cui cùng ca Margin mà bn cn bit là tính bù ca ă nó. Ví d hình d i ây tôi có ba o n v n bn và u có đ đ ă đ margin-top: 50px và margin-bottom: 30px c xp chng lên đ nhau. Có th bn ngh vì margin-bottom ca o n v n bn trên là ĩ đ ă 30px và margin-top ca on v n bn k tip là 50px thì tng đ ă cng 2 on v n này s phi cách nhau mt khong là 80 px. đ ă Nhng trong thc t li không phi vy. Khi có hai giá tr margin c thit lp, thì margin ln s “nut” margin bé hay nó bù vào đ nhau. Do vy ví d di, nó ch cách nhau 50 px và khong cách gia chúng là khong cách ca margin c thit lp ln đ hn. on v n th nhtĐ ă on v n th haiĐ ă on v n th baĐ ă Code CSS 1 p {border: 1px solid red; margin: 50px 0px 30px 0px;} Cách vit rút gn . cc k quan trng trong CSS. Hiu c tng c ũ đ đ im ca mi thành phn là chìa khóa quan trng bn có th đ đ vn hành CSS theo ý mun. Trong bài. thu t này rt nhiu. Do vy bn hãy hiu k phn này tr c khi tip tc sang phn sau. Bài hc rút ra c bài này là khi bn to giao din bng CSS
