扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
border属性 ：在网页中设置元素的边框样式。可同时设置边框宽度、边框样式、边框颜色。也可以单独设置上边、右边、下边、左边的边框。
创新互联公司是一家专注于网站建设、成都做网站与策划设计,牡丹网站建设哪家好?创新互联公司做网站,专注于网站建设十载,网设计领域的专业建站公司;建站业务涵盖:牡丹等地区。牡丹做网站价格咨询:18980820575
语法：border： border-width | border-style | border-color;
border-width ：边框宽度。可以指定长度值。如1px，1em（单位为px，pt，em等）。或者使用关键字medium（默认），thick，thin。
border-top-width：设置元素上边框宽度
border-right-width：设置元素右边框宽度
border-bottom-width：设置元素下边框宽度
border-left-width：设置元素左边框宽度
border-style ：边框样式。
border-top-style：设置元素上边框样式
border-right-style：设置元素右边框样式
border-bottom-style：设置元素下边框样式
border-left-style：设置元素左边框样式
属性值有：
none：无边框。
hidden：隐藏边框。对于表，hidden 用于解决边框冲突。
dotted：点状边框。
dashed：虚线边框。
solid：实线边框。
double：双线边框。两条单线与其间隔的和等于指定的border-width值。
groove：3D凹槽边框。
ridge：3D垄状边框。
inset：凹边框。
outset：凸边框。
border-color ：边框颜色。
1.1 边框各样式效果图
1.2 四条边颜色样式相同
1.3 四条边颜色不同，样式相同
1.4 四条边颜色相同，样式不同
1.5 设置上边框宽度、样式、颜色
1.6 设置右边框宽度、样式、颜色
1.7 设置下边框宽度、样式、颜色
1.8 设置左边框宽度、样式、颜色
以上对border边框属性进行了基础操作，大家可以根据自己的经验为边框制作出更漂亮的样式。如若大家有什么更好的见解，那就在回复区畅所欲言吧，我定会吸取精华~如有写错欢迎大家回复，我以后定会更加细心 _
font样式简写:
font:[font-style] [font-weight] [font-size] / [font-height] [font-family]
background样式简写:
background:[background-color] [background-image] [background-repeat] [background-position] / [background-size]
border样式简写:
border:[border-width] [border-style] [border-color]
其中font和background的样式属性顺序不可换，且"/"不可忽略，border的样式属性的顺序可任意。
使用缩写可以减少CSS文件的大小，并且更加易于阅读。本文主要介绍CSS的主要缩写规则，内容涉及到颜色、盒尺寸、边框、背景、字体、列表等方面的内容。CSS缩写的主要规则如下：
颜色
16进制的色彩值，如果每两位的值相同，可以缩写一半，例如：
#000000可以缩写为#000;#336699可以缩写为#369;
盒尺寸
通常有下面四种书写方法:
property:value1; 表示所有边都是一个值value1；
property:value1 value2; 表示top和bottom的值是value1,right和left的值是value2 property:value1 value2 value3; 表示top的值是value1，right和left的值是value2，bottom的值是value3 property:value1 value2 value3 value4; 四个值依次表示top,right,bottom,left 方便的记忆方法是顺时针，上右下左。具体应用在margin和padding的例子如下：
margin:1em 0 2em 0.5em;
边框(border)
边框的属性如下：
border-width:1px; border-style:solid; border-color:#000;
可以缩写为一句：border:1px solid #000;
语法是 border:width style color;
背景(Backgrounds)
背景的属性如下：
background-color:#f00; background-image:url(background.gif); background-repeat:no-repeat; background-attachment:fixed; background-position:0 0;
可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;
语法是 background:color image repeat attachment position;
你可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值，默认值为：
color: transparent image: none repeat: repeat attachment: scroll position: 0% 0%
字体(fonts)
字体的属性如下：
font-style:italic; font-variant:small-caps; font-weight:bold; font-size:1em; line-height:140%; font-family:"Lucida Grande",sans-serif;
可以缩写为一句：font:italic small-caps bold 1em/140% "Lucida Grande",sans-serif;
注意，如果你缩写字体定义，至少要定义font-size和font-family两个值。
列表(lists)
取消默认的圆点和序号可以这样写list-style:none;,
list的属性如下:
list-style-type:square; list-style-position:inside; list-style-image:url(image.gif);
可以缩写为一句：list-style:square inside url(image.gif);
基本
常识与实践
链接方式
基本
最基本的方式就是直接在html文件中指定元素样式，这种方式不推荐，因为将表现层和结构层混起来了
"style="background-image:url({{user.avatar}})"
内部链接
要为html直接增加css样式，需要在元素中增加开始和结束style标记，css规则放在里面
style
p {
color: gray;
}
/style
css文件外置
另一种方式将css文件外置，如style.css,作为样式表(stylesheets),然后从html众创建一个到这个文件的外部链接,用元素,用外部样式表的好处是要修改整个网站的样式，只要进入这个样式表，对css进行几处修改即可。如:
link type="text/css" rel="stylesheet" href="lounge.css"
多样式表
使用多个样式表,顺序很重要，一个样式表会覆盖在它上面链接的样式表中的样式,有时会有一个样式表作为页面的基础样式，要修改样式，链接这个样式表，然后在下面提供自己的样式表，指定要修改的样式,如下所示:
link rel="stylesheet" href="corperate.css"//总公司样式
link rel="stylesheet" href="beverage-division.css"//部门对总公司的样式做了一些补充，甚至可以覆盖公司的样式
link rel="stylesheet" href="lounge-seattle.css"//西雅图休闲室对样式表做了自己的调整
简写
css属性太多，能不能不费吹灰之力就指定这些属性呢？可以把同一属性的值结合起来写成一句,即简写。
简写格式
padding
padding: 0px 40px 30px 20px;,顺序是上右下左,顺时针有木有,如果都相同可以用padding: 20px;
padding-top: 0px;
padding-right: 40px;
padding-bottom:30px;
padding-left: 20px;
margin
上面的padding格式同样对margin也适用,还有另一种方法,如果上下一样，左右一致,可以这样写:margin: 0px 20px,前面指定上下，后面指定左右。
border
边框属性简写 border: thin solid #007e73;,可以用你喜欢的任何顺序。
background
背景简写 background: white url(images/cocktail.gif) repeat-x;，同样顺序随便
字体
字体简写的格式稍微复杂一些:
font : font-style font-variant font-weight font-size/line-height font-family
选择
子孙选择器
父元素和子孙元素名之间有一个空格,子孙选择器会选择所有子孙，包括这个元素中嵌套的所有,不管嵌套多深,例如
color: black;
}
直接孩子
如果要选择直接的孩子,用
color: black;
}
复杂选择
更复杂的选择,方法还是一样
color: blue;
}
规则添加
类
当我们用选择器选择元素使用一个规则时,会对所有该元素应用这个样式，所以如何单独地选择这些元素呢?这里就需要类class,class可以定义一类元素，对属于该类的所有元素应用样式.要将一个元素加入一个类，只需要增加属性”class”,并提供类名,如”greentea”:
p class="greentea"
...
/p
类元素选择器
先选择这个类中的元素,再用”.”指定一个类,最后是类名,如:
p.greentea {
color: green;
}
添加类元素
如果想对所有blockquote也做同样的处理，可以:
blockquote.greentea,p.greentea {
color: green;
}
blockquote class = "greentea"
类选择器
如果想把h1,h2,h3,p和blockquote都增加到greentea呢？要对类中的所有元素都用同一样式可以用:
.greentea{
color: green;
}
/ 省略所有元素名,只有一个点,则会应用到所有成员 /
多类元素
元素可以有多个类,例如:
p class="greentea raspberry blueberry"
特定元素选择器
如果多个选择器都选择了一个元素呢？例如上面的3个类都与p元素匹配，并且都定义了color属性，那么那个会胜出?
id
id的作用
id属性用来唯一地命名元素,通常你想对多个元素重用某些样式，才能真正发挥类的作用。但是如果只有一个元素需要样式，或者页面上只有一个元素，那就应该使用id,每个元素只能有一个id，页面中只能有一个元素拥有特定id,一个元素有一个id，同时可以属于一个或多个类,id中不允许出现空格或其他特殊字符,如
p id="footer".../p
选择元素
用id选择一个元素,需要在id前面使用一个#字符(类是[.]),id选择器只与页面中的一个元素匹配
color: red;
}//选择id为footer的任意元素
p#footer{
color: red;
}//选择id为footer的p元素
实践建议
继承
样式继承
层叠
媒体查询
link媒体查询
你可能想针对将要显示页面的设备调整页面的样式，可以用media属性,在link元素中增加这个属性.如
link rel="stylesheet" href="lounge-mobile.css" mdeia="screen and (max-device-width: 480px)"
link rel="stylesheet" href="lounge-print.css" media="print"
css媒体查询
可以直接在css中增加媒体查询,使用@media规则,把对所有媒体类型都通用的规则放在@media规则下面,例如
@media screen and (min-device-width: 481px){//当设备屏幕宽度大于480px时使用
margin-right: 250px;
}
}
@media screen and (max-device-width: 480px){//当设备屏幕小于等于480px时使用
margin-right: 30px;
}
}
@media print { // 如果要打印页面，使用该规则
body {
font-family: Times, "Times New Roman", serif;
}
}
实践建议
属性
盒模型
盒模型是css看待元素的一种方式，css将每个元素看作由一个盒子表示,每个盒子由一个内容区以及可选的内边距，边框和外边距组成。由内而外分别是:
border 边框
color 颜色
文本元素的字体颜色
body{
background-color: rgb(80%, 40% , 0%)//橙色
}
还可以指定0-255之间的一个数值,例如:
body{
background-color: rgb(204, 102, 0)//和上面颜色一致,255*80% = 204...
}
font-family 字体
大多数计算机上通常只安装了部分字体,所以选择字体时要当心,通常指定的font-family包含一个候选字体列表,他们都来自同一个字体系列,候选字体用逗号分隔,大小写字母必须一致,最后总是放一个通用的字体系列名,如果一个字体名中包含多个单词,比如Courier New，如何指定？用引号,”Courier New”,如:
body{
font-family: Verdana, Geneva, Arial, sans-serif; 一一首选字体呈降序
}
字体系列
每个font-family包含一组有共同特征的字体。共有5个字体系列:
body { font-size : small; }
h1 { font-size : 150%; }
h2 { font-size : 120%; }
注意老版IE不支持用像素指定的文本缩放
浏览器默认字体大小
其他属性
left 指定一个元素的左边所在位置
top 控制一个元素顶部的位置
background-image 在元素后面放置一个图像,如
background-image: url(images/background.gif);
//用url括起来,注意没有引号
background-repeat 背景图像是否重复
line-height: 1;//代表elixirs中的所有元素的行间距为其自己字体大小的1倍
}
width: 200px;
float: right;
}
background-color: #675c47;
color: #efe5d0;
text-align: center;
padding: 15px;
margin: 10px;
font-size: 90%;
clear: right;
}
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
}
那么页面的宽度将被限制为800px，无论浏览器宽度如何变化都不会移动,但这会导致浏览器很宽时，右边有很多空白空间
凝胶布局 Jello
width: 800px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #675c47;
margin-left: auto;
margin-right: auto;
}
绝对定位
position: absolute;
top: 100px;
right: 200px;
width: 280px;
}
display: table;
border-spacing: 10px;//于是不再需要div中的外边距
}
display: table-row;
}
display: table-cell;
background: #efe5d0 url(images/background.gif) top left;
font-size: 105%;
padding: 15px;
/ margin: 0px 10px 10px 10px; /
vertical-align: top;//确保表格两个单元格中的所有内容相对于单元格上边对齐，默认为中间对齐,可以设置为top,middle,bottom
}
display: table-cell;
background: #efe5d0 url(images/background.gif) bottom right;
font-size: 105%;
padding: 15px;
/ margin: 0px 10px 10px 10px; /
vertical-align: top;
}
为元素设置边框
要为一个元素设置边框必须指定三个样式
border-width:边框的宽度
border-color:边框颜色
border-style:边框的样式
和宽度一样，color也提供四个方向的样式，可以分别指定颜色
可选值：
style也可以分别指定四个边的边框样式，规则和width一致，
同时它也提供border-xxx-style四个样式，来分别设置四个边
示例:
边框的简写样式，通过它可以同时设置四个边框的样式，宽度，颜色
而且没有任何的顺序要求
border一指定就是同时指定四个边不能分别指定
border-top border-right border-bottom border-left
可以单独设置四个边的样式，规则和border一样，只不过它只对一个边生效
你那样写的话，必须是宽度、样式、颜色都一样。
如果不一样就得分开写。
你举得例子的正确写法是：
{
border:1px solid;
border-color:red green blue yellow;
}
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
微信二维码
移动版官网