Thứ Năm, 18 tháng 7, 2013

Chuyện vui cười mua sắm

0 nhận xét
Có chàng thợ sửa điều hòa tại hà nội đi mua găng tay để tặng cho bạn gái, anh ta nhờ em của cô ta đi theo để cố vấn.
Trong khi anh ta mua đôi găng tay thì cô em cũng mua 1 cái quần lót. Khi gói hàng, cô bán hàng đưa nhầm đồ găng tay đưa cho cô em , còn gói quần lót thì đưa cho anh ta. Không ngờ đến sự lầm lẫn này, anh ta gởi gói quà kèm theo 1 lá thư đến cô bạn gái.
Sau đây là nội dung của lá thư: 

" Em yêu dấu. Lần nào đi chơi với anh, em cũng  không dùng đến nó. Trời thì lạnh rồi,  nên hôm nay anh tặng nó cho em đây. Vì muốn chọn cái thích hợp với em nhất, nên anh đã nhờ em gái của em lựa giùm, vì anh thấy nócó mấy cái rất đẹp, và anh biết rõ là hai chị em đều cùng 1 cỡ như nhau.

Cô bán hàng giới thiệu cho anh 1 cái kiểu mới, mặc vào rất ấm,có phẹt-mơ-tuya để mở, nhưng khi thấy cô ta kéo phẹt-mơ-tuya thử, nó bị vướng lông bên trong nên anh chọn loại không có phẹt-mơ-tuya.

Anh cũng bảo em gái em thử cho anh xem rồi, vừa lắm, lúc cởi ra cũng không có mùi, không bị ẩm ướt. Anh hy vọng rằng lần gặp tới anh sẽ tận tay mặc nó cho em. Và sau khi mặc em hãy chìa nó ra để anh hôn lên đó 1 nụ hôn nồng thắm."

Thứ Tư, 17 tháng 7, 2013

Gửi người tôi yêu

0 nhận xét
B1: Bôi đen phần chữ số
B2: Bấm F3
B3: Bấm số 9
Bạn sẽ thấy điều khác biệt


669999999996666666666999999999966
669999999999966666699999999999966
669999999999966666699999999999966
669999999999966666699999999999966
669999999999966666699999999999966
669999999999966666699999999999966
669999999999966666699999999999966
669999999999966666699999999999966
669999999999966666699999999999966
669999999996666666666999999999966
669999999999999999999999999999966
669999999999999999999999999999966
669999996666699999996666699999966
669999666666666999666666666999966
669996666666666696666666666699966
669996666666666666666666666699966
669999666666666666666666666999966
669999996666666666666666699999966
669999999966666666666669999999966
669999999999666666666999999999966
669999999999966666669999999999966
669999999999996666699999999999966
669999999999999666999999999999966
669999999999999969999999999999966
669999999999999999999999999999966
669999999999999999999999999999966
669996666666669999966666666699966
669999966666999999999666669999966
669999966666999999999666669999966
669999966666999999999666669999966
669999966666999999999666669999966
669999966666999999999666669999966
669999966666999999999666669999966
669999966666999999999666669999966
669999966666699999996666669999966
669999996666669999966666699999966
669999999966666666666669999999966
669999999999666666666999999999966
669999999999999999999999999999966





































































Thứ Bảy, 13 tháng 7, 2013

Chơi xỏ thợ sửa điều hòa

0 nhận xét


Ba giờ chiều, chuông điện thoại đổ:
- Alô – Tớ lịch sự thưa máy vì đang sửa điều hòa
.
- Hồng à? – Ai đó hỏi.

- Dạ Hồng đang tắm anh ạ. – Giả vờ gọi với vào trong, cốt vọng vào điện thoại cho người bên kia nghe thấy: “Hồng ơi ai gọi cho em này”. Đợi năm giây rồi trả lời vào máy
- Tí anh gọi lại được không, cô ấy bảo thế.

Bên kia tắt phụt máy. Bốn giờ chiều mà chui vào buồng tắm thì đang ở đâu và làm gì?

Mấy phút sau, điện thoại gọi lại.

- Phương vẫn ở trong nhà tắm, chưa ra đâu. Không hiểu sao hôm nay lại tắm lâu thế - Tớ trả lời ngay khi máy kết nối.

- Mày là thằng nào thế? – Bên kia mất bình tĩnh.

- Anh ăn nói lịch sự nhé, đừng vô văn hóa.

- Lịch sự cái ĐM mày. Đưa ngay máy cho con kia! – Bên kia giận giữ.

