一 CSS样式
1.背景
CSS 背景属性:
属性 | 描述 |
---|---|
background | 简写属性,作用是将背景属性设置在一个声明中。 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 |
background-color | 设置元素的背景颜色。 |
background-image | 把图像设置为背景。 |
background-position | 设置背景图像的起始位置。 |
background-repeat | 设置背景图像是否及如何重复。 |
<!DOCTYPE html>
<html>
<head>
<title>CSS背景</title>
<meta charset="utf-8">
<style type="text/css">
.div1{height: 300px;
background-image: url(attachment.gif);
background-attachment: fixed;
background-color: red;
background-repeat: repeat;
background-position: center;
}
</style>
<body>
<div class="div1"></div>
</body>
</html>
background-image可以取值:
值 | 描述 |
---|---|
color_name | 规定颜色值为颜色名称的背景颜色(比如 red)。 |
hex_number | 规定颜色值为十六进制值的背景颜色(比如 #ff0000)。 |
rgb_number | 规定颜色值为 rgb 代码的背景颜色(比如 rgb(255,0,0))。 |
transparent | 默认。背景颜色为透明。 |
inherit | 规定应该从父元素继承 background-color 属性的设置。 |
background-attachment可以取值:
值 | 描述 |
---|---|
scroll | 默认值。背景图像会随着页面其余部分的滚动而移动。 |
fixed | 当页面的其余部分滚动时,背景图像不会移动。 |
inherit | 规定应该从父元素继承 background-attachment 属性的设置。 |
background-imag可以取值:
值 | 描述 |
---|---|
url('URL') | 指向图像的路径。 |
none | 默认值。不显示背景图像。 |
inherit | 规定应该从父元素继承 background-image 属性的设置。 |
background-repeat可以取值:
值 | 描述 |
---|---|
repeat | 默认。背景图像将在垂直方向和水平方向重复。 |
repeat-x | 背景图像将在水平方向重复。 |
repeat-y | 背景图像将在垂直方向重复。 |
no-repeat | 背景图像将仅显示一次。 |
inherit | 规定应该从父元素继承 background-repeat 属性的设置。 |
background-position可以取值:
值 | 描述 |
---|---|
| 如果您仅规定了一个关键词,那么第二个值将是"center"。 默认值:0% 0%。 |
x% y% | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0% 0%。右下角是 100% 100%。 如果您仅规定了一个值,另一个值将是 50%。 |
xpos ypos | 第一个值是水平位置,第二个值是垂直位置。 左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。 如果您仅规定了一个值,另一个值将是50%。 您可以混合使用 % 和 position 值。 |
2.文本
3.字体
4.链接
5.列表
6.表格
7.轮廓
二 CSS定位
1.position:static定位
遵循HTML定位规则,位置正常显示。
2.position:relative定位
相对于正常显示的位置,偏移指定距离;如下,向右偏移30px。
<!DOCTYPE html>
<html>
<head>
<title>CSS定位</title>
<meta charset="utf-8">
<style type="text/css">
#span1{
width: 200px;
height: 200px;
background: red;
position: relative;
right: 30px;
}
</style>
<body>
<span id="span1">span1</span>
</body>
</html>
3.position:absolute定位
将元素脱离文档流,通过left,bottom,top,right等属性相对其包含块进行绝对定位;下例div1为包含块
<!DOCTYPE html>
<html>
<head>
<title>CSS定位</title>
<meta charset="utf-8">
<style type="text/css">
#div1 {
height: 20px;
background: green;
}
#span1{
width: 200px;
height: 200px;
background: red;
position: absolute;
right: 30px;
}
</style>
<body>
<div id="div1">
<span id="span1">span1</span>
</div>
</body>
</html>
4.position:fixed定位
类似absolute定位,但其包含块是视窗。
5.float定位
浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现的像浮动框不存在一样。
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 float 属性的值。 |
参考:float定位
三 CSS选择器
1.元素选择器
文档的元素即为选择器。
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器</title>
<meta charset="utf-8">
<style type="text/css">
div {
height: 20px;
background: green;
}
</style>
<body>
<div>元素选择器</div>
</body>
</html>
2.类选择器
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器</title>
<meta charset="utf-8">
<style type="text/css">
.div1 {
height: 20px;
background: green;
}
</style>
<body>
<div class="div1">类选择器</div>
</body>
</html>
3.id选择器
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器</title>
<meta charset="utf-8">
<style type="text/css">
#div1 {
height: 20px;
background: green;
}
</style>
<body>
<div id="div1">类选择器</div>
</body>
</html>
4.属性选择器
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器</title>
<meta charset="utf-8">
<style type="text/css">
[attr] {
height: 20px;
background: green;
}
</style>
<body>
<div id="div1" attr="属性选择器">属性选择器</div>
</body>
</html>
注:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
5.派生选择器
通过元素所在位置,定义选择器。
1.子元素选择器
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器</title>
<meta charset="utf-8">
<style type="text/css">
#div1 > p {
background: red;
}
</style>
<body>
<div id="div1">
<p>子元素</p>
<div>
<p>后代元素</p>
</div>
</div>
</body>
</html>
2.后代元素选择器
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器</title>
<meta charset="utf-8">
<style type="text/css">
#div1 p {
background: red;
}
</style>
<body>
<div id="div1">
<p>子元素</p>
<div>
<p>后代元素</p>
</div>
</div>
</body>
</html>
3.相邻兄弟选择器
可以选择紧接在另一个元素后的元素,且二者拥有共同的父元素。
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器</title>
<meta charset="utf-8">
<style type="text/css">
#div1 div + p {
background: red;
}
</style>
<body>
<div id="div1">
<div>
<p>后代元素</p>
</div>
<p>兄弟元素</p>
</div>
</body>
</html>
6.选择器分组
要求h2元素和p段落都是灰色:
h2, p {color:gray;}
7.通配符选择器
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器</title>
<meta charset="utf-8">
<style type="text/css">
*#important{background: red;}
</style>
<body>
<h1 id="important">通配选择器</h1>
<p id="important">通配选择器</p>
<p id="p1">通配选择器</p>
</body>
</html>
8.伪类
用于向选择器中添加特殊效果。
W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。
属性 | 描述 | CSS |
---|---|---|
:active | 向被激活的元素添加样式。 | 1 |
:focus | 向拥有键盘输入焦点的元素添加样式。 | 2 |
:hover | 当鼠标悬浮在元素上方时,向元素添加样式。 | 1 |
:link | 向未被访问的链接添加样式。 | 1 |
:visited | 向已被访问的链接添加样式。 | 1 |
:first-child | 向元素的第一个子元素添加样式。 | 2 |
:lang | 向带有指定 lang 属性的元素添加样式。 | 2 |
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器</title>
<meta charset="utf-8">
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
</style>
<body>
<a href="about:blank">伪元素</a>
</body>
</html>
注:a:hover必须位于a:link和a:visited之后才有效;a:active必须位于a:hover之后才有效;伪类对大小写不敏感。
9 伪元素
向某些选择器添加样式。
W3C:"W3C" 列指示出该属性在哪个 CSS 版本中定义(CSS1 还是 CSS2)。
属性 | 描述 | CSS |
---|---|---|
:first-letter | 向文本的第一个字母添加特殊样式。 | 1 |
:first-line | 向文本的首行添加特殊样式。 | 1 |
:before | 在元素之前添加内容。 | 2 |
:after | 在元素之后添加内容。 | 2 |
<!DOCTYPE html>
<html>
<head>
<title>CSS选择器</title>
<meta charset="utf-8">
<style type="text/css">
#p1:first-line {background: red;}
#p3:first-letter {color:orange;}
#p3:before {content: '插入before '}
#p3:after {content: ' 插入after'}
</style>
<body>
<div>
<p id="p1">测试first-line</p>
<p id="p3">测试first-letter</p>
</div>
</body>
</html>
四 高级应用
1.对齐
1.使用margin对齐元素
把左和右外边距设置为 auto,规定的是均等地分配可用的外边距:
<!DOCTYPE html>
<html>
<head>
<title>CSS对齐</title>
<meta charset="utf-8">
<style type="text/css">
.div1{
width: 70%;
text-align: center;
margin:auto;
}
</style>
<body>
<div class="div1">使用margin居中对齐</div>
</body>
</html>
2.使用position对齐元素
<!DOCTYPE html>
<html>
<head>
<title>CSS对齐</title>
<meta charset="utf-8">
<style type="text/css">
.div1{
text-align: center;
position: absolute;
width: 50%;
margin-left: 25%;
background-color: red;
}
</style>
<body>
<div class="div1">使用margin居中对齐</div>
</body>
</html>
3.使用float对齐元素
<!DOCTYPE html>
<html>
<head>
<title>CSS对齐</title>
<meta charset="utf-8">
<style type="text/css">
.div1{
text-align: center;
width: 50%;
float: right;
background-color: red;
}
</style>
<body>
<div class="div1">使用margin居中对齐</div>
</body>
</html>
2.分类属性
属性 | 描述 |
---|---|
clear | 设置一个元素的侧面是否允许其他的浮动元素。 |
cursor | 规定当指向某元素之上时显示的指针类型。 |
display | 设置是否及如何显示元素。 |
float | 定义元素在哪个方向浮动。 |
position | 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。 |
visibility | 设置元素是否可见或不可见。 |