返回课程

1.CSS技巧

    1、不要使用过小的图片做背景平铺。这就是为何很多人都不用 1px 的原因,这才知晓。宽高 1px 的图片平铺出一个宽高 200px 的区域,需要 200*200=40, 000 次,占用资源。

 

    2、无边框。推荐的写法是 border:none;,哈哈,我一直在用这个。 border:0; 只是定义边框宽度为零,但边框样式、颜色还是会被浏览器解析,占用资源。

 

    3、慎用 * 通配符。所谓通配符,就是将 CSS 中的所有标签均初始化,不管用的不用的,过时的先进的,一视同仁,这样,大大的占用资源。要有选择的初始化标签。

 

    4、CSS 的十六进制颜色代码缩写。习惯了缩写及小写,这才知道,原来不是推荐的写法,为的是减少解析所占用的资源。但同时会增加文件体积。孰优孰劣,有待仔细考证。

 

    5、样式放头上,脚本放脚下。不内嵌,只外链。 

 

    6、坚决不用 CSS 表达式。 

 

    7、使用 引用样式表,而不是通过 @import 导入。 

 

    8、一般来说,PNG 比 GIF 要小,小得多。再者,GIF 中有多少颜色是被浪费的,很值得优化。
 
    9、千万不要在 HTML 中缩放图片,一者不好看,二者占资源。

 

    10、正文字体最好用偶数,12px、14px、16px,效果非常好。特例,15px。 

 

    11、block、ul、ol 等上下留出至少一倍行距,左侧至少两倍行距,右侧随意。

 

    12、段落之间,至少要有一倍行距。

 

    13、强行指定某些元素的 line-height,正文 1.6 倍于文字大小,标题 1.3 倍。

 

    14、中文标点用全角。英文夹杂在中文中,左右空格,半角。

 

    15、中文字体的粗体和斜体,远离较好,利民利己。

2.相对定位

css绝对定位使你能精确地定位要素在页面的 独立位置,而不考虑页面其它要素的定位 设置。相对定位指你所定位的要素的位置相对于 它在文件中所分配的位置。例:


I { position: relative; left: 40px; top: 10px }


相对定位的关键在于定位了的要素的位置 是相对于它通常应在的位置进行定位。如 果你停止使用相对定位,则文字的显示位 置将恢复正常。

 

使用相对定位时要小心,否则容易将页面 弄得非常乱。

 

除了相对定位和绝对定位,你还可以使用 static(静止)参数值。它的使用方法同 普通HTML中的定位方法,不能附加特殊的 定位设置。

 

还不错吧?下面我们将学习如何控制定位 了的要素。

 

3.绝对定位

定位(左边和顶部)


css定位属性将是网虫们打开幸福之门的钥匙:

 

H4 { position: absolute; left: 100px; top: 43px }

 

这项CSS规则让浏览器将<H4>的起始位置精 确地定在距离浏览器左边100象素,距离其 顶部43象素的位置。

 

注意这里唯一设置了的是左边和顶部,也就 是说,文字将从左到右,从上到下载入浏览 器窗口。

 

左边和顶部属性很直观,左边(left)设定 要素距浏览器窗口左边的距离,顶部(top) 设定距离浏览器窗口顶部的距离。

 

设定这些距离时,你可以使用所学过的各种 长度单位或比例值。使用比例值时,比例值 指的是相对于母体要素的尺寸。

 

你可以定位什么呢?任何东西!段落、单词、 GIF和JPEG图象、QUICKTIME电影等等

 

4.id 选择器

id 选择器


id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

 

id 选择器以 "#" 来定义。

 

下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为绿色:

 

#red {color:red;}
#green {color:green;}


下面的 HTML 代码中,id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色。

<p id="red">这个段落是红色。</p>
<p id="green">这个段落是绿色。</p>


注意:id 属性只能在每个 HTML 文档中出现一次。想知道原因吗,请参阅 XHTML:网站重构。


id 选择器和派生选择器


在现代布局中,id 选择器常常用于建立派生选择器。

 

