Code html, css thường dùng làm đẹp nội dung online
Chia sẻ những đoạn code đơn giản thường dùng chủ yếu trang trí làm đẹp bài viết.
Thẻ P :
Thẻ div :
Khung viền - thẻ div :
<div style="padding: 8px; border: 2px dashed #FF4500; word-wrap: break-word;"> </div>
<p style="border-style: dotted;"></p>
<p style="border: 2px solid red;border-radius: 12px;padding:2px;"></p>
<div style="border: 1px solid black;background-color: lightblue;padding-top: 50px;padding-right: 30px;padding-bottom: 50px;padding-left: 80px;">top padding có giá trị 50px, right padding có giá trị 30px, bottom padding có giá trị 50px,và left padding có giá trị 80px.</div>
Thẻ Div chứa text :
<div style="text-align:center;">Nội_dung canh giữa</div>
<div style="text-align: justify;padding:10px"> Nội dung dàn đều chữ </div>
Chèn Icon :
<i class="fa fa-cloud"></i>
<i class="fa fa-heart"></i>
<i class="fa fa-car"></i>
<i class="fa fa-file"></i>
<i class="fa fa-bars"></i>
Chèn blockquote :
<style>
blockquote {position: relative;color: #333;border: 5px solid #0ABCB1;border-radius: 100px;padding: 30px 60px;margin: 2em 60px 60px;text-align: center;font: 16px Cambria,Georgia,sans-serif;font-weight: 600;}
blockquote:before {display: block;border: 10px solid #21B028;position: absolute;background: none repeat scroll 0 0 #FFFFFF;content: "";height: 50px;width: 50px;right: 100px;bottom: -40px;border-radius: 50px;z-index: 10;}
blockquote:after {position: absolute;background: none repeat scroll 0 0 #FFFFFF;display: block;content: "";height: 25px;border: 10px solid #5A8F00;bottom: -60px;right: 50px;width: 25px;border-radius: 25px;z-index: 10;}
@media only screen and (max-width: 500px) {
blockquote {padding: 30px 20px;margin: 1em 30px 30px;font-size:12px;}}
</style>
<center>
<blockquote>
<p> nội dung <br />
blockquote</p>
</blockquote>
</center>
Code Font chữ :
In đậm = In đậm - code - <b>In đậm</b>
Nghiêng = Nghiêng - code - <i>Nghiêng</i>
Gạch dưới = Gạch dưới - code - <u>Gạch dưới</u>
Gạch ngang chữ =
Chữ Sub Script = Chữ Sub Script - code - <sub>Sub Script</sub>
Chữ Super Script = Chữ Sub Script - code - <sup>Sub Script</sup>
Background cho chữ : code <font style="background-color: #c4c4c4; display:block">Text</font>
<span style="color:#339966; font-family:Tahoma; font-size:12pt; margin-left:12px;">Thụt đầu dòng Nội_dung</span>
<font color='red' size='6' style='line-height: 1.1;'>thuộc tính line-height giúp dãn dòng text</font>
Code chèn hình ảnh :
Code chèn chú thích cho ảnh :
<style type='text/css'>
.chuthich {
border: 1px solid #DDDDDD;
text-align: center;
background-color: #EEEEEE;
padding: 4px 4px 3px 4px;
margin-right:auto;
margin-left:auto;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
border-radius: 3px;
}
.chuthich img {
margin: 0px 0px 2px 0px;
padding: 0px;
border-top: 1px solid #ddd;
border-left: 1px solid #ddd;
border-bottom: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
}
.chuthich p.chuthich-text {
padding: 0px;
font-family: Arial, Sans-Serif;
font-size: 11px;
font-weight: normal;
line-height: 12px;
}
</style>
<div class="chuthich" style="width: auto;">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLvnEQBYFtsbmOMVVv2yCtoJWf2HxWYZOqe9GDmu4RSUFxeCKdSpp-v1a7h7mo2B1HoxYkf-Pj5TtTF03xhXV5GMHzeFzRjxzXIxp5b2lkfmhRibnCttN_SBYium4JiyEFKXrs6b9jYF8/s1600/seo-Nick-name-Park-Hang-Seo.jpg" alt=""/><p class="chuthich-text">Seo - google ads - zalo ads</p></div>
Chèn hình cơ bản :
<img src="đường dẫn đến tập tin hình ảnh" width="chiều rộng" height="chiều cao" alt="mô tả"/>
<img src="Link Hình" alt="Viết mô tả cho tấm hình" title="Nội dung tấm hình" width="n" height="n" border="n" />
Chèn hình tự co dãn :
<img alt="gỗ ghép" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVZg4uBdDm0NvZYqrtnJNDOARPTpbi2ZHrJ6JnYfjfP9MFMZqJQ_4srlrTHG1eG6FhLw_eVWjC33MOYc_LY0TEcGU_-Ib5a5OZVxXMPieAA3FGXkb2PWfRg3T2CkozPqoUIsjeR9u10Tk/s1200/goghep.jpg" style="margin-top: 5px;box-shadow: 0px 0px 12px rgba(50, 50, 50, 0.2);width: 100%;margin-bottom: 10px;border: 1px dotted #ccc;"/>
Link liên kết :
Cách 1 :
<a name="ten">Chapter 4</a>
<a href="#ten">liên kết đi đến vị trí có name = tên </a>
<a href="LINK_bài_viết#Tên_gán_cho_vị_trí ">Nội_dung</a>
<a name="Tên_gán_cho_vị_trí ">Nội_dung</a>
Cách 2 :
Link neo bằng thuộc tính id (ví dụ: <p id="noi-dung"> </p>)
Html link liên kết (đổi màu link)
<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
<a href="https://www.ivietpr.com" target="_blank">Visit web viết bài PR - quảng cáo online !</a>
Visit web viết bài PR - quảng cáo online !
Hiệu ứng text :
1. Hiệu ứng Drop cap :
<style>.firstcharacter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}
</style>
<p>
<span class="firstcharacter">D</span> rop cap chữ cái đầu tiên trong bài viết
</p>
2. Hiệu ứng :
Code Tổng hợp :
Canh hình giữa chữ theo chiều dọc :
<style>.textimage1 {
border: none; /* Remove borders */
color: white; /* Add a text color */
padding: 1px 5px; /* Add some padding */
cursor: pointer; /* Add a pointer cursor on mouse-over */
vertical-align: middle;
}
</style>
<a href="http://www.ivietpr.com/2017/09/code-html-css-thuong-dung-lam-dep-noi-dung-online.html"> <img alt="Code html, css thường dùng làm đẹp nội dung online" border="0" class="textimage1" height="30" src="http://4pvn.com.vn/img/Type/394.png" tilte="Viết nội dung online" width="60" / /></a>, Chuyên viết nội dung quảng cáo sản phẩm...
Gắn link CSS :
<link rel="stylesheet" type="text/css" href="link css">
Gắn Link JavaScript :
<script language="JavaScript" src="link jav script">
Thẻ Clear :
<div style="clear: left"></div>
<div style="clear: right"></div>
<div style="clear: both"></div>
<div style="clear: none"></div>
Link tham khảo :
https://bloggersorigin.com/blockquote-styles-customize-blockquote-blogger/
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://webcoban.vn
http://www.kienmkt.info/2016/08/chen-anh-vao-blogspot.html
http://hocwebchuan.com/reference/
https://hocwebchuan.com/tutorial/tut_css_clear.php
https://www.w3schools.com/w3css/w3css_templates.asp
https://www.geeksforgeeks.org/css-website-layout/
https://tapchilaptrinh.vn/2012/08/10/thiet_ke_bo_cuc_web_div_css/
https://css-tricks.com/snippets/css/css-grid-starter-layouts/
https://www.freecodecamp.org/news/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431/
https://codepen.io/team/sparkbox/pen/MKxogW
XEM BÀI VIẾT KHÁC CÓ NỘI DUNG LIÊN QUAN
Ivietpr.com Blog Cá Nhân, Nền Tảng Blogger, Giao Diện Fletro : Xây dựng và phát triển nội dung, theo số liệu phân tích trên cấu trúc content của nhật ký trực tuyến digitalnomad.vn [ Blog Chạy Thử Nghiệm Đa Cấu Trúc ]
