欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> CSS 边框即CSS border-border边框样式颜色、边框样式、边框宽度的语法结构与应用案例教程篇
一、 边框基础知识
CSS 边框即CSS border是控制对象的边框边线宽度、颜色、虚线、实线等样式CSS属性。同时大家可以进入DIVCSS5提供查看：/shouce/c_border.shtml
边框border知识教程篇
二、Html原始边框与DIV+CSS边框对照
控制边框：
border=&1& bordercolor=&#000000&
说明：控制表格边框宽度为1px，为黑色，默认为实线样式边框。
三、border边框语法
1、四个边框
border-left 设置左边框，一般单独设置左边框样式使用
border-right 设置右边框，一般单独设置右边框样式使用
border-top 设置上边框，一般单独设置上边框样式使用
border-bottom 设置下边框，一般单独设置下边框样式使用,有时可将下边框样式作为效果应用。
2、四边相同边框border简写
#divcss5{border:1px solid #00F}
设置了divcss5对象盒子1px像素蓝色实线边框
3、边框三个样式
通常我们可以对边框设置宽度（厚度）、边框样式、边框颜色这三个属性与参数。
1）、边框颜色：border-color:#000
2）、边框厚度（宽度）：border-width:1px
使用数字+单位设置边框厚度宽度，如1px(边框厚度宽度为1像素)，边框必须为正数字，大于0的数值。否则设置边框border样式无效。
3）、border边框样式：border-style:solid
边框样式值如下：
none : 　无边框。与任何指定的border-width值无关
hidden : 　隐藏边框。IE不支持
dotted : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线（常用）
dashed : 　在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线（常用）
solid : 　实线边框（常用）
double : 　双线边框。两条单线与其间隔的和等于指定的border-width值
groove : 　根据border-color的值画3D凹槽
ridge : 　根据border-color的值画菱形边框
inset : 　根据border-color的值画3D凹边
outset : 　根据border-color的值画3D凸边
4）、边框样式截图：
边框border-style样式效果图
四、CSS单独设置左边框、右边框、上边框、下边框
以缩写方式写上、下、左、右边框单独CSS样式设置方法
1、1px黑色虚线上边框
border-top:1px dashed #000
2、1px黑色实线下边框
border-bottom:1px solid #000
3、1px黑色虚线左边框
border-left:1px dashed #000
4、1px黑色实线右边框
border-right:1px solid #000
五、常用推荐边框样式
我们通常使用主流浏览器兼容边框样式有：
1、实线边框：solid
Border:1px solid #000 设置对象1px（像素）宽厚的黑色实线边框。
2、虚线边框：dashed
Border:1px dashed #000 设置对象1px（像素）宽厚的黑色虚线边框。
六、css border边框用处
设置对象边框样式，设置单独上边框、下边框、左边框、右边框样式，实现美化美观。边框起到分割、规划布局作用。
七、border边框样式优化简写图文教程
CSS border边框属性语法结构分析图（简写优化的边框border）
八、css边框应用案例代码
描述：为了观察案例效果我们设置一个为200px，1px,红色实线边框的盒子
#divcss5{height:100width:200border:1px solid #F00}
对应片段：
&div id=&divcss5&&我的高度为100px,宽度为200px&/div&
九、css border边框案例截图
边框border样式应用示范案例截图
十、css边框border总结
我们使用设置边框border样式，一般我们使用简写表达式进行设置对象边框border样式，这样节约代码简化代码作用。无论是单独设置一个边的边框还是四边边框，我们都尽量缩写方式简写CSS边框代码，CSS 边框优化简写，常见对对象设置使用属性代码：border:1px solid #000;。
十一、三边有边而一边没有设置技巧
如左右下有边框并且样式为黑色1PX宽度实线边框，而上边没有边框。
CSS 代码： border:1px solid #000; border-top:
注意border:1px solid #000; 和border-top:前后顺序不能调换。因为CSS读取有从上到下、从左到右读取原理，而先设置了整个边框样式，后再加上声明顶部上边边框为&none&没有意思，即实现该实例要的样式。从而无需分别设置下、左、右，从而节约一定代码。
如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • ()• • ()• ()• • • • • • • • • • •
必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• &最新文章NEWS• • • • • • • • • • 相关文章RELATED• • • • • • • • • • CSS EFFECTS / CSS MODULE如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 14:00
原创：本文 DIVCSS5版权所有。
学习与资源分享平台欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 文字粗体字如何实现 文字粗体如何设置？字体加粗与粗体实现篇！
DIVCSS5为大家介绍两种对文本文字粗体字体加粗方法：
一、使用html 加粗标签
使用或即可对文字粗体。
1、分别对应语法如下：
&strong&&strong&
2、应用案例
1）、html案例完整代码（可以拷贝测试）：
&!DOCTYPE&html&&xmlns=&http://www.w3.org/1999/xhtml&&&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&粗体实现&DIVCSS5案例&&&我是正常字体&&我被b粗体&&我被strong粗体&&&
2）、html粗体截图：
html粗体标签实现文字粗体加粗
以上是使用两种粗体标签实现html文字粗体，字体加粗方法，希望大家能灵活掌握与应用。
二、使用CSS样式实现文字粗体显示
布局中，使用实现文字字体粗体比较多的，只需要对对象设置一个粗体样式属性即可实现文本粗体，又称为文字粗体。
1、css粗体样式基础
1）、单词与介绍
，值为可以为从100到900，和bold，最常用font-weight的值为bold，也是所有浏览器均兼容。
2）、css 粗体语法：
div{font-weight:bold}&
这样就让所有对象内文字字体加粗
2、粗体css案例
1)、加粗粗体案例（div+css布局案例）（大家可以拷贝使用和测试）
&!DOCTYPE&html&&xmlns=&http://www.w3.org/1999/xhtml&&&&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&粗体实现&DIVCSS5案例&&.bold{&font-weight:bold}&&&&我是正常字体&&class=&bold&我被font-weight粗体&&&
2）、加粗案例截图
css样式font-weight粗体用法案例截图
三、关于字体文本粗体总结
样式粗体与html标签粗体 加粗方式
这里我们介绍和CSS样式实现文字粗体两种方式，大家在实际使用时候根据需求选择粗体样式方式。
四、相关扩展阅读
7、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 12:34
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> 在给文字加上超链接（）后，字体就被默认自动加上下划线样式，但可以通过实现取消去掉全网页超链接的文字字体被加下划线样式。
所需样式单词：
去掉取消超链接字体下划线的：
a{text-decoration:none}&
DIVCSS5通过实例演示超链接字体下划线的去掉取消。
一、未去掉默认下划线DIV CSS实例 & - &
1、超链接未去掉下划线的代码：
&!&&&&charset=&utf-8&&&DIVCSS5未取消去掉下划线&&&欢迎来到&href=&/&DIVCSS5!&&&
2、未使用CSS去掉下划线效果截图
未去掉超链接字体下划线截图
二、使用css去掉字体下划线实例
1、去掉取消超链接的css+：
&!DOCTYPE&html&&&&charset=&utf-8&&&DIVCSS5未取消去掉下划线&&a{&text-decoration:none}&&&&欢迎来到&href=&/&DIVCSS5!&&&
使用了a{ text-decoration:none}去掉字体下划线样式
2、css取消字体下划线效果截图
css div去掉下划线截图
3、去掉下划线在线演示：
4、下载案例
扩展了解相关CSS教程
2、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 16:11
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台您现在的位置：&& &
> 给文本添加删除线
给文本添加删除线
编辑: Tony
来源:网上收集
有时候在一些网店里面经常看到 市场及，本店价格。然后用删除线在一个价格上使用，那么html代码是怎么实现的呢
给文本添加双行删除线
网页模板素材免费下载-免费模板网
延伸阅读：
栏目最近更新
栏目本月排行
栏目总排行
免责声明:本站部分资源来自互联网收集，版权归原创者所有，如果侵犯了你的权益，请通知我们，我们会及时删除侵权内容，谢谢合作！
Copyright&
Inc.All rights reserved. 备案号：
微信公众号