您的位置：首页 > Web前端 > CSS

CSS 整理（1）

2015-08-01 10:15 621 查看
CSS 指层叠样式表 (Cascading Style Sheets)

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
浏览器缺省设置
外部样式表
内部样式表（位于 <head> 标签内部）
内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权
 


外部样式表    <link> 标签链接到外部样式表

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>


内部样式表    使用 <style> 标签在文档头部定义内部样式表

<head>
<style type="text/css">
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
</style>
</head>


内联样式   表现和内容混杂在一起

要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。
<p [code]style
="color: sienna; margin-left: 20px">
This is a paragraph
</p>[/code]

CSS 属性组：
动画
背景
边框和轮廓
盒（框）
颜色
内容分页媒体
定位
可伸缩框
字体
生成内容
网格
超链接
行框
列表
外边距
Marquee
多列
内边距
分页媒体
定位
打印
Ruby
语音
表格
文本
2D/3D
转换
过渡
用户界面


CSS 背景属性（Background）

属性描述CSS
background在一个声明中设置所有的背景属性。1
background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。1
background-color设置元素的背景颜色。1
background-image设置元素的背景图像。1
background-position设置背景图像的开始位置。1
background-repeat设置是否及如何重复背景图像。1
background-clip规定背景的绘制区域。3
background-origin规定背景图片的定位区域。3
background-size规定背景图片的尺寸。3
body
{
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}


JavaScript 语法：object.style.background="white url(paper.gif) repeat-y"
1.background-color 属性为元素设置一种纯色。这种颜色会填充元素的内容、内边距和边框区域，扩展到元素边框的外边界（但不包括外边距）

background-color:yellow;

background-color:#00ff00;

background-color:rgb(255,0,255);


JavaScript 语法：object.style.backgroundColor="#00FF00"
2.background-position 属性设置背景图像的起始位置。  为了在 Mozilla 中实现此效果，background-attachment 属性必须设置为 "fixed"。

background-position:center;

background-position: 30% 20%;

background-position: 50px 100px;

background-position: bottom center

JavaScript 语法：object.style.backgroundPosition="center"
3.background-size 属性规定背景图像的尺寸。 如果只设置一个值，则第二个值会被设置为 "auto"。
background-size:100px 100px;

background-size:200px;

background-size:50%;


JavaScript 语法：object.style.backgroundSize="60px 80px"
4.background-repeat 属性设置是否及如何重复背景图像

值描述
repeat默认。背景图像将在垂直方向和水平方向重复。
repeat-x背景图像将在水平方向重复。
repeat-y背景图像将在垂直方向重复。
no-repeat背景图像将仅显示一次。
inherit规定应该从父元素继承 background-repeat 属性的设置。
JavaScript 语法：object.style.backgroundRepeat="repeat-y"
5.background-origin 属性规定 background-position 属性相对于什么位置来定位。

值描述测试
padding-box背景图像相对于内边距框来定位。测试
border-box背景图像相对于边框盒来定位。测试
content-box背景图像相对于内容框来定位。测试
6.background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动
值描述
scroll默认值。背景图像会随着页面其余部分的滚动而移动。
fixed当页面的其余部分滚动时，背景图像不会移动。
inherit规定应该从父元素继承 background-attachment 属性的设置。
7.background-image 属性为元素设置背景图像。元素的背景占据了元素的全部尺寸，包括内边距和边框，但不包括外边距。

JavaScript 语法：object.style.backgroundImage="url(stars.gif)"
<style type="text/css">
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center;
}
</style>


CSS 边框属性（Border 和 Outline）

