乌徒帮技术范儿技术中心CSS样式表 › css层叠样式表二:让你的网页优雅起来

css层叠样式表二:让你的网页优雅起来

分类:CSS样式表

在上一讲中,我们已经初步了解了CSS的用法及CSS选择器,本文将向你讲解CSS样式的规定,通过本节的学习,你可以利用css实现网页的布局、颜色、线条、动作等样式效果。

一、CSS样式

1、css背景

属性 描述
background 简写属性,作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

background:将所有的background的css规定写在一个句子里,例如background:#900 url(images/bg.jpg) no-repeat center;

backgorund-image:规定背景图片,例如background-image:url(images/bg.jpg);

background-color:规定背景颜色,例如background-color:#f00;

background-position:规定背景图片的位置,按照水平、垂直的方向,例如background-position:100px 120px;表示背景图片水平方向上向右移动100px,垂直方向上向下移动120px;如果要朝反方向移动,可以用负值。另外,还可以用background-position:center right;来规定给图片位于容器的右侧居中位置。通过这种方法可以精确的布局背景图片。

background-repeat:规定背景图片的平铺方向,值no-repeat表示不平铺,只显示一次,repeat-x表示在水平方向上平铺,背景图片只显示一行,repeat-y表示再垂直方向上,只显示一竖。

background-attachment:背景是否随屏幕滚动,fixed表示固定,不随屏幕滚动,scroll会随滚动,默认为scroll。

查看更多

2、css文本

属性 描述
color 设置文本颜色
direction 设置文本方向。
line-height 设置行高。
letter-spacing 设置字符间距。
text-align 对齐元素中的文本。
text-decoration 向文本添加修饰。
text-indent 缩进元素中文本的首行。
text-shadow 设置文本阴影。CSS2 包含该属性,但是 CSS2.1 没有保留该属性。
text-transform 控制元素中的字母。
unicode-bidi 设置文本方向。
white-space 设置元素中空白的处理方式。
word-spacing 设置字间距。

color:设置文本的颜色,指字的颜色,值有多种形式,如red,#f00,rbg(255,0,0,0)。如果是<p>好<a href="#">高矮胖</a>的人</p>这样的嵌套,你需要单独设置<a>的color值,这涉及到上一讲中讲到的继承问题。

line-height:文本的行高,可以理解为文字占用的空间,它和font-size:的效果不同,font-size:14px表示该字大小是14px,而line-height:20px;表示该字占用了20px的垂直空间,超过14px的部分为空白,而且文字垂直居中,因此我们通常使用line-height来实现文字的垂直居中。

text-align:文本的水平对齐方式,center,left,right。

text-indent:文本缩进方式,如text-indent:2em;表示缩进2个字符的宽度,我们通常用这个来实现每行缩进的效果。如果将值设为负数,则文字将向左移动,在一些情况下,我们可以设置一个很大的负值,用以隐藏文字,特别在logo的使用的时候。

查看更多

3、css字体

属性 描述
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family 设置字体系列。
font-size 设置字体的尺寸。
font-size-adjust 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。)
font-stretch 对字体进行水平拉伸。(CSS2.1 已删除该属性。)
font-style 设置字体风格。
font-variant 以小型大写字体或者正常字体显示文本。
font-weight 设置字体的粗细。

规定字体的大小、粗细、字体等,查看更多

4、css列表

属性 描述
list-style 简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image 将图象设置为列表项标志。
list-style-position 设置列表中列表项标志的位置。
list-style-type 设置列表项标志的类型。
marker-offset ?设置或检索标记容器和主容器之间水平补白。即两个容器靠近的一边的间距。查看具体

用来规定ul,ol,li的样式,查看更多

5、css表格

属性 描述
border-collapse 设置是否把表格边框合并为单一的边框。
border-spacing 设置分隔单元格边框的距离。
caption-side 设置表格标题的位置。
empty-cells 设置是否显示表格中的空单元格。
table-layout 设置显示单元、行和列的算法。

table,th,th,td当然拥有诸如color,width,height等属性,这里列出来的是特有属性。查看更多

6、css轮廓

"CSS" 列中的数字指示哪个 CSS 版本定义了该属性。

属性 描述 CSS
outline 在一个声明中设置所有的轮廓属性。 2
outline-color 设置轮廓的颜色。 2
outline-style 设置轮廓的样式。 2
outline-width 设置轮廓的宽度。 2

为a标记添加此属性之后,点击链接就不会出现外面的一圈虚线了。不过在低版本的IE中,这一属性似乎并不起作用。查看更多

二、css框模型

本节将提到复杂的margin,padding属性。

CSS 框模型

元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。

提示:背景应用于由内容和内边距组成的区域。

