Ads Nhà Tài Trợ

Xưởng SX Ván Ghép, Thớt Gỗ Các Loại - Nam Trung JSC
%
Xe đạp địa hình MTB Txed Brave Boy 20 20 inch Size XXS
Xe Đạp
MTB
%
Xe đạp địa hình MTB Pacific AQUILA 2.0 27.5 inch
Xe Đạp
MTB
%
Xe đạp địa hình MTB Pacific OVERRIDE 5.0 27.5 inch
Xe Đạp
MTB
%
Xe đạp địa hình MTB Exotic 2658 4.0 AHHD 26 inch
Xe Đạp
MTB

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 : 

<p style="background-color:red;padding:10px;text-align:center;font-family:Arial;font-size:15px;border-radius:25px;overflow:hidden;"><span style="color:#ffffff;"><strong>
</strong></span></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 :

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<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ữ :

<font size="2" color="red">Đây là chữ có kích thước= 2, màu đỏ.</font> Đây là chữ có kích thước= 2, màu đỏ.
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ữ = Gạch ngang chữ - code - <s>Gạch ngang chữ</s>
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://1.bp.blogspot.com/-5GRO3fIdhaU/XIX-SA06-oI/AAAAAAAAFFc/ACnWL7iILlAJt5VAdnSPyqNP7idUXissACLcBGAs/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://lh4.googleusercontent.com/-vUd7R4IMWZk/Wk2Rv1iMWnI/AAAAAAAAABU/7rROFhQ8jVYik9sws4SQzbCjO6NQDMuNACLcBGAs/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 : 
Link neo : 
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 ]

Bạn có thể thích những bài đăng này

  1. To insert a code use <i rel="pre">code_here</i>
  2. To insert a quote use <b rel="quote">your_qoute</b>
  3. To insert a picture use <i rel="image">url_image_here</i>





💰

Top Sản Phẩm Công Nghệ / Thiết Bị Điện Gia Dụng /,...
Về Trang Chủ
Điện Thoại Hỗ Trợ Làm Việc Từ Xa, Du Lịch, Chụp Ảnh,... Thiết bị công nghệ không thể dành cho Workcation, TELEWORK, WFH , người làm nghề MMO, KOC / Streamer và những người biên tập, sáng tạo nội dung Video, dân Viết Blog Kiếm Tiền Từ affiliate marketing , bổ sung và làm đa dạng nguồn tài chính cá nhân, kiếm thêm Thu Nhập Thụ Động,...

Xem Giá Bán

Lap Top thiết kế sang chảnh, sáng tạo kết hợp từ chiếc máy tính bảng và chiếc laptop gaming đi kèm những trang bị công nghệ tân tiến nhất, laptop Asus Gaming ROG Flow Z13 GZ301Z i7 12700H (LD110W), siêu phẩm hỗ trợ làm việc, học tập online, đem đến cho bạn những giây phút trải nghiệm giải trí cực đỉnh cùng laptop CPU thế hệ 12 mới nhất.

Xem Giá Bán

Flagship hiệu năng cực khủng, trang bị những công nghệ tiên tiến nâng chất lượng chụp ảnh lên một tầm cao mới, chiếc điện thoại thông minh không thể thiếu dành cho dân Workcation, TELEWORK, WFH,... những du mục số thời hiện đại, dân xê dịch thích kiếm tiền từ du lịch.

Xem Giá Bán

Điện Thoại Thông Minh kháng nước thế hệ mới, hiệu năng cực đỉnh, camera sắc nét cùng viên pin cực khủng bên trong, hứa hẹn mang đến trải nghiệm cực kỳ đáng giá, thiết bị công nghệ không thể thiếu dành cho dân Workcation, TELEWORK, WFH,... những du mục số thời hiện đại, dân xê dịch thích kiếm tiền từ du lịch.

Xem Giá Bán

Laptop mỏng nhẹ, kết hợp giữa chiếc máy tính bảng và máy tính xách tay tạo nên diện mạo thời thượng, năng động kết hợp hiệu năng mạnh mẽ vượt trội, người đồng hành cùng bạn trên mọi hành trình.

Xem Giá Bán

Laptop sang trọng, mỏng nhẹ, công nghệ 2 màn hình cảm ứng, thuận tiện trong công việc, thiết bị giải trí cực đỉnh, xử lý đồ họa mượt mà,....

Xem Giá Bán