CSS+DIV之强化border属性
来源：互联网 发布：淘宝运动服女装 编辑：程序博客网 时间：2024/05/16 06:14
今天在百度搜索引擎发现了“CSS+DIV”关键词排名从第一页跌到第四页，感觉到蛮可惜的。究其原因应该是好久没有更新依葫芦画瓢学CSS+DIV系列文章造成的，原来计划教程可以与我修改网易版首页共同更新，但首页提前完成了上线了，但还不能完全适应火狐浏览器，在辛苦修改中。求教了一些CSS+DIV高手，他们给我的答案：从最简单的CSS属性学起。将学习笔记整理出来，与更多的CSS+DIV爱好者共同成长。
在网易首页改版过程中，在div层套入border边框是最常用的，它就像如同表格，可以将样式、文字、图片包装起来。border边框属性主要学习边框风格属性(border-style)、边框宽度属性(border-width)、边框颜色属性(border-color)，这三个属性可以对整个边框或者单边框架多样化设置。通过解剖学习的方法，将每一种属性分解出来，更好将基本属性学到位，学会简单的运用。
1.边框风格属性(border-style)，用来设定上下左右边框的风格，具体参数值有：
none (没有边框)、dotted (点线式边框)、dashed (破折线式边框)、solid (直线式边框)、double (双线式边框)、groove (槽线式边框)、ridge(脊线式边框)、inset (内嵌效果的边框)、outset (突起效果的边框)，下面以最为常用的直线式边框为例，代码参考写法如下：
<html>
<head>
<title>徐果萍博客</title>
<style type=”text/css”>
.apple {border-style:solid;}
</style>
</head>
<body>
<div class = ”apple”>依葫芦画瓢学CSS+DIV(09)：强化border属性</div>
</body>
</html>
2.边框宽度属性(border-width)，用来设定上下左右边框的宽度，具体参数值有：
medium (是缺省值)、thin (比medium细)、thick (比medium粗)、用长度单位定值；可用绝对长度单位(cm, mm, in, pt, pc)或者用相对长度单位 (em, ex, px)。我比较喜欢用px的单位。以直线式1像素边框为例，代码参考写法如下：
<html>
<head>
<title>徐果萍博客</title>
<style type=”text/css”>
.apple {border-style:solid; border-width:1px;}
</style>
</head>
<body>
<div class = ”apple”>依葫芦画瓢学CSS+DIV(09)：强化border属性</div>
</body>
</html>
3.边框颜色属性(border-color)，用来设定上下左右边框的颜色，颜色值可参照调色板，示例以直线式1像素红色边框为例，代码参考写法如下：
<html>
<head>
<title>徐果萍博客</title>
<style type=”text/css”>
.apple {border-style:solid; border-width:1px; border-color:red;}
</style>
</head>
<body>
<div class = ”apple”>依葫芦画瓢学CSS+DIV(09)：强化border属性</div>
</body>
</html>
将这些三个属性分解出来应该很简单的，最后一个属性示例很容易将前面两个属性结合了。其实那样的写法过于详细，可用综合写法对其代码简化。
.apple {border-style:solid; border-width:1px; border-color:red;}
写成<span style=”color:Red”>.apple {border:1px solid red;}</span>
以上border边框属性是上下左右四个边框统一设定，当然也可分开设定。如右边框，只要将参数值变为：border-right, border-right-width, border-right-style, border-right-color。现举例如下，同样运用综合写法，
<html>
<head>
<title>徐果萍博客</title>
<style type=”text/css”>
.apple {border-top:1px solid red; border-right:2px double blue; border-bottom:1px solid red; border-left:2px double blue;}
</style>
</head>
<body>
<div class = ”apple”>依葫芦画瓢学CSS+DIV(09)：强化border属性</div>
</body>
</html>
强化border属性，这是我自学时觉得应该掌握一些基础性的知识，因为这些代码最关键还是要学会运用，光看代码是没有用的，要学会自己去写代码，去发现其中错误的写法，纠正一些常规的写法，这样才能加快手工写入代码的进程。下一课时，准备分享一些font属性个人学习笔记的心得！
- CSS+DIV之强化border属性
- CSS解读之border属性
- css 之 border-radius属性
- div+css - CSS标准 - 8.5 Border properties边框属性
- css中的border属性
- CSS border 属性
- CSS border-collapse 属性
- CSS border-width 属性
- 重温CSS：Border属性
- CSS border-style 属性
- 理解css border属性
- CSS border-collapse 属性
- css border 属性
- CSS border-collapse 属性
- css中的border属性。。。。。
- CSS border-style 属性
- CSS border-spacing 属性
- CSS border-collapse 属性
- Modelsim使用详解(一)
- 用DataFormatString格式化GridView
- 常用的URL转义
- 文本编程
- WORD换行符
- CSS+DIV之强化border属性
- 天龙八部之---看虚竹一生
- ASCII码表
- COM事件机制介绍一些文章
- cramfs+yaffs嵌入式平台的实现
- 滑动条的使用
- Keycode 对照表
- 变量的存储类型
- ipsec