Lại hướng vào hư vô, gọi to cho vọng vào máy: “Hồng ơi, thằng mất dạy nào nó gọi em này”.

Tiếng người kia rít trong máy: “Bảo nó là chồng nó gọi đây này”.

Tớ ối một tiếng rõ to rồi tắt máy, tắt luôn cả nguồn cho giống như đang bối rối sợ sệt vì bị bắt quả tang. Tha hồ mà hoang mang.

Hồng ơi, em là ai thế, chịu khó thanh minh hộ anh nhé. Anh xin lỗi, chiều nay anh ngồi rỗi không có việc gì làm. :D

Thứ Bảy, 23 tháng 3, 2013

Tạo liên kết cho blogger trong kết quả tìm kiếm

0 nhận xét
Bước 1: Đăng nhập Blogger, vào Bố cục (Layout) – Chỉnh sửa HTML (Edit HTML).
Nhớ backup Template của bạn và chọn Mở rộng Mẫu tiện ích (Expand Widget Template).

Bước 2: Tìm đoạn code sau đây (Nhấn Ctrl+F để tìm):

<b:include data='top' name='status-message'/>

Thay thế đoạn code trên bằng đoạn code sau đây:

<b:include data='top' name='status-message'/><b:include data='posts' name='breadcrumb'/>

Kế đến tìm đoạn code như bên dưới:

<b:includable id='main' var='top'>

và thêm trước nó với đoạn code sau đây:


<b:includable id='breadcrumbs' var='posts'>
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<!-- No breadcrumbs on home page -->
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<!-- breadcrumbs for the post page -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl' rel='tag'>Home</a>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast == &quot;true&quot;'> &#187;
<a expr:href='data:label.url' rel='tag'><data:label.name/></a>
</b:if>
</b:loop>
<b:else/>
</b:if>
&#187; <span><data:post.title/></span>
</b:loop>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<!-- breadcrumb for the label archive page and search pages.. -->
<p class='breadcrumbs'>
<span class='post-labels'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<data:blog.pageName/>
</span>
</p>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<p class='breadcrumbs'>
<span class='post-labels'>
<b:if cond='data:blog.pageName == &quot;&quot;'>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<b:else/>
<a expr:href='data:blog.homepageUrl'>Home</a> &#187;
<data:blog.pageName/>
</b:if>
</span>
</p>
</b:if>
</b:if>
</b:if>
</b:if>
</b:includable>

Bước 3: Thêm đoạn code dưới đây vào trước dòng ]]></b:skin>.

.breadcrumbs {
padding:5px 5px 5px 0px;
margin: 0px 0px 15px 0px;
font-size:95%;
line-height: 1.4em;
border-bottom:3px double #e6e4e3;
}

Lưu Template lại là xong. Lúc này bạn có thể kiểm tra thanh điều hướng breadcrumbs hoạt động trên blog của bạn rồi đấy.


Hiển thị ảnh logo trong kết quả tìm kiếm google

0 nhận xét

Đối với website nền tảng Blogger , các bạn chèn sau thẻ </body>
<div itemscope=”" itemtype=”http://schema.org/Recipe” style=”z-index: -100; width: 1px; height: 1px; left: -1px; top: -1px; visibility: hidden;overflow: hidden; position: absolute;”>
<span itemprop=”name”>Tiêu đề website</span>
<img itemprop=”image” src=”Link ảnh Logo” alt=”định nghĩa cho ảnh Logo” />
<div id=”static_rating” itemprop=”aggregateRating” itemscope=”" itemtype=”http://schema.org/AggregateRating”>
<span itemprop=”ratingValue”>9</span>
<span itemprop=”bestRating”>10</span>
<span itemprop=”ratingCount”>123</span>
<span><a rel=”author” href=”Link G+“>Tên Hiển thị G+</a></span>
</div>
</div>
Sau khi chèn, Vào G+ , Edit Profile và thêm Link website vào mục ”cộng tác viên cho ”

Thứ Ba, 12 tháng 3, 2013

Hiển thị bài viết theo cùng một nhãn

0 nhận xét

Hiển thị bài viết theo cùng một nhãn