#sidebar p {
 font-style: italic;
 text-align: right;
 margin-top: 0.5em;
 }


上面的样式只会应用于出现在 id 是 sidebar 的元素内的段落。这个元素很可能是 div 或者是表格单元,尽管它也可能是一个表格或者其他块级元素。它甚至可以是一个内联元素,比如 <em></em> 或者 <span></span>,不过这样的用法是非法的,因为不可以在内联元素 <span> 中嵌入 <p> (如果你忘记了原因,请参阅 XHTML:网站重构)。

一个选择器,多种用法


即使被标注为 sidebar 的元素只能在文档中出现一次,这个 id 选择器作为派生选择器也可以被使用很多次:

#sidebar p {
 font-style: italic;
 text-align: right;
 margin-top: 0.5em;
 }

#sidebar h2 {
 font-size: 1em;
 font-weight: normal;
 font-style: italic;
 margin: 0;
 line-height: 1.5;
 text-align: right;
 }


在这里,与页面中的其他 p 元素明显不同的是,sidebar 内的 p 元素得到了特殊的处理,同时,与页面中其他所有 h2 元素明显不同的是,sidebar 中的 h2 元素也得到了不同的特殊处理。


单独的选择器


id 选择器即使不被用来创建派生选择器,它也可以独立发挥作用:

 

#sidebar {
 border: 1px dotted #000;
 padding: 10px;
 }

 

根据这条规则,id 为 sidebar 的元素将拥有一个像素宽的黑色点状边框,同时其周围会有 10 个像素宽的内边距(padding,内部空白)。老版本的 Windows/IE 浏览器可能会忽略这条规则,除非你特别地定义这个选择器所属的元素:

 

div#sidebar {
 border: 1px dotted #000;
 padding: 10px;
 }

5.高级语法

选择器的分组


你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

 

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

 

继承及其问题


根据 CSS,子元素从父元素继承属性。但是它并不总是按此方式工作。看看下面这条规则:

 

body {
     font-family: Verdana, sans-serif;
     }

 

根据上面这条规则,站点的 body 元素将使用 Verdana 字体(假如访问者的系统中存在该字体的话)。

 

通过 CSS 继承,子元素将继承最高级元素(在本例中是 body)所拥有的属性(这些子元素诸如 p, td, ul, ol, ul, li, dl, dt,和 dd)。不需要另外的规则,所有 body 的子元素都应该显示 Verdana 字体,子元素的子元素也一样。并且在大部分的现代浏览器中,也确实是这样的。

 

但是在那个浏览器大战的血腥年代里,这种情况就未必会发生,那时候对标准的支持并不是企业的优先选择。比方说,Netscape 4 就不支持继承,它不仅忽略继承,而且也忽略应用于 body 元素的规则。IE/Windows 直到 IE6 还存在相关的问题,在表格内的字体样式会被忽略。我们又该如何是好呢?


友善地对待Netscape 4


幸运地是,你可以通过使用我们称为 "Be Kind to Netscape 4" 的冗余法则来处理旧式浏览器无法理解继承的问题。

body  {
     font-family: Verdana, sans-serif;
     }

p, td, ul, ol, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

 

4.0 浏览器无法理解继承,不过他们可以理解组选择器。这么做虽然会浪费一些用户的带宽,但是如果需要对 Netscape 4 用户进行支持,就不得不这么做。


继承是一个诅咒吗?


如果你不希望 "Verdana, sans-serif" 字体被所有的子元素继承,又该怎么做呢?比方说,你希望段落的字体是 Times。没问题。创建一个针对 p 的特殊规则,这样它就会摆脱父元素的规则:

 

body  {
     font-family: Verdana, sans-serif;
     }

td, ul, ol, ul, li, dl, dt, dd  {
     font-family: Verdana, sans-serif;
     }

p  {
     font-family: Times, "Times New Roman", serif;
     }

6.基础语法

CSS 语法

 

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性(property)是您希望设置的样式属性(style attribute)。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色,同时将字体大小设置为 14 像素。

在这个例子中,h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构:

CSS 语法

 

提示:请使用花括号来包围声明。

 

