本例演示如何使用百分比值来设置单元格的下内边距。
CSS 内边距属性
属性 |
描述 |
padding |
简写属性。作用是在一个声明中设置元素的所内边距属性。 |
padding-bottom |
设置元素的下内边距。 |
padding-left |
设置元素的左内边距。 |
padding-right |
设置元素的右内边距。 |
padding-top |
设置元素的上内边距。 |
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
宽度、样式,以及颜色。
元素的背景是内容、内边距和边框区的背景。样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
一幅图片的边框定义为 outset,使之看上去像是“凸起按钮”:
a:link img {border-style: outset;}
p.aside {border-style: solid dotted dashed double;}
上面这条规则为类名为 aside 的段落定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。
我们又看到了这里的值采用了 top-right-bottom-left 的顺序,
- border-top-style
- border-right-style
- border-bottom-style
- border-left-style
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式,包括 none。
p {border-style: solid; border-left-style: none;}
注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前,简写属性的值就会覆盖单边值 none。
border-width 属性
为边框指定宽度。
分别是 thin 、medium(默认值) 和 thick。
您可以按照 top-right-bottom-left 的顺序设置元素的各边边框:
p {border-style: solid; border-width: 15px 5px 15px 5px;}
上面的例子也可以简写为(这样写法称为值复制):
p {border-style: solid; border-width: 15px 5px;}
- border-top-width
- border-right-width
- border-bottom-width
- border-left-width
p {border-style: none; border-width: 50px;}
尽管边框的宽度是 50px,但是边框样式设置为 none。
简单的 border-color 属性,它一次可以接受最多 4 个颜色值。
可以使用任何类型的颜色值,例如可以是命名颜色,也可以是十六进制和 RGB 值:
p {
border-style: solid;
border-color: blue rgb(25%,35%,45%) #909090 red;
}
如果颜色值小于 4 个,值复制就会起作用。
默认的边框颜色是元素本身的前景色
如果元素没有任何文本,假设它是一个表格,其中只包含图像,那么该表的边框颜色就是其父元素的文本颜色(因为 color 可以继承)。这个父元素很可能是 body、div 或另一个 table。
CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子:
AAA
BBB
CCC
AAA
BBB
CCC
a:hover {border-color: gray;} 悬停{边框颜色:灰色
CSS 边框实例:
-
所有边框属性在一个声明之中
-
本例演示用简写属性来将所有四个边框属性设置于同一声明中。
-
设置四边框样式
-
本例演示如何设置四边框样式。
-
设置每一边的不同边框
-
本例演示如何在元素的各边设置不同的边框。
-
所有边框宽度属性在一个声明之中
-
本例演示用简写属性来将所有边框宽度属性设置于同一声明中。
-
设置四个边框的颜色
-
本例演示如何设置四个边框的颜色。可以设置一到四个颜色。
-
所有下边框属性在一个声明中
-
本例演示用简写属性来将所有下边框属性设置在同一声明中。
-
设置下边框的颜色
-
本例演示如何设置下边框的颜色。
-
设置下边框的样式
-
本例演示如何设置下边框的样式。
-
设置下边框的宽度
-
本例演示如何设置下边框的宽度。
-
所有左边框属性在一个声明之中
-
所有左边框属性在一个声明之中
-
设置左边框的颜色
-
本例演示如何设置左边框的颜色。
-
设置左边框的样式
-
本例演示如何设置左边框的样式。
-
设置左边框的宽度
-
本例演示如何设置左边框的宽度。
-
所有右边框属性在一个声明之中
-
本例演示一个简写属性,用于把所有右边框属性设置在一条声明中。
-
设置右边框的颜色
-
本例演示如何设置右边框的颜色。
-
设置右边框的样式
-
本例演示如何设置右边框的样式。
-
设置右边框的宽度
-
本例演示如何设置右边框的宽度。
-
所有上边框属性在一个声明之中
-
本例演示用简写属性来将所有上边框属性设置于同一声明之中。
-
设置上边框的颜色
-
本例演示如何设置上边框的颜色。
-
设置上边框的样式
-
本例演示如何设置上边框的样式。
-
设置上边框的宽度
-
本例演示如何设置上边框的宽度。
CSS 边框属性
属性 |
描述 |
border |
简写属性,用于把针对四个边的属性设置在一个声明。 |
border-style |
用于设置元素所有边框的样式,或者单独地为各边设置边框样式。 |
border-width |
简写属性,用于为元素的所有边框设置宽度,或者单独地为各边边框设置宽度。 |
border-color |
简写属性,设置元素的所有边框中可见部分的颜色,或为 4 个边分别设置颜色。 |
border-bottom |
简写属性,用于把下边框的所有属性设置到一个声明中。 |
border-bottom-color |
设置元素的下边框的颜色。 |
border-bottom-style |
设置元素的下边框的样式。 |
border-bottom-width |
设置元素的下边框的宽度。 |
border-left |
简写属性,用于把左边框的所有属性设置到一个声明中。 |
border-left-color |
设置元素的左边框的颜色。 |
border-left-style |
设置元素的左边框的样式。 |
border-left-width |
设置元素的左边框的宽度。 |
border-right |
简写属性,用于把右边框的所有属性设置到一个声明中。 |
border-right-color |
设置元素的右边框的颜色。 |
border-right-style |
设置元素的右边框的样式。 |
border-right-width |
设置元素的右边框的宽度。 |
border-top |
简写属性,用于把上边框的所有属性设置到一个声明中。 |
border-top-color |
设置元素的上边框的颜色。 |
border-top-style |
设置元素的上边框的样式。 |
border-top-width |
设置元素的上边框的宽度。 p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } 不懂 Three-colored border!
|
border: medium double rgb(250,0,255)
用简写属性来将所有四个边框属性设置于同一声明中。
"border-width" 属性如果单独使用的话是不会起作用的。请首先使用 "border-style" 属性来设置边框。
margin 属性,这个属性接受任何长度单位、百分数值甚至负值。
是像素、英寸、毫米或 em。
margin 可以设置为 auto
百分数是相对于父元素的 width 计算的。
margin 的默认值是 0
- 如果缺少左外边距的值,则使用右外边距的值。
- 如果缺少下外边距的值,则使用上外边距的值。
- 如果缺少右外边距的值,则使用上外边距的值。
使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。
p {margin-left: 20px;}
您可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:
- margin-top
- margin-right
- margin-bottom
- margin-left
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注释:请注意,如果不设置 div 的内边距和边框,那么内部 div 的上外边距将与外部 div 的上外边距合并(叠加)。
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
CSS 定位 (Positioning) 属性允许你对元素进行定位。
CSS1 中首次提出了浮动,浮动不完全是定位
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。
span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
使用 display 属性改变生成的框的类型。
即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:
some text
Some more text.
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。相对定位、绝对定位和浮动。
使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。
-
static
-
元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。
-
relative
-
元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。
-
absolute
-
元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
-
fixed
-
元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
h2.pos_left
relative
h2.pos_abs
position:absolute;
left:100px;
top:150px
通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px,距离页面顶部 150px。
本例演示如何相对于浏览器窗口来对元素进行定位。
position:fixed;
left:5px;
top:5px;
如何使用固定值设置图像的上边缘。
img
{
position:absolute;
top:0px
}
div
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll,不论是否需要,用户代理都会提供一种滚动机制。因此,有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
overflow: hiddenoverflow: auto
clip:rect(0px 50px 200px 0px)
img
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
如何在文本中垂直排列图象。
img.top {vertical-align:text-top}
img.bottom {vertical-align:text-bottom}
img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
默认的 z-index 是 0。Z-index -1 拥有更低的优先级。
实例
-
定位:相对定位
-
本例演示如何相对于一个元素的正常位置来对其定位。
-
定位:绝对定位
-
本例演示如何使用绝对值来对元素进行定位。
-
定位:固定定位
-
本例演示如何相对于浏览器窗口来对元素进行定位。
-
使用固定值设置图像的上边缘
-
本例演示如何使用固定值设置图像的上边缘。
-
使用百分比设置图像的上边缘
-
本例演示如何使用百分比值设置图像的上边缘。
-
使用像素值设置图像的底部边缘
-
本例演示如何使用像素值设置图像的底部边缘。
-
使用百分比设置图像的底部边缘
-
本例演示如何使用百分比值设置图像的底部边缘。
-
使用固定值设置图像的左边缘
-
本例演示如何使用固定值设置图像的左边缘。
-
使用百分比设置图像的左边缘
-
本例演示如何使用百分比值设置图像的左边缘。
-
使用固定值设置图像的右边缘
-
本例演示如何使用固定值设置图像的右边缘。
-
使用百分比设置图像的右边缘
-
本例演示如何使用百分比值设置图像的右边缘。
-
如何使用滚动条来显示元素内溢出的内容
-
本例演示当元素内容太大而超出规定区域时,如何设置溢出属性来规定相应的动作。
-
如何隐藏溢出元素中溢出的内容
-
本例演示在元素中的内容太大以至于无法适应指定的区域时,如何设置 overflow 属性来隐藏其内容。
-
如何设置浏览器来自动地处理溢出
-
本例演示如何设置浏览器来自动地处理溢出。
-
设置元素的形状
-
本例演示如何设置元素的形状。此元素被剪裁到这个形状内,并显示出来。
-
垂直排列图象
-
本例演示如何在文本中垂直排列图象。
-
Z-index
-
Z-index可被用于将在一个元素放置于另一元素之后。
-
Z-index
-
上面的例子中的元素已经更改了Z-index。
CSS 定位属性
CSS 定位属性允许你对元素进行定位。
属性 |
描述 |
position |
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
top |
定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
right |
定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
bottom |
定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
left |
定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
overflow |
设置当元素的内容溢出其区域时发生的事情。 |
clip |
设置元素的形状。元素被剪入这个形状之中,然后显示出来。 |
vertical-align |
设置元素的垂直对齐方式。 |
z-index |
设置元素的堆叠顺序。 |
在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
绝对定位使元素的位置与文档流无关,因此不占据空间。
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
最初的包含块可能是画布或 HTML 元素。
因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
在 CSS 中,我们通过 float 属性实现元素的浮动。创建浮动框可以使文本围绕图像:
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:
假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。
因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。
如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:
由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。
.clear {
clear: both;
}
因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。
如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:
.clear {
clear: both;
}
另一种办法,那就是对容器 div 进行浮动:选择对布局中的所有东西进行浮动,然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少或消除不必要的标记。对页脚的 div 进行了清理,而页脚上面的三个 div 都向左浮动。 CSS 清理的工作原理和 clear 属性应用方法。CSS clear 属性。
img
{
float:right;
border:1px dotted black;
margin:0px 0px 15px 20px;
}在下面的段落中,图像会浮动到右侧,并且添加了点状的边框。我们还为图像添加了边距,这样就可以把文本推离图像:上和右外边距是 0px,下外边距是 15px,而图像左侧的外边距是 20px。
float:right;
width:120px;
margin:0 0 15px 20px;
padding:15px;
border:1px solid black;
text-align:center;
text-decoration:none;??
padding:0.2em 0.6em;
最常见的 CSS 选择器是元素选择器。设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身:文档的元素就是最基本的选择器。
html {color:black;}????
元素选择器又称为类型选择器(type selector)。
CSS 元素选择器(类型选择器)可以设置 XML 文档中元素的样式。
通过分组,创作者可以将某些类型的样式“压缩”在一起,这样就可以得到更简洁的样式表。
请注意,group 3 中使用了“声明分组”。
CSS2 引入了一种新的简单选择器 - 通配选择器(universal selector),显示为一个星号(*)。该选择器可以与任何元素匹配,就像是一个通配符。
既可以对选择器进行分组,也可以对声明分组。
对声明分组,一定要在各个声明的最后使用分号,这很重要。浏览器会忽略样式表中的空白符。只要加了分号,就可以毫无顾忌地采用以下格式建立样式:
h1 {
font: 28px Verdana;
color: blue;
background: red;
}
因为 background 对 color 来说不是一个合法值,而且由于只能为 color 指定一个关键字,所以用户代理会完全忽略这个 color 声明
在一个规则中结合选择器分组和声明分组
类选择器允许以一种独立于文档元素的方式来指定样式。
该选择器可以单独使用,也可以与其他元素结合使用。
要应用样式而不考虑具体设计的元素,最常用的方法就是使用类选择器。
使用以下语法向这些归类的元素应用样式,即类名前有一个点号(.),然后结合通配选择器:
*.important {color:red;}
如果您只想选择所有类名相同的元素,可以在类选择器中忽略通配选择器,这没有任何不好的影响:
.important {color:red;}
选择器 p.important 解释为:“其 class 属性值为 important 的所有段落”。 因为 h1 元素不是段落,一个 class 值中可能包含一个词列表,各个词之间用空格分隔。
如果一个多类选择器包含类名列表中没有的一个类名,匹配就会失败。
.important.urgent {background:silver;}
在某些方面,ID 选择器类似于类选择器,
ID 选择器前面有一个 # 号 - 也称为棋盘号或井号。与类选择器一样,ID 选择器中可以忽略通配选择器。第二个区别是 ID 选择器不引用 class 属性的值,毫无疑问,它要引用 id 属性中的值。ID 选择器会使用一次,而且仅一次。ID 属性不允许有以空格分隔的词列表。
在一个给定的文档中会有一个 ID 值为 mostImportant 的元素。
这个规则会与以下各个元素匹配(这些元素不能在同一个文档中同时出现,因为它们都有相同的 ID 值):
paragraph
类选择器和 ID 选择器可能是区分大小写的。CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。同样,它允许你增加行间距。
最大宽度max-width: 300px
p.small {line-height: 90%}
p.big {line-height: 200%}
属性 |
描述 |
height |
设置元素的高度。 |
line-height |
设置行高。 |
max-height |
设置元素的最大高度。 |
max-width |
设置元素的最大宽度。 |
min-height |
设置元素的最小高度。 |
min-width |
设置元素的最小宽度。 |
width |
设置元素的宽度。 |
CSS 分类属性允许你规定如何以及在何处显示元素。
p {display: inline}
div {display: none}
本例中的样式表把段落元素设置为内联元素。
而 div 元素不会显示出来!
span
{
display: block
}
本例中的样式表把 span 元素设置为块级元素。两个 span 元素之间产生了一个换行行为。
属性 |
描述 |
clear |
设置一个元素的侧面是否允许其他的浮动元素。 |
cursor |
规定当指向某元素之上时显示的指针类型。 |
display |
设置是否及如何显示元素。 |
float |
定义元素在哪个方向浮动。 |
position |
把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
visibility |
设置元素是否可见或不可见。 |
CSS 伪类用于向某些选择器添加特殊的效果。
如何向文档中的超链接添加不同的颜色。
CSS 伪类 (Pseudo-classes)实例:
-
超链接
-
本例演示如何向文档中的超链接添加不同的颜色。
-
超链接 2
-
本例演示如何向超链接添加其他样式。
-
超链接 - :focus 的使用
-
本例演示如何对超链接应用 :focus 伪类(无法在 IE 中工作)。
-
:first-child(首个子对象)
-
本例演示 :first-child 伪类的用法。
-
:lang(语言)
-
本例演示 :lang 伪类的用法。