<style type="text/css"> 
#itechplus-rc {width:260px;margin:0;padding:10px;overflow:hidden;border:1px solid #ccc;background:#fff} 
.itechplus-rc h2{background:#39c;color:#fff;line-height:1.6em;margin:0 0 10px;padding:4px 10px;font-weight:bold} 
.itechplus-rc ul{list-style:none;margin:0;padding:0} 
.itechplus-rc li{text-indent:0;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhezOflfX-eHtckOPurYSOM6RdwFcrOdXITv-MM4UaFdlfZVE34NsKQfXb-CPZbC9vUVRQEYaeBStY_iN0x5GnJtF_zFF939mRCgmp8oJQBQUhe1Rnrjpytf4gplxfvaGd14OrMah5S_yKB/) no-repeat 0 7px;line-height:1.5em;margin:0;padding:2px 0 2px 15px} 
.itechplus-rc h2 a:link, .itechplus-rc h2 a:visited {color:#fff} 
</style> 
<div id="itechplus-rc" class="itechplus-rc"> 
<h2><a href="http://www.suadieuhoa115.blogspot.com/search/label/Sửa điều hòa">Sửa điều hòa</a></h2> 
<script type='text/javascript'> 
numposts = 5list1 = 1sumPosts = 168; 
</script> 
<script type='text/javascript'> 
//<![CDATA[ 
function removeHtmlTag(a, b) { 
    var s = a.split("<"); 
    for (var i = 0; i < s.length; i++) { 
        if (s[i].indexOf(">") != -1) { 
            s[i] = s[i].substring(s[i].indexOf(">") + 1, s[i].length) 
        } 
    } 
    s = s.join(""); 
    s = s.substring(0, b - 1); 
    return s 

function showrecentposts(e) { 
    img = new Array(); 
    for (var i = 0; i < numposts; i++) { 
        var f = e.feed.entry[i]; 
        var g = f.title.$t; 
        var h; 
        if (i == e.feed.entry.length) break; 
        for (var k = 0; k < f.link.length; k++) { 
            if (f.link[k].rel == 'alternate') { 
                h = f.link[k].href; 
                break 
            } 
        } 
        if ("content" in f) { 
            var j = f.content.$t 
        } else if ("summary" in f) { 
            var j = f.summary.$t 
        } else 
        var j = ""; 
        s = j; 
        a = s.indexOf("<img"); 
        b = s.indexOf("src=\"", a); 
        c = s.indexOf("\"", b + 5); 
        d = s.substr(b + 5, c - b - 5); 
        if ((a != -1) && (b != -1) && (c != -1) && (d != "")) img[i] = d; 
        var l = '<table border="0" cellpadding="0" cellspacing="0" style="margin-bottom:5px;border-bottom:double #eee"><tr><td><img width="110" height="85" src="' + img[i] + '" align="left" border="0" title="' + g + '" alt="' + g + '" style="margin:5px 10px 0 0"><a href="' + h + '"><b>' + g + '</b></a><p style="margin:0;padding:5px 0 10px">' + removeHtmlTag(j, sumPosts) + ' ...</p></td></tr></table>'; 
        var m = '<li><a href="' + h + '">' + g + '</a></li>'; 
        if ((i >= 0) && (i < list1)) { 
            var n = l 
        } 
        if (i == list1) { 
            var n = '<div class="itechplus-rc"><ul>' + m 
        } 
        if ((i > list1) && (i < numposts - 1)) { 
            var n = m 
        } 
        if (i == numposts - 1) { 
            var n = m + '</ul></div>' 
        } 
        document.write(n) 
    } 

document.write("<script src=\"http://www.suadieuhoa115.blogspot.com/feeds/posts/default/-/Sửa điều hòa?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>"); 
//]]> 
</script> 
</div>

Hiển thị bài viết mới nhất

0 nhận xét


Hiển thị bài viết mới nhất

<style type="text/css">
#cotent-news {
border:#999 solid 1px;
width: 660px;
}
#top-news {
width: 460px;
height:166px;
padding:5px;
border:#bbb solid 1px;
background:#000;
font-size:12px;
}
#bottom-news {
width: 460px;
padding:5px;
}
#bottom-news-item {
width: 106px;
margin-right:9px;
float:left;
}
#left-news {
padding:5px;
border-left:2px dotted #ccc;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";
imgico= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWH_iD6-wbde07HlLfPVWhwkewyEgXrXBEYopxVNdZVj8XU2ahaTYa8xytn_L9tFxyy5tUJxC89iaOctuQXaKYkRw8uyxypzVLIRlCE2lJmHAyrT23163gsEFcEFswjeuaG8JXNOxZmXgy/s1600/1399304s1osheptmw.gif";
showRandomImg = true;
topwidth = 160;
topheight = 160;
botheight = 100;
botwidth = 105;
fntsize = 12;
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"
acolor = "#fff";
cmcolor = "#fff";
topcolor = "#fff";
aBold = true;
text = "comments";
showPostDate = true;
summaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";
botnum = 4;
numposts = 15;
label = "";
home_page = "http://www.dunghennessy.blogspot.com/";
</script>
<script src="https://sites.google.com/site/dungheineken/all.txt" type="text/javascript"></script>

