Những thủ thuật hay Css

css hay

I. Pseudo Class Pseudo (phát âm là: sju:dou) ting Vit có ngh a là “gi, không tht”, s ĩ d nó c t tên là Pseudo Class hay gi là “Class gi” là vì nó ĩ đ đ không c gn lin vi nhng th XHTML nh nhng class đ thông th  ng bn ã bit đ bài trc . Pseudo Class s to ra thay iđ ti thành phn ca XHTML khi mt s kin nào ó s xy ra. đ Pseudo Class   c s dng thông dng nht vi các   ng liên đ đ kt khi ng  i dùng di chut qua hoc nhp vào nó. Vi nhng trình duyt mi hn (tr Internet Explorer 6) bn có th d dàng to ra hiu ng Rollover vi bt c thành phn nào trên trang ch không ch th <a>. Pseudo Class cho   n g liên k tđ Pseudo Class   c s dng nhiu nht vi các   ng liên kt đ đ (th <a>)  to ra hiu ng thay i trng thái ch mi khi ng  i đ đ dùng di chut qua nó ví d nh nhng   ng liên kt trên izwebz, đ khi bn di chut qua s có màu nn là màu xanh nht. Có tt c 4 trng thái ca   n g liên ktđ • Link: n thun là ng liên kt  báo cho ngi c bit nó là ng liên kt.đ đ đ đ đ • Visited: Ng  i c ã tng nhp chut vào link này ri.đ đ • Hover: Ng  i c di chut qua   ng liên ktđ đ • Active:   ng liên kt ang  c ng  i c nhp chut.Đ đ đ đ T  ng   ng vi 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 tm gác chuyn màu nào hay hiu ng nào thì thích hp cho   ng liên kt li, chúng ta hãy xem on code trên nh đ đ h  ng ti   n g liên kt nh th nào. o n code trên nh ngh a đ Đ đ ĩ   ng liên kt lúc:đ • Bình th  ng s có màu xanh và gch chân là giá tr mc nh.đ •   ng liên kt ã   c ng  i dùng nhp vào, nó s có màu xám.Đ đ đ • Ng  i dùng di chut lên (cha nhp) nó s có màu  và không có gch chânđ • Ng  i dùng ch nhp và gi chut nó s có màu xanh m (ít khi xy ra)đ 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. Sau này bn có th s dng Pseudo Class đ nh là 1 dng Contextual Selector  h  ng ti nhng i t  ng đ đ c th và to ra nhng hiu ng khác nhau cho các   ng link  đ nhng phn khác nhau nh thanh di chuyn, footer, liên kt bn bè … Trong 4 trng thái trên thì bn không nht thit phi khai báo c 4 trng thái. Th  ng thì ng  i ta ch khai báo 2 trng thái ch yu là :link và :hover. Còn :visited và :active thì c ng không thc s cn ũ thit lm. Trình duyt s b qua nhng trng thái không   c khaiđ báo. L u ý: Tuy nhiên  có hiu ng Rollover, bn phi khai báo :hoverđ sau :link hoc :visited. Hoc bn có th nh theo kiu LoVe Hate Pseudo Class còn có th   c áp dng cho bt c thành phn đ nào  to hiu ng Rollover ch không ch vi các   ng liên đ đ kt. Ví d h1:hover {background-color:green;} L u ý: IE6 không h tr Pseudo Class  nhng thành phn khác ngoi tr   ng liên kt. IE7đ có h  tr  Pseudo Class nhng bn phi khai báo là Strict DOCTYPE thì nó mi hot ng.đ First Child x:first-child Tính n ng này dùng  h  ng i t  ng là con “tr  ng” ca mt ă đ đ thành phn “ ông con”, niđ x là con uđ Ví d: .vi_du em:first-child {color:red;} vi code xhtml nh sau &lt;p style=&quot;em:first-child: color: red;&quot; class=&quot;vi_du&quot;&gt;Tính năng này &lt;em&gt;chủ yếu&lt;/em&gt; dùng để hướng &lt;em&gt;đối tượng&lt;/em&gt;&lt;/p&gt;  on code trên thì hai th <em> u là con ca th <p> nhng đ đ th <em> ng tr  c là con u, cho nên nó b nh h  ng bi đ đ lut trên và kt qu bn s có Tính n ng nàyă ch yu dùng  hngđ i t ngđ Pseudo Elements Pseudo Elements cho phép bn to ra nhng hiu ng c bit đ mà bn không cn phi thêm markup vào code. x:first-letter  óđ x là tên th b nh h  ng p:first-letter {font-size:300%;} Vi markup t  ng ng &lt;p&gt;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.&lt;/p&gt; x:first-line <– ni x là tên th b nh h  ng p:first-line {font-variation:small-caps;} Cái hay ca dòng code này là nu ca s trình duyt ln thì bt c ch nào nm va dòng u tiên s b IN HOA nh hình trên. đ Nu ca s bé hn, nó s y ch xung d  i và nhng ch còn đ li vn s c IN HOA.đ II. Thành ph n Block và Inline Khái nim v Inline và Block là mt khái nim ht sc c bn nhng c ng cc k quan trng trong CSS. Hiu   c tng c ũ đ đ im ca mi thành phn là chìa khóa quan trng  bn có th đ đ vn hành CSS theo ý mun. Trong bài này tôi s nói v chc n ngă ca tng thành phn. Tuy nhiên tôi s vn gi nguyên t chuyên ngành là Block và Inline mà không dch ra ting Vit là “khi” và “trong dòng” nghe cùi quá. Khi các thành phn HTML   c hin th trên trình duyt nó th  ngđ có 2 cách hin th là theo Block và Inline. Nói hình t  ng  bn đ d hiu thì các thành phn Block ging nh mt bàn c và các thành phn Inline là quân c. Các quân c nm trong bàn c và bàn c thì không bao gi nm trong quân c. ây c ng là mt Đ ũ nguyên tc c bn nht ca Inline và Block. Thành phn inline có th nm trong thành phn Block, nhng Block không th nm trong thành phn Inline. Lý thuyt thì là vy nhng hi m h khó hiu, cách tt nht là chúng ta hc t ví d  d  i. Ví d  v  Block Th <p> và <div> là hai thành phn mc nh Block ph bin đ nht. Ch khi bn khai báo trong CSS và mun bin nó thành inline vi Property là Display: inline thì nó mi thành inline. Ví d tôi có mt th <div> nh sau: Bn s thy dòng ch này chim ht  rng ca thành phn m cha nó và t ng xung hàng miđ đ Nu tôi vit tip thì dòng mi s b y xung d  i dù cho nó đ   c vit cùng hàng vi dòng  trên nm trong th <div>đ Các thành ph n Block bao g m <div>: Là thành phn trng dùng  làm “hp” cha.đ <h1> ….<h6>: Các headings <p>: Th này dùng  m u và kt thúc mt o n v n bn.đ đ đ ă <li>, <dt>, <dd>: hin th danh sách. <table>, <blockquote>, <pre> và <form> Ví d  v  thành ph n Inline Ví d tôi có mt on v n nh sau, và trong ó tôi có mt cp th đ ă đ <strong>, nó không bt thành phn nm trong nó phi xung hàng mà nó ch “nh  nhàng” chui vào gia và sng hnh phúc trong ó. đ C ng ging nh quân c nm trong bàn c vy.ũ Các thành ph n inline bao g m <span>, <a>, <em>, <br /> <img> Ví d hình mt c  i này s xut hin  trong dòng mà không ép ch xung hàng mi. Nó ch chim khong không gian ti thiu mà nó cn. Ging nh quân c ch chim mt khong không gian nht nh ca 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 ca CSS là bn không ch b ép buc s dng giá tr mc nh ca tng thành phn. Mà bn có th thay i cách hin th đ đ ca nó theo ý mình. Ví d mt thành phn <li> theo mc nh là đ dng Inline nhng bn có th bin nó thành block vi CSS t  ng ng là Display: block. ây chính là mt phn rt quan trng trong Đ thit k giao din. Nó m ra mt chân tri mi vi các cách sp xp thành phn mà ch b gii hn bng kh n ng thit k ca ă bn.   c áp dng nhiu nht là khi bn s dng <li> làm menu nh Đ rt nhiu trang web.  mc nh nu bn có mt list nh sau:đ &lt;ul&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Services&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;FAQs&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; Nó s xut hin nh sau  trình duyt • Home • About • Services • FAQs • Contact Nu bn mun nó xut hin trong cùng mt hàng thì bn 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 Bt c thành phn nào bn to ra trong code XHTML u   c đ đ bao quanh bi mt hp k c dòng ch bn gõ ra c ng có mt hpũ bao quanh nó.  giá tr mc nh   ng vin c ng nh màu sc đ đ ũ ca hp là trong sut do vy bn không thy   c. 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đ p và th h1 và màu nn là màu #EEE  bn thy   c khái nim hp 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 vi   ng vin và màu nnđ 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 nim rt c bn và c ng là quan trng nht ca ũ CSS. Bi vì nó quyt nh các thành phn trên trang web s   c đ đ xut hin nh th nào và chúng t  ng tác vi nhau ra làm sao. D  i ây là hình minh ho cho bn thy rõ   c nhng thành đ đ phn ca hp và chúng ta có th tác ng n nó nh th nàođ đ Padding: là vùng nm gia   ng vin và ni dung. Padding đ th  ng   c s dng  to ra khong trng gia   ng biên và đ đ đ ch nh 2 ví d di ây.đ on v n này có   ng vin mà không có paddingĐ ă đ on v n này có   ng vin và giá tr padding là 5px.Đ ă đ Rõ ràng bn thy  on v n th 2 d c hn và nhìn nó c ng đ ă đ ũ “d th” hn.  o n v n th 2 khi giá trđ ă border-style c khai đ báo, nó s to ra mt   ng vin bao quanh ly vùng padding.đ Border Khi khai báo   ng vin, bn nên nh luôn phi khai báo giá đ tr border-style. Nu giá tr này không   c khai báo, tt c nhng đ giá tr nh màu sc,  dày s không   c hin th. n gin là vìđ đ Đ khi giá tr border-style không   c khai báo, trình duyt s cho rng đ nó bng 0. Mt khi ã bng 0 ri thì màu sc c ng nh  dày đ ũ đ không   c xut hin là iu tt nhiên.  ví d d  i ây bn thy đ đ đ các thành phn s   c hin th nh th nào khi bn tác ng đ đ n   ng vin ca nóđ đ Hin th   ng vin vi giá tr là solidđ Hin th   ng vin vi giá tr là dottedđ Hin th   ng vin vi giá tr là dashedđ Hin th   ng vin vi giá tr là doubleđ Hin th   ng vin vi giá tr là grooveđ Hin th   ng vin vi giá tr là ridgeđ Hin th   ng vin vi giá tr là insetđ Hin th   ng vin vi giá tr là outsetđ  nhng ví d trên mi mt loi u có 3 giá tr t  ng ng và theođ th t là: border-style,border-width và border-color. Bn có th khai báo chúng riêng bit nh sau: 1 p {border-style: dashed; border-width: 3px; border-color: yellow;} hoc gp chung vào mt nh sau 1 p {border: 3px dashed yellow;} Margin Bên ngoài border là margin, nó   c dùng  to khong cách đ đ gia các thành phn. Các thành phn margin, border và padding u   c mc nh là 0. Nhng mi trình duyt li mc nh mt đ đ đ đ kiu, do vy khi vit code CSS bn nên luôn reset các giá tr này li thành 0  tránh phin phc sau này.đ 1 * {margin: 0; padding: 0;} Tính bù c a Margin Tính n ng cui cùng ca Margin mà bn cn bit là tính bù ca ă nó. Ví d  hình d  i ây tôi có ba o n v n bn và u có đ đ ă đ margin-top: 50px và margin-bottom: 30px   c xp chng lên đ nhau. Có th bn ngh vì margin-bottom ca o n v n bn trên là ĩ đ ă 30px và margin-top ca on v n bn k tip là 50px thì tng đ ă cng 2 on v n này s phi cách nhau mt khong là 80 px. đ ă Nhng trong thc t li không phi vy. Khi có hai giá tr margin   c thit lp, thì margin ln s “nut” margin bé hay nó bù vào đ nhau. Do vy  ví d di, nó ch cách nhau 50 px và khong cách gia chúng là khong cách ca margin c thit lp ln đ hn. on v n th nhtĐ ă on v n th haiĐ ă on v n th baĐ ă Code CSS 1 p {border: 1px solid red; margin: 50px 0px 30px 0px;} Cách vit rút gn . cc k quan trng trong CSS. Hiu   c tng c ũ đ đ im ca mi thành phn là chìa khóa quan trng  bn có th đ đ vn hành CSS theo ý mun. Trong bài. thu t này rt nhiu. Do vy bn hãy hiu k phn này tr  c khi tip tc sang phn sau. Bài hc rút ra   c  bài này là khi bn to giao din bng CSS