值的不同写法和单位

 

除了英文单词 red,我们还可以使用十六进制的颜色值 #ff0000:

p { color: #ff0000; }

为了节约字节,我们可以使用 CSS 的缩写形式:

p { color: #f00; }

我们还可以通过两种方法使用 RGB 值:

p { color: rgb(255,0,0); }
p { color: rgb(100%,0%,0%); }

请注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。

 

记得写引号

 

提示:如果值为若干单词,则要给值加引号:

p {font-family: "sans serif";}

多重声明:

 

提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么的好处是,当你从现有的规则中增减声明时,会尽可能的减少出错的可能性。就像这样:

p {text-align:center; color:red;} 

你应该在每行只描述一个属性,这样可以增强样式定义的可读性,就像这样:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

空格和大小写

 

大多数样式表包含不止一条规则,而大多数规则包含不止一个声明。多重声明和空格的使用使得样式表更容易被编辑:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

是否包含空格不会影响 CSS 在浏览器的工作效果,同样,与 XHTML 不同,CSS 对大小写不敏感。不过存在一个例外:如果涉及到与 HTML 文档一起工作的话,class 和 id 名称对大小写是敏感的。

7.派生选择器

派生选择器


通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。

 

在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。

派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。

 

比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:

 

li strong {
    font-style: italic;
    font-weight: normal;
  }


请注意标记为 <strong> 的蓝色代码的上下文关系:

 

<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p>

<ol>
<li><strong>我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li>
</ol>


在上面的例子中,只有 li 元素中的 strong 元素的样式为斜体字,无需为 strong 元素定义特别的 class 或 id,代码更加简洁。

 

再看看下面的 CSS 规则:

 

strong {
     color: red;
     }

h2 {
     color: red;
     }

h2 strong {
     color: blue;
     }

 

下面是它施加影响的 HTML:

 

<p>The strongly emphasized word in this paragraph is<strong>red</strong>.</p>
<h2>This subhead is also red.</h2>
<h2>The strongly emphasized word in this subhead is<strong>blue</strong>.</h2>

8.css属性知识

该表只列出常用的CSS属性,及简要介绍其主要功能,若要了解各所有属性和具体的用法,请参考相关书籍

属 性 名 称 属性功能及其取值 用 法 说 明 与 范 例
颜色与背景类
color 设置文字颜色
#rgb
#rrggbb
rgb(255,255,255)
rgb(100%,100%,100%)
H1{color:red}
H1{color:#f00}
H1{color:#ff0000}
H1{color:rgb(255,0,0)}
H1{color:rgb(100%,0%,0%)}
background-color 设置背景颜色,格式同上。 BODY{background-color:red}
BODY{background-color:#f00}
BODY{background-color:#ff0000}
BODY{background-color:rgb(255,0,0)}
BODY{background-color:rgb(100%,0%,0%)}
background-image 设置背景图片,
url(/imageURL)
body{backround-image:url(/back.jpg);}
background-repeat 设置背景图片是否重复排列:
repeat-x(X轴重复排列);
repeat-y(Y轴重复排列);
No-repeat(不重复排列)
BODY{background-repeat:repeat-x;}
BODY{background-repeat:No-repeat;}
background-attachment 设定背景图片是否卷动,默认为卷动。
scroll(卷动)
fixed(不卷动)
BODY{background-attachment:fixed;}
background-position 设定背景图片或背景颜色开始显示的位置,取值格式:
top,buttom,left,right,center(用关键字)
70px 10px(用长度值)
50% 30%(用百分比)
BODY{background-position:right top;}
BODY{background-position:50px 10px;}
BODY{background-position:20% 50%;}
background 定义背景综合属性,不要求顺序,各属性值以空格分开。 BODY{background:#ffcc00 url(/bg.jpg) fixed center}
字型类
font-family 设置字型属性,取值可以是任何字型名称,缺省为浏览器内定字型,可以设多个以逗号(,)分开,有空格的英文字型可用单引号或双引号括起来。 P{font-family:宋体,楷体,黑体,"Time New Rom";}
font-style 设定字型样式:Normal(正常),italic、objlique(斜体)  P{font-style:italic;}
font-variant 取值:Normal(默认),small-caps(如果是中文字型则将字型缩小显示,如果是英文则全部改为较小的大写) H3{font-variant:small-caps;}
font-weight 设定字体粗细,取值有:
Normal(默认),bold,lighter,border,100,200...900
由于浏览器支持程度不同,一般只用normal和bold两种属性。
P{font-weight:bold;}
font-size 设定字体的大小;
绝对大小:xx-small,x-small,small,mediumlarge,x-large,xx-large;
相对大小:larger,smaller;
数字表示可用单位:磅(pt),像素(px),英寸(in),厘米(cm);
亦可用百分比表示。
H2{font-size:36pt;}
P{font-size:200%;}
font 设定字型的综合属性,其顺序如下:
{font-style font-variant font-weight font-size /line-height font-family;}
P{bold 12pt/14pt impact,Arial;}
文字类
letter-spacing 设定文字间距。 P{letter-spacing:5pt;}
text-decoration 设定文字加上下划线、删除线等效果:
none(无)
underline(下划线)
overline(上划线)
line-through(删除线)
vertical-align 设定文字或图片垂直方向的对齐方式:
baseline:默认值 sub:下标 super:上标 top:垂直向上对齐 middle:垂直居中 bottom:垂直向下对齐。
text-transform 转换英文字母大小写:
none:默认值 capitalize:首字母大写 uppercase:所有英文字母大写 lowercase:所有英文字母小写。
text-align 设置文字的水平对齐方式:
left:左对齐 right:右对齐 center:水平居中 justify:左右对齐。
text-indent 设定标记元素内文字的首行缩进或配合margin-left属性设定首行凸排。
line-height 设定行高,声明方式有标准行高、固定值表示法、百分比行高、字型大小比例行高等。
列表类
list-style-type 有序列表的编号方式(供<OL>标记使用):
none:无编号 decimal:阿拉伯数字 lower-roman:小写罗马数字 upper-roman:大写罗马数字 lower-alpha:小写英文字母 upper-alpha:大写英文字母。 
list-style-type 无序列表的符号样式(供<UL>使用):
none:无符号 disc:实心圆符号 circle:空心圆符号 square:实心方形符号。
list-style-image 无序列表的自定义符号样式:
格式:url(图片名称)
UL{list-style-imag:url(/dd.gif);}
list-style-position 设置列表清单符号缩排属性:
outside:凸排  inside:缩排
UL{list-style-imag:url(/dd.gif); list-style-position:outside;}
list-style 列表清单项目的综合设定,属性之间用空格隔开。 UL{list-style-imag:url(/dd.gif) inside;}
边界及其相关类
margin 标记元素边界值的综合设定。(其规则见右边范例)
亦可以用margin-top、margin-right、margin-bottom、margin-left分开设定各边的边界。
声明4个值,其顺序为上、右、下、左边界,如:DIV{margin:12pt 15pt 20pt 16pt;}
声明3个值,其顺序为上、右、下,缺少的左边界取其对边(右),如:DIV{margin:12pt 15pt 16pt;}
声明2个值,其顺序为上、右,缺少的下、左边界取其对边,如:DIV{margin:12pt 15pt;}
声明1个值,则4个边界同一个值,如:DIV{margin:15pt;}
padding 设定标记内容与标记边框之间的留白的综合设定(规则见margin属性的范例)。 也可分开设定padding-top、padding-right、padding-bottom、padding-left各值。
border-width 标记元素边框宽度的综合设定(规则类似于margin属性)。 也可分开设定border-top-width、border-right-width、border-bottom-width、border-left-width各值。
border-color 标记元素边框颜色的综合设定(规则类似于margin属性)。颜色取值见color属性。 也可分开设定border-top-color、border-right-color、border-bottom-color、border-left-color各值。
border-style 标记元素边框样式的综合设定(规则类似于margin属性)。边框样式有solid,double,goove,ridge,inset,outset等。 也可分开设定border-top-style、border-right-style、border-bottom-style、border-left-style各值。
border 标记元素4个边框的综合设定,可以分别声明边框宽度、边框样式、和边框颜色。 DIV{border:5pt solid #ff0000;}
width 设定标记元素的宽度。
height 设定标记元素的高度。
float 设定标记元素与文字间的相对位置(文字绕排方式)。取值:
none:以默认方式显示;
left:标记元素靠左,文字在右边绕排;
right:标记元素靠右,文字在左边绕排;
clear 设定标记元素与文字间的相对位置(与float不同的是标记元素两边都不绕排)。取值:
none:以默认方式显示;
left:标记元素靠左,右边无文字绕排;
right:标记元素靠右,左边无文字绕排;
其他类
z-index 设定标记元素的堆叠层次,取值为整数,也可以是负数,数值大的在上层。
visibility 设定标记元素是否可见,取值有:
inherit:取默认值 visible:可见 hidden:不可见(隐藏)

9.纵向导航菜单

纵向导航菜单也是网站应用中的一种重要形式,所谓纵向导航菜单是指放置在网页左侧或右侧的从上至下排列的一种导航形式。先看一下效果吧!
 

CSS

 

如图所示的效果,我们先看一下代码结构:

 

<div id="nav">
    <h1>CSS</h1>
        <h2><a href="#">css入门</a></h2>
        <h2><a href="#">css进阶</a></h2>
        <h2><a href="#">css高级</a></h2>
    <h1>webUI</h1>
        <h2><a href="#">理论知识</a></h2>
        <h2><a href="#">实战应用</a></h2>
        <h2><a href="#">高级技巧</a></h2>
    <h1>DOM</h1>
        <h2><a href="#">DOM入门</a></h2>
        <h2><a href="#">DOM应用</a></h2>
        <h2><a href="#">DOM与浏览器</a></h2>
    <h1>XHTML</h1>
        <h2><a href="#">参考手册</a></h2>
        <h2><a href="#">交流论坛</a></h2>
</div>

 

从以上可以看出,这次的XHTML部分的代码横向代码略有不同,我们没有继续使用ul和li标签,其实继续使用ul元素也能完好的实现纵向导航系统,但是在这风景点我们希望更多的提供不同途径来展现css而已设计的灵活与方便性以便于抛砖引玉,开拓更多的设计思想。


这一次采用的是div+h1+h2的形式。我们使用div标签设定了一个导航的结构区域。在这个区域中我们使用了h1来作二级分类的标题,h2来做二级分类下面的细节内容。在XHTML的讲法意义中,h1,h2,h3这些标签本身就具有用于对文本进行层级划分的意义,直接使用h1,h2来表示层级关系,相对于在标签中加入id或class来做层级的标记更为简单和直观,在这里使用h1,h2来标记不同级别的分类名称也实在是再合适不过了。我们来看一看css代码的设计:

 

#nav { width:100px; border-color:#c5c6c4; border-style:solid; border-width:0px 1px 1px 1px;}
#nav h1 { margin:0px; padding:4px; font-size:12px; font-weight:bold; font-family:Verdana; border-top:1px solid #c5c6c4; background-color:#CCCCCC;}
#nav h2 { margin:0px; padding:4px; font-size:12px; font-family:Verdana; font-weight:normal;}
#nav h2 a { color:#666666; text-decoration:none;}
#nav h2 a:hover { color:#999999; text-decoration:underline;}

 

本css代码部分采用了简化写法,如果哪句意思看不懂,您可以在Dreamweaver中打开选择编辑样式表即可查看具体是哪一项了,相信经过这样几次练习,这些代码您已经能完全看懂了,说明您离高手又近了一步了。


大家可能已经注意到了,#nav的边框本例中只设置了左右下和一像素,而没有上,而在h1的样式里设置了上部的上像素?这是为什么呢?因为h1的样式上部都有一条横线,如果nav上部再有一条横线的话成长两条了,结果显示出来就是两像素的高度了。

 

10.背景颜色设置

<HTML>


<head>

 

<style type="text/CSS">

 

body {background-color: yellow}


h1 {background-color: #00ff00}


h2 {background-color: transparent}


p {background-color: rgb(250,0,255)}

 

p.no2 {background-color: gray; padding: 20px;}

 

</style>

 

</head>

 

<body>

 

<h1>这是标题 1</h1>


<h2>这是标题 2</h2>


<p>这是段落</p>


<p class="no2">这个段落设置了内边距。</p>

 

</body>


</html>

11.图片保存方法

  什么叫“CSS中的图片”? 简单的说就是镶在CSS样式表中的图片。当我们用浏览器的“另存为”功能保存网页时,由于很多写在CSS样式表里面的图片都下载不到,所以会导致下载的网页打开的时候就面目全非了;或者,我们可以更通俗的认为这也是网页图片的一种加密形式吧。

  那么,对于这样的图片保存,就没有好办法来解决了吗?NO!看看如下推荐的几种保存方法吧。

  方法1:使用网际快车下载软件

  最新版的网际快车FlashGet3.1下载软件,其中有个“资源探测器”功能,就可以帮助我们实现CSS图片的探测和下载保存。如图01所示,打开快车资源探测器后,从“文件”菜单下选择“选项”命令进入,然后在“高级”选项栏中勾选“探测CSS中的图片”。

Flashget

图01 快车资源探测器设置

  接下来在资源探测器页面的地址栏中输入要下载网页地址,单击右方的“探测”按钮,稍等片刻即可搜索得到此网页中的所有图片地址了,如图02所示;然后再利用快车软件麻利的下载即可。

 

Flashget

图02 探测图片并下载

  友情提示:除了具备CSS中图片的探测能力外,快车资源探测器还可一步实现网页中隐藏的音视频资源、软件下载资源等地址,真正实现下载无限制哦。

  方法2:网页下载后寻找

  在浏览器中打开css图片所在网页,然后查看网页源文件并找到css路径;将路径再复制到浏览器中下载到本地计算机上,如图03所示。

 

Flashget

图03 下载网页css文件

  接下来要做的就是寻找此css文件中的内嵌图片了。有两种方法可以实现,一是直接打开此css文件,一个一个查找图片地址并下载,很明显这种方法比较费时。另一种办法就是使用css图片批量获取工具,如图4所示,在“CSS文件”中导入刚下载的css文件,然后单击右方的“查找”按钮;下方显示出寻找到的图片地址后再全部选取,最后单击“下载”按钮即可。

 

Flashget

图04 查找并下载css中的图片

  友情提示:在上述介绍的“CSS图片获取工具”的使用中要注意“文件基址”一栏的填写,基址也就是添加的那个CSS文件所在网站首页的地址,如果写错可就下载不到文件了;“匹配模式”一项不用理会,保持默认选择项即可。

  知识链接:CSS就是层叠样式表,在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。CSS中的图片也正是基于这样的控制目的而生。当一些网页设计新手们要偷偷懒,想把对方网页中的一些图片直接拿过来为自己所用,但这些图片又是基于CSS架构时,就要考虑如何下载保存的问题了,当然也就可以使用本文介绍的方法了。

12.语法的缩写规则

  使用缩写可以减少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);

 

13.clip属性完全解答

  clip属性是一个比较有用的属性,但往往在实际应用中,并不多见,介绍的也很少。应用clip属性需要注意的两点:

  一、clip属性必须和定位属性postion一起使用才能生效。

  二、clip裁切的计算坐标都是以左上角即(0,0)点开始计算,如图三所示,这点不像padding和margin,它们两个的右边距和下边距是从最右边和最下边开始计算的。

clip属性基础语法:

clip : auto   rect ( number number number number )
取值:
auto :  默认值。对象无剪切
rect ( number number number number ) :  依据上-右-下-左的顺序提供自对象左上角为(0,0)坐标计算的四个偏移数值,其中任一数值都可用 auto 替换,即此边不剪切

clip属性说明:

  检索或设置对象的可视区域。可视区域外的部分是透明的。

  此属性定义了绝对(absolute)定位对象可视区域的尺寸。必须将 position 属性的值设为 absolute ,此属性方可使用。

  自IE5开始,此属性在MAC平台上可用。

  对应的脚本特性为 clip 。

  CSS中的clip属性除了可以制作彩色文字外,还可以有效地裁切其他网页中的元素。

  clip属性设置元素的形状。这个属性用于定义一个剪裁矩形。在这个矩形内的内容才可见,出了这个剪裁区域的内容和 overflow:hidden 的效果相同。剪裁区域可能比元素的内容区大,也可能比内容区小。

  clip属性值:auto   rect (top, right, bottom, left)

  auto代表不裁切,rect中的上右下左四个方向填入的应是数值,表示裁切的位置。

  下面我举一个对图片进行裁切的简单例子。

  首先准备一张图片,如图一中所示,它的尺寸是159px*99像素。我打算利用clip属性将图片进行裁切,只让图中的大红点显示出来。

  我先制作一个放置图片的div外框,它的CSS定义如下:

14.如何实现图片垂直居中

在曾经的 淘宝UED 招聘 中有这样一道题目:

 

“使用纯CSS实现未知尺寸的图片(但高宽都小于200px)在200px的正方形容器中水平和垂直居中。”

 

当然出题并不是随意,而是有其现实的原因,垂直居中是 淘宝 工作中最常遇到的一个问题,很有代表性。

 

题目的难点在于两点:

 

      1.垂直居中;


      2.图片是个置换元素,有些特殊的特性。


至于如何解决,下面是一个权衡的相对结构干净,CSS简单的解决方法:


.box {


 /*非IE的主流浏览器识别的垂直居中的方法*/


 display: table-cell;


 vertical-align:middle;

 

 /*设置水平居中*/


 text-align:center;

 

 /* 针对IE的Hack */


 *display: block;


 *font-size: 175px;/*约为高度的0.873,200*0.873 约为175*/


 *font-family:Arial;/*防止非utf-8引起的hack失效问题,如gbk编码*/

 

 width:200px;


 height:200px;


 border: 1px solid #eee;


}


.box img {


 /*设置图片垂直居中*/


 vertical-align:middle;


}

 


 " />



 

15.把标题超出的部分变成...

<html>
<body>
<style>
.ellipsis span {
   white-space:nowrap;
   text-overflow:ellipsis; /* for internet explorer */
   overflow:hidden;
   width:190px;
   display:block;
}
html>body .ellipsis {
   clear:both;
}
html>body .ellipsis span:after {
   content: "...";
}
html>body .ellipsis span {
   max-width:180px;
   width:auto !important;
   float:left;
}
</style>
<div class="ellipsis">
<span>多特软件站_中国最快最安全的软件下载站_六大杀毒软件检测</span>
</div>
</body>
</html>

 

这个虽然是个好方法,可以不用程序控制了,而且也方便修改,但缺陷是firefox浏览器不支持。

16.实现段落前面缩进两个字

<style type="text/css">
<!--
p{
 text-indent: 2em; /*em是相对单位,2em即现在一个字大小的两倍*/
}
-->
</style>


<p>段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。长度单位em。相对于当前对象内文本的字体尺寸。我们首行缩进了2em。2em即现在一个字大小的两倍。</p>

段落前面空两个字的距离,不要再使用空格了。应该使用首行缩进text-indent。text-indent可以使得容器内首行缩进一定单位。比如中文段落一般每段前空两个汉字。

 

在这里我们需要了解一种长度单位em。em是相对长度单位。相对于当前对象内文本的字体尺寸。我们中文段落一般每段前空两个汉字。实际上,就是首行缩进了2em。


 

17.伪类前的冒号和两个冒号区别

  在一次项目中,有一次要用到::selection伪元素,然后开发同学问我,CSS中一个冒号和两个冒号有神马区别?

  这好像真的是个问题,或许很多前端同学对此都有疑惑,查了些资料,证实了下两个符号的区别,简而言之:单冒号(:)用于CSS3伪类,双冒号(::)用于CSS3伪元素。

  W3C关于CSS3选择器的规范中有一段描述:

  A pseudo-element is made of two colons (::) followed by the name of the pseudo-element.

  This :: notation is introduced by the current document in order to establish a discrimination between pseudo-classes and pseudo-elements. For compatibility with existing style sheets, user agents must also accept the previous one-colon notation for pseudo-elements introduced in CSS levels 1 and 2 (namely, :first-line, :first-letter, :before and :after). This compatibility is not allowed for the new pseudo-elements introduced in CSS level 3.

  简单翻译一下,大意就是,伪元素由双冒号和伪元素名称组成。双冒号是在当前规范中引入的,用于区分伪类和伪元素。但是伪类兼容现存样式,浏览器需要同时支持旧的伪类,比如:first-line、:first-letter、:before、:after等。

  那么现在就可以完整的回答标题中的问题了,对于CSS2之前已有的伪元素,比如:before,单冒号和双冒号的写法::before作用是一样的。

  所以,如果你的网站只需要兼容webkit、firefox、opera等浏览器,建议对于伪元素采用双冒号的写法,如果不得不兼容IE浏览器,还是用CSS2的单冒号写法比较安全。

18.如何定义CSS3属性的书写顺序

一、不同书写顺序示例


首先是比较聪明和值得推荐的写法:

19.10个DIV+CSS需要注意的问题

1. 检查HTML元素是否有拼写错误、是否忘记结束标记

 

即使是老手也经常会弄错div的嵌套关系。可以用dreamweaver的验证功能检查一下有无错误。

 

2. 检查CSS是否正确

 

检查一下有无拼写错误、是否忘记结尾的 } 等。可以利用CleanCSS来检查 CSS的拼写错误。CleanCSS本是为CSS减肥的工具,但也能检查出拼写错误。

 

3. 确定错误发生的位置

 

假如错误影响了整体布局,则可以逐个删除div块,直到删除某个div块后显示恢复正常,即可确定错误发生的位置。

 

4. 利用border属性确定出错元素的布局特性

 

使用float属性布局一不小心就会出错。这时为元素添加border属性确定元素边界,错误原因即水落石出。

 

5. float元素的父元素不能指定clear属性

 

MacIE下假如对float的元素的父元素使用clear属性,四周的float元素布局就会混乱。这是MacIE的闻名的bug,倘若不

知道就会走弯路。

 

6. float元素务必指定width属性

 

很多浏览器在显示未指定width的float元素时会有bug。所以不管float元素的内容如何,一定要为其指定width属性。

另外指定元素时尽量使用em而不是px做单位。

 

7. float元素不能指定margin和padding等属性

 

IE在显示指定了margin和padding的float元素时有bug。因此不要对float元素指定margin和padding属性(可以在float 元素内部嵌套一个div来设置margin和padding)。也可以使用hack方法为IE指定非凡的值。

 

8. float元素的宽度之和要小于100%

 

假如float元素的宽度之和正好是100%,某些古老的浏览器将不能正常显示。因此请保证宽度之和小于99%。

 

9. 是否重设了默认的样式?

 

某些属性如margin、padding等,不同浏览器会有不同的解释。因此最好在开发前首先将全体的margin、padding设置为

0、列表样式设置为none等。

 

10. 是否忘记了写DTD?


假如无论怎样调整不同浏览器显示结果还是不一样,那么可以检查一下页面开头是不是忘了写下面这行DTD:

<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\" \"http://www.w3.org/TR/html4/loose.dtd/">

20.浏览器默认HTML的CSS样式属性

  这个“浏览器默认HTML的CSS样式属性”,在你需要还原默认值的时候,比较有用。开始的时候应用通配选择器 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默认CSS值了。


  但通配选择器在大型网站的构建中,影响性能,可以参考52CSS.com的相关文章,大家还是需要谨慎一些。

 

  以前一直在找这份文档,今天偶然在w3上看到了。除了inline和block的定义,主要是要注意body|h1~h6|blockquote|menu|ul|ol|dd等标签的默认样式(margin和font-size)。


  • 扫一扫 扫二维码继续学习