Hiển thị bài viết liên quan theo nhãn

0 nhận xét
1. Vào Mẫu
2. Vào Chỉnh sửa HTML
3. Chọn Mở rộng tiện ích mẫu
4. Chèn đoạn code bên dưới vào trước thẻ đóng </head>

<script>
//<![CDATA[
function getRandomPosts(json) {
var numPosts = json.feed.openSearch$totalResults.$t;
var indexPosts = new Array();
for (var i = 0; i < numPosts; ++i) {
indexPosts[i] = i;
}
indexPosts.sort(function() {return 0.5 - Math.random()});
if (maxEntries > numPosts) {
maxEntries = numPosts;
}
var container = document.getElementById('rp-posts');
var ul = document.createElement('ul');
for (i = 0; i < maxEntries; ++i) {
var entry = json.feed.entry[indexPosts[i]];
var li = document.createElement('li');
var a = document.createElement('a');
a.title = entry.title.$t;
for (var j = 0; j < entry.link.length; ++j) {
if (entry.link[j].rel == 'alternate') {
a.href = entry.link[j].href;
break;
}
}
a.appendChild(document.createTextNode(entry.title.$t));
li.appendChild(a);
ul.appendChild(li);
}
container.appendChild(ul);
}

//]]>
</script>

<script type='text/javascript'>
var maxEntries = 4;
</script>
Trong đó: var maxEntries = 4; chính là số bài viết mà bạn muốn hiển thị cho 1 nhãn.
5- Thêm đoạn code bên dưới vào trước thẻ ]]></b:skin>:

#rp-pre {
float:right;
width:150px;
padding-left:10px;
}
#rp-content {
border:1px solid #bbb;
background:#eee;
}
#rp-title {
text-align: center;
background:#bbb;
font-weight:bold;
color:#F95107;
margin:3px;
padding-bottom:2px;
}
#rp-posts {
position:relative;
left:-20px;
}
#rp-posts a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_byhs-bMoEBZFZgWiof58CLUns7EdNZZndWbRVrjZcyRzBlyyktJsDjnocpfEW2hcY0zMEGEBS3u-DcIGdCvozZncLjvO8vFIv9LWZ6wLWBnpT05OAKV7Rn2VHgktiRq1rvsolXLYhFA/s1600/icon-related-post-namkna-blogspot-com.gif) no-repeat left;
padding-left:13px;
}

#rp-posts ul li {
list-style :none;
}

Tùy chỉnh! 

  • width:150px; là độ rộng của box bài viết liên quan.
  • background:#bbb;  màu nền chữ bài viết liên quan.
  • color:#F95107; Màu chũ tiêu đề bài viết liên quan.
  • box hiện thị ở bên phải, nếu bạn muốn nó hiển thị ở bên trái thì sửa code float:right;thành float:left;
6. Tìm đoạn code bên dưới: 
<data:post.body/>
7. Thêm đoạn code bên dưới vào trước dòng code vừa tìm được: 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='rp-pre'>
<div id='rp-content'><div id='rp-title'>Bài liên quan</div>
<div id='rp-posts'/></div></div>
<b:loop values='data:post.labels' var='label'>
<script expr:src='&quot;/feeds/posts/summary/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=getRandomPosts&amp;max-results=999&quot;' type='text/javascript'/>
</b:loop>
</b:if>
8. Lưu mẫu lại và xem kết quả.

Tự động tóm tắt bài viết

0 nhận xét

Tự động tóm tắt bài viết


1.Chèn  code CSS bên dưới vào trước thẻ ]]></b:skin>