属性描述CSS
border在一个声明中设置所有的边框属性。1
border-bottom在一个声明中设置所有的下边框属性。1
border-bottom-color设置下边框的颜色。2
border-bottom-style设置下边框的样式。2
border-bottom-width设置下边框的宽度。1
border-color设置四条边框的颜色。1
border-left在一个声明中设置所有的左边框属性。1
border-left-color设置左边框的颜色。2
border-left-style设置左边框的样式。2
border-left-width设置左边框的宽度。1
border-right在一个声明中设置所有的右边框属性。1
border-right-color设置右边框的颜色。2
border-right-style设置右边框的样式。2
border-right-width设置右边框的宽度。1
border-style设置四条边框的样式。1
border-top在一个声明中设置所有的上边框属性。1
border-top-color设置上边框的颜色。2
border-top-style设置上边框的样式。2
border-top-width设置上边框的宽度。1
border-width设置四条边框的宽度。1
outline在一个声明中设置所有的轮廓属性。2
outline-color设置轮廓的颜色。2
outline-style设置轮廓的样式。2
outline-width设置轮廓的宽度。2
border-bottom-left-radius定义边框左下角的形状。3
border-bottom-right-radius定义边框右下角的形状。3
border-image简写属性，设置所有 border-image-* 属性。3
border-image-outset规定边框图像区域超出边框的量。3
border-image-repeat图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。3
border-image-slice规定图像边框的向内偏移。3
border-image-source规定用作边框的图片。3
border-image-width规定图片边框的宽度。3
border-radius简写属性，设置所有四个 border-*-radius 属性。3
border-top-left-radius定义边框左上角的形状。3
border-top-right-radius定义边框右下角的形状。3
box-decoration-break 3
box-shadow向方框添加一个或多个阴影。3
1.border 简写属性在一个声明设置所有的边框属性。

值描述
border-width规定边框的宽度。参阅：border-width 中可能的值。
border-style规定边框的样式。参阅：border-style 中可能的值。
border-color规定边框的颜色。参阅：border-color 中可能的值。
inherit规定应该从父元素继承 border 属性的设置
JavaScript 语法：object.style.border="3px solid blue"
p
{
border: medium double rgb(250,0,255)
}


2.border-color 属性设置四条边框的颜色。
border-color:red green blue pink;
(上-->右-->下-->左)
border-color:red green blue;
(上-->右、左-->下)
border-color:red green;
(上、下-->左、右)
border-color:red;
border-color:#ff0000 #0000ff;

 

3.border-style 属性用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

值描述
none定义无边框。
hidden与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。
dotted定义点状边框。在大多数浏览器中呈现为实线。
dashed定义虚线。在大多数浏览器中呈现为实线。
solid定义实线。
double定义双线。双线的宽度等于 border-width 的值。
groove定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge定义 3D 垄状边框。其效果取决于 border-color 的值。
inset定义 3D inset 边框。其效果取决于 border-color 的值。
outset定义 3D outset 边框。其效果取决于 border-color 的值。
inherit规定应该从父元素继承边框样式。
border-style: groove dashed dotted
 
4.border-width 简写属性为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。 只有当边框样式不是 none 时才起作用。

值描述
thin定义细的边框。
medium默认。定义中等的边框。
thick定义粗的边框。
length允许您自定义边框的宽度。
inherit规定应该从父元素继承边框宽度。

p.five
{
border-style: solid;
border-width: 5px 10px 1px medium
}

5.outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
   轮廓线不会占据空间，也不一定是矩形。  所有浏览器都支持 outline 属性（如果规定了 !DOCTYPE，则 IE8 支持 outline 属性）
p
{
border:red solid thin;
outline:#00ff00 dotted thick;
}

 
border-top 、border-bottom 、border-left、border-right
border-bottom:thick dotted #ff0000;

JavaScript 语法：object.style.borderBottom="3px solid blue"
border-top-width 、border-bottom-width、border-left-width、border-right-width
p.one
{
border-style: solid;
border-bottom-width: 15px
}

JavaScript 语法：object.style.borderBottomWidth="thick"
 

border-top-style、border-bottom-style、border-left-style、border-right-style

border-bottom-style:none

JavaScript 语法：object.style.borderBottomStyle="dotted"
border-top-color、border-bottom-color、border-left-color、border-right-color

border-bottom-color:#ff0000;

JavaScript 语法：object.style.borderBottomColor="blue"
（以上内容摘自http://www.w3school.com.cn）
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航