A.link
设置 a 对象在未被访问前的样式。
A.hover
设置对象在其鼠标悬停时的样式。
A.active
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
A.visited
设置 a 对象在其链接地址已被访问过时的样式。
1、如何在HTML中引入CSS?
行内式:在HTML标签的style属性中编写CSS代码
嵌入式:在<head></head>中编写CSS代码
链接式:使用<link>链接外部CSS文件
<link type="text/css" rel="stylesheet" href="mycss.css" />
导入式:使用@import指令
<style type="text/css">
@import "mystyle.css";
</style>
2、 标签选择器
1、用于设定HTML文档中指定标签的显示样式
2、类别选择器
给特定的一组CSS代码取名,然后可以应用于多个不同的标签:
3、ID选择器
对于页面中独一无二的元素,如页脚,可以给其id属性赋予一个独一无二的值
4、伪类选择器
超链接标签<a>支持几个特殊的CSS样式类,用于定义超链接不同状态的样式,这些样式类被称为“伪类(pseudo class)”
3、复合选择器”包括:
(1)交集选择器 直接指定特定标记中特定类别或ID的样式
注意:选择器字符间不要有空格!
p.special{ /* 标记.类别选择器 */
color:red;
}
p#special{ /* id选择器 */
color:green;
}
(2)并集选择器一次定义多个标签或类别或ID的样式
注意:以逗号隔开各个选择器
div,.special,#one{ /* 集体声明 */
text-decoration:underline; /* 下划线 */
}
(3)后代选择器¡选择嵌套在指定元素的内部元素的样式
注意:以空格分隔选择器
p span{
color:red;
}
CSS的继承原则
1、没有定义CSS规则的HTML元素从它的父元素中继承样式!
2、行内样式>id样式>类别样式>标签样式
CSS盒子模型
HTML标签分为两大类:
每一个块级元素都定义了一个盒子。
<div>与<span>没有特殊的语义,多用于页面布局与排版,因此是网页布局设计中打交道最多的两个标签。
流式布局
默认情况下的布局方式, 行内元素与块元素的显示, 默认情况下,浏览器新起一行显示块元素,而在同一行显示行内元素,这种方式被称为“标准流式布局”。
行内元素的间距
行内元素之间的左右距离= 左元素的右边距+右元素的左边距
块元素的上下间距
两块之间的上下间距=
max{上一个块元素的下边距,下一个块元素的上边距}
嵌套块元素的边界
子块元素是以父元素为基准定位的。
浮动布局
盒子的浮动属性
盒子拥有一个float属性,可以设置为向左或向右浮动
要点:
超链接A的Css样式说明
A.link
设置 a 对象在未被访问前的样式。
A.hover
设置对象在其鼠标悬停时的样式。
A.active
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式。
A.visited
设置 a 对象在其链接地址已被访问过时的样式。