.sumpost{text-shadow:0 1px #fff;color:#111;font-family:arial;font-size:12px;line-height:1.4;margin:0;padding:6px 8px}
.img-post img{background:#fff;float:left;margin:6px 8px 0 8px;border:1px solid #ccc;height:100px;width:120px;padding:2px}
.sumpost h2{font-size:16px;background:none;padding:0;margin:0;line-height:1.2}
.sumpost h2 a{color:#160}
.sumpost .postinfo{color:#0e3f4f;padding:3px 0 3px 8px;margin:0;border-bottom:dotted #ddd 1px}
.sumpost .postinfo .numcm{margin:0 2px 0 2px}
.sumpost .postinfo .author{margin:0 2px 0 0}
.sumpost .postinfo .numcm .num{color:#f80}
.sumpost .postinfo .label{margin:0 2px 0 2px}
.sumpost .postinfo .label a{color:#b0039a}
.readmore{float:right;margin:8px 0 0;padding:0 0 0 0}
.readmore a{color:#d7034e;padding:0}
.readmore a:hover{color:#00f}
.borderline{border-top:1px solid #bbb;border-bottom:1px solid #fff;margin:4px 0 0 0}
Trong đó:
  • font-size:16px: Là tiêu đề của bài viết trong auto readmore
  • color:#d7034e là màu chữ đọc thêm (đọc tiếp, readmore)

2. Chèn tiếp code bên dưới vào trước thẻ </head>

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
no_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifhIf258ueeASzIR3Ig81KQzd3E7UlcOyEy5AwXMJgWZTe_4Dkxx4Vu3mvgtt1iBfBs2WW7bUdW6Pgv3o5X-x5fOwJ6nBrYMRNfSxGm_VfJlJhcG87sE29_u4x00H37RbzOfGVygqzmxdF/s1600/no-image-namkna-blogspot-com.PNG";
sumposts = 500;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[e]}];e=function(){return'\\w+'};c=1};while(c--){if(k[c]){p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c])}}return p}('A C(5,8){k(5.t("<")!=-1){4 s=5.D("<");E(4 i=0;i<s.e;i++){k(s[i].t(">")!=-1){s[i]=s[i].B(s[i].t(">")+1,s[i].e)}}5=s.L("")}8=(8<5.e-1)?8:5.e-2;K(5.G(8-1)!=\' \'&&5.t(\' \',8)!=-1)8++;5=5.B(0,8-1);H 5+\'...\'}A J(w,j,d,g,n,h,o,r,m,q){4 3=M.F(w);4 l="";4 j=j;4 d=d;4 g=g;4 n=n;4 h=h;4 o=o;4 r=r;4 m=m;4 q=q;4 7=3.I("7");k(7.e==0){l=\'<3 6="7-z"><a f="\'+d+\'"><7 u="\'+O+\'"/></a></3>\'}k(7.e>=1){l=\'<3 6="7-z"><a f="\'+d+\'"><7 u="\'+7[0].u+\'"/></a></3>\'}4 x=l+\'<3 6="N"><v><a f="\'+d+\'">\'+j+\'</a></v><3 6="W"><9 6="g">\'+n+\'<b> \'+g+\'</b></9> | <9 6="V"><9 6="T">\'+h+\' </9>\'+o+\'</9> | <9 6="P">\'+m+\'<a f="\'+q+\'"> \'+r+\'</a></9></3> \'+C(3.y,U)+\'...<3 6="Q"><a f="\'+d+\'">Đọc Rếp...</a></3></3><3 6="S"></3>\';3.y=x}',59,59,'|||div|var|strx|class|img|chop|span||||urltitle|length|href|author|numcms||title|if|imgtag|Labelslabel|authorLabel|numLabel||urllabel|labelpost||indexOf|src|h2|pID|summary|innerHTML|post|function|substring|removeHtmlTag|split|for|getElementById|charAt|return|getElementsByTagName|createSummaryAndThumb|while|join|document|sumpost|no_image|label|readmore|ti|borderline|num|sumposts|numcm|postinfo'.split('|'),0,{}))
//]]>
</script>
<style><b:if cond='data:blog.pageType == "index"'>.post-footer,.post h3,h2.date-header{display:none;}</b:if></style>
Trong đó:
        + Thay 500 là số ký tự hiển thị.
        + Link ảnh màu xanh là ảnh sẽ xuất hiện khi bài viết của bạn không có ảnh đại diện. 

Tiếp theo bạn hãy tìm đến dòng code bên dưới
<data:post.body/>

3. Thay thế code vừa tìm được thành đoạn code bên dưới:


<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<p><data:post.body/></p>
</div>
<b:loop values='data:post.labels' var='label'>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.author/>&quot;,&quot;<data:top.authorLabel/>&quot;,&quot;<data:post.numComments/>&quot;,&quot;<data:top.commentLabelPlural/>&quot;,&quot;<data:label.name/>&quot;,&quot;<data:postLabelsLabel/>&quot;,&quot;<data:label.url/>&quot;);
</script>
</b:loop>
</b:if>
</b:if>

4. Cuối cùng là save lại.



Chủ Nhật, 10 tháng 3, 2013

code căn bản

0 nhận xét

Code căn bản

sửa điều hòa 



Cách tạo class, Id và cách gọi ra một module. 

Class có dạng:


.Ten-Class{

thuộc tính 1;

thuộc tính 2;

...;

}
Id có dạng:


#Ten-Id{

thuộc tính 1;

thuộc tính 2;

...;

Cách gọi ra một module


<div class='Ten-Class'> Nội dung bên trong module </div> 
Hoặc


<div id='Ten-Id'> Nội dung bên trong module </div> 
Có thể thay thẻ div bằng thẻ span.

Class là module có thể sử dụng nhiều lần.

Id là module chỉ dùng 1 lần duy nhất.



Bên dưới là các thuộc tính bạn có thể gắng vào class hoặc id.



1. Background (nền module) 

Màu nền:


Dạng thuộc tính: background: #fff;

#fff: là màu nền của module.

Đây là kết quả của thuộc tính trên.


Màu nền cho module là màu trắng
Hình nền


Dạng thuộc tính: background: url(Link Ảnh);

Link ảnh: là liên kết đến ảnh nền của module

Đây là kết quả của thuộc tính trên với link ảnh này


Sử dụng hình nền cho module




2. Border (Đường viền cho một module) 

Border qui định thuộc tính về đường viền của một module.

Border có dạng như sau: border: 2px dash #aaa;

Ý nghĩa các giá trị:

» 2px: độ dầy của đường viền

» dash: kiểu đường viền. Bao gồm các dạng sau.


  » dotted


Nội dung
  » dashed


Nội dung
  » solid


Nội dung
  » double


Nội dung
  » groove


Nội dung
  » ridge


Nội dung
  » inset


Nội dung
  » outset


Nội dung
» #aaa: màu đường viền



3. Border-radius (bo góc module) 

Thuộc tính border-radius có tác dụng bo góc cho một module.

Dạng thuộc tính: border-radius: 10px 10px 10px 10px;

Ý nghĩa từng thông số:


 » 10px: là góc trên bên trái.

 » 10px: là góc trên bên phải

 » 10px: là góc dưới bên phải

 » 10px: là góc dưới bên trái
Đây là kết quả đoạn code trên:


Code bo góc cho module
Bạn có thể thay giá trị tuyệt đối (dạng px) thành giá trị tương đối (%)

Ví dụ: border-radius: 50% 50% 50% 50%;

Và đây là kết quả:


Code bo góc cho module



4. Box-shadow (Bóng đổ cho module) 

Box-shadow là thuộc tính về bóng đổ cho module.

Dạng thuộc tính: box-shadow:2px 2px 2px 3px #333 inset;

Ý nghĩa thuộc tính: (lần lượt từ trái qua phải)


 » 2px: là bóng đổ về phía phải (giá trị âm sẽ đổ về phía trái)

 » 2px: là bóng đổ về phía dưới (giá trị âm sẽ đổ về phía trên)

 » 2px: là độ nhòe của bóng.

 » 3px: là độ lan tỏa của bóng.

 » #333: là màu của bóng đổ.

 » inset: là bóng đổ chìm vào trong (nếu muốn làm khối nổi thì bỏ cái này)
Và đây là kết quả của đoạn code trên khi có inset.


Đổ bóng cho module


Kết quả của đoạn code trên khi không có inset.


Đổ bóng cho module



5. Clear (Dừng float module) 

Thông thường khi có 1 module (ví dụ là module A) sử dụng thuộc tính float thì những module tiếp theo nó sẽ có xu hướng chiếm phần không gian mà module A không sử dụng. Để ngăn không cho các module còn lại chiếm không gian mà module A không sử dụng người ta thường dùng thuộc tính clear để giải quyết vấn đề này.

Dạng thuộc tính:

Clear: left; (không cho chiếm không gian bên trái của module A)

Clear: right; (không cho chiếm không gian bên phải của module A)

Clear: both; (không cho chiếm không gian cả 2 bên của module A)

Thông thường người ta ít dùng thuộc tính này vào css mà thường dùng đoạn code <div style='clear:both'/> bên dưới module để dừng việc float module.



6. Color (Màu chữ) 

Color qui định màu chữ trong module bao gồm màu chữ, màu liên kết, màu liên kết khi rê chuột vào...

Dạng thuộc tính: color: #cc0000;

Với #cc0000 là màu chữ.

Ví dụ mình có đoạn css sau:


.module{ color:#779933 }  /* Màu chữ trong module */

.module a{ color:#991177 }  /* Màu liên kết trong module */

.module a:hover{ color:#aa8822 }  /* Màu liên kết khi rê chuột vào. */



7. Display (Sắp xếp hoặc ẩn module) 

Display qui định về cách sắp xếp module hoặc ẩn module.

Display có một trong những dạng sau:

display: inline; (module sắp xếp cùng 1 hàng)





Module 1 
Module 2 
Module 3 

display: block; (module sắp xếp thành nhiều block chồng lên nhau)


Module 1
Module 2
Module 3
display: none; (module sẽ bị ẩn khi dùng thuộc tính này)



8. Font (Kiểu chữ trong module) 

Font qui định về những thuộc tính liên quan đến chữ như kiểu chữ, cỡ chữ, im đậm, in nghiêng...

Dạng thuộc tính:

Sử dụng kết hợp font: italic bold 30px Georgia;


Ý nghĩa từng thuộc tính:

italic: Chữ in nghiêng (có thể bỏ)

bold: chữ in đậm (có thể bỏ)

30px: cỡ chữ

georgia: kiểu chữ
Sử dụng đơn lẻ từng thuộc tính:


font-family: arial; (qui định kiểu chữ)
font-size: 30px; (qui định cỡ chữ)
font-style: italic; (in nghiêng)
font-weight:bold; (in đậm)
Chú ý: Chữ có gạch chân không sử dụng thuộc tính này mà dùng text-decoration:underline;



9. Height - Width (Chiều cao - rộng module) 

Thuộc tính height (width) qui định về chiều cao (rộng) của module.

Height: chiều cao


Dạng thuộc tính: height:150px;

Ý nghĩ thuộc tính:

150px là chiều cao của module.

Bạn có thể thay địa chỉ tuyệt đối (dạng px) thành địa chỉ tương đối (dạng %)

Ví dụ: height:30%;

      Width: chiều rộng


Dạng thuộc tính: width:50%;

Ý nghĩ thuộc tính:

50% là chiều rộng của module.

Bạn có thể thay địa chỉ tương đối (dạng %) thành địa chỉ tuyệt đối (dạng px)

Ví dụ: width:300px;



10. Line-height (Chiều cao dòng chữ) 

Thuộc tính line-height qui định về chiều cao dòng chữ.

Dạng thuộc tính:


line-height:2;

line-height:2;

line-height:2;
line-height:4;

line-height:4;

line-height:4;
line-height:25px;

line-height:25px;

line-height:25px;
line-height:200%;

line-height:200%;

line-height:200%;



11. list-style (dấu • định dạng đầu link) 

Thông thường trong các thủ thuật hoặc trong 1 template hay tiện ích linklist thường có các code dạng như sau:

<ul>

<li><a href="href="http://www.dvt.com.vn/">DVT Hà Nam</a></li>

<li><a href="http://www.dvt.com.vn/p/sitemap.html">Sitemap</a></li>

<li><a href="http://www.dvt.com.vn/search/label/Download?&max-results=6">Download</a></li>

<li><a href="Liên Kết...">Nội dung...</a></li>

</ul>

Và khi hiển thị ra ngoài thì đoạn code trên sẽ có dạng như sau:


  • • DVT Hà Nam
  • • Sitemap
  • • Download
  • • Nội dung...
Bạn thấy đầu mỗi dòng link có 1 cái chấm tròn không được đẹp lắm. Và dấu chấm tròn này do thuộc tính list-style qui định.

Dạng thuộc tính

list-style:none; (không hiển thị dấu chấm tròn.)


  • DVT Hà Nam
  • Sitemap
  • Download
  • Nội dung...
list-style: disc url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1_6xrQOuP_kTodYkCh5-y-RQDxfPlSIfrSYfxDeKfrjgGUxEXr9pPXQpjgJOibvau0igsIKxygqw4PXWJC7yYeWD2IGCXMP_my8ht2FyaD_mbuMSP4_4vHjJ0Mt0Fy2ANau55iIRVAf-s/s1600/iconhover.png); (dùng ảnh ở liên kết làm dấu chấm)


  •  DVT Hà Nam
  •  Sitemap
  •  Download
  •  Nội dung...
list-style:upper-alpha; (thay dấu chấm bằng ký tự ABC)


  • A. DVT Hà Nam
  • B. Sitemap
  • C. Download
  • D. Nội dung...
list-style:decimal; (thay dấu chấm bằng số 1-2-3-4)


  • 1. DVT Hà Nam
  • 2. Sitemap
  • 3. Download
  • 4. Nội dung...



12. Margin (khoảng cách giữa các module) 

Margin qui định khoảng cách từ module hiện tại đến module kề với nó.

Dạng thuộc tính:

Margin: 10px 20px 30px 40px;

Ý nghĩa các thuộc tính:

10px: khoãng cách từ module đến module bên trên

20px: khoãng cách từ module đến module bên trái

30px: khoãng cách từ module đến module bên dưới

40px: khoãng cách từ module đến module bên phải

Đây là kết quả: (bạn chú ý khoảng cách từ module đến những module xung quanh)


Module A
Chú ý: Bạn có thể thay giá trị tuyệt đối (dạng px) bằng giá trị tương đối (dạng %)




Margin: 0 auto;
0: khoãng cách từ module đến phía trên và dưới.

auto: cách đều trái phải.

Đây là kết quả:


Module A



13. Max-height (Chiều cao tối đa module) 

Max-height (Min-height)  là thuộc tính qui định chiều cao tối đa (tối thiểu) cho một module.

Dạng thuộc tính:


Max-height:150px;
Min-height:100px;
Kết quả của thuộc tính trên đây:


Khi chiều cao nội dung nhỏ hơn chiều cao module thì chiều cao module sẽ bằng min-height



Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.

Khi chiều cao nội dung lớn hơn chiều cao module thì chiều cao module sẽ bằng max-height.
Thuộc tính max-height thường đi kèm với thuộc tính overflow để giải quyết vấn đề cho phần nội dung bị thừa ra ngoài. Ví dụ:


Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.

Kết hợp thuộc tính max-height:150px; với overflow:auto; thì module được tạo ra sẽ như thế này.




14. Opacity (Độ trong suốt của một module) 

Opacity là thuộc tính qui định về độ trong suốt của module.

Dạng thuộc tính: opacity:0.5;

0.5: độ trong suốt của module. Giá trị của thuộc tính nằm trong đoạn từ 0 đến 1

Đây là kết quả mình áp dụng thuộc tính opacity cho module A.


Module B
Module A


15. Padding (Khoãng cách từ biên module đến phần nội dung bên trong) 

Padding qui định về khoảng cách từ phần nội dung đến biên của module.

Dạng thuộc tính (tương tự như margin)

Padding: 10px 10px 10px 10px;

Kết quả:


Padding: 10px 10px 10px 10px;
Padding: 70px 10px 30px 50px;


Padding: 70px 10px 30px 50px;
Ý nghĩa các thuộc tính:

70px: khoãng cách từ nội dung đến biên trên module

10px: khoãng cách từ nội dung đến biên trái module

30px: khoãng cách từ nội dung đến biên dưới module

50px: khoãng cách từ nội dung đến biên phải module



16. Text (Thuộc tính về chữ của module) 

Text là thuộc tính qui định về chữ của module. Bao gồm các vấn đề sau:

text-align:left; chữ canh lề trái

text-align:right; chữ canh lề phải

text-align:center; chữ canh giữa

text-align:justify; chữ canh đều 2 bên

text-decoration:underline;


gạch chân dòng chữ
text-decoration:overline;


gạch trên dòng chữ
text-decoration:line-through;


gạch ngang dòng chữ
text-decoration:blink;


chữ nhấp nháy (cái này hình như chrome ko hỗ trợ)
text-transform:lowercase;


chuyển tất cả về chữ thường
text-transform:uppercase;


CHUYỂN TẤT CẢ VỀ CHỮ HOA
text-transform:capitalize;


Viết Hoa Chữ Đầu



17. Z-index (Sắp xếp module trên dưới)

Chú ý: Bạn có thể kết hợp nhiều thuộc tính khác nhau vào một module theo dạng

.module_name{

thuộc tính thứ nhất;

thuộc tính thứ 2;

thuộc tính thứ 3;

...

}
Ví dụ mình có 1 class sau:

.module_name{

background: #ccc;
border: 1px solid #aaa;
border-radius: 30px 0px 30px 0px;
box-shadow:1px 1px 2px 2px #333;
color:#991177;
font: italic bold 16px Georgia;
height: 100px;
width: 300px;
Margin: 10px 10px 10px 10px;
Padding: 10px 10px 10px 10px;
text-decoration:blink;
text-align:center;
text-transform:uppercase;

}