CSS（二）
2017-12-25 本文已影响0人
yzw12138
- 如果某个属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来，例如：外部样式表有针对h3的选择器，里面包含三个属性
h3 {
color: red;
text-align: left;
font-size: 8pt;
}
而内部样式表也有针对h3的选择器，包含两个属性
h3 {
text-align: right;
font-size: 20pt;
}
此时h3的样式就会变成
color: red;
text-align: right;
font-size: 20pt;
背景
- 添加背景图片 ：background-image
p.flower {background-image: url(/i/eg_bg_03.gif);}
- 背景平铺：通过background-image将一张图片平铺在整个页面上，repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
- 背景定位：通过background-position确定背景在页面中的位置，可以通过关键字、百分数、长度值确定其位置。
文本
- 缩进文本：text-indent，可以通过设置值、百分比来实现，可以输入负值。
p {text-indent: -5em;}
p {text-indent: 20%;}
- 对齐方式：text-align，left、right 和 center 会导致元素中的文本分别左对齐、右对齐和居中。
- 字符间隔：word-spacing
- 文本修饰：text-decoration，他有5个值，underline 会对元素加下划线，就像 HTML 中的 U 元素一样。overline 的作用恰好相反，会在文本的顶端画一个上划线。值 line-through 则在文本中间画一个贯穿线，等价于 HTML 中的 S 和 strike 元素。blink 会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
- 设置链接样式：在为链接设置样式时，必须按照以下顺序。
a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
CSS定位
- CSS通过position属性来来定位，position属性共有4个值，作用分别为：
static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute：元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed：元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
CSS选择器
- 元素选择器：为HTML的某一个元素添加样式，如：
html {color:black;}
h1 {color:blue;}
h2 {color:silver;}
- 选择器分组：将多个具有相同样式的元素压缩到一起，如：为h1，h2，h3设置一个相同的样式
h1, h2, h3, h4, h5, h6 {color:blue;}
- 类选择器：通过HTML的class值来定位样式，可以被多个元素调用；
- ID选择器：通过HTML的id值来定位样式，因为id值是唯一的，所以该样式只能被引用一次；
- 后代选择器：根据HTML中的某些结构为其定义样式，如为ul下的em定义一个样式，那么多有ul下的em都会拥有这个样式，不管两元素之前间隔多少层；
- 子元素选择器：如果不希望像后天选择器一样，所有的后台都添加样式，那么就应该用子元素选择器；
h1 > strong {color:red;}
表示只有好h1下的strong才会被设置为红色；
CSS对齐方式
- 水平对齐：对于块级元素来说，可以通过margin来设置对齐；
//规定的是均等地分配可用的外边距 结果就是居中的元素
.center
{
margin-left:auto;
margin-right:auto;
}
- 左右对齐：使用position属性
.right
{
position:absolute;
}
- 分别设置左和右对齐：float
.center
{
float:right;
float:left
}
- CSS尺寸
height：设置元素的高度。
line-height：设置行高。
max-height：设置元素的最大高度。
max-width：设置元素的最大宽度。
min-height：设置元素的最小高度。
min-width：设置元素的最小宽度。
width：设置元素的宽度。
CSS应用
- 导航栏设置
<!DOCTYPE html>
<html>
<head>
<h1>导航</h1>
<style type="text/CSS">
/* 去掉圆点，删除外边距 */
ul {
list-style-type:none;
margin:0;
padding:0;
}
/* 导航栏设置为横向 */
li {
display:inline;
float:left;
}
/* 整个链接块点击都可以 */
a {
display:block;
width:60px;
}
</style>
</head>
<body>
<ul>
<li><a href="#">资源</a></li>
<li><a href="#">成员</a></li>
<li><a href="#">活动</a></li>
<li><a href="#">消息</a></li>
<li><a href="#">详情</a></li>
</ul>
</body>
</html>
image.png