内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:

* {
  margin: 0;
  padding: 0;
}

在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:

CSS 框模型实例

#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。

提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。

浏览器兼容性

一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。

虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。

术语翻译

  • element : 元素。
  • padding : 内边距,也有资料将其翻译为填充。
  • border : 边框。
  • margin : 外边距,也有资料将其翻译为空白或空白边。

我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距,边框外的空白是外边距。

1、css内边距:padding

属性 描述
padding 简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom 设置元素的下内边距。
padding-left 设置元素的左内边距。
padding-right 设置元素的右内边距。
padding-top 设置元素的上内边距。

padding值的顺序是上、右、下、左,如padding:10px 3px 10px 5px;如果你写成padding:10px 5px;表示上下内边距为10px,左右内边距为5px,如果写成padding:10px,则四个方向的内边距都为10px。

CSS 值复制

查看更多

2、css边框:border

属性 描述
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 设置元素的上边框的宽度。

比较有用的的是border-style,border的用法如border:#f00 solid 1px;

查看更多

3、css外边距:margin

属性 描述
margin 简写属性。在一个声明中设置所有外边距属性。
margin-bottom 设置元素的下外边距。
margin-left 设置元素的左外边距。
margin-right 设置元素的右外边距。
margin-top 设置元素的上外边距。

值的顺序和border的顺序一样。

查看更多

margin和padding不同的是,当两个相邻的容器,例如<div id="left"></div><div id="right"></div>,他们都拥有margin值时,他们的margin值会被合并,例如#left的margin-right:20px;#right的magin-left:10px;那么他们之间的距离会是20px,由于它们相邻,他们的magin值会被取较大的那个,而不是两者之和。

查看更多

三、css定位

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。

除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

在下面的章节,我们会为您详细讲解相对定位、绝对定位和浮动。

1、CSS position 属性

属性 描述
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
right 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
left 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow 设置当元素的内容溢出其区域时发生的事情。
clip 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
vertical-align 设置元素的垂直对齐方式。
z-index 设置元素的堆叠顺序。

查看更多

2、相对定位

CSS 相对定位实例

具体看这里

3、绝对定位

CSS 绝对定位实例

具体看这里

4、浮动:float

请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:

CSS 浮动实例 - 向右浮动的元素

再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。

如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。

CSS 浮动实例 - 向左浮动的元素

如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:

CSS 浮动实例 2 - 向左浮动的元素

CSS float 属性

在 CSS 中,我们通过 float 属性实现元素的浮动。

如需更多有关 float 属性的知识,请访问参考手册:CSS float 属性

行框和清理

浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。

因此,创建浮动框可以使文本围绕图像:

行框围绕浮动框要想阻止行框围绕浮动框,需要对该框应用?clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。

为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:

clear 属性实例 - 对行框应用 clear这是一个有用的工具,它让周围的元素为浮动元素留出空间。

使用clear:both来清理前面的浮动。

查看更多

四、CSS 尺寸属性

允许你控制元素的高度和宽度。同样,还允许你增加行间距。查看原文

属性 描述
height 设置元素的高度。
line-height 设置行高。
max-height 设置元素的最大高度。
max-width 设置元素的最大宽度。
min-height 设置元素的最小高度。
min-width 设置元素的最小宽度。
width 设置元素的宽度。

五、CSS 分类属性

CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。查看原文

属性 描述
clear 设置一个元素的侧面是否允许其他的浮动元素。
cursor 规定当指向某元素之上时显示的指针类型。
display 设置是否及如何显示元素。
float 定义元素在哪个方向浮动。
position 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
visibility 设置元素是否可见或不可见。

六、CSS2 媒介类型

注释:媒介类型名称对大小写不敏感。原文

媒介类型 描述
all 用于所有的媒介设备。
aural 用于语音和音频合成器。
braille 用于盲人用点字法触觉回馈设备。
embossed 用于分页的盲人用点字法打印机。
handheld 用于小的手持的设备。
print 用于打印机。
projection 用于方案展示,比如幻灯片。
screen 用于电脑显示器。
tty 用于使用固定密度字母栅格的媒介,比如电传打字机和终端。
tv 用于电视机类型的设备。

七、注意事项

Internet Explorer 5 引入了行为 (behaviors)。behaviors 是一种通过使用 CSS 向 HTML 元素添加行为的方法。

为什么要避免它?只有 Internet Explorer 支持 behavior 属性。

用什么代替?请使用?JavaScript?和?HTML DOM?取而代之。

查看原文

上一章:css层叠样式表一:从结构到表现,网页样式的开始

下一章:Javascript-脚本

填写个人信息,赶快回复吧!