颜色与背景:
主要属性
color :用于指定元素的前景色
background-color :用于指定元素的背景色
background-image :用于设置背景图像
background-repeat :就是用于控制平铺的
background-repeat的四种不同取值
background-repeat:repeat-x 图像横向平铺
background-repeat:repeat-y 图像纵向平铺
background-repeat:repeat 图像横向和纵向都平铺(默认)
background-repeat:no-repeat 图像不平铺
background :是前面几个的简写
CSS属性background是上述所有与背景有关的属性的缩写用法。
使用background属性可以减少属性的数目,因此令样式表更简短易读
比如说下面五行代码:
background-color: #FFCC66;
background-image: url("butterfly.gif");
background-repeat: no-repeat;
background-attachment: fixed;
background-position: right bottom;
如果使用background属性的话,实现同样的效果只需一行代码即可
background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
各个值应按下列次序来写:
[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]
如果省略某个属性不写出来,那么将自动为它取缺省值。
字体:
主要属性
font-family : 字体族
font-style : 字体样式
font-size : 字体大小
font :
CSS属性font是上述各有关字体的CSS属性的缩写用法。
比如说下面四行应用于p元素的代码:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
如果用font属性的话,上述四行代码可简化为:
p {
font: italic bold 30px arial, sans-serif;
}
font属性的值应按以下次序书写:
font-style | font-variant | font-weight | font-size | font-family
文本:
主要属性
text-align : 文本对齐
text-decoration: 文本装饰
letter-spacing : 字符间距
text-transform : 文本转换
链接:
前面几课学到的属性也可以应用到链接上(比如修改颜色、字体、添加下划线等)。但不同的是,CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样,我们便可为网站增添奇特而有用的效果。你需要通过伪类(pseudo-class)来控制这些效果。
伪类是什么?
伪类(pseudo-class)令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内
我们来看一个例子。正如你所知道的,在HTML里,链接是通过a元素来定义的。因此,在CSS里,我们可以将a作为一个选择器selector
a {
color: blue;
}
伪类:
a:link:link用于浏览者从未访问过的链接
a:visited:visited用于浏览者已访问过的链接
a:active:active用于活动的链接(即获得当前焦点的链接)
a:hover:hover用于有鼠标悬停的链接
边框:
设置对象的边框样式。
border : border-width || border-style || border-color
border-width
length:由浮点数字和单位标识符组成的长度值,不可为负值
border-style
none: 无边框 ,默认值
solid: 实线边框
double:双线边框
border-color
color:指定颜色
border-collapse
separate : 默认值。边框独立(标准HTML)
collapse : 相邻边被合并
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 文档中出现一次
类选择器:
在 CSS 中,类选择器以一个点号显示:
.center {text-align: center}
在上面的例子中,所有拥有 center 类的 HTML 元素均为居中。
在下面的 HTML 代码中,h1 和 p 元素都有 center 类。这意味着两者都将遵守 ".center" 选择器中的规则。
<h1 class="center">
This heading will be center-aligned
</h1>
<p class="center">
This paragraph will also be center-aligned.
</p>
注意:类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。