当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢?
一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。
- 浏览器缺省设置
- 外部样式表
- 内部样式表(位于 <head> 标签内部)
- 内联样式(在 HTML 元素内部)
因此,内联样式(在 HTML 元素内部)拥有最高的优先权,这意味着它将优先于以下的样式声明:<head> 标签中的样式声明,外部样式表中的样式声明,或者浏览器中的样式声明(缺省值)。
CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明;
下面的例子:h1 是选择器,color 和 font-size 是属性,red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的示意图为您展示了上面这段代码的结构:
===========颜色的几种表示方法=========
p { color:#ff0000
; }//十六进制表示颜色h1 {color:red;}//p { color:还可以通过两种方法使用 RGB 值:#f00
; }//css的缩写样式p { color:注意,当使用 RGB 百分比时,即使当值为 0 时也要写百分比符号。但是在其他的情况下就不需要这么做了。比如说,当尺寸为 0 像素时,0 之后不需要使用 px 单位,因为 0 就是 0,无论单位是什么。rgb(255,0,0)
; } p { color:rgb(100%,0%,0%)
; }
=============================
如果值为若干单词,则要给值加引号:
p {font-family: "sans serif"
;}
多重声明:
提示:如果要定义不止一个声明,则需要用分号将每个声明分开。下面的例子展示出如何定义一个红色文字的居中段落。最后一条规则是不需要加分号的,因为分号在英语中是一个分隔符号,不是结束符号。然而,大多数有经验的设计师会在每条声明的末尾都加上分号,这么做的好处是,当你从现有的规则中增减声明时,会尽可能地减少出错的可能性。就像这样:
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 名称对大小写是敏感的。
选择器的分组
你可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中,我们对所有的标题元素进行了分组。所有的标题元素都是绿色的
h1,h2,h3,h4,h5,h6
{
color: green;
}
继承及其问题
根据 CSS,子元素从父元素继承属性。
===================选择器=====================
1.派生选择器
通过依据元素在其位置的上下文关系来定义样式,你可以使标记更加简洁。
在 CSS1 中,通过这种方式来应用规则的选择器被称为上下文选择器 (contextual selectors),这是由于它们依赖于上下文关系来应用或者避免某项规则。在 CSS2 中,它们称为派生选择器,但是无论你如何称呼它们,它们的作用都是相同的。
派生选择器允许你根据文档的上下文关系来确定某个标签的样式。通过合理地使用派生选择器,我们可以使 HTML 代码变得更加整洁。
比方说,你希望列表中的 strong 元素变为斜体字,而不是通常的粗体字,可以这样定义一个派生选择器:
li strong
{
font-style: italic;
font-weight: normal;
}
<p><strong>我是粗体字,不是斜体字,因为我不在列表当中,所以这个规则对我不起作用</strong></p> <ol><li><strong>
我是斜体字。这是因为 strong 元素位于 li 元素内。</strong></li>
<li>我是正常的字体。</li> </ol>
2.id选择器
id 属性只能在每个 HTML 文档中出现一次;
例如:id 属性为 red 的 p 元素显示为红色,而 id 属性为 green 的 p 元素显示为绿色
#red
{color:red;}#green
{color:green;}
<pid="red"
>这个段落是红色。</p> <pid="green"
>这个段落是绿色。</p>
div #sidebar
{
border: 1px dotted #000;
padding: 10px;
}
#sidebar p
{
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
3.类选择器
在 CSS 中,类选择器以一个点号显示:,
下面的例子:所有拥有 center 类的 HTML 元素均为居中。h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则
.center
{text-align: center}
<h1class="center"
> This heading will be center-aligned </h1> <pclass="center"
> This paragraph will also be center-aligned. </p>
和 id 一样,class 也可被用作派生选择器:
.fancy td
{
color: #f60;
background: #666;
}
元素也可以基于它们的类而被选择:
td.fancy
{
color: #f60;
background: #666;
}
你可以将类 fancy 分配给任何一个表格元素任意多的次数。那些以 fancy 标注的单元格都会是带有灰色背景的橙色。那些没有被分配名为 fancy 的类的单元格不会受这条规则的影响。还有一点值得注意,class 为 fancy 的段落也不会是带有灰色背景的橙色,当然,任何其他被标注为 fancy 的元素也不会受这条规则的影响。这都是由于我们书写这条规则的方式,这个效果被限制于被标注为 fancy 的表格单元(即使用 td 元素来选择 fancy 类)。
4.属性选择器
对带有指定属性的 HTML 元素设置样式。
[title]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式:</h1>
<h2 title="Hello world">Hello world</h2>
<a title="W3School" href="../../w3school.com.cn/default.htm">W3School</a>
</body>
=2.======下面的例子为 title="W3School" 的所有元素设置样式:===============
[title=W3School]
{
border:5px solid blue;
}
=3.==========下面的例子为包含指定值的 title 属性的所有元素设置样式。适用于由空格分隔的属性值:
<style type="text/css">
[title~=hello]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式:</h1>
<h2 title="hello world">Hello world</h2>
<p title="student hello">Hello W3School students!</h1>
<hr />
=4.========下面的例子为带有包含指定值的 lang 属性的所有元素设置样式。适用于由连字符分隔的属性值=
<style type="text/css">
[lang|=en]
{
color:red;
}
</style>
</head>
<body>
<h1>可以应用样式:</h1>
<p lang="en">Hello!</p>
<p lang="en-us">Hi!</p>
<hr />
=5.========
input[type="text"] { width:150px; display:block; margin-bottom:10px; background-color:yellow; font-family: Verdana, Arial; } input[type="button"] { width:120px; margin-left:35px; display:block; font-family: Verdana, Arial; }
<style>
div[class^="test"]
{
background:#ffff00;
}
</style>
</head>
<body>
<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>
</body>
=7.===============设置 class 属性值以 "test" 结尾的所有 div 元素的背景色:
<head>
<style>
div[class$="test"]
{
background:#ffff00;
}
</style>
</head>
<body>
<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>
</body>
=8.============设置 class 属性值包含 "test" 的所有 div 元素的背景色:====
<head>
<style>
div[class*="test"]
{
background:#ffff00;
}
</style>
</head>
<body>
<div class="first_test">第一个 div 元素。</div>
<div class="second">第二个 div 元素。</div>
<div class="test">第三个 div 元素。</div>
<p class="test">这是段落中的文本。</p>
</body>
---------------后代选择器---------
不管儿子,孙子,都有效;
---------------子元素选择器--------
只对儿子有效;
与后代选择器相比,子元素选择器(Child selectors)只能选择作为某元素子元素的元素。
选择子元素
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:
h1 > strong {color:red;}
这个规则会把第一个 h1 下面的两个 strong 元素变为红色,但是第二个 h1 中的 strong 不受影响:
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1> <h1>This is <em>really <strong>very</strong></em> important.</h1>
==============相邻兄弟选择器==================
相邻兄弟选择器(Adjacent sibling selector)可选择紧接在另一元素后的元素,且二者有相同父元素。
选择相邻兄弟
如果需要选择紧接在另一个元素后的元素,而且二者有相同的父元素,可以使用相邻兄弟选择器(Adjacent sibling selector)。
例如,如果要增加紧接在 h1 元素后出现的段落的上边距,可以这样写:
h1 + p {margin-top:50px;}
这个选择器读作:“选择紧接在 h1 元素后出现的段落,h1 和 p 元素拥有共同的父元素”。
语法解释
相邻兄弟选择器使用了加号(+),即相邻兄弟结合符(Adjacent sibling combinator)。
注释:与子结合符一样,相邻兄弟结合符旁边可以有空白符。
请看下面这个文档树片段:
<div> <ul> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ul> <ol> <li>List item 1</li> <li>List item 2</li> <li>List item 3</li> </ol> </div>
在上面的片段中,div 元素中包含两个列表:一个无序列表,一个有序列表,每个列表都包含三个列表项。这两个列表是相邻兄弟,列表项本身也是相邻兄弟。不过,第一个列表中的列表项与第二个列表中的列表项不是相邻兄弟,因为这两组列表项不属于同一父元素(最多只能算堂兄弟)。
请记住,用一个结合符只能选择两个相邻兄弟中的第二个元素。请看下面的选择器:
li + li {font-weight:bold;}
上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。
结合其他选择器
相邻兄弟结合符还可以结合其他结合符:
html > body table + ul {margin-top:20px;}
这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。
==========伪类============
CSS 伪类用于向某些选择器添加特殊的效果。
----------锚伪类---------------
在支持 CSS 的浏览器中,链接的不同状态都可以不同的方式显示,这些状态包括:活动状态,已被访问状态,未被访问状态,和鼠标悬停状态。
a:link
{color: #FF0000} /* 未访问的链接 */a:visited
{color: #00FF00} /* 已访问的链接 */a:hover
{color: #FF00FF} /* 鼠标移动到链接上 */a:active
{color: #0000FF} /* 选定的链接 */
提示:在 CSS 定义中,a:hover 必须被置于 a:link 和 a:visited 之后,才是有效的。
提示:在 CSS 定义中,a:active 必须被置于 a:hover 之后,才是有效的。
提示:伪类名称对大小写不敏感。
-------------伪类与 CSS 类-----------
伪类可以与 CSS 类配合使用:
a.red
: visited {color: #FF0000} <a class="red
" href="css_syntax.asp">CSS Syntax</a>
假如上面的例子中的链接被访问过,那么它将显示为红色
----------选择器匹配属于任意元素的第一个子元素的 <p> 元素:
========匹配所有 <p> 元素中的第一个 <em> 元素
在本例中,选择器匹配属于 <p> 元素中的第一个子元素的 <em> 元素:
===========匹配所有第一个子元素 <p> 元素中的所有 <em> 元素
在下面的例子中,选择器匹配属于其他元素的第一个子元素的 <p> 元素中的所有 <em>:
浏览器支持
所有主流浏览器都支持 :first-child 伪类。
提示:为了保证 :first-child 伪类在 IE 中正常工作,必须声明 <!DOCTYPE>。
定义和用法
:first-child 伪类向元素的第一个子元素添加样式。
说明
利用 :first-child 这个伪类,只有当元素是另一个元素的第一个子元素时才能匹配。例如,p:first-child 会选择作为另外某个元素第一个子元素的所有 p 元素。一般可能认为这会选择作为段落第一个子元素的元素,但事实上并非如此,如果要选择段落的第一个子元素,应当写为 p > *:first-child。
=----------------CSS2 - :lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则。在下面的例子中,:lang 类为属性值为 no 的 q 元素定义引号的类型:
------------------------------------<style type="text/css">
q:lang(no)
{
quotes: "~" "~"
}
</style>
</head>
<body>
<p>:lang 伪类允许您为不同的语言定义特殊的规则。在下面的例子中,在下面的例子中,:lang 类为带有值为 "no" 的 lang 属性的 q 元素定义引号的类型:</p>
<p>一些文本 <q lang="no">段落中的引用</q> 一些文本。</p>
</body>
-----------------focus------------------------
<style type="text/css">
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>
<form action="form_action.asp" method="get">
First name: <input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
<input type="submit" value="Submit" />
</form>
<p><b>注释:</b>如果已规定 !DOCTYPE,那么 Internet Explorer 8 (以及更高版本)支持 :focus 伪类。</p>
----------------------------
伪类
W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。
属性 | 描述 | CSS |
---|---|---|
:active | 向被激活的元素添加样式。 | 1 |
:focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式。 | 1 |
:link | 向未被访问的链接添加样式。 | 1 |
:visited | 向已被访问的链接添加样式。 | 1 |
:first-child | 向元素的第一个子元素添加样式。 | 2 |
:lang | 向带有指定 lang 属性的元素添加样式。 |
==========伪元素==========
:first-line 伪元素
"first-line" 伪元素用于向文本的首行设置特殊样式。
在下面的例子中,浏览器会根据 "first-line" 伪元素中的样式对 p 元素的第一行文本进行格式化:
注释:"first-line" 伪元素只能用于块级元素。
注释:下面的属性可应用于 "first-line" 伪元素:
- font
- color
- background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
-------------:first-letter 伪元素
"first-letter" 伪元素用于向文本的首字母设置特殊样式:
伪元素和 CSS 类
伪元素可以与 CSS 类配合使用:
p.article:first-letter
{
color: #FF0000;
}
<p class="article">This is a paragraph in an article。</p>
上面的例子会使所有 class 为 article 的段落的首字母变为红色。
-------------多重伪元素
可以结合多个伪元素来使用。
在下面的例子中,段落的第一个字母将显示为红色,其字体大小为 xx-large。第一行中的其余文本将为蓝色,并以小型大写字母显示。段落中的其余文本将以默认字体大小和颜色来显示:
--------------CSS2 - :before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 <h1> 元素前面插入一幅图片
------------CSS2 - :after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片
伪元素
W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。
属性 | 描述 | CSS |
---|---|---|
:first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
:first-line | 向文本的首行添加特殊样式。 | 1 |
:before | 在元素之前添加内容。 | 2 |
:after | 在元素之后添加内容。 |
======插入样式表===============
当读到一个样式表时,浏
览器会根据它来格式化 HTML 文档。插入样式表的方法有三种:
1.外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。
<head> <不要在属性值与单位之间留有空格。假如你使用 “margin-left: 20 px” 而不是 “margin-left: 20px” ,它仅在 IE 6 中有效,但是在 Mozilla/Firefox 或 Netscape 中却无法正常工作link
rel="stylesheet" type="text/css" href="mystyle.css
" /> </head>
2.内部样式表
当单个文档需要特殊的样式时,就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表,就像这样:
<head><style type="text/css">
hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style>
</head>
3.内联样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距:
<p style
="color: sienna; margin-left: 20px">
This is a paragraph
</p>
@import url("引入的css文件");----------如果使在统一目录下可以直接写成a.css;如果不在同一目录下,就必须写全路径192.168.0.1/a.css;
=================样式======================
一.背景色---------
可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜
色值。
p {background-color: gray; padding: 20px;}background-color 不能继承,其默认值是 transparent。transparent 有“透
明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖
先元素的背景才能可见。
二。背景图片-----------
要把图像放入背景,需要使用 background-image 属性。background-image
属性的默认值是 none,表示背景上没有放置任何图像。
body {background-image: url(/i/eg_bg_04.gif);background-image 也不能继承。事实上,所有背景属性都不能继承。
--------背景重复----------------------
如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一
样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat
则不允许图像在任何方向上平铺。
默认地,背景图像将从一个元素的左上角开始。请看下面的例子
body{
background-image: url(/i/eg_bg_03.gif);
background-repeat: repeat-y;
}
--------------背景定位-------------
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
}
为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right 和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或 5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。
关键字
图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。
根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对应垂直方向。
如果只出现一个关键字,则认为另一个关键字是 center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
下面是等价的位置关键字:
单一关键字 | 等价的关键字 |
---|---|
center | center center |
top | top center 或 center top |
bottom | bottom center 或 center bottom |
right | right center 或 center right |
left | left center 或 center left |
---------百分数值------------
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
}
这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明
如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。
background-position 的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。
-----------长度值------------
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
body
{
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
}
注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐
------------背景关联-----------------
如果文档比较长,那么当文档向下滚动时,背景图像也会随之滚动。当文档滚动到超过图像的位置时,图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。通过这个属性,可以声明图像相对于可视区是固定的(fixed),因此不会受到滚动的影响
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
CSS 背景属性
属性 | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |
====================文本属性===============
CSS 文本属性可定义文本的外观。
通过文本属性,您可以改变文本的颜色、字符间距,对齐文本,装饰文本,对文本进行缩进,等等。
---------------缩进文本-------------------
把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。
CSS 提供了 text-indent 属性,该属性可以方便地实现文本缩进。
通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。
这个属性最常见的用途是将段落的首行缩进,下面的规则会使所有段落的首行缩进 5 em:
p {text-indent: 5em;}
注意:一般来说,可以为所有块级元素应用 text-indent,但无法将该属性应用于行内元素,图像之类的替换元素上也无法应用 text-indent 属性。不过,如果一个块级元素(比如段落)的首行中有一个图像,它会随该行的其余文本移动。
提示:如果想把一个行内元素的第一行“缩进”,可以用左内边距或外边距创造这种效果。
使用负值
text-indent 还可以设置为负值。利用这种技术,可以实现很多有趣的效果,比如“悬挂缩进”,即第一行悬挂在元素中余下部分的左边:
p {text-indent: -5em;}不过在为 text-indent 设置负值时要当心,如果对一个段落设置了负值,那么首行的某些文本可能会超出浏览器窗口的左边界。为了避免出现这种显示问题,建议针对负缩进再设置一个外边距或一些内边距:
p {text-indent: -5em; padding-left: 5em;}
使用百分比值
text-indent 可以使用所有长度单位,包括百分比值。
百分数要相对于缩进元素父元素的宽度。换句话说,如果将缩进值设置为 20%,所影响元素的第一行会缩进其父元素宽度的 20%。
在下例中,缩进值是父元素的 20%,即 100 个像素:
div {width: 500px;} p {text-indent: 20%;} <div> <p>this is a paragragh</p> </div>
继承
text-indent 属性可以继承,请考虑如下标记:
div#outer {width: 500px;} div#inner {text-indent: 10%;} p {width: 200px;} <div id="outer"> <div id="inner">some text. some text. some text. <p>this is a paragragh.</p> </div> </div>以上标记中的段落也会缩进 50 像素,这是因为这个段落继承了 id 为 inner 的 div 元素的缩进值。
---------------水平对齐----------------------
text-align 是一个基本的属性,它会影响一个元素中的文本行互相之间的对齐方式。它的前 3 个值相当直接,不过第 4 个和第 5 个则略有些复杂。
值 left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
西方语言都是从左向右读,所有 text-align 的默认值是 left。文本在左边界对齐,右边界呈锯齿状(称为“从左到右”文本)。对于希伯来语和阿拉伯语之类的的语言,text-align 则默认为 right,因为这些语言从右向左读。不出所料,center 会使每个文本行在元素中居中。
提示:将块级元素或表元素居中,要通过在这些元素上适当地设置左、右外边距来实现。
text-align:center 与 <CENTER>
您可能会认为 text-align:center 与 <CENTER> 元素的作用一样,但实际上二者大不相同。
<CENTER> 不仅影响文本,还会把整个元素居中。text-align 不会控制元素的对齐,而只影响内部内容。元素本身不会从一段移到另一端,只是其中的文本受影响。
justify
最后一个水平对齐属性是 justify。
在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。您也许已经注意到了,两端对齐文本在打印领域很常见。
需要注意的是,要由用户代理(而不是 CSS)来确定两端对齐文本如何拉伸,以填满父元素左右边界之间的空间。
----------字间隔----------
word-spacing 属性可以改变字(单词)之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。如果提供一个正长度值,那么字之间的间隔就会增加。为 word-spacing 设置一个负值,会把它拉近:
p.spread {word-spacing: 30px;} p.tight {word-spacing: -0.5em;} <p class="spread"> This is a paragraph. The spaces between words will be increased. </p> <p class="tight"> This is a paragraph. The spaces between words will be decreased. </p>
----------字母间隔----------
letter-spacing 属性与 word-spacing 的区别在于,字母间隔修改的是字符或字母之间的间隔。
与 word-spacing 属性一样,letter-spacing 属性的可取值包括所有长度。默认关键字是 normal(这与 letter-spacing:0 相同)。输入的长度值会使字母之间的间隔增加或减少指定的量:
h1 {letter-spacing: -0.5em} h4 {letter-spacing: 20px} <h1>This is header 1</h1> <h4>This is header 4</h4>
-------------字符转换-------------
字符转换
text-transform 属性处理文本的大小写。这个属性有 4 个值:
- none
- uppercase
- lowercase
- capitalize
默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。
作为一个属性,text-transform 可能无关紧要,不过如果您突然决定把所有 h1 元素变为大写,这个属性就很有用。不必单独地修改所有 h1 元素的内容,只需使用 text-transform 为你完成这个修改:
text-transform 属性处理文本的大小写。这个属性有 4 个值:
- none
- uppercase
- lowercase
- capitalize
默认值 none 对文本不做任何改动,将使用源文档中的原有大小写。顾名思义,uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后,capitalize 只对每个单词的首字母大写。
作为一个属性,text-transform 可能无关紧要,不过如果您突然决定把所有 h1 元素变为大写,这个属性就很有用。不必单独地修改所有 h1 元素的内容,只需使用 text-transform 为你完成这个修改:
h1 {text-transform: uppercase}使用 text-transform 有两方面的好处。首先,只需写一个简单的规则来完成这个修改,而无需修改 h1 元素本身。其次,如果您以后决定将所有大小写再切换为原来的大小写,可以更容易地完成修改。
----------文本装饰-------------
接下来,我们讨论 text-decoration 属性,这是一个很有意思的属性,它提供了很多非常有趣的行为。
text-decoration 有 5 个值:
- none
- underline
- overline
- line-through
- blink
不出所料,underline 会对元素加下划线,就像 HTML 中的 U 元素一样。overline 的作用恰好相反,会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线,等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁,类似于 Netscape 支持的颇招非议的 blink 标记。
none 值会关闭原本应用到一个元素上的所有装饰。通常,无装饰的文本是默认外观,但也不总是这样。例如,链接默认地会有下划线。如果您希望去掉超链接的下划线,可以使用以下 CSS 来做到这一点:
a {text-decoration: none;}
注意:如果显式地用这样一个规则去掉链接的下划线,那么锚与正常文本之间在视觉上的唯一差别就是颜色(至少默认是这样的,不过也不能完全保证其颜色肯定有区别)。
还可以在一个规则中结合多种装饰。如果希望所有超链接既有下划线,又有上划线,则规则如下:
a:link a:visited {text-decoration: underline overline;}
不过要注意的是,如果两个不同的装饰都与同一元素匹配,胜出规则的值会完全取代另一个值。请考虑以下的规则:
h2.stricken {text-decoration: line-through;} h2 {text-decoration: underline overline;}
对于给定的规则,所有 class 为 stricken 的 h2 元素都只有一个贯穿线装饰,而没有下划线和上划线,因为 text-decoration 值会替换而不是累积起来。
-----------------处理空白符----------------
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
通过使用该属性,可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲,默认的 XHTML 处理已经完成了空白符处理:它会把所有空白符合并为一个空格。所以给定以下标记,它在 Web 浏览器中显示时,各个字之间只会显示一个空格,同时忽略元素中的换行:
<p>This paragraph has many spaces in it.</p>
可以用以下声明显式地设置这种默认行为:
p {white-space: normal;}
上面的规则告诉浏览器按照平常的做法去处理:丢掉多余的空白符。如果给定这个值,换行字符(回车)会转换为空格,一行中多个空格的序列也会转换为一个空格。
值 pre
不过,如果将 white-space 设置为 pre,受这个属性影响的元素中,空白符的处理就有所不同,其行为就像 XHTML 的 pre 元素一样;空白符不会被忽略。
如果 white-space 属性的值为 pre,浏览器将会注意额外的空格,甚至回车。在这个方面,而且仅在这个方面,任何元素都可以相当于一个 pre 元素。
注意:经测试,IE 7 以及更早版本的浏览器不支持该值,因此请使用非 IE 的浏览器来查看上面的实例。
值 nowrap
与之相对的值是 nowrap,它会防止元素中的文本换行,除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行,不过 white-space 值可以应用到任何元素
值 pre-wrap, 当 white-space 属性设置为 pre-wrap 时,浏览器不仅会保留空白符并保留换行符,还允许自动换行。
和 pre-line,当 white-space 属性设置为 pre-line 时,浏览器会保留换行符,并允许自动换行,但是会合并空白符,这是与 pre-wrap 值的不同之处
CSS2.1 引入了值 pre-wrap 和 pre-line,这在以前版本的 CSS 中是没有的。这些值的作用是允许创作人员更好地控制空白符处理。
如果元素的 white-space 设置为 pre-wrap,那么该元素中的文本会保留空白符序列,但是文本行会正常地换行。如果设置为这个值,源文本中的行分隔符以及生成的行分隔符也会保留。pre-line 与 pre-wrap 相反,会像正常文本中一样合并空白符序列,但保留换行符。
总结
下面的表格总结了 white-space 属性的行为:
值 | 空白符 | 换行符 | 自动换行 |
---|---|---|---|
pre-line | 合并 | 保留 | 允许 |
normal | 合并 | 忽略 | 允许 |
nowrap | 合并 | 忽略 | 不允许 |
pre | 保留 | 保留 | 不允许 |
pre-wrap | 保留 | 保留 | 允许 |
------------文本方向---------------------------
如果您阅读的是英文书籍,就会从左到右、从上到下地阅读,这就是英文的流方向。不过,并不是所有语言都如此。我们知道古汉语就是从右到左来阅读的,当然还包括希伯来语和阿拉伯语等等。CSS2 引入了一个属性来描述其方向性。
direction 属性影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的位置。
注释:对于行内元素,只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。
direction 属性有两个值:ltr 和 rtl。大多数情况下,默认值是 ltr,显示从左到右的文本。如果显示从右到左的文本,应使用值 rtl。
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 | 设置字间距。 |
==========字体===================
CSS 字体属性定义文本的字体系列、大小、加粗、风格(如斜体)和变形(如小型大写字母)。
CSS 字体系列
在 CSS 中,有两种不同类型的字体系列名称:
- 通用字体系列 - 拥有相似外观的字体系统组合(比如 "Serif" 或 "Monospace")
- 特定字体系列 - 具体的字体系列(比如 "Times" 或 "Courier")
Serif 字体
---------------指定字体系列--------------
使用 font-family 属性 定义文本的字体系列。
------------------使用通用字体系列---------------------
如果你希望文档使用一种 sans-serif 字体,但是你并不关心是哪一种字体,以下就是一个合适的声明:
body {font-family: sans-serif;}
这样用户代理就会从 sans-serif 字体系列中选择一个字体(如 Helvetica),并将其应用到 body 元素。因为有继承,这种字体选择还将应用到 body 元素中包含的所有元素,除非有一种更特定的选择器将其覆盖。
----------------指定字体系列---------------------
除了使用通用的字体系列,您还可以通过 font-family 属性设置更具体的字体。
下面的例子为所有 h1 元素设置了 Georgia 字体:
h1 {font-family: Georgia;}
这样的规则同时会产生另外一个问题,如果用户代理上没有安装 Georgia 字体,就只能使用用户代理的默认字体来显示 h1 元素。
我们可以通过结合特定字体名和通用字体系列来解决这个问题:
h1 {font-family: Georgia, serif
;}
如果读者没有安装 Georgia,但安装了 Times 字体(serif 字体系列中的一种字体),用户代理就可能对 h1 元素使用 Times。尽管 Times 与 Georgia 并不完全匹配,但至少足够接近。
因此,我们建议在所有 font-family 规则中都提供一个通用字体系列。这样就提供了一条后路,在用户代理无法提供与规则匹配的特定字体时,就可以选择一个候选字体。
如果您对字体非常熟悉,也可以为给定的元素指定一系列类似的字体。要做到这一点,需要把这些字体按照优先顺序排列,然后用逗号进行连接:
p {font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;}
根据这个列表,用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用,就会简单地选择一种可用的 serif 字体。
----------------使用引号--------------
您也许已经注意到了,上面的例子中使用了单引号。只有当字体名中有一个或多个空格(比如 New York),或者如果字体名包括 # 或 $ 之类的符号,才需要在 font-family 声明中加引号。
单引号或双引号都可以接受。但是,如果把一个 font-family 属性放在 HTML 的 style 属性中,则需要使用该属性本身未使用的那种引号:
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">...</p>
-----------字体风格-----------
font-style 属性最常用于规定斜体文本。
该属性有三个值:
- normal - 文本正常显示
- italic - 文本斜体显示
- oblique - 文本倾斜显示
p.normal {font-style:normal;} p.italic {font-style:italic;} p.oblique {font-style:oblique;}
italic 和 oblique 的区别
font-style 非常简单:用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体(italic)是一种简单的字体风格,对每个字母的结构有一些小改动,来反映变化的外观。与此不同,倾斜(oblique)文本则是正常竖直文本的一个倾斜版本。
通常情况下,italic 和 oblique 文本在 web 浏览器中看上去完全一样。
------------字体变形------------------
font-variant 属性可以设定小型大写字母。
小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母。
p {font-variant:small-caps;}
----------字体加粗---------------
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体。
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal,而 700 等价于 bold。
如果将元素的加粗设置为 bolder,浏览器会设置比所继承值更粗的一个字体加粗。与此相反,关键词 lighter 会导致浏览器将加粗度下移而不是上移。
p.normal {font-weight:normal;} p.thick {font-weight:bold;} p.thicker {font-weight:900;}
----------------字体大小-----------------------
font-size 属性设置文本的大小。
有能力管理文本的大小在 web 设计领域很重要。但是,您不应当通过调整文本大小使段落看上去像标题,或者使标题看上去像段落。
请始终使用正确的 HTML 标题,比如使用 <h1> - <h6> 来标记标题,使用 <p> 来标记段落。
font-size 值可以是绝对或相对值。
绝对值:
- 将文本设置为指定的大小
- 不允许用户在所有浏览器中改变文本大小(不利于可用性)
- 绝对大小在确定了输出的物理尺寸时很有用
相对大小:
- 相对于周围的元素来设置大小
- 允许用户在浏览器改变文本大小
注意:如果您没有规定字体大小,普通文本(比如段落)的默认大小是 16 像素 (16px=1em)。
-----使用像素来设置字体大小
通过像素设置文本大小,可以对文本大小进行完全控制:
h1 {font-size:60px;} h2 {font-size:40px;} p {font-size:14px;}
在 Firefox, Chrome, and Safari 中,可以重新调整以上例子的文本大小,但是在 Internet Explorer 中不行。
虽然可以通过浏览器的缩放工具调整文本大小,但是这实际上是对整个页面的调整,而不仅限于文本。
使用 em 来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替 pixels。
W3C 推荐使用 em 尺寸单位。
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素,那么对于该元素,1em 就等于 16 像素。在设置字体大小时,em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em:pixels/16=em
(注:16 等于父元素的默认字体大小,假设父元素的 font-size 为 20px,那么公式需改为:pixels/20=em)
h1 {font-size:3.75em;} /* 60px/16=3.75em */ h2 {font-size:2.5em;} /* 40px/16=2.5em */ p {font-size:0.875em;} /* 14px/16=0.875em */
在上面的例子中,以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过,如果使用 em 单位,则可以在所有浏览器中调整文本大小。
不幸的是,在 IE 中仍存在问题。在重设文本大小时,会比正常的尺寸更大或更小。
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素(父元素)以百分比设置默认的 font-size 值
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
CSS 字体属性
属性 | 描述 |
---|---|
font | 简写属性。作用是把所有针对字体的属性设置在一个声明中。 |
font-family | 设置字体系列。 |
font-size | 设置字体的尺寸。 |
font-size-adjust | 当首选字体不可用时,对替换字体进行智能缩放。(CSS2.1 已删除该属性。) |
font-stretch | 对字体进行水平拉伸。(CSS2.1 已删除该属性。) |
font-style | 设置字体风格。 |
font-variant | 以小型大写字体或者正常字体显示文本。 |
font-weight | 设置字体的粗细。 |
=================设置链接的样式==================
设置链接的样式
能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等)。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态:
- a:link - 普通的、未被访问的链接
- a:visited - 用户已访问的链接
- a:hover - 鼠标指针位于链接的上方
- a:active - 链接被点击的时刻
a:link {color:#FF0000;} /* 未被访问的链接 */ a:visited {color:#00FF00;} /* 已被访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */ a:active {color:#0000FF;} /* 正在被点击的链接 */
当为链接的不同状态设置样式时,请按照以下次序规则:
- a:hover 必须位于 a:link 和 a:visited 之后
- a:active 必须位于 a:hover 之后
常见的链接样式
在上面的例子中,链接根据其状态改变颜色。
让我们看看其他几种常见的设置链接样式的方法:
文本修饰
text-decoration 属性大多用于去掉链接中的下划线:
a:link {text-decoration:none;} a:visited {text-decoration:none;} a:hover {text-decoration:underline;} a:active {text-decoration:underline;}
背景色
background-color 属性规定链接的背景色:
a:link {background-color:#B2FF99;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}
CSS 列表
从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳
系、家谱、参观菜单,甚至你的所有朋友都可以表示为一个列表或者是列表的列表。
由于列表如此多样,这使得列表相当重要,所以说,CSS 中列表样式不太丰富确实是
一大憾事。
列表类型
要影响列表的样式,最简单(同时支持最充分)的办法就是改变其标志类型。
例如,在一个无序列表中,列表项的标志 (marker) 是出现在各列表项旁边的圆点。
在有序列表中,标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型,可以使用属性 list-style-type:
ul {list-style-type : square}
上面的声明把无序列表中的列表项标志设置为方块。
列表项图像
有时,常规的标志是不够的。你可能想对各标志使用一个图像,这可以利用 list-
style-image 属性做到:
ul li {list-style-image : url(xxx.gif)}
只需要简单地使用一个 url() 值,就可以使用图像作为标志。
列表标志位置
CSS2.1 可以确定标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的。
简写列表样式
为简单起见,可以将以上 3 个列表样式属性合并为一个方便的属性:list-style,就像这样:
li {list-style : url(example.gif) square inside}
list-style 的值可以按任何顺序列出,而且这些值都可以忽略。只要提供了一个值,其它的就会填入其默认值。
CSS 列表属性(list)
属性 | 描述 |
---|---|
list-style | 简写属性。用于把所有用于列表的属性设置于一个声明中。 |
list-style-image | 将图象设置为列表项标志。 |
list-style-position | 设置列表中列表项标志的位置。 |
list-style-type | 设置列表项标志的类型。 |
marker-offset |
===============表格table===================
表格边框
如需在 CSS 中设置表格边框,请使用 border 属性。
下面的例子为 table、th 以及 td 设置了蓝色边框:
table, th, td {
border: 1px solid blue;
}
折叠边框
border-collapse 属性设置是否将表格边框折叠为单一边框:
table{
border-collapse:collapse; } table,th, td {
border: 1px solid black; }
表格宽度和高度
通过 width 和 height 属性定义表格的宽度和高度。
下面的例子将表格宽度设置为 100%,同时将 th 元素的高度设置为 50px:
table { width:100%; } th {
height:50px; }
-----表格文本对齐------
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
text-align 属性设置水平对齐方式,比如左对齐、右对齐或者居中:
td { text-align:right; }
vertical-align 属性设置垂直对齐方式,比如顶部对齐、底部对齐或居中对齐:
td {
height:50px
vertical-align:bottom; }
-----表格内边距
如需控制表格中内容与边框的距离,请为 td 和 th 元素设置 padding 属性:
td { padding:15px; }
---表格颜色
下面的例子设置边框的颜色,以及 th 元素的文本和背景颜色:
table, td, th {
border:1px solid green; } th {
background-color:green;
color:white;
}
CSS Table 属性
属性 | 描述 |
---|---|
border-collapse | 设置是否把表格边框合并为单一的边框。 |
border-spacing | 设置分隔单元格边框的距离。 |
caption-side | 设置表格标题的位置。 |
empty-cells | 设置是否显示表格中的空单元格。 |
table-layout | 设置显示单元、行和列的算法。 |
===========css轮廓==========
轮廓(outline)是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用。
CSS outline 属性规定元素轮廓的样式、颜色和宽度。
============css框模型==============
CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。
CSS 框模型概述
元素框的最内部分是实际的内容,直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距,外边距默认是透明的,因此不会遮挡其后的任何元素。
提示:背景应用于由内容和内边距、边框组成的区域。
内边距、边框和外边距都是可选的,默认值是零。但是,许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行,也可以使用通用选择器对所有元素进行设置:
* { margin: 0; padding: 0; }
在 CSS 中,width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸,但是会增加元素框的总尺寸。
假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素,就需要将内容的宽度设置为 70 像素,请看下图:
#box { width: 70px; margin: 10px; padding: 5px; }
提示:内边距、边框和外边距可以应用于一个元素的所有边,也可以应用于单独的边。
提示:外边距可以是负值,而且在很多情况下都要使用负值的外边距。
浏览器兼容性
一旦为页面设置了恰当的 DTD,大多数浏览器都会按照上面的图示来呈现内容。然而 IE 5 和 6 的呈现却是不正确的。根据 W3C 的规范,元素内容占据的空间是由 width 属性设置的,而内容周围的 padding 和 border 值是另外计算的。不幸的是,IE5.X 和 6 在怪异模式中使用自己的非标准模型。这些浏览器的 width 属性不是内容的宽度,而是内容、内边距和边框的宽度的总和。
虽然有方法解决这个问题。但是目前最好的解决方案是回避这个问题。也就是,不要给元素添加具有指定宽度的内边距,而是尝试将内边距或外边距添加到元素的父元素和子元素。
术语翻译
- element : 元素。
- padding : 内边距,也有资料将其翻译为填充。
- border : 边框。
- margin : 外边距,也有资料将其翻译为空白或空白边。
在 w3school,我们把 padding 和 margin 统一地称为内边距和外边距。边框内的空白是内边距,边框外的空白是外边距,
元素的内边距在边框和内容区之间。控制该区域最简单的属性是 padding 属性。
CSS padding 属性定义元素边框与元素内容之间的空白区域。
CSS padding 属性
CSS padding 属性定义元素的内边距。padding 属性接受长度值或百分比值,但不允许使用负值。
例如,如果您希望所有 h1 元素的各边都有 10 像素的内边距,只需要这样:
h1 {padding: 10px;}
您还可以按照上、右、下、左的顺序分别设置各边的内边距,各边均可以使用不同的单位或百分比值:
h1 {padding: 10px 0.25em 2ex 20%;}
单边内边距属性
也通过使用下面四个单独的属性,分别设置上、右、下、左内边距:
您也许已经想到了,下面的规则实现的效果与上面的简写规则是完全相同的:
h1 { padding-top: 10px; padding-right: 0.25em; padding-bottom: 2ex; padding-left: 20%; }
内边距的百分比数值
前面提到过,可以为元素的内边距设置百分数值。百分数值是相对于其父元素的 width 计算的,这一点与外边距一样。所以,如果父元素的 width 改变,它们也会改变。
下面这条规则把段落的内边距设置为父元素 width 的 10%:
p {padding: 10%;}
例如:如果一个段落的父元素是 div 元素,那么它的内边距要根据 div 的 width 计算。
<div style="width: 200px;"> <p>This paragragh is contained within a DIV that has a width of 200 pixels.</p> </div>
注意:上下内边距与左右内边距一致;即上下内边距的百分数会相对于父元素宽度设置,而不是相对于高度。
CSS 内边距属性
属性 | 描述 |
---|---|
padding | 简写属性。作用是在一个声明中设置元素的所内边距属性。 |
padding-bottom | 设置元素的下内边距。 |
padding-left | 设置元素的左内边距。 |
padding-right | 设置元素的右内边距。 |
padding-top | 设置元素的上内边距。 |
================边框==========
元素的边框 (border) 是围绕元素内容和内边距的一条或多条线。
CSS border 属性允许你规定元素边框的样式、宽度和颜色。
CSS 边框
在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使用 CSS 边框属性,我们可以创建出效果出色的边框,并且可以应用于任何元素。
元素外边距内就是元素的的边框 (border)。元素的边框就是围绕元素内容和内边据的一条或多条线。
每个边框有 3 个方面:宽度、样式,以及颜色。在下面的篇幅,我们会为您详细讲解这三个方面。
边框与背景
CSS 规范指出,边框绘制在“元素的背景之上”。这很重要,因为有些边框是“间断的”(例如,点线边框或虚线框),元素的背景应当出现在边框的可见部分之间。
CSS2 指出背景只延伸到内边距,而不是边框。后来 CSS2.1 进行了更正:元素的背景是内容、内边距和边框区的背景。大多数浏览器都遵循 CSS2.1 定义,不过一些较老的浏览器可能会有不同的表现。
边框的样式
样式是边框最重要的一个方面,这不是因为样式控制着边框的显示(当然,样式确实控制着边框的显示),而是因为如果没有样式,将根本没有边框。
CSS 的 border-style 属性定义了 10 个不同的非 inherit 样式,包括 none。
例如,您可以为把一幅图片的边框定义为 outset,使之看上去像是“凸起按钮”:
a:link img {border-style: outset;}
定义多种样式
您可以为一个边框定义多个样式,例如:
p.aside {border-style: solid dotted dashed double;}
上面这条规则为类名为 aside 的段落定义了四种边框样式:实线上边框、点线右边框、虚线下边框和一个双线左边框。
我们又看到了这里的值采用了 top-right-bottom-left 的顺序,讨论用多个值设置不同内边距时也见过这个顺序。
定义单边样式
如果您希望为元素框的某一个边设置边框样式,而不是设置所有 4 个边的边框样式,可以使用下面的单边边框样式属性:
因此这两种方法是等价的:
p {border-style: solid solid solid none;} p {border-style: solid; border-left-style: none;}
注意:如果要使用第二种方法,必须把单边属性放在简写属性之后。因为如果把单边属性放在 border-style 之前,简写属性的值就会覆盖单边值 none。
边框的宽度
您可以通过 border-width 属性为边框指定宽度。
为边框指定宽度有两种方法:可以指定长度值,比如 2px 或 0.1em;或者使用 3 个关键字之一,它们分别是 thin 、medium(默认值) 和 thick。
注释:CSS 没有定义 3 个关键字的具体宽度,所以一个用户代理可能把 thin 、medium 和 thick 分别设置为等于 5px、3px 和 2px,而另一个用户代理则分别设置为 3px、2px 和 1px。
所以,我们可以这样设置边框的宽度:
p {border-style: solid; border-width: 5px;}
或者:
p {border-style: solid; border-width: thick;}
定义单边宽度
您可以按照 top-right-bottom-left 的顺序设置元素的各边边框:
p {border-style: solid; border-width: 15px 5px 15px 5px;}
上面的例子也可以简写为(这样写法称为值复制):
p {border-style: solid; border-width: 15px 5px;}
您也可以通过下列属性分别设置边框各边的宽度:
因此,下面的规则与上面的例子是等价的:
p { border-style: solid; border-top-width: 15px; border-right-width: 5px; border-bottom-width: 15px; border-left-width: 5px; }
没有边框
在前面的例子中,您已经看到,如果希望显示某种边框,就必须设置边框样式,比如 solid 或 outset。
那么如果把 border-style 设置为 none 会出现什么情况:
p {border-style: none; border-width: 50px;}
尽管边框的宽度是 50px,但是边框样式设置为 none。在这种情况下,不仅边框的样式没有了,其宽度也会变成 0。边框消失了,为什么呢?
这是因为如果边框样式为 none,即边框根本不存在,那么边框就不可能有宽度,因此边框宽度自动设置为 0,而不论您原先定义的是什么。
记住这一点非常重要。事实上,忘记声明边框样式是一个常犯的错误。根据以下规则,所有 h1 元素都不会有任何边框,更不用说 20 像素宽了:
h1 {border-width: 20px;}
由于 border-style 的默认值是 none,如果没有声明样式,就相当于 border-style: none。因此,如果您希望边框出现,就必须声明一个边框样式。
边框的颜色
设置边框颜色非常简单。CSS 使用一个简单的 border-color 属性,它一次可以接受最多 4 个颜色值。
可以使用任何类型的颜色值,例如可以是命名颜色,也可以是十六进制和 RGB 值:
p { border-style: solid; border-color: blue rgb(25%,35%,45%) #909090 red; }
如果颜色值小于 4 个,值复制就会起作用。例如下面的规则声明了段落的上下边框是蓝色,左右边框是红色:
p { border-style: solid; border-color: blue red; }
注释:默认的边框颜色是元素本身的前景色。如果没有为边框声明颜色,它将与元素的文本颜色相同。另一方面,如果元素没有任何文本,假设它是一个表格,其中只包含图像,那么该表的边框颜色就是其父元素的文本颜色(因为 color 可以继承)。这个父元素很可能是 body、div 或另一个 table。
定义单边颜色
还有一些单边边框颜色属性。它们的原理与单边样式和宽度属性相同:
要为 h1 元素指定实线黑色边框,而右边框为实线红色,可以这样指定:
h1 { border-style: solid; border-color: black; border-right-color: red; }
透明边框
我们刚才讲过,如果边框没有样式,就没有宽度。不过有些情况下您可能希望创建一个不可见的边框。
CSS2 引入了边框颜色值 transparent。这个值用于创建有宽度的不可见边框。请看下面的例子:
<a href="#">AAA</a> <a href="#">BBB</a> <a href="#">CCC</a>
我们为上面的链接定义了如下样式:
a:link, a:visited {
border-style: solid;
border-width: 5px;
border-color: transparent;
}
a:hover {border-color: gray;}
从某种意义上说,利用 transparent,使用边框就像是额外的内边距一样;此外还有一个好处,就是能在你需要的时候使其可见。这种透明边框相当于内边距,因为元素的背景会延伸到边框区域(如果有可见背景的话)。
重要事项:在 IE7 之前,IE/WIN 没有提供对 transparent 的支持。在以前的版本,IE 会根据元素的 color 值来设置边框颜色。
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 | 设置元素的上边框的宽度。 |
===================外边距margin==========
围绕在元素边框的空白区域是外边距。设置外边距会在元素外创建额外的“空白”。
设置外边距的最简单的方法就是使用 margin 属性,这个属性接受任何长度单位、百分数值甚至负值。
CSS margin 属性
设置外边距的最简单的方法就是使用 margin 属性。
margin 属性接受任何长度单位,可以是像素、英寸、毫米或 em。
margin 可以设置为 auto。更常见的做法是为外边距设置长度值。下面的声明在 h1 元素的各个边上设置了 1/4 英寸宽的空白:
h1 {margin : 0.25in;}
下面的例子为 h1 元素的四个边分别定义了不同的外边距,所使用的长度单位是像素 (px):
h1 {margin : 10px 0px 15px 5px;}
与内边距的设置相同,这些值的顺序是从上外边距 (top) 开始围着元素顺时针旋转的:
margin: top right bottom left
另外,还可以为 margin 设置一个百分比数值:
p {margin : 10%;}
百分数是相对于父元素的 width 计算的。上面这个例子为 p 元素设置的外边距是其父元素的 width 的 10%。
margin 的默认值是 0,所以如果没有为 margin 声明一个值,就不会出现外边距。但是,在实际中,浏览器对许多元素已经提供了预定的样式,外边距也不例外。例如,在支持 CSS 的浏览器中,外边距会在每个段落元素的上面和下面生成“空行”。因此,如果没有为 p 元素声明外边距,浏览器可能会自己应用一个外边距。当然,只要你特别作了声明,就会覆盖默认样式。
值复制
还记得吗?我们曾经在前两节中提到过值复制。下面我们为您讲解如何使用值复制。
有时,我们会输入一些重复的值:
p {margin: 0.5em 1em 0.5em 1em;}
通过值复制,您可以不必重复地键入这对数字。上面的规则与下面的规则是等价的:
p {margin: 0.5em 1em;}
这两个值可以取代前面 4 个值。这是如何做到的呢?CSS 定义了一些规则,允许为外边距指定少于 4 个值。规则如下:
- 如果缺少左外边距的值,则使用右外边距的值。
- 如果缺少下外边距的值,则使用上外边距的值。
- 如果缺少右外边距的值,则使用上外边距的值。
下图提供了更直观的方法来了解这一点:
换句话说,如果为外边距指定了 3 个值,则第 4 个值(即左外边距)会从第 2 个值(右外边距)复制得到。如果给定了两个值,第 4 个值会从第 2 个值复制得到,第 3 个值(下外边距)会从第 1 个值(上外边距)复制得到。最后一个情况,如果只给定一个值,那么其他 3 个外边距都由这个值(上外边距)复制得到。
利用这个简单的机制,您只需指定必要的值,而不必全部都应用 4 个值,例如:
h1 {margin: 0.25em 1em 0.5em;} /* 等价于 0.25em 1em 0.5em 1em */ h2 {margin: 0.5em 1em;} /* 等价于 0.5em 1em 0.5em 1em */ p {margin: 1px;} /* 等价于 1px 1px 1px 1px */
这种办法有一个小缺点,您最后肯定会遇到这个问题。假设希望把 p 元素的上外边距和左外边距设置为 20 像素,下外边距和右外边距设置为 30 像素。在这种情况下,必须写作:
p {margin: 20px 30px 30px 20px;}
这样才能得到您想要的结果。遗憾的是,在这种情况下,所需值的个数没有办法更少了。
再来看另外一个例子。如果希望除了左外边距以外所有其他外边距都是 auto(左外边距是 20px):
p {margin: auto auto auto 20px;}
同样的,这样才能得到你想要的效果。问题在于,键入这些 auto 有些麻烦。如果您只是希望控制元素单边上的外边距,请使用单边外边距属性。
单边外边距属性
您可以使用单边外边距属性为元素单边上的外边距设置值。假设您希望把 p 元素的左外边距设置为 20px。不必使用 margin(需要键入很多 auto),而是可以采用以下方法:
p {margin-left: 20px;}
您可以使用下列任何一个属性来只设置相应上的外边距,而不会直接影响所有其他外边距:
一个规则中可以使用多个这种单边属性,例如:
h2 { margin-top: 20px; margin-right: 30px; margin-bottom: 30px; margin-left: 20px; }
当然,对于这种情况,使用 margin 可能更容易一些:
p {margin: 20px 30px 30px 20px;}
不论使用单边属性还是使用 margin,得到的结果都一样。一般来说,如果希望为多个边设置外边距,使用 margin 会更容易一些。不过,从文档显示的角度看,实际上使用哪种方法都不重要,所以应该选择对自己来说更容易的一种方法。
提示和注释
提示:Netscape 和 IE 对 body 标签定义的默认边距(margin)值是 8px。而 Opera 不是这样。相反地,Opera 将内部填充(padding)的默认值定义为 8px,因此如果希望对整个网站的边缘部分进行调整,并将之正确显示于 Opera 中,那么必须对 body 的 padding 进行自定义。
CSS 外边距属性
属性 | 描述 |
---|---|
margin | 简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |
============外边距合并============
外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
外边距合并
外边距合并(叠加)是一个相当简单的概念。但是,在实践中对网页进行布局时,它会造成许多混淆。
简单地说,外边距合并指的是,当两个垂直外边距相遇时,它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图:
当一个元素包含在另一个元素中时(假设没有内边距或边框把外边距分隔开),它们的上和/或下外边距也会发生合并。请看下图:
尽管看上去有些奇怪,但是外边距甚至可以与自身发生合并。
假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了一起,它们会发生合并:
如果这个外边距遇到另一个元素的外边距,它还会发生合并:
这就是一系列的段落元素占用空间非常小的原因,因为它们的所有外边距都合并到一起,形成了一个小的外边距。
外边距合并初看上去可能有点奇怪,但是实际上,它是有意义的。以由几个段落组成的典型文本页面为例。第一个段落上面的空间等于段落的上外边距。如果没有外边距合并,后续所有段落之间的外边距都将是相邻上外边距和下外边距的和。这意味着段落之间的空间是页面顶部的两倍。如果发生外边距合并,段落之间的上外边距和下外边距就合并在一起,这样各处的距离就一致了。
注释:只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
==========定位=============
行内元素(或者叫内连元素):只能容纳文本或者其他内联元素,如:a,span,input;
块元素:一般从心的一行开始,可以容纳文本,其他内联元素,其他块元素,即使内容不能占满一行,块元素也要把
整行占满;如div,p;
块元素和行内元素可以相互转换;
display:inline;-----使用行内元素的方式显示;
display:block;-------使用块元素的方式显示;
不可以在内联元素 <span> 中嵌入块级元素 <p> 。
CSS 定位和浮动
CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务。
定位的基本思想很简单,它允许你定义元素框相对于其正常位置应该出现的位置,或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然,这个功能非常强大,也很让人吃惊。要知道,用户代理对 CSS2 中定位的支持远胜于对其它方面的支持,对此不应感到奇怪。
一切皆为框
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。
您可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 <a> 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。
但是在一种情况下,即使没有进行显式定义,也会创建块级元素。这种情况发生在把一些文本添加到一个块级元素(比如 div)的开头。即使没有把这些文本定义为段落,它也会被当作段落对待:
<div> some text <p>Some more text.</p> </div>
在这种情况下,这个框称为无名块框,因为它不与专门定义的元素相关联。
块级元素的文本行也会发生类似的情况。假设有一个包含三行文本的段落。每行文本形成一个无名框。无法直接对无名块或行框应用样式,因为没有可以应用样式的地方(注意,行框和行内框是两个概念)。但是,这有助于理解在屏幕上看到的所有东西都形成某种框。
-------CSS 定位机制------------
CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。
块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是,垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。
CSS position 属性
通过使用 position 属性,我们可以选择 4 种不同类型的定位,这会影响元素框生成的方式。
position 属性值的含义:
-
static:static定位靠的是margin-left和margin-top;left和top对static没有效果;
- 元素框正常生成。块级元素生成一个矩形框,作为文档流的一部分,行内元素则会创建一个或多个行框,置于其父元素中。 relative;相对定位-----相对于该元素元原来的位置左上角定位;原来的位置保留空白。
- 元素框偏移某个距离。元素仍保持其未定位前的形状,它原本所占的空间仍保留。 absolute:绝对定位;
- 元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。 fixed:固定定位-------以视窗的左上角定位;
- 元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
提示:相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
--------CSS 定位属性
CSS 定位属性允许你对元素进行定位。
属性 | 描述 |
---|---|
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
top | 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。 |
right | 定义了定位元素右外边距边界与其包含块右边界之间的偏移。 |
bottom | 定义了定位元素下外边距边界与其包含块下边界之间的偏移。 |
left | 定义了定位元素左外边距边界与其包含块左边界之间的偏移。 |
overflow | 设置当元素的内容溢出其区域时发生的事情。 |
clip | 设置元素的形状。元素被剪入这个形状之中,然后显示出来。 |
vertical-align | 设置元素的垂直对齐方式。 |
z-index | 设置元素的堆叠顺序。 |
z-index:3;------设置对象的层叠顺序,数值越大越在上面,这个属性仅仅对relative和absolute起作用;
设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状,它原本所占的空间仍保留。
CSS 相对定位:相对于该元素原来的位置的左上角定位,原来的位置保留空白;
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。
如果将 top 设置为 20px,那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素,那么会在元素左边创建 30 像素的空间,也就是将元素向右移动。
#box_relative { position: relative; left: 30px; top: 20px; }
如下图所示:
注意,在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。因此,移动元素会导致它覆盖其它框。
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。
CSS 绝对定位
绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。
普通流中其它元素的布局就像绝对定位的元素不存在一样:
#box_relative { position: absolute; left: 30px; top: 20px; }
如下图所示:
绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块。
对于定位的主要问题是要记住每种定位的意义。所以,现在让我们复习一下学过的知识吧:相对定位是“相对于”元素在文档中的初始位置,而绝对定位是“相对于”最近的已定位祖先元素,如果不存在已定位的祖先元素,那么“相对于”最初的包含块。
注释:根据用户代理的不同,最初的包含块可能是画布或 HTML 元素。
提示:因为绝对定位的框与文档流无关,所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
CSS 浮动
请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
CSS float 属性
在 CSS 中,我们通过 float 属性实现元素的浮动。
行框和清理
浮动框旁边的行框被缩短,从而给浮动框留出空间,行框围绕浮动框。
要想阻止行框围绕浮动框,需要对该框应用 clear 属性。clear 属性的值可以是 left、right、both 或 none,它表示框的哪些边不应该挨着浮动框。
为了实现这种效果,在被清理的元素的上外边距上添加足够的空间,使元素的顶边缘垂直下降到浮动框下面:这是一个有用的工具,它让周围的元素为浮动元素留出空间。
让我们更详细地看看浮动和清理。假设希望让一个图片浮动到文本块的左边,并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。您可能编写下面的代码:
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; } <div class="news"> <img src="news-pic.jpg" /> <p>some text</p> </div>
这种情况下,出现了一个问题。因为浮动元素脱离了文档流,所以包围图片和文本的 div 不占据空间。
如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用 clear:
不幸的是出现了一个新的问题,由于没有现有的元素可以应用清理,所以我们只能添加一个空元素并且清理它。
.news { background-color: gray; border: solid 1px black; } .news img { float: left; } .news p { float: right; }.clear { clear: both; }
<div class="news"> <img src="news-pic.jpg" /> <p>some text</p><div class="clear"></div>
</div>
这样可以实现我们希望的效果,但是需要添加多余的代码。常常有元素可以应用 clear,但是有时候不得不为了进行布局而添加无意义的标记。
不过我们还有另一种办法,那就是对容器 div 进行浮动:
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>
这样会得到我们希望的效果。不幸的是,下一个元素会受到这个浮动元素的影响。为了解决这个问题,有些人选择对布局中的所有东西进行浮动,然后使用适当的有意义的元素(常常是站点的页脚)对这些浮动进行清理。这有助于减少或消除不必要的标记。
事实上,W3School 站点上的所有页面都采用了这种技术,如果您打开我们使用 CSS 文件,您会看到我们对页脚的 div 进行了清理,而页脚上面的三个 div 都向左浮动。
清除浮动:clear:right;
clear:left;
clear:both;
===============css高级=================
--------------------对齐块元素
块元素指的是占据全部可用宽度的元素,并且在其前后都会换行。
使用 margin 属性来水平对齐可通过将左和右外边距设置为 "auto",来对
齐块元素。
注释:除非已经声明了 !DOCTYPE,否则使用 margin:auto
在 IE8 以及更早的版本中是无效的。
把左和右外边距设置为 auto,规定的是均等地分配可用的外边
距。结果就是居中的元素:
.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}
提示:
如果宽度是 100%,则对齐没有效果。
-------------使用 position 属性进行左和右对齐
对齐元素的方法之一是使用绝对定位:
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}
注释:
绝对定位元素会被从正常流中删除,并且能够交叠元素。
-----------跨浏览器兼容性问题
当像这样对齐元素时,对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
当使用 position 属性时,IE8 以及更早的版本存在一个问题。如果容器元素(在我们的案例中是 <div class="container">)设置了指定的宽度,并且省略了 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时,请始终设置 !DOCTYPE 声明
body { margin:0; padding:0; } .container { position:relative; width:100%; } .right { position:absolute; right:0px; width:300px; background-color:#b0e0e6; }
-------------
使用 float 属性来进行左和右对齐
对齐元素的另一种方法是使用 float 属性:
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}
跨浏览器兼容性问题
当像这样对齐元素时,对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。
当使用 float 属性时,IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时,请始终设置 !DOCTYPE 声明:
body { margin:0; padding:0; } .right { float:right; width:300px; background-color:#b0e0e6; }
============CSS 尺寸 (Dimension) 属性=================
CSS 尺寸属性允许你控制元素的高度和宽度。同样,还允许你增加行间距。
属性 | 描述 |
---|---|
height | 设置元素的高度。 |
line-height | 设置行高。 |
max-height | 设置元素的最大高度。 |
max-width | 设置元素的最大宽度。 |
min-height | 设置元素的最小高度。 |
min-width | 设置元素的最小宽度。 |
width | 设置元素的宽度。 |
----------设置图像高度和高度----------
img.normal
{
height: auto
}
img.big
{
height: 160px
}
img.small
{
height: 30px
}
img.big
{
height: 50%
}
p
{
max-height: 10px;-------设置元素最大高度;
}
p
{
max-width: 50%;-----------百分比设置最大宽度;
}
p
{
min-height: 100px;----------设置元素最小高度;
}
p.small {line-height: 90%}-----------使用百分比设置杭行高;
p.small
{
line-height: 10px;-------使用像素设置行高;
}
p.small
{
line-height: 0.5;----------使用数值设置行高;
}
===========CSS 分类属性允许你规定如何以及在何处显示元素。=================
p {display: inline}----------把元素显示为内联元素;
div {display: none}
display: block;-----------显示为会计元素;
float:right;---------右浮动;
h1.visible {visibility:visible}-------设置元素不可见;
h1.invisible {visibility:hidden}-----设置元素可见;
========改变鼠标的光标=========
<body>
<p>请把鼠标移动到单词上,可以看到鼠标指针发生变化:</p>
<span style="cursor:auto">
Auto</span><br />
<span style="cursor:crosshair">
Crosshair</span><br />
<span style="cursor:default">
Default</span><br />
<span style="cursor:pointer">
Pointer</span><br />
<span style="cursor:move">
Move</span><br />
<span style="cursor:e-resize">
e-resize</span><br />
<span style="cursor:ne-resize">
ne-resize</span><br />
<span style="cursor:nw-resize">
nw-resize</span><br />
<span style="cursor:n-resize">
n-resize</span><br />
<span style="cursor:se-resize">
se-resize</span><br />
<span style="cursor:sw-resize">
sw-resize</span><br />
<span style="cursor:s-resize">
s-resize</span><br />
<span style="cursor:w-resize">
w-resize</span><br />
<span style="cursor:text">
text</span><br />
<span style="cursor:wait">
wait</span><br />
<span style="cursor:help">
help</span>
</body>
==================
CSS 分类属性 (Classification)
CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素,使用绝对值来定位元素,以及元素的可见度。
属性 | 描述 |
---|---|
clear | 设置一个元素的侧面是否允许其他的浮动元素。 |
cursor | 规定当指向某元素之上时显示的指针类型。 |
display | 设置是否及如何显示元素。 |
float | 定义元素在哪个方向浮动。 |
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
visibility | 设置元素是否可见或不可见。 |
===============导航=============
--------------水平导航-(display:inline实现)---------
ul
{
list-style-type:none;
margin:0;
padding:0;
}
li
{
display:inline;
}
- list-style-type:none - 删除圆点。导航栏不需要列表项标记。
- 把外边距和内边距设置为 0 可以去除浏览器的默认设定。
-------------垂直导航(浮动float实现)------------
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;---------如果省略这个宽度,在IE6中会出错;
background-color:#dddddd;
}
- display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。
- width:60px - 块元素默认占用全部可用宽度。我们需要规定 60 像素的宽度。
===========水平导航(浮动float实现)============
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a
{
display:block;
width:60px;
background-color:#dddddd;
}
- float:left - 使用 float 来把块元素滑向彼此。
- display:block - 把链接显示为块元素可使整个链接区域可点击(不仅仅是文本),同时也允许我们规定宽度。
- width:60px - 由于块元素默认占用全部可用宽度,链接无法滑动至彼此相邻。我们需要规定 60 像素的宽度
===============CSS3=================
通过 CSS3,您能够创建圆角边框,向矩形添加阴影,使用图片
来绘制边框 - 并且不需使用设计软件,比如 PhotoShop。
- border-radius
- box-shadow
- border-image
注释:对于 border-image,Safari 5 以及更老的版本需要前缀
-webkit-。
Opera 支持 border-radius 和 box-shadow 属性,但是对于
border-image 需要前缀 -o-。
div
{
text-align:center;
border:2px solid #a1a1a1;
padding:10px 40px;
background:#dddddd;
width:350px;
border-radius:25px;--------设置圆角半径
-moz-border-radius:25px; /* 老的 Firefox */
background-color:#ff9900;
-moz-box-shadow: 10px 10px 5px #888888; /*
老Firefox
box-shadow: 10px 10px 5px #888888;---边框阴影
}
------------CSS3 边框图片
{
-moz-border-image:url(../i/border.png) 30 30 round; /* Old Firefox */
-webkit-border-image:url(../i/border.png) 30 30 round; /* Safari and Chrome */
-o-border-image:url(../i/border.png) 30 30 round; /* Opera */
border-image:url(../i/border.png) 30 30 round;
}
新的边框属性
属性 | 描述 | CSS |
---|---|---|
border-image | 设置所有 border-image-* 属性的简写属性。 | 3 |
border-radius | 设置所有四个 border-*-radius 属性的简写属性。 | 3 |
box-shadow | 向方框添加一个或多个阴影。 |
也可以分开来写:
值 | 描述 | 测试 |
---|---|---|
border-image-source | 用在边框的图片的路径。 | |
border-image-slice | 图片边框向内偏移。 | |
border-image-width | 图片边框的宽度。 | |
border-image-outset | 边框图像区域超出边框的量。 | |
border-image-repeat | 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。 |
=============背景=============
div
{
background:url(../i/bg_flower.gif);
background-size:35% 100%;-------背景大小,也可以用像素表示
-moz-background-size:35% 100%; /* 老版本的 Firefox */
background-repeat:no-repeat;------背景平铺
}
CSS3 background-origin 属性
background-origin 属性规定背景图片的定位区域。
背景图片可以放置于 content-box、padding-box 或 border-box 区域。
div
{
border:1px solid black;
padding:35px;
background-image:url('../i/bg_flower.gif');
background-repeat:no-repeat;
background-position:left;
}
#div1
{
background-origin:border-box;
}
#div2
{
background-origin:content-box;
}
------CSS3 多重背景图----
CSS3 允许您为元素使用多个背景图像。
body
{
background-image:url(bg_flower.gif),url(bg_flower_2.gif);
}
上面的代码为 body 元素设置两幅背景图片:
新的背景属性
属性 | 描述 | CSS |
---|---|---|
background-clip | 规定背景的绘制区域。 | 3 |
background-origin | 规定背景图片的定位区域。 | 3 |
background-size | 规定背景图片的尺寸。 |
==========文本效果=========
所有主流浏览器都支持 word-wrap 属性。
注释:Internet Explorer 9 以及更早的版本,不支持 text-shadow 属性。
------CSS3 文本阴影
在 CSS3 中,text-shadow 可向文本应用阴影。
您能够规定水平阴影、垂直阴影、模糊距离,以及阴影的颜色:
h1 { text-shadow: 5px 5px 5px #FF0000; }
---------CSS3 自动换行
单词太长的话就可能无法超出某个区域:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
在 CSS3 中,word-wrap 属性允许您允许文本强制文本进行换行 - 即使这意味着会对单词进行拆分:
This paragraph contains a very long word: thisisaveryveryveryveryveryverylongword. The long word will break and wrap to the next line.
下面是 CSS 代码:
实例
允许对长单词进行拆分,并换行到下一行:
p {word-wrap:break-word;}
新的文本属性
属性 | 描述 | CSS |
---|---|---|
hanging-punctuation | 规定标点字符是否位于线框之外。 | 3 |
punctuation-trim | 规定是否对标点字符进行修剪。 | 3 |
text-align-last | 设置如何对齐最后一行或紧挨着强制换行符之前的行。 | 3 |
text-emphasis | 向元素的文本应用重点标记以及重点标记的前景色。 | 3 |
text-justify | 规定当 text-align 设置为 "justify" 时所使用的对齐方法。 | 3 |
text-outline | 规定文本的轮廓。 | 3 |
text-overflow | 规定当文本溢出包含元素时发生的事情。 | 3 |
text-shadow | 向文本添加阴影。 | 3 |
text-wrap | 规定文本的换行规则。 | 3 |
word-break | 规定非中日韩文本的换行规则。 | 3 |
word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 |
==============字体=================
CSS3 @font-face 规则
在 CSS3 之前,web 设计师必须使用已在用户计算机上安装好的字体。
通过 CSS3,web 设计师可以使用他们喜欢的任意字体。
当您您找到或购买到希望使用的字体时,可将该字体文件存放到 web 服务器上,它
会在需要时被自动下载到用户的计算机上。
您“自己的”的字体是在 CSS3 @font-face 规则中定义的:
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf
(OpenType Fonts) 类型的字体。
Internet Explorer 9+ 支持新的 @font-face 规则,但是仅支持 .eot 类型的字
体 (Embedded OpenType)。
注释:Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。
使用您需要的字体
在新的 @font-face 规则中,您必须首先定义字体的名称(比如
myFirstFont),然后指向该字体文件。
如需为 HTML 元素使用字体,请通过 font-family 属性来引用字体的名称
(myFirstFont)
<style>
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
url('Sansation_Light.eot'); /* IE9+ */
}
div
{
font-family:myFirstFont;
}
</style>
文件 "Sansation_Bold.ttf" 是另一个字体文件,它包含了
Sansation 字体的粗体字符。
只要 font-family 为 "myFirstFont" 的文本需要显示为粗
体,浏览器就会使用该字体。
通过这种方式,我们可以为相同的字体设置许多 @font-face
规则。
CSS3 字体描述符
下面的表格列出了能够在 @font-face 规则中定义的所有字体
描述符:
描述符 | 值 | 描述 |
---|---|---|
font-family | name | 必需。规定字体的名称。 |
src | URL | 必需。定义字体文件的 URL。 |
font-stretch |
| 可选。定义如何拉伸字体。默认是 "normal"。 |
font-style |
| 可选。定义字体的样式。默认是 "normal"。 |
font-weight |
| 可选。定义字体的粗细。默认是 "normal"。 |
unicode-range | unicode-range | 可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF" |
=============2d转换transform=============
CSS3 转换transform属性:
通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
转换是使元素改变形状、尺寸和位置的一种效果。
您可以使用 2D 或 3D 转换来转换您的元素。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 需要前缀 -ms-。
2D 转换如下 2D 转换方法:
- translate()--------平移,值 translate(50px,100px) 把元素从左侧移动
- 50 像素,从顶端移动 100 像素。
-
div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }
- rotate()--------------旋转,值 rotate(30deg) 把元素顺时针旋转 30 度。
-
div { transform: rotate(30deg); -ms-transform: rotate(30deg); /* IE 9 */ -webkit-transform: rotate(30deg); /* Safari and Chrome */ -o-transform: rotate(30deg); /* Opera */ -moz-transform: rotate(30deg); /* Firefox */ }
- scale()----------缩放,值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高
- 度转换为原始高度的 4 倍。
-
div { transform: scale(2,4); -ms-transform: scale(2,4); /* IE 9 */ -webkit-transform: scale(2,4); /* Safari 和 Chrome */ -o-transform: scale(2,4); /* Opera */ -moz-transform: scale(2,4); /* Firefox */ }
- skew()---倾斜----值 skew(30deg,20deg) 围绕 X 轴把元素翻转 30 度,
- 围绕
- Y 轴翻转 20 度。
-
skew() 方法
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线
(Y 轴)参数:
div { transform: skew(30deg,20deg); -ms-transform: skew(30deg,20deg); /* IE 9 */ -webkit-transform: skew(30deg,20deg); /* Safari and Chrome */ -o-transform: skew(30deg,20deg); /* Opera */ -moz-transform: skew(30deg,20deg); /* Firefox */ }
- matrix()--------
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
如何使用 matrix 方法将 div 元素旋转 30 度:
div { transform:matrix(0.866,0.5,-0.5,0.866,0,0); -ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */ -moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */ -webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */ -o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */ }
2D Transform 方法
函数 | 描述 |
---|---|
matrix(n,n,n,n,n,n) | 定义 2D 转换,使用六个值的矩阵。 |
translate(x,y) | 定义 2D 转换,沿着 X 和 Y 轴移动元素。 |
translateX(n) | 定义 2D 转换,沿着 X 轴移动元素。 |
translateY(n) | 定义 2D 转换,沿着 Y 轴移动元素。 |
scale(x,y) | 定义 2D 缩放转换,改变元素的宽度和高度。 |
scaleX(n) | 定义 2D 缩放转换,改变元素的宽度。 |
scaleY(n) | 定义 2D 缩放转换,改变元素的高度。 |
rotate(angle) | 定义 2D 旋转,在参数中规定角度。 |
skew(x-angle,y-angle) | 定义 2D 倾斜转换,沿着 X 和 Y 轴。 |
skewX(angle) | 定义 2D 倾斜转换,沿着 X 轴。 |
skewY(angle) | 定义 2D 倾斜转换,沿着 Y 轴。 |
===================3d转换=====================
Internet Explorer 10 和 Firefox 支持 3D 转换。
Chrome 和 Safari 需要前缀 -webkit-。
Opera 仍然不支持 3D 转换(它只支持 2D 转换)
rotateX() 方法
通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。
实例
div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* Safari 和 Chrome */ -moz-transform: rotateX(120deg); /* Firefox */ }
转换属性
下面的表格列出了所有的转换属性:
属性 | 描述 | CSS |
---|---|---|
transform | 向元素应用 2D 或 3D 转换。 | 3 |
transform-origin | 允许你改变被转换元素的位置。 | 3 |
transform-style | 规定被嵌套元素如何在 3D 空间中显示。 | 3 |
perspective | 规定 3D 元素的透视效果。 | 3 |
perspective-origin | 规定 3D 元素的底部位置。 | 3 |
backface-visibility | 定义元素在不面对屏幕时是否可见。 | 3 |
2D Transform 方法
函数 | 描述 |
---|---|
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | 定义 3D 转换,使用 16 个值的 4x4 矩阵。 |
translate3d(x,y,z) | 定义 3D 转化。 |
translateX(x) | 定义 3D 转化,仅使用用于 X 轴的值。 |
translateY(y) | 定义 3D 转化,仅使用用于 Y 轴的值。 |
translateZ(z) | 定义 3D 转化,仅使用用于 Z 轴的值。 |
scale3d(x,y,z) | 定义 3D 缩放转换。 |
scaleX(x) | 定义 3D 缩放转换,通过给定一个 X 轴的值。 |
scaleY(y) | 定义 3D 缩放转换,通过给定一个 Y 轴的值。 |
scaleZ(z) | 定义 3D 缩放转换,通过给定一个 Z 轴的值。 |
rotate3d(x,y,z,angle) | 定义 3D 旋转。 |
rotateX(angle) | 定义沿 X 轴的 3D 旋转。 |
rotateY(angle) | 定义沿 Y 轴的 3D 旋转。 |
rotateZ(angle) | 定义沿 Z 轴的 3D 旋转。 |
perspective(n) | 定义 3D 转换元素的透视视图。 |
CSS3 过渡
通过 CSS3,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。
Internet Explorer 10、Firefox、Chrome 以及 Opera 支持 transition 属性。
Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 以及更早的版本,不支持 transition 属性。
注释:Chrome 25 以及更早的版本,需要前缀 -webkit-。
它如何工作?
CSS3 过渡是元素从一种样式逐渐改变为另一种的效果。
要实现这一点,必须规定两项内容:
- 规定您希望把效果添加到哪个 CSS 属性上
- 规定效果的时长
实例
应用于宽度属性的过渡效果,时长为 2 秒:
div { transition: width 2s; -moz-transition: width 2s; /* Firefox 4 */ -webkit-transition: width 2s; /* Safari 和 Chrome */ -o-transition: width 2s; /* Opera */ }
注释:如果时长未规定,则不会有过渡效果,因为默认值是 0。
效果开始于指定的 CSS 属性改变值时。CSS 属性改变的典型时间是鼠标指针位于元素上时:
多项改变
如需向多个样式添加过渡效果,请添加多个属性,由逗号隔开:
实例
向宽度、高度和转换添加过渡效果:
div { transition: width 2s, height 2s, transform 2s; -moz-transition: width 2s, height 2s, -moz-transform 2s; -webkit-transition: width 2s, height 2s, -webkit-transform 2s; -o-transition: width 2s, height 2s,-o-transform 2s; }
过渡属性
下面的表格列出了所有的转换属性:
属性 | 描述 | CSS |
---|---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。 | 3 |
transition-duration | 定义过渡效果花费的时间。默认是 0。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | 3 |
transition-delay | 规定过渡效果何时开始。默认是 0。 | 3 |
下面的两个例子设置所有过渡属性:
实例
在一个例子中使用所有过渡属性:
div { transition-property: width; transition-duration: 1s; transition-timing-function: linear; transition-delay: 2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari 和 Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; }
与上面的例子相同的过渡效果,但是使用了简写的 transition 属性:
div { transition: width 1s linear 2s; /* Firefox 4 */ -moz-transition:width 1s linear 2s; /* Safari and Chrome */ -webkit-transition:width 1s linear 2s; /* Opera */ -o-transition:width 1s linear 2s; }
==============动画==============
CSS3 动画
通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。
CSS3 @keyframes 规则
如需在 CSS3 中创建动画,您需要学习 @keyframes 规则。
@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果
Internet Explorer 10、Firefox 以及 Opera 支持 @keyframes 规则和 animation 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9,以及更早的版本,不支持 @keyframe 规则或 animation 属性。
@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst /* Opera */ { from {background: red;} to {background: yellow;} }
CSS3 动画
当您在 @keyframes 中创建动画时,请把它捆绑到某个选择器,否则不会产生动画效果。
通过规定至少以下两项 CSS3 动画属性,即可将动画绑定到选择器:
- 规定动画的名称
- 规定动画的时长
实例
把 "myfirst" 动画捆绑到 div 元素,时长:5 秒:
div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }
注释:您必须定义动画的名称和时长。如果忽略时长,则动画不会允许,因为默认值是 0。
什么是 CSS3 中的动画?
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间,或用关键词 "from" 和 "to",等同于 0% 和 100%。
0% 是动画的开始,100% 是动画的完成。
为了得到最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
实例
当动画为 25% 及 50% 时改变背景色,然后当动画 100% 完成时再次改变:
@keyframes myfirst { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} } @-o-keyframes myfirst /* Opera */ { 0% {background: red;} 25% {background: yellow;} 50% {background: blue;} 100% {background: green;} }
改变背景色和位置:
@keyframes myfirst { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} } @-o-keyframes myfirst /* Opera */ { 0% {background: red; left:0px; top:0px;} 25% {background: yellow; left:200px; top:0px;} 50% {background: blue; left:200px; top:200px;} 75% {background: green; left:0px; top:200px;} 100% {background: red; left:0px; top:0px;} }
CSS3 动画属性
下面的表格列出了 @keyframes 规则和所有动画属性:
属性 | 描述 | CSS |
---|---|---|
@keyframes | 规定动画。 | 3 |
animation | 所有动画属性的简写属性,除了 animation-play-state 属性。 | 3 |
animation-name | 规定 @keyframes 动画的名称。 | 3 |
animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 3 |
animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | 3 |
animation-delay | 规定动画何时开始。默认是 0。 | 3 |
animation-iteration-count | 规定动画被播放的次数。默认是 1。 | 3 |
animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | 3 |
animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | 3 |
animation-fill-mode | 规定对象动画时间之外的状态。 | 3 |
下面的两个例子设置了所有动画属性:
实例
运行名为 myfirst 的动画,其中设置了所有动画属性:
div { animation-name: myfirst; animation-duration: 5s; animation-timing-function: linear; animation-delay: 2s; animation-iteration-count: infinite; animation-direction: alternate; animation-play-state: running; /* Firefox: */ -moz-animation-name: myfirst; -moz-animation-duration: 5s; -moz-animation-timing-function: linear; -moz-animation-delay: 2s; -moz-animation-iteration-count: infinite; -moz-animation-direction: alternate; -moz-animation-play-state: running; /* Safari 和 Chrome: */ -webkit-animation-name: myfirst; -webkit-animation-duration: 5s; -webkit-animation-timing-function: linear; -webkit-animation-delay: 2s; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-play-state: running; /* Opera: */ -o-animation-name: myfirst; -o-animation-duration: 5s; -o-animation-timing-function: linear; -o-animation-delay: 2s; -o-animation-iteration-count: infinite; -o-animation-direction: alternate; -o-animation-play-state: running; }
与上面的动画相同,但是使用了简写的动画 animation 属性:
div { animation: myfirst 5s linear 2s infinite alternate; /* Firefox: */ -moz-animation: myfirst 5s linear 2s infinite alternate; /* Safari 和 Chrome: */ -webkit-animation: myfirst 5s linear 2s infinite alternate; /* Opera: */ -o-animation: myfirst 5s linear 2s infinite alternate; }
通过 CSS3,您能够创建多个列来对文本进行布局 - 就像报纸那样!
在本章中,您将学习如下多列属性:
- column-count
- column-gap
- column-rule
Internet Explorer 10 和 Opera 支持多列属性。
Firefox 需要前缀 -moz-。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 以及更早的版本不支持多列属性
把 div 元素中的文本分隔为三列:
div
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari 和 Chrome */
column-count:3;
}
CSS3 规定列之间的间隔
column-gap 属性规定列之间的间隔:
实例
规定列之间 40 像素的间隔:
div
{
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari 和 Chrome */
column-gap:40px;
}
CSS3 列规则
column-rule 属性设置列之间的宽度、样式和颜色规则。
实例
规定列之间的宽度、样式和颜色规则:
div { -moz-column-rule:3px outset #ff0000; /* Firefox */ -webkit-column-rule:3px outset #ff0000; /* Safari and Chrome */ column-rule:3px outset #ff0000; }
新的多列属性
下面的表格列出了所有的转换属性:
属性 | 描述 | CSS |
---|---|---|
column-count | 规定元素应该被分隔的列数。 | 3 |
column-fill | 规定如何填充列。 | 3 |
column-gap | 规定列之间的间隔。 | 3 |
column-rule | 设置所有 column-rule-* 属性的简写属性。 | 3 |
column-rule-color | 规定列之间规则的颜色。 | 3 |
column-rule-style | 规定列之间规则的样式。 | 3 |
column-rule-width | 规定列之间规则的宽度。 | 3 |
column-span | 规定元素应该横跨的列数。 | 3 |
column-width | 规定列的宽度。 | 3 |
columns | 规定设置 column-width 和 column-count 的简写属性。 |
CSS3 用户界面
在 CSS3 中,新的用户界面特性包括重设元素尺寸、盒尺寸以及轮廓等。
在本章中,您将学到以下用户界面属性:
- resize
- box-sizing
- outline-offset
Firefox、Chrome 以及 Safari 支持 resize 属性。
Internet Explorer、Chrome、Safari 以及 Opera 支持 box-sizing 属性。Firefox 需要前缀 -moz-。
所有主流浏览器都支持 outline-offset 属性,除了 Internet Explorer
CSS3 Resizing
在 CSS3,resize 属性规定是否可由用户调整元素尺寸。
这个 div 元素可由用户调整尺寸(在 Firefox 4+、Chrome 以及 Safari 中)。
CSS 代码如下:
实例
规定 div 元素可由用户调整大小:
div { resize:both; overflow:auto; }
CSS3 Outline Offset
outline-offset 属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。
轮廓与边框有两点不同:
- 轮廓不占用空间
- 轮廓可能是非矩形
这个 div 在边框之外 15 像素处有一个轮廓。
CSS 代码如下:
实例
规定边框边缘之外 15 像素处的轮廓:
div { border:2px solid black; outline:2px solid red; outline-offset:15px; }
新的用户界面属性
下面的表格列出了所有的转换属性:
属性 | 描述 | CSS |
---|---|---|
appearance | 允许您将元素设置为标准用户界面元素的外观 | 3 |
box-sizing | 允许您以确切的方式定义适应某个区域的具体内容。 | 3 |
icon | 为创作者提供使用图标化等价物来设置元素样式的能力。 | 3 |
nav-down | 规定在使用 arrow-down 导航键时向何处导航。 | 3 |
nav-index | 设置元素的 tab 键控制次序。 | 3 |
nav-left | 规定在使用 arrow-left 导航键时向何处导航。 | 3 |
nav-right | 规定在使用 arrow-right 导航键时向何处导航。 | 3 |
nav-up | 规定在使用 arrow-up 导航键时向何处导航。 | 3 |
outline-offset | 对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。 | 3 |
resize | 规定是否可由用户对元素的尺寸进行调整。 |