@bloggiabao
%
%
%
%

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://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 : 
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>
456





💰

Top Sản Phẩm Công Nghệ / Thiết Bị Điện Gia Dụng /,...
Về Trang Chủ
Chiến mã đường rừng
Chợ Thủy Hải Sản
Điện Thoại Samsung Galaxy S20 FE (8GB/256GB)

Xem Giá Bán

Lenovo Legion Y90 5G Chơi Game SmartPhone Snapdragon 8 Gen1 6.92 ''144Hz AMOLED E4 5600MAh 68W Siêu NFC 64MP

Xem Giá Bán

ASUS ROG Điện Thoại 6 Phiên Bản Giới Hạn Dimensity 9000 + Tặng 5G 6000MAh Pin 6.78 "165Hz AMOLED chơi Game Điện Thoại

Xem Giá Bán

Điện thoại Gaming Tecno POVA 3 (6+5GB)/128GB - Helio G88 | 7000 mAh | Sạc nhanh 33W

Xem Giá Bán

Thotgo.asia - Tel 0968 970 650 : Xưởng Sản Xuất Thớt Gỗ Các Loại
Biến Content Thành Tiền Bạc